@checkstack/slo-frontend 0.4.4 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @checkstack/slo-frontend
 
+## 0.4.5
+
+### Patch Changes
+
+- f23f3c9: Retrofit the highest-traffic configuration list tables
+  (`HealthCheckList`, `SloConfigPage`, and the integration
+  `DeliveryLogsPage`) onto the `ResponsiveTable` + `MobileCardList`
+  primitives from `@checkstack/ui`. On `sm` and up each page still
+  renders the unchanged 5- to 7-column table; below that breakpoint a
+  sibling stacked-card layout surfaces the same data with the resource
+  name + status badge at the top, secondary columns in a muted line, and
+  the existing action buttons in a right-aligned footer. The
+  `HealthCheckListSkeleton` placeholder mirrors both branches so the page
+  no longer jumps when data resolves. No business logic, column order,
+  or query inputs changed.
+- f23f3c9: Gate decorative motion and blur effects behind
+  `usePerformance().isLowPower` on a focused set of high-traffic plugin
+  pages (Dashboard, Dependency map, System node, Notification bell,
+  Announcement banner / cards, Anomaly field overrides editor, SLO
+  attribution chart, Catalog droppable group). Hover scales, backdrop
+  blurs, `animate-pulse`/`animate-ping` accents, and entry transitions
+  now drop to static states on low-power devices; functional UX
+  transitions (Drawer/Dialog open-close, colour transitions) are left
+  alone.
+
+  Standardise the post-mutation error-toast voice on plugin pages by
+  migrating multi-clause `toast.error(extractErrorMessage(error, "Failed
+to X"))` call sites onto the `toastError(toast, "Failed to X", error)`
+  helper from `@checkstack/ui`. The helper applies the canonical
+  `"action: message"` prefix and 100-character truncation in one place,
+  and the now-orphaned `extractErrorMessage` imports are dropped from
+  the affected files. No business logic or component APIs changed.
+
+- f23f3c9: Standardise the empty / loading / error story on key list pages using
+  the shared `ListEmptyState`, `QueryErrorState`, and `Skeleton`
+  primitives from `@checkstack/ui`. Each affected page now branches
+  through the same `isLoading -> isError -> empty -> data` ladder, so
+  failed queries surface a retry-able inline error instead of silently
+  rendering an empty table, and loading states match the final layout
+  rather than flashing a generic spinner. No layout, business logic, or
+  query input shapes changed.
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/dashboard-frontend@0.7.5
+  - @checkstack/ui@1.10.0
+  - @checkstack/catalog-common@2.2.2
+  - @checkstack/dependency-common@1.1.2
+  - @checkstack/healthcheck-common@1.1.2
+  - @checkstack/slo-common@0.4.1
+  - @checkstack/tips-frontend@0.2.5
+  - @checkstack/signal-frontend@0.1.4
+
 ## 0.4.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/slo-frontend",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,16 +13,16 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/catalog-common": "2.2.0",
+    "@checkstack/catalog-common": "2.2.1",
     "@checkstack/common": "0.10.0",
-    "@checkstack/dashboard-frontend": "0.7.3",
-    "@checkstack/dependency-common": "1.1.0",
+    "@checkstack/dashboard-frontend": "0.7.4",
+    "@checkstack/dependency-common": "1.1.1",
     "@checkstack/frontend-api": "0.5.1",
-    "@checkstack/healthcheck-common": "1.1.0",
+    "@checkstack/healthcheck-common": "1.1.1",
     "@checkstack/signal-frontend": "0.1.3",
     "@checkstack/slo-common": "0.4.0",
-    "@checkstack/tips-frontend": "0.2.3",
-    "@checkstack/ui": "1.8.3",
+    "@checkstack/tips-frontend": "0.2.4",
+    "@checkstack/ui": "1.9.0",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",

