feat: Bringing back the OG Alerts Count Widget + Adding optional additional link functionality (#5209)

DolevNe · dolevne · shahargl · web-flow · commit 507b16eb1aaa · 2025-07-22T14:07:55.000+03:00
Signed-off-by: DolevNe &lt;130115929+DolevNe@users.noreply.github.com&gt;
Signed-off-by: Shahar Glazner &lt;shaharglazner@gmail.com&gt;
Co-authored-by: dolevne &lt;ydolev.nezer@gmail.com&gt;
Co-authored-by: Shahar Glazner &lt;shaharglazner@gmail.com&gt;
diff --git a/keep-ui/app/(keep)/dashboard/GridLayout.tsx b/keep-ui/app/(keep)/dashboard/GridLayout.tsx
@@ -44,7 +44,7 @@ const GridLayout: React.FC<GridLayoutProps> = ({
           onLayoutChange(updatedLayout as LayoutItem[]);
         }}
         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
+        cols={{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 4 }}
         rowHeight={30}
         containerPadding={[0, 0]}
         margin={[10, 10]}
@@ -53,6 +53,7 @@ const GridLayout: React.FC<GridLayoutProps> = ({
         isResizable={true}
         compactType={null}
         draggableHandle=".grid-item__widget"
+        transformScale={1}
       >
         {data.map((item) => {
           //Updating the static hardcode db value.
diff --git a/keep-ui/app/(keep)/dashboard/types.tsx b/keep-ui/app/(keep)/dashboard/types.tsx
@@ -29,13 +29,21 @@ export enum WidgetType {
   GENERICS_METRICS = "GENERICS_METRICS",
 }
 
+export enum PresetPanelType {
+  ALERT_TABLE = "ALERT_TABLE",
+  ALERT_COUNT_PANEL = "ALERT_COUNT_PANEL",
+}
+
 export interface WidgetData extends LayoutItem {
   thresholds?: Threshold[];
   preset?: Preset;
   name: string;
   widgetType: WidgetType;
   genericMetrics?: GenericsMetrics;
   metric?: MetricsWidget;
+  presetPanelType?: PresetPanelType;
+  showFiringOnly?: boolean;
+  customLink?: string;
 }
 
 export interface Threshold {
diff --git a/keep-ui/app/(keep)/dashboard/widget-types/preset/preset-grid-item.tsx b/keep-ui/app/(keep)/dashboard/widget-types/preset/preset-grid-item.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { WidgetData, WidgetType } from "../../types";
+import { WidgetData, WidgetType, PresetPanelType } from "../../types";
 import { usePresetAlertsCount } from "@/features/presets/custom-preset-links";
 import { useDashboardPreset } from "@/utils/hooks/useDashboardPresets";
 import { Button, Icon } from "@tremor/react";
@@ -11,6 +11,7 @@ import { useRouter } from "next/navigation";
 import TimeAgo from "react-timeago";
 import { useSearchParams } from "next/navigation";
 import WidgetAlertsTable from "./widget-alerts-table";
+import WidgetAlertCountPanel from "./widget-alert-count-panel";
 import CelInput from "@/features/cel-input/cel-input";
 
 interface GridItemProps {
@@ -177,8 +178,13 @@ const PresetGridItem: React.FC<GridItemProps> = ({ item }) => {
     );
   }
 
+  const isAlertTable = item.presetPanelType === PresetPanelType.ALERT_TABLE || !item.presetPanelType;
+  const isAlertCountPanel = item.presetPanelType === PresetPanelType.ALERT_COUNT_PANEL;
+
   return (
     <div className="flex flex-col overflow-y-auto gap-2">
+      {isAlertTable && (
+        <>
       <div className="flex gap-2">
         <div className="flex-1 min-w-0 overflow-hidden whitespace-nowrap">
           <div className="flex gap-1 items-center">
@@ -205,6 +211,17 @@ const PresetGridItem: React.FC<GridItemProps> = ({ item }) => {
           alerts={isLoading ? undefined : alerts}
           columns={(item as any)?.presetColumns}
           background={isLoading ? undefined : hexToRgb(getColor(), 0.1)}
+            />
+          )}
+        </>
+      )}
+      {isAlertCountPanel && (
+        <WidgetAlertCountPanel
+          presetName={preset?.name as string}
+          showFiringOnly={item.showFiringOnly}
+          background={isLoading ? undefined : hexToRgb(getColor(), 0.1)}
+          thresholds={item.thresholds}
+          customLink={item.customLink}
         />
       )}
     </div>
diff --git a/keep-ui/app/(keep)/dashboard/widget-types/preset/preset-widget-form.tsx b/keep-ui/app/(keep)/dashboard/widget-types/preset/preset-widget-form.tsx
@@ -7,6 +7,7 @@ import {
   SelectItem,
   Subtitle,
   TextInput,
+  Switch,
 } from "@tremor/react";
 import { useEffect, useMemo, useState } from "react";
 import {
@@ -16,13 +17,16 @@ import {
   useWatch,
   useFieldArray,
 } from "react-hook-form";
-import { LayoutItem, Threshold } from "../../types";
+import { LayoutItem, Threshold, PresetPanelType } from "../../types";
 import ColumnsSelection from "./columns-selection";
 
 interface PresetForm {
   selectedPreset: string;
   countOfLastAlerts: string;
   thresholds: Threshold[];
+  presetPanelType: PresetPanelType;
+  showFiringOnly: boolean;
+  customLink?: string;
 }
 
 export interface PresetWidgetFormProps {
@@ -47,9 +51,12 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
         ? editingItem.preset.countOfLastAlerts || 0
         : 5,
       thresholds: editingItem?.thresholds || [
-        { value: 0, color: "#22c55e" }, // Green
-        { value: 20, color: "#ef4444" }, // Red
+        { value: 0, color: "#10b981" }, // Bold emerald green
+        { value: 20, color: "#dc2626" }, // Bold red
       ],
+      presetPanelType: editingItem?.presetPanelType || PresetPanelType.ALERT_TABLE,
+      showFiringOnly: editingItem?.showFiringOnly ?? false,
+      customLink: editingItem?.customLink || "",
     },
   });
   const [presetColumns, setPresetColumns] = useState<string[] | undefined>(
@@ -72,6 +79,9 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
         ...t,
         value: parseInt(t.value?.toString() as string, 10) || 0,
       })),
+      presetPanelType: formValues.presetPanelType || PresetPanelType.ALERT_TABLE,
+      showFiringOnly: formValues.showFiringOnly ?? false,
+      customLink: formValues.customLink || "",
     };
   }, [formValues, presetColumns]);
 
@@ -80,8 +90,23 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
       return {} as LayoutItem;
     }
 
