@checkstack/automation-frontend 0.10.2 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @checkstack/automation-frontend
 
+## 0.11.0
+
+### Minor Changes
+
+- b218e3e: Migrate every list table to the shared `DataTable`, so columns can now be
+  sorted by clicking their headers (name, status, severity, timestamps, counts,
+  ...) and tables that had no search gain a global search box. Tables render on
+  an opaque `bg-card` surface, fixing the previously transparent, hard-to-read
+  tables (e.g. Catalog Management). Existing per-page filters, bulk selection,
+  access gating, extension slots, provenance locks, row-click drawers, and
+  mobile card layouts are preserved. Incident/maintenance severity and status
+  sort by impact rank (most urgent first), not alphabetically. Server-paginated
+  tables keep server-side ordering and do not add a misleading page-local search.
+
+  Row action buttons are now standardized on the shared `RowActions`/`RowAction`
+  primitive, so every table's edit/delete/etc. look identical (a subtle ghost
+  icon button; destructive tinted red, confirmatory tinted green, never a loud
+  filled button). Redundant section headings that merely echoed the page title on
+  single-table pages (Incidents, Maintenances, SLO Objectives, Installed Plugins,
+  Satellite Nodes) were removed. The Infrastructure Settings tab rail gained an
+  accessible `Infrastructure settings` navigation label so its tab buttons stay
+  distinguishable from the new sortable column-header buttons in each tab's table.
+
+### Patch Changes
+
+- Updated dependencies [b218e3e]
+- Updated dependencies [b218e3e]
+  - @checkstack/auth-frontend@0.12.0
+  - @checkstack/gitops-frontend@0.7.0
+  - @checkstack/ui@1.25.0
+  - @checkstack/script-packages-frontend@0.4.9
+  - @checkstack/secrets-frontend@0.3.8
+
+## 0.10.3
+
+### Patch Changes
+
+- Updated dependencies [c55d7c6]
+- Updated dependencies [c55d7c6]
+  - @checkstack/ui@1.24.0
+  - @checkstack/common@0.21.0
+  - @checkstack/auth-frontend@0.11.3
+  - @checkstack/gitops-frontend@0.6.8
+  - @checkstack/script-packages-frontend@0.4.8
+  - @checkstack/secrets-frontend@0.3.7
+  - @checkstack/ai-common@0.6.5
+  - @checkstack/auth-common@0.12.2
+  - @checkstack/automation-common@0.9.2
+  - @checkstack/catalog-common@2.6.2
+  - @checkstack/frontend-api@0.13.2
+  - @checkstack/integration-common@0.9.7
+  - @checkstack/template-engine@0.4.10
+  - @checkstack/signal-frontend@0.3.4
+
 ## 0.10.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/automation-frontend",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "license": "Elastic-2.0",
   "type": "module",
   "sideEffects": [
@@ -16,20 +16,20 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/auth-common": "0.12.1",
-    "@checkstack/auth-frontend": "0.11.2",
-    "@checkstack/automation-common": "0.9.1",
-    "@checkstack/ai-common": "0.6.4",
-    "@checkstack/catalog-common": "2.6.1",
-    "@checkstack/common": "0.20.0",
-    "@checkstack/frontend-api": "0.13.1",
-    "@checkstack/gitops-frontend": "0.6.7",
-    "@checkstack/integration-common": "0.9.6",
-    "@checkstack/script-packages-frontend": "0.4.7",
-    "@checkstack/secrets-frontend": "0.3.6",
-    "@checkstack/signal-frontend": "0.3.3",
-    "@checkstack/template-engine": "0.4.9",
-    "@checkstack/ui": "1.23.0",
+    "@checkstack/auth-common": "0.12.2",
+    "@checkstack/auth-frontend": "0.12.0",
+    "@checkstack/automation-common": "0.9.2",
+    "@checkstack/ai-common": "0.6.5",
+    "@checkstack/catalog-common": "2.6.2",
+    "@checkstack/common": "0.21.0",
+    "@checkstack/frontend-api": "0.13.2",
+    "@checkstack/gitops-frontend": "0.7.0",
+    "@checkstack/integration-common": "0.9.7",
+    "@checkstack/script-packages-frontend": "0.4.9",
+    "@checkstack/secrets-frontend": "0.3.8",
+    "@checkstack/signal-frontend": "0.3.4",
+    "@checkstack/template-engine": "0.4.10",
+    "@checkstack/ui": "1.25.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -43,6 +43,6 @@
     "typescript": "^5.0.0",
     "@types/react": "^19.0.0",
     "@checkstack/tsconfig": "0.0.7",
-    "@checkstack/scripts": "0.7.1"
+    "@checkstack/scripts": "0.7.2"
   }
 }