package/src/components/AttributionChart.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { cn, usePerformance } from "@checkstack/ui";
 
 interface AttributionChartProps {
   attribution: Array<{
@@ -18,6 +19,7 @@ export const AttributionChart: React.FC<AttributionChartProps> = ({
   attribution,
   totalBudgetMinutes,
 }) => {
+  const { isLowPower } = usePerformance();
   if (totalBudgetMinutes <= 0) return;
 
   const selfMinutes = attribution
@@ -47,21 +49,30 @@ export const AttributionChart: React.FC<AttributionChartProps> = ({
       <div className="h-6 rounded-full overflow-hidden flex bg-muted/30 border border-border">
         {selfPercent > 0 && (
           <div
-            className="bg-destructive/80 transition-all duration-500"
+            className={cn(
+              "bg-destructive/80",
+              !isLowPower && "transition-all duration-500",
+            )}
             style={{ width: `${selfPercent}%` }}
             title={`Self: ${selfMinutes.toFixed(1)} min`}
           />
         )}
         {upstreamPercent > 0 && (
           <div
-            className="bg-amber-500/80 transition-all duration-500"
+            className={cn(
+              "bg-amber-500/80",
+              !isLowPower && "transition-all duration-500",
+            )}
             style={{ width: `${upstreamPercent}%` }}
             title={`Upstream: ${upstreamMinutes.toFixed(1)} min`}
           />
         )}
         {remainingPercent > 0 && (
           <div
-            className="bg-emerald-500/30 transition-all duration-500"
+            className={cn(
+              "bg-emerald-500/30",
+              !isLowPower && "transition-all duration-500",
+            )}
             style={{ width: `${remainingPercent}%` }}
             title={`Remaining: ${(totalBudgetMinutes - selfMinutes - upstreamMinutes).toFixed(1)} min`}
           />

package/src/pages/SloConfigPage.tsx

@@ -23,6 +23,7 @@ import {
   Badge,
   LoadingSpinner,
   EmptyState,
+  QueryErrorState,
   Table,
   TableHeader,
   TableRow,
@@ -32,6 +33,8 @@ import {
   useToast,
   ConfirmationModal,
   PageLayout,
+  ResponsiveTable,
+  MobileCardList,
 } from "@checkstack/ui";
 import { Plus, Target, Trash2, Edit2 } from "lucide-react";
 import { extractErrorMessage } from "@checkstack/common";
@@ -48,11 +51,12 @@ const SloConfigPageContent: React.FC = () => {
     sloAccess.slo.manage,
   );
 
+  const objectivesQuery = sloClient.listObjectives.useQuery({});
   const {
     data: objectivesData,
     isLoading: objectivesLoading,
     refetch: refetchObjectives,
-  } = sloClient.listObjectives.useQuery({});
+  } = objectivesQuery;
 
   const { data: systemsData, isLoading: systemsLoading } =
     catalogClient.getSystems.useQuery({});
@@ -60,6 +64,7 @@ const SloConfigPageContent: React.FC = () => {
   const objectives = objectivesData?.objectives ?? [];
   const systems = systemsData?.systems ?? [];
   const loading = objectivesLoading || systemsLoading;
+  const isError = objectivesQuery.isError;
 
   // Editor state
   const [editorOpen, setEditorOpen] = useState(false);
@@ -129,6 +134,21 @@ const SloConfigPageContent: React.FC = () => {
     }
   };
 
+  const renderStatusBadge = (
+    status: (typeof objectives)[number]["status"],
+  ) => {
+    if (status.isBreaching) {
+      return <Badge variant="destructive">Breaching</Badge>;
+    }
+    if (status.hasOpenDowntime) {
+      return <Badge variant="warning">Degraded</Badge>;
+    }
+    if (status.errorBudgetRemainingPercent <= 20) {
+      return <Badge variant="warning">At Risk</Badge>;
+    }
+    return <Badge variant="success">Healthy</Badge>;
+  };
+
   return (
     <PageLayout
       title="SLO Management"
@@ -164,6 +184,14 @@ const SloConfigPageContent: React.FC = () => {
             <div className="p-12 flex justify-center">
               <LoadingSpinner />
             </div>
+          ) : isError ? (
+            <div className="p-4">
+              <QueryErrorState
+                error={objectivesQuery.error}
+                onRetry={() => void objectivesQuery.refetch()}
+                resource="SLO objectives"
+              />
+            </div>
           ) : objectives.length === 0 ? (
             <EmptyState
               icon={<Target className="size-10" />}
@@ -184,63 +212,100 @@ const SloConfigPageContent: React.FC = () => {
               }
             />
           ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>System</TableHead>
-                  <TableHead>Target</TableHead>
-                  <TableHead>Window</TableHead>
-                  <TableHead>Exclusion Mode</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead className="w-24">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
+            <>
+              <ResponsiveTable>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>System</TableHead>
+                      <TableHead>Target</TableHead>
+                      <TableHead>Window</TableHead>
+                      <TableHead>Exclusion Mode</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead className="w-24">Actions</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {objectives.map((item) => (
+                      <TableRow key={item.objective.id}>
+                        <TableCell className="font-medium">
+                          {getSystemName(item.objective.systemId)}
+                        </TableCell>
+                        <TableCell>{item.objective.target}%</TableCell>
+                        <TableCell>{item.objective.windowDays}d</TableCell>
+                        <TableCell>
+                          {getExclusionBadge(
+                            item.objective.dependencyExclusion,
+                          )}
+                        </TableCell>
+                        <TableCell>
+                          {renderStatusBadge(item.status)}
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex gap-2">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleEdit(item.objective)}
+                            >
+                              <Edit2 className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() =>
+                                setDeleteId(item.objective.id)
+                              }
+                            >
+                              <Trash2 className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </ResponsiveTable>
+
+              <MobileCardList className="p-3">
                 {objectives.map((item) => (
-                  <TableRow key={item.objective.id}>
-                    <TableCell className="font-medium">
-                      {getSystemName(item.objective.systemId)}
-                    </TableCell>
-                    <TableCell>{item.objective.target}%</TableCell>
-                    <TableCell>{item.objective.windowDays}d</TableCell>
-                    <TableCell>
-                      {getExclusionBadge(
-                        item.objective.dependencyExclusion,
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      {item.status.isBreaching ? (
-                        <Badge variant="destructive">Breaching</Badge>
-                      ) : item.status.hasOpenDowntime ? (
-                        <Badge variant="warning">Degraded</Badge>
-                      ) : item.status.errorBudgetRemainingPercent <= 20 ? (
-                        <Badge variant="warning">At Risk</Badge>
-                      ) : (
-                        <Badge variant="success">Healthy</Badge>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleEdit(item.objective)}
-                        >
-                          <Edit2 className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => setDeleteId(item.objective.id)}
-                        >
-                          <Trash2 className="h-4 w-4 text-destructive" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
+                  <div
+                    key={item.objective.id}
+                    className="rounded-md border border-border bg-card p-3"
+                  >
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="font-medium truncate">
+                        {getSystemName(item.objective.systemId)}
+                      </span>
+                      {renderStatusBadge(item.status)}
+                    </div>
+                    <div className="mt-1 text-xs text-muted-foreground">
+                      {item.objective.target}% &middot;{" "}
+                      {item.objective.windowDays}d window
+                    </div>
+                    <div className="mt-2">
+                      {getExclusionBadge(item.objective.dependencyExclusion)}
+                    </div>
+                    <div className="mt-3 flex justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEdit(item.objective)}
+                      >
+                        <Edit2 className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setDeleteId(item.objective.id)}
+                      >
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </div>
                 ))}
-              </TableBody>
-            </Table>
+              </MobileCardList>
+            </>
           )}
         </CardContent>
       </Card>

package/src/pages/SloDetailPage.tsx

@@ -21,6 +21,8 @@ import {
   PageLayout,
   LoadingSpinner,
   Badge,
+  ListEmptyState,
+  QueryErrorState,
 } from "@checkstack/ui";
 import {
   Target,
@@ -39,10 +41,11 @@ const SloDetailPageContent: React.FC = () => {
   const sloClient = usePluginClient(SloApi);
   const catalogClient = usePluginClient(CatalogApi);
 
-  const { data, isLoading } = sloClient.getObjective.useQuery(
+  const objectiveQuery = sloClient.getObjective.useQuery(
     { id: sloId ?? "" },
     { enabled: !!sloId },
   );
+  const { data, isLoading, isError } = objectiveQuery;
 
   const { data: eventsData } = sloClient.getDowntimeEvents.useQuery(
     { objectiveId: sloId ?? "", limit: 20 },
@@ -77,7 +80,7 @@ const SloDetailPageContent: React.FC = () => {
 
   const events = eventsData?.events;
 
-  if (isLoading || !data) {
+  if (isLoading) {
     return (
       <PageLayout title="SLO Detail" icon={Target}>
         <div className="p-12 flex justify-center">
@@ -87,6 +90,30 @@ const SloDetailPageContent: React.FC = () => {
     );
   }
 
+  if (isError) {
+    return (
+      <PageLayout title="SLO Detail" icon={Target}>
+        <QueryErrorState
+          error={objectiveQuery.error}
+          onRetry={() => void objectiveQuery.refetch()}
+          resource="SLO"
+        />
+      </PageLayout>
+    );
+  }
+
+  if (!data) {
+    return (
+      <PageLayout title="SLO Detail" icon={Target}>
+        <ListEmptyState
+          resource="SLO"
+          description="This SLO does not exist or has been deleted. It may have been removed by another user or via GitOps."
+          icon={<Target className="h-10 w-10" />}
+        />
+      </PageLayout>
+    );
+  }
+
   const { objective, status } = data;
   const systemName = systemData?.name ?? objective.systemId;