-    const itemHeight = normalizedFormValues.countOfLastAlerts > 0 ? 6 : 4;
-    const itemWidth = normalizedFormValues.countOfLastAlerts > 0 ? 4 : 3;
+    const isAlertTable = normalizedFormValues.presetPanelType === PresetPanelType.ALERT_TABLE;
+    const isAlertCountPanel = normalizedFormValues.presetPanelType === PresetPanelType.ALERT_COUNT_PANEL;
+    
+    if (isAlertCountPanel) {
+      // Narrower, more compact layout for count panels with no minimum width
+      return {
+        w: 4,
+        h: 3,
+        minW: 0,
+        minH: 2,
+        static: false,
+      } as LayoutItem;
+    }
+    
+    // Original layout for alert tables
+    const itemHeight = isAlertTable && normalizedFormValues.countOfLastAlerts > 0 ? 6 : 4;
+    const itemWidth = isAlertTable && normalizedFormValues.countOfLastAlerts > 0 ? 8 : 6;
 
     return {
       w: itemWidth,
@@ -102,6 +127,9 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
         },
         presetColumns: normalizedFormValues.presetColumns,
         thresholds: normalizedFormValues.thresholds,
+        presetPanelType: normalizedFormValues.presetPanelType,
+        showFiringOnly: normalizedFormValues.showFiringOnly,
+        customLink: normalizedFormValues.customLink,
       },
       isValid
     );
@@ -158,18 +186,81 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
         />
       </div>
       <div className="mb-4 mt-2">
-        <Subtitle>Last alerts count to display</Subtitle>
+        <Subtitle>Panel Type</Subtitle>
         <Controller
-          name="countOfLastAlerts"
+          name="presetPanelType"
           control={control}
           rules={{
             required: {
               value: true,
-              message: "Preset selection is required",
+              message: "Panel type selection is required",
             },
           }}
           render={({ field }) => (
-            <TextInput
+            <Select
+              {...field}
+              placeholder="Select a panel type"
+              error={!!get(errors, "presetPanelType.message")}
+              errorMessage={get(errors, "presetPanelType.message")}
+            >
+              <SelectItem value={PresetPanelType.ALERT_TABLE}>
+                Alert Table
+              </SelectItem>
+              <SelectItem value={PresetPanelType.ALERT_COUNT_PANEL}>
+                Alert Count Panel
+              </SelectItem>
+            </Select>
+          )}
+        />
+      </div>
+      {formValues.presetPanelType === PresetPanelType.ALERT_COUNT_PANEL && (
+        <>
+          <div className="mb-4 mt-2">
+            <div className="flex items-center justify-between">
+              <Subtitle>Show Firing Alerts Only</Subtitle>
+              <Controller
+                name="showFiringOnly"
+                control={control}
+                render={({ field }) => (
+                  <Switch
+                    checked={field.value}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+          </div>
+          <div className="mb-4 mt-2">
+            <Subtitle>Custom Link (optional)</Subtitle>
+            <Controller
+              name="customLink"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  placeholder="https://example.com or leave empty for preset link"
+                  type="url"
+                />
+              )}
+            />
+          </div>
+        </>
+      )}
+      {formValues.presetPanelType === PresetPanelType.ALERT_TABLE && (
+        <>
+          <div className="mb-4 mt-2">
+            <Subtitle>Last alerts count to display</Subtitle>
+            <Controller
+              name="countOfLastAlerts"
+              control={control}
+              rules={{
+                required: {
+                  value: true,
+                  message: "Preset selection is required",
+                },
+              }}
+              render={({ field }) => (
+                <TextInput
               {...field}
               error={!!get(errors, "countOfLastAlerts.message")}
               errorMessage={get(errors, "countOfLastAlerts.message")}
@@ -185,6 +276,8 @@ export const PresetWidgetForm: React.FC<PresetWidgetFormProps> = ({
         selectedColumns={presetColumns}
         onChange={(selectedColumns) => setPresetColumns(selectedColumns)}
       ></ColumnsSelection>
+        </>
+      )}
       <div className="mb-4">
         <div className="flex items-center justify-between">
           <Subtitle>Thresholds</Subtitle>
diff --git a/keep-ui/app/(keep)/dashboard/widget-types/preset/widget-alert-count-panel.tsx b/keep-ui/app/(keep)/dashboard/widget-types/preset/widget-alert-count-panel.tsx
diff --git a/pyproject.toml b/pyproject.toml
