@checkstack/healthcheck-frontend 0.19.4 → 0.19.5

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # @checkstack/healthcheck-frontend
 
+## 0.19.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: Establish the canonical optimistic-UI pattern for oRPC mutations
+  (`onMutate` snapshot / patch, `onError` rollback, `onSettled`
+  invalidate) and apply it to the two highest-frequency toggles where
+  perceived latency was most visible:
+
+  - `markAsRead` on the Notifications page — clicking the check on a
+    notification card now flips the read state immediately instead of
+    waiting for the round-trip.
+  - `pauseConfiguration` / `resumeConfiguration` on the Health Check
+    Config page — pause/resume now flip the row's badge instantly,
+    rolling back on server error.
+
+  The wrapper type for `useMutation` on each plugin client gained an
+  optional `TContext` generic so optimistic sites can return a snapshot
+  from `onMutate` and consume it in `onError` without `unknown` casts.
+  The runtime behaviour and the auto-invalidation on success are
+  unchanged; the change is additive on the type surface only.
+
+  Full pattern and "when NOT to use it" guidance live in
+  `docs/frontend/optimistic-updates.md`.
+
+- 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]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/auth-frontend@0.6.5
+  - @checkstack/frontend-api@0.5.2
+  - @checkstack/dashboard-frontend@0.7.5
+  - @checkstack/gitops-frontend@0.4.5
+  - @checkstack/ui@1.10.0
+  - @checkstack/anomaly-common@1.2.2
+  - @checkstack/catalog-common@2.2.2
+  - @checkstack/healthcheck-common@1.1.2
+  - @checkstack/satellite-common@0.5.2
+  - @checkstack/tips-frontend@0.2.5
+  - @checkstack/signal-frontend@0.1.4
+
 ## 0.19.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
@@ -13,18 +13,18 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/anomaly-common": "1.2.0",
-    "@checkstack/auth-frontend": "0.6.3",
-    "@checkstack/catalog-common": "2.2.0",
+    "@checkstack/anomaly-common": "1.2.1",
+    "@checkstack/auth-frontend": "0.6.4",
+    "@checkstack/catalog-common": "2.2.1",
     "@checkstack/common": "0.10.0",
-    "@checkstack/dashboard-frontend": "0.7.3",
+    "@checkstack/dashboard-frontend": "0.7.4",
     "@checkstack/frontend-api": "0.5.1",
-    "@checkstack/gitops-frontend": "0.4.3",
-    "@checkstack/healthcheck-common": "1.1.0",
-    "@checkstack/satellite-common": "0.5.0",
+    "@checkstack/gitops-frontend": "0.4.4",
+    "@checkstack/healthcheck-common": "1.1.1",
+    "@checkstack/satellite-common": "0.5.1",
     "@checkstack/signal-frontend": "0.1.3",
-    "@checkstack/tips-frontend": "0.2.3",
-    "@checkstack/ui": "1.8.3",
+    "@checkstack/tips-frontend": "0.2.4",
+    "@checkstack/ui": "1.9.0",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "date-fns": "^4.1.0",

package/src/components/HealthCheckList.tsx

@@ -12,6 +12,10 @@ import {
   TableRow,
   Button,
   Badge,
+  Skeleton,
+  ResponsiveTable,
+  MobileCardList,
+  Card,
 } from "@checkstack/ui";
 import { Trash2, Edit, Pause, Play } from "lucide-react";
 import { useProvenanceLock } from "@checkstack/gitops-frontend";
