From 030cac63ae3d9c4b32eac8c24dcbb31d96c7eb66 Mon Sep 17 00:00:00 2001
From: shahargl <shaharglazner@gmail.com>
Date: Sun, 29 Sep 2024 11:59:46 +0300
Subject: [PATCH] feat: small improvements

---
 .../alerts/alert-associate-incident-modal.tsx |  49 +++++---
 .../incidents/create-or-update-incident.tsx   |  36 ++++--
 keep-ui/app/incidents/incidents-table.tsx     | 115 +++++++++++-------
 3 files changed, 130 insertions(+), 70 deletions(-)

diff --git a/keep-ui/app/alerts/alert-associate-incident-modal.tsx b/keep-ui/app/alerts/alert-associate-incident-modal.tsx
index de6b6efede..d0124e824b 100644
--- a/keep-ui/app/alerts/alert-associate-incident-modal.tsx
+++ b/keep-ui/app/alerts/alert-associate-incident-modal.tsx
@@ -1,5 +1,6 @@
 import Modal from "@/components/ui/Modal";
-import { Button, Divider, Select, SelectItem, Title } from "@tremor/react";
+import { Button, Divider, SelectItem, Title } from "@tremor/react";
+import Select from "@/components/ui/Select";
 import CreateOrUpdateIncident from "app/incidents/create-or-update-incident";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
