feat: enrich alert modal

Signed-off-by: 35C4n0r <[email protected]>

keep-ui/app/alerts/EnrichAlertModal.tsx

@@ -0,0 +1,64 @@
+import { AlertDto } from "./models";
+import Modal from "@/components/ui/Modal";
+import { Button, TextInput } from "@tremor/react";
+import { useSession } from "next-auth/react";
+import { useApiUrl } from "utils/hooks/useConfig";
+import React from "react";
+
+interface EnrichAlertModalProps {
+  alert: AlertDto | null | undefined;
+  handleClose: () => void;
+  mutate: () => void;
+}
+
+const EnrichAlertModal: React.FC<EnrichAlertModalProps> = ({
+  alert,
+  handleClose,
+  mutate,
+}) => {
+  const isOpen = !!alert;
+  const { data: session } = useSession();
+  const apiUrl = useApiUrl();
+
+  if (!alert) return null;
+
+  const renderFormFields = () => {
+    return Object.entries(alert).map(([key, value]) => (
+      <div key={key} className="mb-4">
+        <label htmlFor={key} className="mb-1">
+          {key}:
+        </label>
+        <TextInput
+          id={key}
+          name={key}
+          value={String(value || "")}
+          disabled
+          className="mt-1"
+        />
+      </div>
+    ));
+  };
+
+  return (
+    <Modal
+      onClose={handleClose}
+      isOpen={isOpen}
+      className="overflow-visible max-w-fit"
+    >
+      <div className="flex justify-between items-center mb-4 min-w-full">
+        <h2 className="text-lg font-semibold">Enrich Alert</h2>
+        <div className="flex gap-x-2">
+          <Button onClick={handleClose} color="orange" variant="secondary">
+            Close
+          </Button>
+        </div>
+      </div>
+
+      <div className="form-container">
+        {alert ? renderFormFields() : <p>No data available.</p>}
+      </div>
+    </Modal>
+  );
+};
+
+export default EnrichAlertModal;

keep-ui/app/alerts/alert-menu.tsx

@@ -216,6 +216,24 @@ export default function AlertMenu({
           </button>
         )}
       </Menu.Item>
+      <Menu.Item>
+        {({ active }) => (
+          <button
+            onClick={() => {
+              router.replace(
+                `/alerts/${presetName}?alertPayloadFingerprint=${alert.fingerprint}&enrich=true`,
+              );
+              handleCloseMenu();
+            }}
+            className={`${
+              active ? "bg-slate-200" : "text-gray-900"
+            } group flex w-full items-center rounded-md px-2 py-2 text-xs`}
+          >
+            <ArchiveBoxIcon className="mr-2 h-4 w-4" aria-hidden="true" />
+            Enrich
+          </button>
+        )}
+      </Menu.Item>
       {canAssign && (
         <Menu.Item>
           {({ active }) => (

keep-ui/app/alerts/alerts.tsx

@@ -17,6 +17,7 @@ import AlertChangeStatusModal from "./alert-change-status-modal";
 import { useAlertPolling } from "utils/hooks/usePusher";
 import NotFound from "@/app/not-found";
 import NotAuthorized from "@/app/not-authorized";
+import EnrichAlertModal from "@/app/alerts/EnrichAlertModal";
 
 const defaultPresets: Preset[] = [
   {
@@ -89,6 +90,7 @@ export default function Alerts({ presetName }: AlertsProps) {
   >();
   const [changeStatusAlert, setChangeStatusAlert] = useState<AlertDto | null>();
   const [viewAlertModal, setViewAlertModal] = useState<AlertDto | null>();
+  const [viewEnrichAlertModal, setEnrichAlertModal] = useState<AlertDto | null>();
   const { useAllPresets } = usePresets();
 
   const { data: savedPresets = [] } = useAllPresets({
@@ -109,11 +111,16 @@ export default function Alerts({ presetName }: AlertsProps) {
   } = usePresetAlerts(selectedPreset ? selectedPreset.name : "");
   useEffect(() => {
     const fingerprint = searchParams?.get("alertPayloadFingerprint");
-    if (fingerprint) {
+    const enrich = searchParams?.get("enrich");
+    if (fingerprint && enrich) {
+      const alert = alerts?.find((alert) => alert.fingerprint === fingerprint);
+      setEnrichAlertModal(alert)
+    } else if (fingerprint) {
       const alert = alerts?.find((alert) => alert.fingerprint === fingerprint);
       setViewAlertModal(alert);
     } else {
       setViewAlertModal(null);
+      setEnrichAlertModal(null)
     }
   }, [searchParams, alerts]);
 
@@ -182,6 +189,11 @@ export default function Alerts({ presetName }: AlertsProps) {
         handleClose={() => router.replace(`/alerts/${presetName}`)}
         mutate={mutateAlerts}
       />
+      <EnrichAlertModal
+        alert={viewAlertModal}
+        handleClose={() => router.replace(`/alerts/${presetName}`)}
+        mutate={mutateAlerts}
+      />
     </>
   );
 }