feat(ui): bit better alerts table (#2627)

keephq · Nov 25, 2024 · 370c337 · 370c337
1 parent c479002
commit 370c337
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 79 deletions.
diff --git a/keep-ui/app/(keep)/alerts/alert-table-checkbox.tsx b/keep-ui/app/(keep)/alerts/alert-table-checkbox.tsx
@@ -22,14 +22,16 @@ export default function AlertTableCheckbox({
   }, [indeterminate, rest.checked]);
 
   return (
-    <input
-      type="checkbox"
-      ref={ref}
-      disabled={disabled}
-      className={
-        className + `${disabled ? "cursor-not-allowed" : "cursor-pointer"}`
-      }
-      {...rest}
-    />
+    <div className="flex items-center justify-center">
+      <input
+        type="checkbox"
+        ref={ref}
+        disabled={disabled}
+        className={
+          className + `${disabled ? "cursor-not-allowed" : "cursor-pointer"}`
+        }
+        {...rest}
+      />
+    </div>
   );
 }
diff --git a/keep-ui/app/(keep)/alerts/alert-table-headers.tsx b/keep-ui/app/(keep)/alerts/alert-table-headers.tsx
@@ -55,16 +55,21 @@ const DraggableHeaderCell = ({
   });
 
   const dragStyle: CSSProperties = {
-    width: column.getSize(),
+    width:
+      column.id === "checkbox"
+        ? "32px !important"
+        : column.id === "source"
+        ? "40px !important"
+        : column.getSize(),
     opacity: isDragging ? 0.5 : 1,
     transform: CSS.Translate.toString(transform),
     transition,
     cursor:
       column.getIsPinned() !== false
         ? "default"
         : isDragging
-          ? "grabbing"
-          : "grab",
+        ? "grabbing"
+        : "grab",
   };
 
   // TODO: fix multiple pinned columns
