chore: several improvements based on feedback (keephq#3576)

Author: talboren

keep-ui/app/(keep)/alerts/alert-associate-incident-modal.tsx

@@ -9,9 +9,13 @@ import {
 } from "../../../utils/hooks/useIncidents";
 import Loading from "@/app/(keep)/loading";
 import { AlertDto } from "@/entities/alerts/model";
-import { getIncidentName } from "@/entities/incidents/lib/utils";
+import {
+  getIncidentName,
+  getIncidentNameWithCreationTime,
+} from "@/entities/incidents/lib/utils";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { Select, showErrorToast } from "@/shared/ui";
+import { IncidentDto, Status } from "@/entities/incidents/model";
 
 interface AlertAssociateIncidentModalProps {
   isOpen: boolean;
@@ -77,6 +81,13 @@ const AlertAssociateIncidentModal = ({
     [associateAlertsHandler, handleClose, hideCreateIncidentForm]
   );
 
+  const filterIncidents = (incident: IncidentDto) => {
+    return (
+      incident.status === Status.Firing ||
+      incident.status === Status.Acknowledged
+    );
+  };
+
   // reset modal state after closing
   useEffect(() => {
     if (!isOpen) {
@@ -127,9 +138,9 @@ const AlertAssociateIncidentModal = ({
           onChange={(selectedOption) =>
             setSelectedIncident(selectedOption?.value)
           }
-          options={incidents.items?.map((incident) => ({
+          options={incidents.items?.filter(filterIncidents).map((incident) => ({
             value: incident.id,
-            label: getIncidentName(incident),
+            label: getIncidentNameWithCreationTime(incident),
           }))}
         />
         <Divider />

keep-ui/app/(keep)/alerts/alert-grouped-row.tsx

@@ -1,27 +1,33 @@
-import { TableBody, TableRow, TableCell } from "@tremor/react";
+import { TableBody, TableRow, TableCell, Icon } from "@tremor/react";
 import { AlertDto, Severity } from "@/entities/alerts/model";
 import { Table, flexRender, Row } from "@tanstack/react-table";
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon, EyeIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import { useState } from "react";
 import {
   TableSeverityCell,
   UISeverity,
   getCommonPinningStylesAndClassNames,
 } from "@/shared/ui";
+import { ViewedAlert } from "./alert-table";
+import { format } from "date-fns";
 
 interface GroupedRowProps {
   row: Row<AlertDto>;
   table: Table<AlertDto>;
   theme: Record<string, string>;
   onRowClick?: (e: React.MouseEvent, alert: AlertDto) => void;
+  viewedAlerts: ViewedAlert[];
+  lastViewedAlert: string | null;
 }
 
 export const GroupedRow = ({
   row,
   table,
   theme,
   onRowClick,
+  viewedAlerts,
+  lastViewedAlert,
 }: GroupedRowProps) => {
   const [isExpanded, setIsExpanded] = useState(true);
 
@@ -31,10 +37,6 @@ export const GroupedRow = ({
       ? row.getValue(groupingColumnId)
       : "Unknown Group";
 
-    const groupColumnIndex = row
-      .getVisibleCells()
-      .findIndex((cell) => cell.column.id === groupingColumnId);
-
     return (
       <>
         {/* Group Header Row */}
@@ -109,6 +111,10 @@ export const GroupedRow = ({
   // Regular non-grouped row
   const severity = row.original.severity || "info";
   const rowBgColor = theme[severity] || "bg-white";
+  const isLastViewed = row.original.fingerprint === lastViewedAlert;
+  const viewedAlert = viewedAlerts?.find(
+    (a) => a.fingerprint === row.original.fingerprint
+  );
   return (
     <TableRow
       id={`alert-row-${row.original.fingerprint}`}
@@ -129,11 +135,26 @@ export const GroupedRow = ({
               cell.column.columnDef.meta?.tdClassName,
               className,
               rowBgColor,
-              "group-hover:bg-orange-100"
+              "group-hover:bg-orange-100",
+              isLastViewed && "bg-orange-50"
             )}
             style={style}
           >
-            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            {viewedAlert && cell.column.id === "alertMenu" ? (
+              <div className="flex items-center gap-2">
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+                <Icon
+                  icon={EyeIcon}
+                  tooltip={`Viewed ${format(
+                    new Date(viewedAlert.viewedAt),
+                    "MMM d, yyyy HH:mm"
+                  )}`}
+                />
+              </div>
+            ) : (
+              flexRender(cell.column.columnDef.cell, cell.getContext())
+            )}
           </TableCell>
         );
       })}

keep-ui/app/(keep)/alerts/alert-table-server-side.tsx

@@ -46,15 +46,13 @@ import { Icon } from "@tremor/react";
 import { BellIcon, BellSlashIcon } from "@heroicons/react/24/outline";
 import AlertPaginationServerSide from "./alert-pagination-server-side";
 import { FacetDto } from "@/features/filter";
-import {
-  GroupingState,
-  getGroupedRowModel,
-  getExpandedRowModel,
-} from "@tanstack/react-table";
+import { GroupingState, getGroupedRowModel } from "@tanstack/react-table";
 import { TimeFrame } from "@/components/ui/DateRangePicker";
 import { AlertsQuery } from "@/utils/hooks/useAlerts";
 import { v4 as uuidV4 } from "uuid";
 import { FacetsConfig } from "@/features/filter/models";
+import { ViewedAlert } from "./alert-table";
+
 const AssigneeLabel = ({ email }: { email: string }) => {
   const user = useUser(email);
   return user ? user.name : email;
@@ -169,6 +167,12 @@ export function AlertTableServerSide({
     pageSize: 20,
   });
 
+  const [viewedAlerts, setViewedAlerts] = useLocalStorage<ViewedAlert[]>(
+    `viewed-alerts-${presetName}`,
+    []
+  );
+  const [lastViewedAlert, setLastViewedAlert] = useState<string | null>(null);
+
   useEffect(() => {
     const filterArray = [];
 
@@ -306,6 +310,22 @@ export function AlertTableServerSide({
     if (presetName === "alert-history") {
       return;
     }
+
+    // Update viewed alerts
+    setViewedAlerts((prev) => {
+      const newViewedAlerts = prev.filter(
+        (a) => a.fingerprint !== alert.fingerprint
+      );
+      return [
+        ...newViewedAlerts,
+        {
+          fingerprint: alert.fingerprint,
+          viewedAt: new Date().toISOString(),
+        },
+      ];
+    });
+
+    setLastViewedAlert(alert.fingerprint);
     setSelectedAlert(alert);
     setIsSidebarOpen(true);
   };
@@ -528,6 +548,8 @@ export function AlertTableServerSide({
                       showFilterEmptyState={showFilterEmptyState}
                       showSearchEmptyState={showSearchEmptyState}
                       theme={theme}
+                      viewedAlerts={viewedAlerts}
+                      lastViewedAlert={lastViewedAlert}
                       onRowClick={handleRowClick}
                       presetName={presetName}
                     />

keep-ui/app/(keep)/alerts/alert-table.tsx

@@ -39,6 +39,12 @@ interface PresetTab {
   filter: string;
   id?: string;
 }
+
+export interface ViewedAlert {
+  fingerprint: string;
+  viewedAt: string;
+}
+
 interface Props {
   alerts: AlertDto[];
   columns: ColumnDef<AlertDto>[];
@@ -103,6 +109,12 @@ export function AlertTable({
     []
   );
 
+  const [viewedAlerts, setViewedAlerts] = useLocalStorage<ViewedAlert[]>(
+    `viewed-alerts-${presetName}`,
+    []
+  );
+  const [lastViewedAlert, setLastViewedAlert] = useState<string | null>(null);
+
   const handleFacetDelete = (facetKey: string) => {
     setDynamicFacets((prevFacets) =>
       prevFacets.filter((df) => df.key !== facetKey)
@@ -268,10 +280,31 @@ export function AlertTable({
     if (presetName === "alert-history") {
       return;
     }
+
+    // Update viewed alerts
+    setViewedAlerts((prev) => {
+      const newViewedAlerts = prev.filter(
+        (a) => a.fingerprint !== alert.fingerprint
+      );
+      return [
+        ...newViewedAlerts,
+        {
+          fingerprint: alert.fingerprint,
+          viewedAt: new Date().toISOString(),
+        },
+      ];
+    });
+
+    setLastViewedAlert(alert.fingerprint);
     setSelectedAlert(alert);
     setIsSidebarOpen(true);
   };
 
+  // Reset last viewed alert when sidebar closes
+  const handleSidebarClose = () => {
+    setIsSidebarOpen(false);
+  };
+
   return (
     // Add h-screen to make it full height and remove the default flex-col gap
     <div className="h-screen flex flex-col gap-4">
@@ -355,6 +388,8 @@ export function AlertTable({
                       theme={theme}
                       onRowClick={handleRowClick}
                       presetName={presetName}
+                      viewedAlerts={viewedAlerts}
+                      lastViewedAlert={lastViewedAlert}
                     />
                   </Table>
                 </div>
@@ -375,7 +410,7 @@ export function AlertTable({
 
       <AlertSidebar
         isOpen={isSidebarOpen}
-        toggle={() => setIsSidebarOpen(false)}
+        toggle={handleSidebarClose}
         alert={selectedAlert}
         setRunWorkflowModalAlert={setRunWorkflowModalAlert}
         setDismissModalAlert={setDismissModalAlert}

keep-ui/app/(keep)/alerts/alerts-table-body.tsx

@@ -8,6 +8,7 @@ import PushAlertToServerModal from "./alert-push-alert-to-server-modal";
 import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
 import { MagnifyingGlassIcon, FunnelIcon } from "@heroicons/react/24/outline";
 import { GroupedRow } from "./alert-grouped-row";
+import { ViewedAlert } from "./alert-table";
 
 interface Props {
   table: Table<AlertDto>;
@@ -18,6 +19,8 @@ interface Props {
   theme: { [key: string]: string };
   onRowClick: (alert: AlertDto) => void;
   presetName: string;
+  viewedAlerts: ViewedAlert[];
+  lastViewedAlert: string | null;
 }
 
 export function AlertsTableBody({
@@ -29,6 +32,8 @@ export function AlertsTableBody({
   presetName,
   showFilterEmptyState,
   showSearchEmptyState,
+  viewedAlerts,
+  lastViewedAlert,
 }: Props) {
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -148,6 +153,8 @@ export function AlertsTableBody({
           table={table}
           theme={theme}
           onRowClick={handleRowClick}
+          viewedAlerts={viewedAlerts}
+          lastViewedAlert={lastViewedAlert}
         />
       ))}
     </TableBody>

keep-ui/app/(keep)/incidents/[id]/activity/incident-activity.tsx

@@ -18,9 +18,11 @@ import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { DynamicImageProviderIcon } from "@/components/ui";
 
+// TODO: REFACTOR THIS TO SUPPORT ANY ACTIVITY TYPE, IT'S A MESS!
+
 interface IncidentActivity {
   id: string;
-  type: "comment" | "alert" | "newcomment";
+  type: "comment" | "alert" | "newcomment" | "statuschange";
   text?: string;
   timestamp: string;
   initiator?: string | AlertDto;
@@ -84,7 +86,6 @@ export function IncidentActivity({ incident }: { incident: IncidentDto }) {
     _auditEventsLoading || (!auditEvents && !auditEventsError);
   const incidentEventsLoading =
     _incidentEventsLoading || (!incidentEvents && !incidentEventsError);
-  const usersLoading = _usersLoading || (!users && !usersError);
 
   const auditActivities = useMemo(() => {
     if (!auditEvents.length && !incidentEvents.length) {
@@ -101,6 +102,8 @@ export function IncidentActivity({ incident }: { incident: IncidentDto }) {
           const _type =
             auditEvent.action === "A comment was added to the incident" // @tb: I wish this was INCIDENT_COMMENT and not the text..
               ? "comment"
+              : auditEvent.action === "Incident status changed"
+              ? "statuschange"
               : "alert";
           return {
             id: auditEvent.id,
@@ -111,7 +114,10 @@ export function IncidentActivity({ incident }: { incident: IncidentDto }) {
                 : alerts?.items.find(
                     (a) => a.fingerprint === auditEvent.fingerprint
                   ),
-            text: _type === "comment" ? auditEvent.description : "",
+            text:
+              _type === "comment" || _type === "statuschange"
+                ? auditEvent.description
+                : "",
             timestamp: auditEvent.timestamp,
           } as IncidentActivity;
         }) || []
@@ -141,7 +147,7 @@ export function IncidentActivity({ incident }: { incident: IncidentDto }) {
         />
       );
     } else {
-      const source = (activity.initiator as AlertDto)?.source?.[0];
+      const source = (activity.initiator as AlertDto)?.source?.[0] || "keep";
       const imagePath = `/icons/${source}-icon.png`;
       return (
         <DynamicImageProviderIcon

keep-ui/app/(keep)/incidents/[id]/activity/ui/IncidentActivityComment.tsx

@@ -19,7 +19,7 @@ export function IncidentActivityComment({
 
   const onSubmit = useCallback(async () => {
     try {
-      const response = await api.post(`/incidents/${incident.id}/comment`, {
+      await api.post(`/incidents/${incident.id}/comment`, {
         status: incident.status,
         comment,
       });

keep-ui/app/(keep)/incidents/[id]/activity/ui/IncidentActivityItem.tsx

@@ -2,16 +2,21 @@ import AlertSeverity from "@/app/(keep)/alerts/alert-severity";
 import { AlertDto } from "@/entities/alerts/model";
 import TimeAgo from "react-timeago";
 
+// TODO: REFACTOR THIS TO SUPPORT ANY ACTIVITY TYPE, IT'S A MESS!
+
 export function IncidentActivityItem({ activity }: { activity: any }) {
   const title =
     typeof activity.initiator === "string"
       ? activity.initiator
       : activity.initiator?.name;
   const subTitle =
-    typeof activity.initiator === "string"
+    activity.type === "comment"
       ? " Added a comment. "
-      : (activity.initiator?.status === "firing" ? " triggered" : " resolved") +
-        ". ";
+      : activity.type === "statuschange"
+      ? " Incident status changed. "
+      : activity.initiator?.status === "firing"
+      ? " triggered"
+      : " resolved" + ". ";
   return (
     <div className="relative h-full w-full flex flex-col">
       <div className="flex items-center gap-2">

keep-ui/app/(keep)/incidents/[id]/timeline/incident-timeline.tsx

@@ -59,9 +59,7 @@ const AlertEventInfo: React.FC<{ event: AuditEvent; alert: AlertDto }> = ({
 }) => {
   return (
     <div className="h-full p-4 bg-gray-100 border-l">
-      <h2 className="font-semibold mb-2">
-        {alert.name} ({alert.fingerprint})
-      </h2>
+      <h2 className="font-semibold mb-2">{alert.name}</h2>
       <p className="mb-2 text-md">{alert.description}</p>
       <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
         <p className="text-gray-400">Date:</p>