@@ -40,26 +44,20 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
   };
 
   return (
-    <div className="rounded-md border bg-card">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Name</TableHead>
-            <TableHead>Strategy</TableHead>
-            <TableHead>Interval (s)</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {configurations.length === 0 ? (
+    <>
+      <ResponsiveTable className="rounded-md border bg-card">
+        <Table>
+          <TableHeader>
             <TableRow>
-              <TableCell colSpan={5} className="h-24 text-center">
-                No health checks configured.
-              </TableCell>
+              <TableHead>Name</TableHead>
+              <TableHead>Strategy</TableHead>
+              <TableHead>Interval (s)</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
             </TableRow>
-          ) : (
-            configurations.map((config) => (
+          </TableHeader>
+          <TableBody>
+            {configurations.map((config) => (
               <HealthCheckRow
                 key={config.id}
                 config={config}
@@ -70,11 +68,107 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
                 onResume={onResume}
                 canManage={canManage}
               />
-            ))
-          )}
-        </TableBody>
-      </Table>
-    </div>
+            ))}
+          </TableBody>
+        </Table>
+      </ResponsiveTable>
+
+      <MobileCardList>
+        {configurations.map((config) => (
+          <HealthCheckMobileCard
+            key={config.id}
+            config={config}
+            strategyName={getStrategyName(config.strategyId)}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            onPause={onPause}
+            onResume={onResume}
+            canManage={canManage}
+          />
+        ))}
+      </MobileCardList>
+    </>
+  );
+};
+
+interface HealthCheckListSkeletonProps {
+  /**
+   * Number of placeholder rows to render. Defaults to 4 so the skeleton
+   * roughly matches a typical first-page configuration list.
+   */
+  rows?: number;
+}
+
+/**
+ * HealthCheckListSkeleton mirrors the shape of {@link HealthCheckList} so
+ * the page doesn't jump on load. Renders the same table chrome with
+ * `Skeleton` placeholders in each cell on desktop, and a stacked card
+ * skeleton on mobile to mirror the {@link MobileCardList} layout.
+ */
+export const HealthCheckListSkeleton: React.FC<
+  HealthCheckListSkeletonProps
+> = ({ rows = 4 }) => {
+  return (
+    <>
+      <ResponsiveTable className="rounded-md border bg-card">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Strategy</TableHead>
+              <TableHead>Interval (s)</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rows }, (_, index) => (
+              <TableRow key={index}>
+                <TableCell>
+                  <Skeleton className="h-4 w-32" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-24" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-4 w-12" />
+                </TableCell>
+                <TableCell>
+                  <Skeleton className="h-5 w-16 rounded-full" />
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-2">
+                    <Skeleton className="h-8 w-8" />
+                    <Skeleton className="h-8 w-8" />
+                    <Skeleton className="h-8 w-8" />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </ResponsiveTable>
+
+      <MobileCardList>
+        {Array.from({ length: rows }, (_, index) => (
+          <Card key={index} className="p-3">
+            <div className="flex items-center justify-between gap-2">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-5 w-16 rounded-full" />
+            </div>
+            <div className="mt-2 flex items-center gap-2">
+              <Skeleton className="h-3 w-24" />
+              <Skeleton className="h-3 w-12" />
+            </div>
+            <div className="mt-3 flex justify-end gap-2">
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-8 w-8" />
+              <Skeleton className="h-8 w-8" />
+            </div>
+          </Card>
+        ))}
+      </MobileCardList>
+    </>
   );
 };
 
@@ -115,57 +209,139 @@ const HealthCheckRow: React.FC<HealthCheckRowProps> = ({
         )}
       </TableCell>
       <TableCell className="text-right">
-        <div className="flex justify-end gap-2">
-          {canManage &&
-            onPause &&
-            onResume &&
-            (config.paused ? (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onResume(config.id)}
-                title={isLocked ? "Managed by GitOps" : "Resume health check"}
-                disabled={isLocked}
-              >
-                <Play className="h-4 w-4" />
-              </Button>
-            ) : (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onPause(config.id)}
-                title={isLocked ? "Managed by GitOps" : "Pause health check"}
-                disabled={isLocked}
-              >
-                <Pause className="h-4 w-4" />
-              </Button>
-            ))}
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => onEdit(config)}
-            title={
-              isLocked
-                ? "View configuration (Managed by GitOps)"
-                : "Edit configuration"
-            }
-          >
-            <Edit className="h-4 w-4" />
-          </Button>
-          {canManage && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="text-destructive hover:text-destructive"
-              onClick={() => onDelete(config.id)}
-              disabled={isLocked}
-              title={isLocked ? "Managed by GitOps" : "Delete configuration"}
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          )}
-        </div>
+        <HealthCheckActionButtons
+          config={config}
+          isLocked={isLocked}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onPause={onPause}
+          onResume={onResume}
+          canManage={canManage}
+        />
       </TableCell>
     </TableRow>
   );
 };