@@ -80,7 +85,12 @@ const DraggableHeaderCell = ({
       style={dragStyle}
       ref={setNodeRef}
     >
-      <div className="flex items-center" {...listeners}>
+      <div
+        className={`flex items-center ${
+          column.id === "checkbox" ? "justify-center" : ""
+        }`}
+        {...listeners}
+      >
         {/* Flex container */}
         {children} {/* Column name or text */}
         {column.getCanSort() && ( // Sorting icon to the left
@@ -99,8 +109,8 @@ const DraggableHeaderCell = ({
                 column.getNextSortingOrder() === "asc"
                   ? "Sort ascending"
                   : column.getNextSortingOrder() === "desc"
-                    ? "Sort descending"
-                    : "Clear sort"
+                  ? "Sort descending"
+                  : "Clear sort"
               }
             >
               {/* Icon logic */}

diff --git a/keep-ui/app/(keep)/alerts/alert-table-utils.tsx b/keep-ui/app/(keep)/alerts/alert-table-utils.tsx
@@ -24,15 +24,17 @@ import {
 import { AlertSeverityBorder } from "./alert-severity-border";
 import { getStatusIcon, getStatusColor } from "@/shared/lib/status-utils";
 
+import { useConfig } from "utils/hooks/useConfig";
+
 export const DEFAULT_COLS = [
   "severity",
   "checkbox",
   "noise",
+  "source",
   "name",
   "description",
   "status",
   "lastReceived",
-  "source",
   "alertMenu",
 ];
 export const DEFAULT_COLS_VISIBILITY = DEFAULT_COLS.reduce<VisibilityState>(
@@ -132,6 +134,9 @@ export const useAlertTableCols = (
 ) => {
   const [expandedToggles, setExpandedToggles] = useState<RowSelectionState>({});
   const [currentOpenMenu, setCurrentOpenMenu] = useState("");
+  const { data: configData } = useConfig();
+  // check if noisy alerts are enabled
+  const noisyAlertsEnabled = configData?.NOISY_ALERTS_ENABLED;
 
   const filteredAndGeneratedCols = additionalColsToGenerate.map((colName) =>
     columnHelper.display({
@@ -179,21 +184,26 @@ export const useAlertTableCols = (
   return [
     columnHelper.display({
       id: "severity",
-      maxSize: 4,
+      maxSize: 2,
       header: () => <></>,
       cell: (context) => (
         <AlertSeverityBorder severity={context.row.original.severity} />
       ),
       meta: {
-        tdClassName: "p-0",
-        thClassName: "p-0",
+        tdClassName: "w-1 !p-0",
+        thClassName: "w-1 !p-0",
       },
     }),
     ...(isCheckboxDisplayed
       ? [
           columnHelper.display({
             id: "checkbox",
-            size: 46,
+            maxSize: 32,
+            minSize: 32,
+            meta: {
+              tdClassName: "w-6 !py-2 !pl-2 !pr-1",
+              thClassName: "w-6 !py-2 !pl-2 !pr-1 ",
+            },
             header: (context) => (
               <AlertTableCheckbox
                 checked={context.table.getIsAllRowsSelected()}
@@ -212,52 +222,99 @@ export const useAlertTableCols = (
         ]
       : ([] as ColumnDef<AlertDto>[])),
     // noisy column
-    columnHelper.display({
-      id: "noise",
-      size: 5,
-      header: () => <></>,
-      cell: (context) => {
-        // Get the status of the alert
-        const status = context.row.original.status;
-        const isNoisy = context.row.original.isNoisy;
+    ...(noisyAlertsEnabled
+      ? [
+          columnHelper.display({
+            id: "noise",
+            size: 5,
+            header: () => <></>,
+            cell: (context) => {
+              // Get the status of the alert
+              const status = context.row.original.status;
+              const isNoisy = context.row.original.isNoisy;
 
-        // Return null if presetNoisy is not true
-        if (!presetNoisy && !isNoisy) {
-          return null;
-        } else if (presetNoisy) {
-          // Decide which icon to display based on the status
-          if (status === "firing") {
-            return <Icon icon={MdOutlineNotificationsActive} color="red" />;
-          } else {
-            return <Icon icon={MdOutlineNotificationsOff} color="red" />;
-          }
-        }
-        // else, noisy alert in non noisy preset
-        else {
-          if (status === "firing") {
-            return <Icon icon={MdOutlineNotificationsActive} color="red" />;
-          } else {
-            return null;
-          }
-        }
-      },
+              // Return null if presetNoisy is not true
+              if (!presetNoisy && !isNoisy) {
+                return null;
+              } else if (presetNoisy) {
+                // Decide which icon to display based on the status
+                if (status === "firing") {
+                  return (
+                    <Icon icon={MdOutlineNotificationsActive} color="red" />
+                  );
+                } else {
+                  return <Icon icon={MdOutlineNotificationsOff} color="red" />;
+                }
+              }
+              // else, noisy alert in non noisy preset
+              else {
+                if (status === "firing") {
+                  return (
+                    <Icon icon={MdOutlineNotificationsActive} color="red" />
+                  );
+                } else {
+                  return null;
+                }
+              }
+            },
+            meta: {
+              tdClassName: "p-0",
+              thClassName: "p-0",
+            },
+            enableSorting: false,
+          }),
+        ]
+      : []),
+    // Source column with exact 40px width ( see alert-table-headers )
+    columnHelper.accessor("source", {
+      id: "source",
+      header: () => <></>,
+      enableSorting: false,
+      enableResizing: false,
+      cell: (context) => (
+        <div className="flex items-center justify-start">
+          {(context.getValue() ?? []).map((source, index) => {
+            let imagePath = `/icons/${source}-icon.png`;
+            if (source.includes("@")) {
+              imagePath = "/icons/mailgun-icon.png";
+            }
+            return (
+              <Image
+                className={`inline-block ${index == 0 ? "" : "-ml-2"}`}
+                key={source}
+                alt={source}
+                height={24}
+                width={24}
+                title={source}
+                src={imagePath}
+              />
+            );
+          })}
+        </div>
+      ),
       meta: {
-        tdClassName: "p-0",
-        thClassName: "p-0",
+        tdClassName: "!p-0 w-4 sm:w-6 !box-border",
+        thClassName: "!p-0 w-4 sm:w-6 !box-border",
       },
-      enableSorting: false,
     }),
+    // Name column butted up against source
     columnHelper.display({
       id: "name",
       header: "Name",
       minSize: 330,
       cell: (context) => (
-        <AlertName
-          alert={context.row.original}
-          setNoteModalAlert={setNoteModalAlert}
-          setTicketModalAlert={setTicketModalAlert}
-        />
+        <div className="flex items-center">
+          <AlertName
+            alert={context.row.original}
+            setNoteModalAlert={setNoteModalAlert}
+            setTicketModalAlert={setTicketModalAlert}
+          />
+        </div>
       ),
+      meta: {
+        tdClassName: "!pl-0",
+        thClassName: "!pl-1", // Small padding for header text only
+      },
     }),
     columnHelper.accessor("description", {
       id: "description",
@@ -296,29 +353,6 @@ export const useAlertTableCols = (
         </span>
       ),
     }),
-    columnHelper.accessor("source", {
-      id: "source",
-      header: "Source",
-      minSize: 100,
-      cell: (context) =>
-        (context.getValue() ?? []).map((source, index) => {
-          let imagePath = `/icons/${source}-icon.png`;
-          if (source.includes("@")) {
-            imagePath = "/icons/mailgun-icon.png";
-          }
-          return (
-            <Image
-              className={`inline-block ${index == 0 ? "" : "-ml-2"}`}
-              key={source}
-              alt={source}
-              height={24}
-              width={24}
-              title={source}
-              src={imagePath}
-            />
-          );
-        }),
-    }),
     columnHelper.accessor("assignee", {
       id: "assignee",
       header: "Assignee",

diff --git a/keep-ui/shared/lib/server/getConfig.ts b/keep-ui/shared/lib/server/getConfig.ts
@@ -55,5 +55,7 @@ export function getConfig() {
     SENTRY_DISABLED: process.env.SENTRY_DISABLED,
     READ_ONLY: process.env.KEEP_READ_ONLY === "true",
     OPEN_AI_API_KEY_SET: !!process.env.OPEN_AI_API_KEY,
+    // NOISY ALERTS DISABLED BY DEFAULT TO SPARE SPACE ON THE TABLE
+    NOISY_ALERTS_ENABLED: process.env.NOISY_ALERTS_ENABLED === "true",
   };
 }
diff --git a/keep-ui/types/internal-config.ts b/keep-ui/types/internal-config.ts
@@ -19,4 +19,7 @@ export interface InternalConfig {
   // READ ONLY
   READ_ONLY: boolean;
   OPEN_AI_API_KEY_SET: boolean;
+
+  // NOISY ALERTS ENABLED
+  NOISY_ALERTS_ENABLED: boolean;
 }