improve alert table

frontend/src/components/alert/details.tsx

@@ -41,6 +41,13 @@ export const AlertDetailsDialog = ({ id }: { id: string }) => {
             <DialogDescription>
               <div className="flex flex-col gap-2">
                 <div className="flex gap-4 items-center">
+                  {/** Alert type */}
+                  <div className="flex gap-2">
+                    <div className="text-muted-foreground">type:</div>{" "}
+                    {alert.data.type}
+                  </div>
+
+                  {/** Resolved */}
                   <div className="flex gap-2">
                     <div className="text-muted-foreground">status:</div>{" "}
                     <div
@@ -53,15 +60,15 @@ export const AlertDetailsDialog = ({ id }: { id: string }) => {
                       {alert.resolved ? "RESOLVED" : "OPEN"}
                     </div>
                   </div>
-                  <div className="flex gap-2">
-                    <div className="text-muted-foreground">type:</div>{" "}
-                    {alert.data.type}
-                  </div>
+
+                  {/** Level */}
                   <div className="flex gap-2 text-muted-foreground">
                     level: <AlertLevel level={alert.level} />
                   </div>
                 </div>
-                <pre className="text-lg">{JSON.stringify(alert.data.data, undefined, 2)}</pre>
+
+                {/** Alert data */}
+                <pre>{JSON.stringify(alert.data.data, undefined, 2)}</pre>
               </div>
             </DialogDescription>
           </>

frontend/src/components/alert/index.tsx

@@ -1,7 +1,7 @@
 import { Section } from "@components/layouts";
 import {
   alert_level_intention,
-  text_color_class_by_intention,
+  bg_color_class_by_intention,
 } from "@lib/color";
 import { useRead, atomWithStorage } from "@lib/hooks";
 import { Types } from "@monitor/client";
@@ -9,6 +9,8 @@ import { Button } from "@ui/button";
 import { useAtom } from "jotai";
 import { AlertTriangle } from "lucide-react";
 import { AlertsTable } from "./table";
+import { Card, CardHeader } from "@ui/card";
+import { cn } from "@lib/utils";
 
 const openAtom = atomWithStorage("show-alerts-v0", true);
 
@@ -33,11 +35,10 @@ export const OpenAlerts = () => {
 };
 
 export const AlertLevel = ({ level }: { level: Types.SeverityLevel }) => {
+  const color = bg_color_class_by_intention(alert_level_intention(level));
   return (
-    <div
-      className={text_color_class_by_intention(alert_level_intention(level))}
-    >
-      {level}
-    </div>
+    <Card className={cn("w-fit", color)}>
+      <CardHeader className="py-0 px-2">{level}</CardHeader>
+    </Card>
   );
 };

frontend/src/components/alert/table.tsx

@@ -4,8 +4,17 @@ import { AlertLevel } from ".";
 import { AlertDetailsDialog } from "./details";
 import { UsableResource } from "@types";
 import { ResourceLink } from "@components/resources/common";
+import { bg_color_class_by_intention } from "@lib/color";
+import { Card, CardHeader } from "@ui/card";
+import { cn } from "@lib/utils";
 
-export const AlertsTable = ({ alerts }: { alerts: Types.Alert[] }) => {
+export const AlertsTable = ({
+  alerts,
+  showResolved,
+}: {
+  alerts: Types.Alert[];
+  showResolved?: boolean;
+}) => {
   return (
     <DataTable
       tableKey="alerts"
@@ -25,6 +34,21 @@ export const AlertsTable = ({ alerts }: { alerts: Types.Alert[] }) => {
             return <ResourceLink type={type} id={row.original.target.id} />;
           },
         },
+        showResolved && {
+          header: "Status",
+          cell: ({ row }) => {
+            const color = bg_color_class_by_intention(
+              row.original.resolved ? "Good" : "Critical"
+            );
+            return (
+              <Card className={cn("w-fit", color)}>
+                <CardHeader className="py-0 px-2">
+                  {row.original.resolved ? "Resolved" : "Open"}
+                </CardHeader>
+              </Card>
+            );
+          },
+        },
         {
           header: "Level",
           cell: ({ row }) => <AlertLevel level={row.original.level} />,

frontend/src/pages/alerts.tsx

@@ -77,7 +77,7 @@ export const Alerts = () => {
           </Select>
         </div>
 
-        <AlertsTable alerts={alerts?.alerts ?? []} />
+        <AlertsTable alerts={alerts?.alerts ?? []} showResolved />
 
         <div className="flex gap-4 justify-center items-center text-muted-foreground">
           <Button

frontend/src/ui/data-table.tsx

@@ -23,7 +23,7 @@ import { ReactNode, useEffect, useState } from "react";
 interface DataTableProps<TData, TValue> {
   /** Unique key given to table so sorting can be remembered on local storage */
   tableKey: string;
-  columns: ColumnDef<TData, TValue>[];
+  columns: (ColumnDef<TData, TValue> | false | undefined)[];
   data: TData[];
   onRowClick?: (row: TData) => void;
   noResults?: ReactNode;
@@ -44,7 +44,7 @@ export function DataTable<TData, TValue>({
 
   const table = useReactTable({
     data,
-    columns,
+    columns: columns.filter((c) => c) as any,
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),