package/src/pages/AutomationListPage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { Workflow, Plus, FlaskConical, Trash2 } from "lucide-react";
+import { Workflow, Plus, FlaskConical, Trash2, History } from "lucide-react";
 import {
   usePluginClient,
   accessApiRef,
@@ -24,14 +24,10 @@ import {
   Button,
   Badge,
   Toggle,
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableBody,
-  TableCell,
-  ResponsiveTable,
-  MobileCardList,
+  DataTable,
+  type DataTableColumn,
+  RowActions,
+  RowAction,
   LoadingSpinner,
   QueryErrorState,
   EmptyState,
@@ -186,56 +182,56 @@ const AutomationListContent: React.FC = () => {
   // All sections expanded by default so nothing is hidden on first load.
   const allGroupKeys = React.useMemo(() => groups.map((g) => g.key), [groups]);
 
-  const renderRow = (automation: Automation) => (
-    <TableRow
-      key={automation.id}
-      className="relative cursor-pointer transition-colors hover:bg-surface-inset"
-      onClick={() =>
-        navigate(
-          resolveRoute(automationRoutes.routes.edit, {
-            automationId: automation.id,
-          }),
-        )
-      }
-    >
-      <TableCell
-        onClick={(e) => e.stopPropagation()}
-        className="relative pl-4"
-      >
-        {/* Status accent: enabled/disabled by position + hue, not toggle alone. */}
-        <span
-          className={cn(
-            "absolute inset-y-0 left-0 w-1",
-            automationAccent(automation.status),
-          )}
-          aria-hidden
-        />
-        {canAccess(automation.id) ? (
-          <Toggle
-            checked={automation.status === "enabled"}
-            onCheckedChange={(enabled) =>
-              toggleMutation.mutate({
-                id: automation.id,
-                enabled,
-              })
-            }
-            aria-label={
-              automation.status === "enabled"
-                ? "Disable automation"
-                : "Enable automation"
-            }
+  const columns: DataTableColumn<Automation>[] = [
+    {
+      id: "status",
+      header: "",
+      headClassName: "w-8",
+      cellClassName: "relative pl-4",
+      cell: (automation) => (
+        <>
+          {/* Status accent: enabled/disabled by position + hue, not toggle alone. */}
+          <span
+            className={cn(
+              "absolute inset-y-0 left-0 w-1",
+              automationAccent(automation.status),
+            )}
+            aria-hidden
           />
-        ) : (
-          <Badge
-            variant={
-              automation.status === "enabled" ? "success" : "outline"
-            }
-          >
-            {automation.status}
-          </Badge>
-        )}
-      </TableCell>
-      <TableCell>
+          <div onClick={(e) => e.stopPropagation()}>
+            {canAccess(automation.id) ? (
+              <Toggle
+                checked={automation.status === "enabled"}
+                onCheckedChange={(enabled) =>
+                  toggleMutation.mutate({
+                    id: automation.id,
+                    enabled,
+                  })
+                }
+                aria-label={
+                  automation.status === "enabled"
+                    ? "Disable automation"
+                    : "Enable automation"
+                }
+              />
+            ) : (
+              <Badge
+                variant={
+                  automation.status === "enabled" ? "success" : "outline"
+                }
+              >
+                {automation.status}
+              </Badge>
+            )}
+          </div>
+        </>
+      ),
+    },
+    {
+      id: "name",
+      header: "Name",
+      sortValue: (automation) => automation.name,
+      cell: (automation) => (
         <div className="flex flex-col gap-0.5">
           <span className="font-semibold text-foreground">
             {automation.name}
@@ -246,8 +242,12 @@ const AutomationListContent: React.FC = () => {
             </span>
           )}
         </div>
-      </TableCell>
-      <TableCell>
+      ),
+    },
+    {
+      id: "triggers",
+      header: "Triggers",
+      cell: (automation) => (
         <div className="flex flex-wrap gap-1">
           {automation.definition.triggers.slice(0, 3).map((trigger, index) => (
             <Badge
@@ -267,45 +267,62 @@ const AutomationListContent: React.FC = () => {
             </Badge>
           )}
         </div>
-      </TableCell>
-      <TableCell>
+      ),
+    },
+    {
+      id: "mode",
+      header: "Mode",
+      sortValue: (automation) => automation.definition.mode,
+      cell: (automation) => (
         <Badge variant="secondary" className="text-[10px]">
           {automation.definition.mode}
         </Badge>
-      </TableCell>
-      <TableCell>
+      ),
+    },
+    {
+      id: "updated",
+      header: "Updated",
+      sortValue: (automation) => new Date(automation.updatedAt).getTime(),
+      cell: (automation) => (
         <span className="text-xs text-muted-foreground">
           {formatDistanceToNow(new Date(automation.updatedAt), {
             addSuffix: true,
           })}
         </span>
-      </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()} className="text-right">
-        <div className="flex justify-end gap-1">
-          <Link
-            to={resolveRoute(automationRoutes.routes.runs, {
-              automationId: automation.id,
-            })}
-          >
-            <Button variant="ghost" size="sm">
-              Runs
-            </Button>
-          </Link>
-          {canAccess(automation.id) && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-destructive hover:bg-destructive/10"
-              onClick={() => setDeleteId(automation.id)}
-              aria-label="Delete automation"
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          )}
+      ),
+    },
+    {
+      id: "actions",
+      header: "Actions",
+      headClassName: "w-24 text-right",
+      cellClassName: "text-right",
+      cell: (automation) => (
+        <div onClick={(e) => e.stopPropagation()}>
+          <RowActions>
+            <RowAction
+              icon={History}
+              label="View runs"
+              onClick={() =>
+                navigate(
+                  resolveRoute(automationRoutes.routes.runs, {
+                    automationId: automation.id,
+                  }),
+                )
+              }
+            />
+            {canAccess(automation.id) && (
+              <RowAction
+                icon={Trash2}
+                label="Delete automation"
+                tone="destructive"
+                onClick={() => setDeleteId(automation.id)}
+              />
+            )}
+          </RowActions>
         </div>
-      </TableCell>
-    </TableRow>
-  );
+      ),
+    },
+  ];
 
   const renderMobileCard = (automation: Automation) => (
     <div
@@ -391,30 +408,28 @@ const AutomationListContent: React.FC = () => {
           addSuffix: true,
         })}
       </div>
-      <div
-        onClick={(e) => e.stopPropagation()}
-        className="mt-3 flex justify-end gap-1 pl-2"
-      >
-        <Link
-          to={resolveRoute(automationRoutes.routes.runs, {
-            automationId: automation.id,
-          })}
-        >
-          <Button variant="ghost" size="sm">
-            Runs
-          </Button>
-        </Link>
-        {canAccess(automation.id) && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-destructive hover:bg-destructive/10"
-            onClick={() => setDeleteId(automation.id)}
-            aria-label="Delete automation"
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
-        )}
+      <div onClick={(e) => e.stopPropagation()} className="mt-3 pl-2">
+        <RowActions>
+          <RowAction
+            icon={History}
+            label="View runs"
+            onClick={() =>
+              navigate(
+                resolveRoute(automationRoutes.routes.runs, {
+                  automationId: automation.id,
+                }),
+              )
+            }
+          />
+          {canAccess(automation.id) && (
+            <RowAction
+              icon={Trash2}
+              label="Delete automation"
+              tone="destructive"
+              onClick={() => setDeleteId(automation.id)}
+            />
+          )}
+        </RowActions>
       </div>
     </div>
   );