+
+interface HealthCheckMobileCardProps {
+  config: HealthCheckConfiguration;
+  strategyName: string;
+  onEdit: (config: HealthCheckConfiguration) => void;
+  onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage: boolean;
+}
+
+const HealthCheckMobileCard: React.FC<HealthCheckMobileCardProps> = ({
+  config,
+  strategyName,
+  onEdit,
+  onDelete,
+  onPause,
+  onResume,
+  canManage,
+}) => {
+  const { isLocked } = useProvenanceLock({
+    kind: "Healthcheck",
+    entityId: config.id,
+  });
+
+  return (
+    <Card className={`p-3 ${config.paused ? "opacity-60" : ""}`}>
+      <div className="flex items-start justify-between gap-2">
+        <span className="font-medium truncate">{config.name}</span>
+        {config.paused ? (
+          <Badge variant="secondary">Paused</Badge>
+        ) : (
+          <Badge variant="default">Active</Badge>
+        )}
+      </div>
+      <div className="mt-1 text-xs text-muted-foreground">
+        {strategyName} &middot; every {config.intervalSeconds}s
+      </div>
+      <div className="mt-3 flex justify-end gap-2">
+        <HealthCheckActionButtons
+          config={config}
+          isLocked={isLocked}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          onPause={onPause}
+          onResume={onResume}
+          canManage={canManage}
+        />
+      </div>
+    </Card>
+  );
+};
+
+interface HealthCheckActionButtonsProps {
+  config: HealthCheckConfiguration;
+  isLocked: boolean;
+  onEdit: (config: HealthCheckConfiguration) => void;
+  onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage: boolean;
+}
+
+const HealthCheckActionButtons: React.FC<HealthCheckActionButtonsProps> = ({
+  config,
+  isLocked,
+  onEdit,
+  onDelete,
+  onPause,
+  onResume,
+  canManage,
+}) => (
+  <div className="flex justify-end gap-2">
+    {canManage &&
+      onPause &&
+      onResume &&
+      (config.paused ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onResume(config.id)}
+          title={isLocked ? "Managed by GitOps" : "Resume health check"}
+          disabled={isLocked}
+        >
+          <Play className="h-4 w-4" />
+        </Button>
+      ) : (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onPause(config.id)}
+          title={isLocked ? "Managed by GitOps" : "Pause health check"}
+          disabled={isLocked}
+        >
+          <Pause className="h-4 w-4" />
+        </Button>
+      ))}
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => onEdit(config)}
+      title={
+        isLocked
+          ? "View configuration (Managed by GitOps)"
+          : "Edit configuration"
+      }
+    >
+      <Edit className="h-4 w-4" />
+    </Button>
+    {canManage && (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="text-destructive hover:text-destructive"
+        onClick={() => onDelete(config.id)}
+        disabled={isLocked}
+        title={isLocked ? "Managed by GitOps" : "Delete configuration"}
+      >
+        <Trash2 className="h-4 w-4" />
+      </Button>
+    )}
+  </div>
+);

package/src/pages/HealthCheckConfigPage.tsx

@@ -1,7 +1,8 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useSearchParams, useNavigate } from "react-router-dom";
 import {
   usePluginClient,
+  useQueryClient,
   wrapInSuspense,
   accessApiRef,
   useApi,
@@ -14,20 +15,36 @@ import {
   pluginMetadata as healthcheckPluginMetadata,
 } from "@checkstack/healthcheck-common";
 import { Tip } from "@checkstack/tips-frontend";
-import { HealthCheckList } from "../components/HealthCheckList";
+import {
+  HealthCheckList,
+  HealthCheckListSkeleton,
+} from "../components/HealthCheckList";
 import {
   Button,
   ConfirmationModal,
+  ListEmptyState,
   PageLayout,
+  QueryErrorState,
   useToast,
+  toastError,
 } from "@checkstack/ui";
 import { Plus, History, Activity } from "lucide-react";
 import { Link } from "react-router-dom";
-import { resolveRoute, extractErrorMessage} from "@checkstack/common";
+import { resolveRoute } from "@checkstack/common";
 import { useState } from "react";
 
+/**
+ * Shape of the `healthcheck.getConfigurations` query output. Threaded
+ * through the optimistic pause/resume patches so cache reads/writes
+ * match the loader's surface.
+ */
+type ConfigurationsQueryData = {
+  configurations: HealthCheckConfiguration[];
+};
+
 const HealthCheckConfigPageContent = () => {
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const queryClient = useQueryClient();
   const accessApi = useApi(accessApiRef);
   const toast = useToast();
   const navigate = useNavigate();
@@ -43,9 +60,26 @@ const HealthCheckConfigPageContent = () => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [idToDelete, setIdToDelete] = useState<string | undefined>();
 
+  // Mirrors oRPC's `generateOperationKey([path], { type, input })` for
+  // the parameterless `getConfigurations` loader. Captured in a memo so
+  // the pause/resume optimistic patches address the exact same cache
+  // entry the loader writes. See `docs/frontend/optimistic-updates.md`
+  // for the query-key contract.
+  const configurationsQueryKey = useMemo(
+    () =>
+      [
+        ["healthcheck", "getConfigurations"],
+        { input: {}, type: "query" },
+      ] as const,
+    [],
+  );
+
   // Fetch configurations with useQuery
-  const { data: configurationsData, refetch: refetchConfigurations } =
-    healthCheckClient.getConfigurations.useQuery({});
+  const configurationsQuery = healthCheckClient.getConfigurations.useQuery({});
+  const {
+    data: configurationsData,
+    refetch: refetchConfigurations,
+  } = configurationsQuery;
 
   // Fetch strategies with useQuery
   const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
@@ -72,25 +106,85 @@ const HealthCheckConfigPageContent = () => {
       void refetchConfigurations();
     },
     onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to delete"));
+      toastError(toast, "Failed to delete health check", error);
     },
   });
 
