fix(ui): missing columns in history (keephq#3188)

35C4n0r · Jan 28, 2025 · aee3b3f · aee3b3f
1 parent 52fc04f
commit aee3b3f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/keep-ui/app/(keep)/alerts/alert-history-charts.tsx b/keep-ui/app/(keep)/alerts/alert-history-charts.tsx
@@ -10,10 +10,14 @@ interface Props {
 }
 
 const getDateKey = (date: Date, timeUnit: string) => {
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const seconds = date.getSeconds().toString().padStart(2, "0");
+
   if (timeUnit === "Minutes") {
-    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    return `${hours}:${minutes}:${seconds}`;
   } else if (timeUnit === "Hours") {
-    return `${date.getHours()}:${date.getMinutes()}`;
+    return `${hours}:${minutes}`;
   } else {
     return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
   }

diff --git a/keep-ui/app/(keep)/alerts/alert-history.tsx b/keep-ui/app/(keep)/alerts/alert-history.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import { AlertDto } from "@/entities/alerts/model";
+import { AlertDto, AlertKnownKeys } from "@/entities/alerts/model";
 import { AlertTable } from "./alert-table";
 import { useAlertTableCols } from "./alert-table-utils";
 import { Button, Flex, Subtitle, Title, Divider } from "@tremor/react";
@@ -23,7 +23,31 @@ const AlertHistoryPanel = ({
 }: AlertHistoryPanelProps) => {
   const router = useRouter();
 
-  const alertTableColumns = useAlertTableCols();
+  const additionalColsToGenerate = [
+    ...new Set(
+      alertsHistoryWithDate.flatMap((alert) => {
+        const keys = Object.keys(alert).filter(
+          (key) => !AlertKnownKeys.includes(key)
+        );
+        return keys.flatMap((key) => {
+          if (
+            typeof alert[key as keyof AlertDto] === "object" &&
+            alert[key as keyof AlertDto] !== null
+          ) {
+            return Object.keys(alert[key as keyof AlertDto] as object).map(
+              (subKey) => `${key}.${subKey}`
+            );
+          }
+          return key;
+        });
+      })
+    ),
+  ];
+
+  const alertTableColumns = useAlertTableCols({
+    additionalColsToGenerate: additionalColsToGenerate,
+    presetName: alertsHistoryWithDate.at(0)?.fingerprint ?? "",
+  });
 
   const sortedHistoryAlert = alertsHistoryWithDate.map((alert) =>
     alert.lastReceived.getTime()

diff --git a/keep-ui/app/(keep)/alerts/alert-menu.tsx b/keep-ui/app/(keep)/alerts/alert-menu.tsx
@@ -171,7 +171,12 @@ export default function AlertMenu({
       },
       ...(provider?.methods?.map((method) => ({
         icon: (props: any) => (
-          <DynamicImageProviderIcon providerType={provider.type} {...props} />
+          <DynamicImageProviderIcon
+            providerType={provider.type}
+            {...props}
+            height="16"
+            width="16"
+          />
         ),
         label: method.name,
         onClick: () => openMethodModal(method),