@@ -516,32 +531,28 @@ const AutomationListContent: React.FC = () => {
                     </span>
                   </AccordionTrigger>
                   <AccordionContent className="px-0 pb-0">
-                    <ResponsiveTable>
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead className="w-8" />
-                            <TableHead>Name</TableHead>
-                            <TableHead>Triggers</TableHead>
-                            <TableHead>Mode</TableHead>
-                            <TableHead>Updated</TableHead>
-                            <TableHead className="w-24 text-right">
-                              Actions
-                            </TableHead>
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          {group.items.map((automation) =>
-                            renderRow(automation),
-                          )}
-                        </TableBody>
-                      </Table>
-                    </ResponsiveTable>
-                    <MobileCardList className="p-2">
-                      {group.items.map((automation) =>
-                        renderMobileCard(automation),
-                      )}
-                    </MobileCardList>
+                    <DataTable
+                      data={group.items}
+                      columns={columns}
+                      getRowId={(automation) => automation.id}
+                      searchable={false}
+                      // Nested inside the page's opaque Card, so the default
+                      // bg-card surface would create a panel-in-panel; the
+                      // enclosing Card already provides the opaque background.
+                      surface={false}
+                      onRowClick={(automation) =>
+                        navigate(
+                          resolveRoute(automationRoutes.routes.edit, {
+                            automationId: automation.id,
+                          }),
+                        )
+                      }
+                      getRowProps={() => ({
+                        className:
+                          "relative transition-colors hover:bg-surface-inset",
+                      })}
+                      renderMobileCard={renderMobileCard}
+                    />
                   </AccordionContent>
                 </AccordionItem>
               ))}