-  const pauseMutation = healthCheckClient.pauseConfiguration.useMutation({
-    onSuccess: () => {
-      void refetchConfigurations();
+  // Mutation: Pause configuration — optimistic.
+  //
+  // Toggle, low risk; same four-step pattern as `markAsRead` on the
+  // notifications page (see `docs/frontend/optimistic-updates.md`):
+  // 1. onMutate flips `paused: true` on the matching row in the cache.
+  // 2. onError rolls back from the snapshot, then surfaces a toast.
+  // 3. onSettled invalidates so server truth settles in either branch.
+  // 4. No success toast — the row's pause badge IS the feedback.
+  const pauseMutation = healthCheckClient.pauseConfiguration.useMutation<{
+    previous: ConfigurationsQueryData | undefined;
+  }>({
+    onMutate: async (configId) => {
+      await queryClient.cancelQueries({ queryKey: configurationsQueryKey });
+      const previous = queryClient.getQueryData<ConfigurationsQueryData>(
+        configurationsQueryKey,
+      );
+      if (previous) {
+        queryClient.setQueryData<ConfigurationsQueryData>(
+          configurationsQueryKey,
+          {
+            ...previous,
+            configurations: previous.configurations.map((c) =>
+              c.id === configId ? { ...c, paused: true } : c,
+            ),
+          },
+        );
+      }
+      return { previous };
     },
-    onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to pause"));
+    onError: (error, _vars, ctx) => {
+      if (ctx?.previous) {
+        queryClient.setQueryData(configurationsQueryKey, ctx.previous);
+      }
+      toastError(toast, "Failed to pause health check", error);
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: configurationsQueryKey,
+      });
     },
   });
 
-  const resumeMutation = healthCheckClient.resumeConfiguration.useMutation({
-    onSuccess: () => {
-      void refetchConfigurations();
+  // Mutation: Resume configuration — optimistic. Mirror of `pause`
+  // with `paused: false`. See `pauseMutation` above for the contract.
+  const resumeMutation = healthCheckClient.resumeConfiguration.useMutation<{
+    previous: ConfigurationsQueryData | undefined;
+  }>({
+    onMutate: async (configId) => {
+      await queryClient.cancelQueries({ queryKey: configurationsQueryKey });
+      const previous = queryClient.getQueryData<ConfigurationsQueryData>(
+        configurationsQueryKey,
+      );
+      if (previous) {
+        queryClient.setQueryData<ConfigurationsQueryData>(
+          configurationsQueryKey,
+          {
+            ...previous,
+            configurations: previous.configurations.map((c) =>
+              c.id === configId ? { ...c, paused: false } : c,
+            ),
+          },
+        );
+      }
+      return { previous };
     },
-    onError: (error) => {
-      toast.error(extractErrorMessage(error, "Failed to resume"));
+    onError: (error, _vars, ctx) => {
+      if (ctx?.previous) {
+        queryClient.setQueryData(configurationsQueryKey, ctx.previous);
+      }
+      toastError(toast, "Failed to resume health check", error);
+    },
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: configurationsQueryKey,
+      });
     },
   });
 
@@ -145,15 +239,30 @@ const HealthCheckConfigPageContent = () => {
         </div>
       }
     >
-      <HealthCheckList
-        configurations={configurations}
-        strategies={strategies}
-        onEdit={handleEdit}
-        onDelete={handleDelete}
-        onPause={(id) => pauseMutation.mutate(id)}
-        onResume={(id) => resumeMutation.mutate(id)}
-        canManage={canManage}
-      />
+      {configurationsQuery.isLoading ? (
+        <HealthCheckListSkeleton />
+      ) : configurationsQuery.isError ? (
+        <QueryErrorState
+          error={configurationsQuery.error}
+          onRetry={() => void configurationsQuery.refetch()}
+          resource="health checks"
+        />
+      ) : configurations.length === 0 ? (
+        <ListEmptyState
+          resource="health checks"
+          description="No health checks have been configured yet. Create one to start monitoring a system."
+        />
+      ) : (
+        <HealthCheckList
+          configurations={configurations}
+          strategies={strategies}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
+          onPause={(id) => pauseMutation.mutate(id)}
+          onResume={(id) => resumeMutation.mutate(id)}
+          canManage={canManage}
+        />
+      )}
 
       <ConfirmationModal
         isOpen={isDeleteModalOpen}