display detected problem properly

Author: kantord

src/components/AlertsTable.tsx

@@ -16,8 +16,12 @@ import {
 import { Switch } from "@stacklok/ui-kit";
 import { AlertConversation, QuestionType } from "@/api/generated";
 import { Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
-import { sanitizeQuestionPrompt, parsingPromptText } from "@/lib/utils";
-import { Search } from "lucide-react";
+import {
+  sanitizeQuestionPrompt,
+  parsingPromptText,
+  getIssueDetectedType,
+} from "@/lib/utils";
+import { KeyRoundIcon, PackageX, Search } from "lucide-react";
 import { useAlertSearch } from "@/hooks/useAlertSearch";
 import { useCallback } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
@@ -50,6 +54,29 @@ function TypeCellContent({ alert }: { alert: AlertConversation }) {
   }
 }
 
+function IssueDetectedCellContent({ alert }: { alert: AlertConversation }) {
+  const issueDetected = getIssueDetectedType(alert);
+
+  switch (issueDetected) {
+    case "leaked_secret":
+      return (
+        <>
+          <KeyRoundIcon className="size-4" />
+          Blocked secret exposure
+        </>
+      );
+    case "malicious_package":
+      return (
+        <>
+          <PackageX className="size-4" />
+          Blocked malicious package
+        </>
+      );
+    default:
+      return "";
+  }
+}
+
 export function AlertsTable() {
   const {
     isMaliciousFilterActive,
@@ -154,6 +181,7 @@ export function AlertsTable() {
                 Type
               </Column>
               <Column width={300}>Event</Column>
+              <Column width={300}>Issue Detected</Column>
             </Row>
           </TableHeader>
           <TableBody>
@@ -174,6 +202,11 @@ export function AlertsTable() {
                   <TypeCellContent alert={alert} />
                 </Cell>
                 <Cell className="truncate">{getTitle(alert)}</Cell>
+                <Cell>
+                  <div className="truncate flex gap-2 text-blue-800 items-center">
+                    <IssueDetectedCellContent alert={alert} />
+                  </div>
+                </Cell>
               </Row>
             ))}
           </TableBody>

src/lib/utils.ts

@@ -175,3 +175,15 @@ export function getMaliciousPackage(
 
   return null;
 }
+
+export function getIssueDetectedType(
+  alert: AlertConversation,
+): "malicious_package" | "leaked_secret" {
+  const maliciousPackage = getMaliciousPackage(alert.trigger_string);
+
+  if (maliciousPackage !== null && typeof maliciousPackage === "object") {
+    return "malicious_package";
+  }
+
+  return "leaked_secret";
+}

src/routes/__tests__/route-dashboard.test.tsx

@@ -156,6 +156,12 @@ describe("Dashboard", () => {
       }),
     ).toBeVisible();
 
+    expect(
+      screen.getByRole("columnheader", {
+        name: /issue detected/i,
+      }),
+    ).toBeVisible();
+
     expect(
       screen.getByRole("switch", {
         name: /malicious packages/i,
@@ -169,6 +175,11 @@ describe("Dashboard", () => {
 
     expect(within(firstRow).getByText(/chat/i)).toBeVisible();
     expect(within(firstRow).getByText(/[0-9]+.*ago/i)).toBeVisible();
+    expect(
+      screen.getAllByRole("gridcell", {
+        name: /blocked secret exposure/i,
+      }).length,
+    ).toBeGreaterThanOrEqual(1);
   });
 
   it("should render malicious pkg", async () => {
@@ -188,6 +199,12 @@ describe("Dashboard", () => {
         /codegate-context-retriever/i,
       ),
     ).toBeVisible();
+
+    expect(
+      screen.getByRole("gridcell", {
+        name: /blocked malicious package/i,
+      }),
+    ).toBeVisible();
   });
 
   it("renders event column", async () => {
@@ -224,6 +241,12 @@ describe("Dashboard", () => {
       expect(screen.getByTestId(/alerts-count/i)).toHaveTextContent("1"),
     );
 
+    expect(
+      screen.queryAllByRole("gridcell", {
+        name: /blocked secret exposure/i,
+      }).length,
+    ).toBe(0);
+
     userEvent.click(
       screen.getByRole("switch", {
         name: /malicious packages/i,