@@ -28,7 +29,9 @@ const AlertAssociateIncidentModal = ({
   const { data: incidents, isLoading, mutate } = useIncidents(true, 100);
   usePollIncidents(mutate);
 
-  const [selectedIncident, setSelectedIncident] = useState<string | undefined>();
+  const [selectedIncident, setSelectedIncident] = useState<
+    string | undefined
+  >();
   // get the token
   const { data: session } = useSession();
   const router = useRouter();
@@ -106,20 +109,33 @@ const AlertAssociateIncidentModal = ({
           <div className="h-full justify-center">
             <Select
               className="my-2.5"
-              placeholder={`Select incident`}
-              value={selectedIncident}
-              onValueChange={(value) => setSelectedIncident(value)}
-            >
-              {
-                incidents.items?.map((incident) => {
-                  return (
-                    <SelectItem key={incident.id} value={incident.id}>
-                      {incident.user_generated_name || incident.ai_generated_name}
-                    </SelectItem>
-                  );
-                })!
+              placeholder="Select incident"
+              value={
+                selectedIncident
+                  ? {
+                      value: selectedIncident,
+                      label:
+                        incidents.items.find(
+                          (incident) => incident.id === selectedIncident
+                        )?.user_generated_name ||
+                        incidents.items.find(
+                          (incident) => incident.id === selectedIncident
+                        )?.ai_generated_name ||
+                        "",
+                    }
+                  : null
               }
-            </Select>
+              onChange={(selectedOption) =>
+                setSelectedIncident(selectedOption?.value)
+              }
+              options={incidents.items?.map((incident) => ({
+                value: incident.id,
+                label:
+                  incident.user_generated_name ||
+                  incident.ai_generated_name ||
+                  "",
+              }))}
+            />
             <Divider />
             <div className="flex items-center justify-between gap-6">
               <Button
@@ -133,7 +149,8 @@ const AlertAssociateIncidentModal = ({
 
               <Button
                 className="flex-1"
-                color="green"
+                color="orange"
+                variant="secondary"
                 onClick={showCreateIncidentForm}
               >
                 Create a new incident
diff --git a/keep-ui/app/incidents/create-or-update-incident.tsx b/keep-ui/app/incidents/create-or-update-incident.tsx
index 4b863a97ae..81489923c5 100644
--- a/keep-ui/app/incidents/create-or-update-incident.tsx
+++ b/keep-ui/app/incidents/create-or-update-incident.tsx
@@ -7,6 +7,8 @@ import {
   Subtitle,
   Text,
   Button,
+  Select,
+  SelectItem,
 } from "@tremor/react";
 import { useSession } from "next-auth/react";
 import { FormEvent, useEffect, useState } from "react";
@@ -15,6 +17,7 @@ import { getApiURL } from "utils/apiUrl";
 import { IncidentDto } from "./models";
 import { useIncidents } from "utils/hooks/useIncidents";
 import { Session } from "next-auth";
+import { useUsers } from "utils/hooks/useUsers";
 
 interface Props {
   incidentToEdit: IncidentDto | null;
@@ -55,6 +58,7 @@ export default function CreateOrUpdateIncident({
   const [incidentName, setIncidentName] = useState<string>("");
   const [incidentUserSummary, setIncidentUserSummary] = useState<string>("");
   const [incidentAssignee, setIncidentAssignee] = useState<string>("");
+  const { data: users = [] } = useUsers();
   const editMode = incidentToEdit !== null;
 
   // Display cancel btn if editing or we need to cancel for another reason (eg. going one step back in the modal etc.)
@@ -144,7 +148,7 @@ export default function CreateOrUpdateIncident({
     <form className="py-2" onSubmit={editMode ? updateIncident : addIncident}>
       <Subtitle>Incident Metadata</Subtitle>
       <div className="mt-2.5">
-        <Text>
+        <Text className="mb-2">
           Name<span className="text-red-500 text-xs">*</span>
         </Text>
         <TextInput
@@ -155,7 +159,7 @@ export default function CreateOrUpdateIncident({
         />
       </div>
       <div className="mt-2.5">
-        <Text>Summary</Text>
+        <Text className="mb-2">Summary</Text>
         <Textarea
           placeholder="What happened?"
           required={false}
@@ -165,17 +169,31 @@ export default function CreateOrUpdateIncident({
       </div>
 
       <div className="mt-2.5">
-        <Text>Assignee</Text>
-        <TextInput
-          placeholder="Who is responsible"
-          value={incidentAssignee}
-          onValueChange={setIncidentAssignee}
-        />
+        <Text className="mb-2">Assignee</Text>
+        {users.length > 0 ? (
+          <Select
+            placeholder="Who is responsible"
+            value={incidentAssignee}
+            onValueChange={setIncidentAssignee}
+          >
+            {users.map((user) => (
+              <SelectItem key={user.email} value={user.email}>
+                {user.name || user.email}
+              </SelectItem>
+            ))}
+          </Select>
+        ) : (
+          <TextInput
+            placeholder="Who is responsible"
+            value={incidentAssignee}
+            onValueChange={setIncidentAssignee}
+          />
+        )}
       </div>
 
       <Divider />
 
-      <div className={"space-x-1 flex flex-row justify-end items-center"}>
+      <div className="mt-auto pt-6 space-x-1 flex flex-row justify-end items-center">
         {cancellable && (
           <Button
             color="orange"
diff --git a/keep-ui/app/incidents/incidents-table.tsx b/keep-ui/app/incidents/incidents-table.tsx
index fb9b6a6090..a3aa95ae8b 100644
--- a/keep-ui/app/incidents/incidents-table.tsx
+++ b/keep-ui/app/incidents/incidents-table.tsx
@@ -1,8 +1,4 @@
-import {
-  Button,
-  Badge,
-  Icon,
-} from "@tremor/react";
+import { Button, Badge, Icon } from "@tremor/react";
 import {
   ExpandedState,
   createColumnHelper,
@@ -12,14 +8,18 @@ import {
   getSortedRowModel,
   ColumnDef,
 } from "@tanstack/react-table";
-import {MdRemoveCircle, MdModeEdit, MdKeyboardDoubleArrowRight} from "react-icons/md";
+import {
+  MdRemoveCircle,
+  MdModeEdit,
+  MdKeyboardDoubleArrowRight,
+} from "react-icons/md";
 import { useSession } from "next-auth/react";
-import {IncidentDto, PaginatedIncidentsDto, Status} from "./models";
-import React, {Dispatch, SetStateAction, useEffect, useState} from "react";
+import { IncidentDto, PaginatedIncidentsDto, Status } from "./models";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import Image from "next/image";
 import IncidentPagination from "./incident-pagination";
 import IncidentTableComponent from "./incident-table-component";
-import {deleteIncident} from "./incident-candidate-actions";
+import { deleteIncident } from "./incident-candidate-actions";
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
@@ -32,31 +32,37 @@ const columnHelper = createColumnHelper<IncidentDto>();
 interface Props {
   incidents: PaginatedIncidentsDto;
   mutate: () => void;
-  sorting: SortingState,
+  sorting: SortingState;
   setSorting: Dispatch<SetStateAction<any>>;
   setPagination: Dispatch<SetStateAction<any>>;
   editCallback: (rule: IncidentDto) => void;
 }
 
 const STATUS_ICONS = {
-  [Status.Firing]: <Icon
-    icon={ExclamationCircleIcon}
-    tooltip={Status.Firing}
-    color="red"
-    className="w-4 h-4 mr-2"
-  />,
-  [Status.Resolved]: <Icon
-    icon={CheckCircleIcon}
-    tooltip={Status.Resolved}
-    color="green"
-    className="w-4 h-4 mr-2"
-  />,
-  [Status.Acknowledged]: <Icon
-    icon={PauseIcon}
-    tooltip={Status.Acknowledged}
-    color="gray"
-    className="w-4 h-4 mr-2"
-  />,
+  [Status.Firing]: (
+    <Icon
+      icon={ExclamationCircleIcon}
+      tooltip={Status.Firing}
+      color="red"
+      className="w-4 h-4 mr-2"
+    />
+  ),
+  [Status.Resolved]: (
+    <Icon
+      icon={CheckCircleIcon}
+      tooltip={Status.Resolved}
+      color="green"
+      className="w-4 h-4 mr-2"
+    />
+  ),
+  [Status.Acknowledged]: (
+    <Icon
+      icon={PauseIcon}
+      tooltip={Status.Acknowledged}
+      color="gray"
+      className="w-4 h-4 mr-2"
+    />
+  ),
 };
 
 export default function IncidentsTable({
@@ -73,35 +79,40 @@ export default function IncidentsTable({
     pageIndex: Math.ceil(incidents.offset / incidents.limit),
     pageSize: incidents.limit,
   });
-  const [changeStatusIncident, setChangeStatusIncident] = useState<IncidentDto | null>();
+  const [changeStatusIncident, setChangeStatusIncident] =
+    useState<IncidentDto | null>();
 
   const handleChangeStatus = (e: React.MouseEvent, incident: IncidentDto) => {
     e.preventDefault();
     e.stopPropagation();
     setChangeStatusIncident(incident);
-  }
+  };
 
   useEffect(() => {
     if (incidents.limit != pagination.pageSize) {
       setPagination({
         limit: pagination.pageSize,
         offset: 0,
-      })
+      });
     }
     const currentOffset = pagination.pageSize * pagination.pageIndex;
     if (incidents.offset != currentOffset) {
       setPagination({
         limit: pagination.pageSize,
         offset: currentOffset,
-      })
+      });
     }
-  }, [pagination])
+  }, [pagination]);
 
   const columns = [
     columnHelper.display({
       id: "status",
       header: "Status",
-      cell: ({ row }) => <span onClick={(e) => handleChangeStatus(e, row.original!)}>{STATUS_ICONS[row.original.status]}</span>,
+      cell: ({ row }) => (
+        <span onClick={(e) => handleChangeStatus(e, row.original!)}>
+          {STATUS_ICONS[row.original.status]}
+        </span>
+      ),
     }),
     columnHelper.display({
       id: "name",
@@ -115,12 +126,16 @@ export default function IncidentsTable({
     columnHelper.display({
       id: "user_summary",
       header: "Summary",
-      cell: ({ row }) => <div className="text-wrap">{row.original.user_summary}</div>,
+      cell: ({ row }) => (
+        <div className="text-wrap">{row.original.user_summary}</div>
+      ),
     }),
     columnHelper.display({
       id: "rule_fingerprint",
       header: "Group by value",
-      cell: ({ row }) => <div className="text-wrap">{row.original.rule_fingerprint || "-"}</div>,
+      cell: ({ row }) => (
+        <div className="text-wrap">{row.original.rule_fingerprint || "-"}</div>
+      ),
     }),
     columnHelper.accessor("severity", {
       id: "severity",
@@ -157,16 +172,22 @@ export default function IncidentsTable({
     columnHelper.display({
       id: "services",
       header: "Involved Services",
-      cell: ({row}) =>
-        <div className="text-wrap">{row.original.services.map((service) =>
-          <Badge key={service} className="mr-1">{service}</Badge>
-        )}
-      </div>,
+      cell: ({ row }) => (
+        <div className="text-wrap">
+          {row.original.services
+            .filter((service) => service !== "null")
+            .map((service) => (
+              <Badge key={service} className="mr-1">
+                {service}
+              </Badge>
+            ))}
+        </div>
+      ),
     }),
     columnHelper.display({
       id: "assignee",
       header: "Assignee",
-      cell: ({ row }) => row.original.assignee
+      cell: ({ row }) => row.original.assignee,
     }),
     columnHelper.accessor("creation_time", {
       id: "creation_time",
@@ -209,7 +230,11 @@ export default function IncidentsTable({
             onClick={async (e: React.MouseEvent) => {
               e.preventDefault();
               e.stopPropagation();
-              await deleteIncident({incidentId: row.original.id!, mutate, session});
+              await deleteIncident({
+                incidentId: row.original.id!,
+                mutate,
+                session,
+              });
             }}
           />
         </div>
@@ -228,7 +253,7 @@ export default function IncidentsTable({
     onExpandedChange: setExpanded,
     onSortingChange: (value) => {
       if (typeof value === "function") {
-        setSorting(value)
+        setSorting(value);
       }
     },
     getSortedRowModel: getSortedRowModel(),
@@ -247,7 +272,7 @@ export default function IncidentsTable({
         handleClose={() => setChangeStatusIncident(null)}
       />
       <div className="mt-4 mb-8">
-        <IncidentPagination table={table}  isRefreshAllowed={true}/>
+        <IncidentPagination table={table} isRefreshAllowed={true} />
       </div>
     </div>
   );