package/src/pages/RunsPage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Link, useParams } from "react-router-dom";
-import { History, ChevronLeft } from "lucide-react";
+import { Link, useParams, useNavigate } from "react-router-dom";
+import { History, ChevronLeft, ArrowUpRight } from "lucide-react";
 import {
   usePluginClient,
   accessApiRef,
@@ -12,7 +12,7 @@ import {
   automationAccess,
   automationRoutes,
 } from "@checkstack/automation-common";
-import type { RunStatus } from "@checkstack/automation-common";
+import type { RunStatus, AutomationRun } from "@checkstack/automation-common";
 import {
   PageLayout,
   Card,
@@ -20,17 +20,13 @@ import {
   CardHeader,
   CardTitle,
   Button,
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableBody,
-  TableCell,
+  DataTable,
+  type DataTableColumn,
+  RowActions,
+  RowAction,
   LoadingSpinner,
   QueryErrorState,
   EmptyState,
-  ResponsiveTable,
-  MobileCardList,
 } from "@checkstack/ui";
 import { resolveRoute } from "@checkstack/common";
 import { formatDistanceToNow } from "date-fns";
@@ -45,6 +41,7 @@ import { formatDuration } from "./run-duration";
  */
 const RunsPageContent: React.FC = () => {
   const { automationId } = useParams<{ automationId: string }>();
+  const navigate = useNavigate();
   const client = usePluginClient(AutomationApi);
   const accessApi = useApi(accessApiRef);
   const { allowed, loading: accessLoading } = accessApi.useAccess(
@@ -73,6 +70,72 @@ const RunsPageContent: React.FC = () => {
 
   const runs = runsQuery.data?.items ?? [];
 
+  const columns: DataTableColumn<AutomationRun>[] = [
+    {
+      id: "status",
+      header: "Status",
+      sortValue: (run) => run.status,
+      cell: (run) => <RunStatusPill status={run.status} />,
+    },
+    {
+      id: "trigger",
+      header: "Trigger",
+      sortValue: (run) => run.triggerEventId || "manual",
+      cell: (run) => (
+        <code className="font-mono text-xs">
+          {run.triggerEventId || "manual"}
+        </code>
+      ),
+    },
+    {
+      id: "started",
+      header: "Started",
+      sortValue: (run) => new Date(run.startedAt).getTime(),
+      cell: (run) => (
+        <span className="text-xs text-muted-foreground">
+          {formatDistanceToNow(new Date(run.startedAt), { addSuffix: true })}
+        </span>
+      ),
+    },
+    {
+      id: "duration",
+      header: "Duration",
+      sortValue: (run) =>
+        run.finishedAt
+          ? new Date(run.finishedAt).getTime() -
+            new Date(run.startedAt).getTime()
+          : undefined,
+      cell: (run) => (
+        <span className="text-xs text-muted-foreground">
+          {formatDuration(run.startedAt, run.finishedAt)}
+        </span>
+      ),
+    },
+    {
+      id: "actions",
+      header: "",
+      headClassName: "w-24 text-right",
+      cellClassName: "text-right",
+      cell: (run) =>
+        automationId ? (
+          <RowActions>
+            <RowAction
+              icon={ArrowUpRight}
+              label="Open run details"
+              onClick={() =>
+                navigate(
+                  resolveRoute(automationRoutes.routes.runDetail, {
+                    automationId,
+                    runId: run.id,
+                  }),
+                )
+              }
+            />
+          </RowActions>
+        ) : null,
+    },
+  ];
+
   return (
     <PageLayout
       title={
@@ -142,107 +205,52 @@ const RunsPageContent: React.FC = () => {
               description="Manually trigger the automation from the edit page to generate a run."
             />
           ) : (
-            <>
-              <ResponsiveTable>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Status</TableHead>
-                      <TableHead>Trigger</TableHead>
-                      <TableHead>Started</TableHead>
-                      <TableHead>Duration</TableHead>
-                      <TableHead className="w-24 text-right" />
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {runs.map((run) => (
-                      <TableRow key={run.id}>
-                        <TableCell>
-                          <RunStatusPill status={run.status} />
-                        </TableCell>
-                        <TableCell>
-                          <code className="font-mono text-xs">
-                            {run.triggerEventId || "manual"}
-                          </code>
-                        </TableCell>
-                        <TableCell>
-                          <span className="text-xs text-muted-foreground">
-                            {formatDistanceToNow(new Date(run.startedAt), {
-                              addSuffix: true,
-                            })}
-                          </span>
-                        </TableCell>
-                        <TableCell>
-                          <span className="text-xs text-muted-foreground">
-                            {formatDuration(run.startedAt, run.finishedAt)}
-                          </span>
-                        </TableCell>
-                        <TableCell className="text-right">
-                          {automationId && (
-                            <Link
-                              to={resolveRoute(
-                                automationRoutes.routes.runDetail,
-                                {
-                                  automationId,
-                                  runId: run.id,
-                                },
-                              )}
-                            >
-                              <Button variant="ghost" size="sm">
-                                Open
-                              </Button>
-                            </Link>
-                          )}
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </ResponsiveTable>
-
-              <MobileCardList className="p-4">
-                {runs.map((run) => (
-                  <div
-                    key={run.id}
-                    className="rounded-md border bg-surface p-4"
-                  >
-                    <div className="flex items-start justify-between gap-2">
-                      <RunStatusPill status={run.status} />
-                      {automationId && (
-                        <Link
-                          to={resolveRoute(automationRoutes.routes.runDetail, {
-                            automationId,
-                            runId: run.id,
-                          })}
-                        >
-                          <Button variant="ghost" size="sm">
-                            Open
-                          </Button>
-                        </Link>
-                      )}
+            <DataTable
+              data={runs}
+              columns={columns}
+              getRowId={(run) => run.id}
+              searchable={false}
+              renderMobileCard={(run) => (
+                <div className="rounded-md border bg-surface p-4">
+                  <div className="flex items-start justify-between gap-2">
+                    <RunStatusPill status={run.status} />
+                    {automationId && (
+                      <RowActions>
+                        <RowAction
+                          icon={ArrowUpRight}
+                          label="Open run details"
+                          onClick={() =>
+                            navigate(
+                              resolveRoute(automationRoutes.routes.runDetail, {
+                                automationId,
+                                runId: run.id,
+                              }),
+                            )
+                          }
+                        />
+                      </RowActions>
+                    )}
+                  </div>
+                  <div className="mt-2 flex flex-col gap-1 text-xs text-muted-foreground">
+                    <div className="flex items-center gap-1">
+                      <span>Trigger:</span>
+                      <code className="font-mono">
+                        {run.triggerEventId || "manual"}
+                      </code>
                     </div>
-                    <div className="mt-2 flex flex-col gap-1 text-xs text-muted-foreground">
-                      <div className="flex items-center gap-1">
-                        <span>Trigger:</span>
-                        <code className="font-mono">
-                          {run.triggerEventId || "manual"}
-                        </code>
-                      </div>
-                      <div>
-                        Started{" "}
-                        {formatDistanceToNow(new Date(run.startedAt), {
-                          addSuffix: true,
-                        })}
-                      </div>
-                      <div>
-                        Duration:{" "}
-                        {formatDuration(run.startedAt, run.finishedAt)}
-                      </div>
+                    <div>
+                      Started{" "}
+                      {formatDistanceToNow(new Date(run.startedAt), {
+                        addSuffix: true,
+                      })}
+                    </div>
+                    <div>
+                      Duration: {formatDuration(run.startedAt, run.finishedAt)}
                     </div>
                   </div>
-                ))}
-              </MobileCardList>
-            </>
+                </div>
+              )}
+            />
           )}
         </CardContent>
       </Card>