feat: Add columns configuration for alerts preset widget (keephq#4503)

Co-authored-by: Shahar Glazner <[email protected]>

Author: skynetigor

keep-ui/app/(keep)/dashboard/widget-types/preset/columns-selection.tsx

@@ -0,0 +1,52 @@
+import { useFacetPotentialFields } from "@/features/filter/hooks";
+import { MultiSelect, MultiSelectItem } from "@tremor/react";
+import React, { useEffect, useMemo, useState } from "react";
+import { defaultColumns } from "./constants";
+
+interface ColumnsSelectionProps {
+  selectedColumns?: string[];
+  onChange: (selected: string[]) => void;
+}
+
+const ColumnsSelection: React.FC<ColumnsSelectionProps> = ({
+  selectedColumns,
+  onChange,
+}) => {
+  const [selectedColumnsState, setSelectedColumnsState] = useState<Set<string>>(
+    new Set(selectedColumns || defaultColumns)
+  );
+  const { data } = useFacetPotentialFields("alerts");
+
+  useEffect(
+    () => onChange(Array.from(selectedColumnsState)),
+    [selectedColumnsState]
+  );
+
+  const sortedOptions = useMemo(() => {
+    return data?.toSorted((first, second) => {
+      const inSetA = selectedColumnsState.has(first);
+      const inSetB = selectedColumnsState.has(second);
+
+      if (inSetA && !inSetB) return -1;
+      if (!inSetA && inSetB) return 1;
+
+      return first.localeCompare(second);
+    });
+  }, [data, selectedColumnsState]);
+
+  return (
+    <MultiSelect
+      placeholder="Select alert columns"
+      value={Array.from(selectedColumnsState)}
+      onValueChange={(selected) => setSelectedColumnsState(new Set(selected))}
+    >
+      {sortedOptions?.map((field) => (
+        <MultiSelectItem key={field} value={field}>
+          {field}
+        </MultiSelectItem>
+      ))}
+    </MultiSelect>
+  );
+};
+
+export default ColumnsSelection;

keep-ui/app/(keep)/dashboard/widget-types/preset/constants.ts

@@ -0,0 +1,8 @@
+export const defaultColumns = [
+  "severity",
+  "status",
+  "source",
+  "name",
+  "description",
+  "lastReceived",
+];

keep-ui/app/(keep)/dashboard/widget-types/preset/preset-grid-item.tsx

@@ -4,16 +4,13 @@ import { usePresetAlertsCount } from "@/features/presets/custom-preset-links";
 import { useDashboardPreset } from "@/utils/hooks/useDashboardPresets";
 import { Button, Icon } from "@tremor/react";
 import { FireIcon } from "@heroicons/react/24/outline";
-import { DynamicImageProviderIcon } from "@/components/ui";
-import { getStatusColor, getStatusIcon } from "@/shared/lib/status-utils";
-import { SeverityBorderIcon, UISeverity } from "@/shared/ui";
-import { severityMapping } from "@/entities/alerts/model";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { useRouter } from "next/navigation";
 import TimeAgo from "react-timeago";
 import { useSearchParams } from "next/navigation";
+import WidgetAlertsTable from "./widget-alerts-table";
 
 interface GridItemProps {
   item: WidgetData;
@@ -43,6 +40,7 @@ const PresetGridItem: React.FC<GridItemProps> = ({ item }) => {
     () => [timeRangeCel, presetCel].filter(Boolean).join(" && "),
     [presetCel, timeRangeCel]
   );
+
   const {
     alerts,
     totalCount: presetAlertsCount,
@@ -98,82 +96,6 @@ const PresetGridItem: React.FC<GridItemProps> = ({ item }) => {
     return `rgb(${r}, ${g}, ${b}, ${alpha})`;
   }
 
-  function renderLastAlertsGrid() {
-    if (isLoading) {
-      return (
-        <>
-          {Array.from({ length: countOfLastAlerts }).map((_, index) => (
-            <div
-              key={index}
-              className="flex flex-row min-h-7 h-7 items-center gap-2"
-            >
-              <Skeleton containerClassName="h-4 w-1" />
-              <Skeleton containerClassName="h-4 w-4" />
-              <Skeleton containerClassName="h-4 w-4" />
-              <Skeleton containerClassName="h-4 flex-1" />
-              <Skeleton containerClassName="h-4 flex-1" />
-            </div>
-          ))}
-        </>
-      );
-    }
-
-    if (presetAlertsCount === 0) {
-      let emptyStateText = "No alerts matching this preset";
-
-      if (timeRangeCel) {
-        emptyStateText = "No alerts matching this preset and time range";
-      }
-
-      return (
-        <div className="flex items-center justify-center h-10">
-          {emptyStateText}
-        </div>
-      );
-    }
-
-    return (
-      <>
-        {alerts?.map((alert) => (
-          <div
-            key={alert.fingerprint}
-            className="flex flex-row min-h-7 h-7 items-center gap-2"
-          >
-            <SeverityBorderIcon
-              severity={
-                (severityMapping[Number(alert.severity)] ||
-                  alert.severity) as UISeverity
-              }
-            />
-            <Icon
-              icon={getStatusIcon(alert.status)}
-              size="sm"
-              color={getStatusColor(alert.status)}
-              className="!p-0"
-            />
-            <div>
-              <DynamicImageProviderIcon
-                className="inline-block"
-                alt={(alert as any).providerType}
-                height={16}
-                width={16}
-                title={(alert as any).providerType}
-                providerType={(alert as any).providerType}
-                src={`/icons/${(alert as any).providerType}-icon.png`}
-              />
-            </div>
-            <div className="flex-1 truncate text-xs" title={alert.name}>
-              {alert.name} (<TimeAgo date={alert.lastReceived} />)
-            </div>
-            <div className="flex-1 truncate text-xs" title={alert.description}>
-              {alert.description}
-            </div>
-          </div>
-        ))}
-      </>
-    );
-  }
-
   function renderCEL() {
     if (!presetCel) {
       return;
@@ -279,14 +201,12 @@ const PresetGridItem: React.FC<GridItemProps> = ({ item }) => {
         </div>
       </div>
       {countOfLastAlerts > 0 && (
-        <div
-          style={{
-            background: isLoading ? undefined : hexToRgb(getColor(), 0.1),
-          }}
-          className="bg-opacity-25 flex flex-col overflow-y-auto overflow-x-hidden auto-rows-auto border rounded-md p-2"
-        >
-          {renderLastAlertsGrid()}
-        </div>
+        <WidgetAlertsTable
+          presetName={preset?.name as string}
+          alerts={isLoading ? undefined : alerts}
+          columns={(item as any)?.presetColumns}
+          background={isLoading ? undefined : hexToRgb(getColor(), 0.1)}
+        />
       )}
     </div>
   );

keep-ui/app/(keep)/dashboard/widget-types/preset/preset-widget-form.tsx

@@ -8,7 +8,7 @@ import {
   Subtitle,
   TextInput,
 } from "@tremor/react";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   Controller,
   get,
@@ -17,6 +17,7 @@ import {
   useFieldArray,
 } from "react-hook-form";
 import { LayoutItem, Threshold } from "../../types";
+import ColumnsSelection from "./columns-selection";
 
 interface PresetForm {
   selectedPreset: string;
@@ -51,6 +52,9 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
       ],
     },
   });
+  const [presetColumns, setPresetColumns] = useState<string[] | undefined>(
+    editingItem ? editingItem.presetColumns : undefined
+  );
 
   const { fields, append, remove, move, replace } = useFieldArray({
     control,
@@ -63,12 +67,13 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
     return {
       countOfLastAlerts: parseInt(formValues.countOfLastAlerts || "0"),
       selectedPreset: presets.find((p) => p.id === formValues.selectedPreset),
+      presetColumns,
       thresholds: formValues.thresholds?.map((t) => ({
         ...t,
         value: parseInt(t.value?.toString() as string, 10) || 0,
       })),
     };
-  }, [formValues]);
+  }, [formValues, presetColumns]);
 
   function getLayoutValues(): LayoutItem {
     if (editingItem) {
@@ -95,6 +100,7 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
           ...normalizedFormValues.selectedPreset,
           countOfLastAlerts: normalizedFormValues.countOfLastAlerts,
         },
+        presetColumns: normalizedFormValues.presetColumns,
         thresholds: normalizedFormValues.thresholds,
       },
       isValid
@@ -175,6 +181,10 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
           )}
         />
       </div>
+      <ColumnsSelection
+        selectedColumns={presetColumns}
+        onChange={(selectedColumns) => setPresetColumns(selectedColumns)}
+      ></ColumnsSelection>
       <div className="mb-4">
         <div className="flex items-center justify-between">
           <Subtitle>Thresholds</Subtitle>