@checkstack/healthcheck-frontend 0.3.0 → 0.4.1

package/src/hooks/useHealthCheckData.ts

@@ -1,6 +1,10 @@
-import { useEffect, useState, useMemo, useCallback } from "react";
-import { useApi, accessApiRef } from "@checkstack/frontend-api";
-import { healthCheckApiRef } from "../api";
+import { useMemo } from "react";
+import {
+  usePluginClient,
+  accessApiRef,
+  useApi,
+} from "@checkstack/frontend-api";
+import { HealthCheckApi } from "../api";
 import {
   healthCheckAccess,
   DEFAULT_RETENTION_CONFIG,
@@ -49,22 +53,6 @@ interface UseHealthCheckDataResult {
  * - The configured rawRetentionDays for the assignment
  *
  * Returns a ready-to-use context for HealthCheckDiagramSlot.
- *
- * @example
- * ```tsx
- * const { context, loading, hasAccess } = useHealthCheckData({
- *   systemId,
- *   configurationId,
- *   strategyId,
- *   dateRange: { startDate, endDate },
- * });
- *
- * if (!hasAccess) return <NoAccessMessage />;
- * if (loading) return <LoadingSpinner />;
- * if (!context) return null;
- *
- * return <ExtensionSlot slot={HealthCheckDiagramSlot} context={context} />;
- * ```
  */
 export function useHealthCheckData({
   systemId,
@@ -74,30 +62,13 @@ export function useHealthCheckData({
   limit = 100,
   offset = 0,
 }: UseHealthCheckDataProps): UseHealthCheckDataResult {
-  const api = useApi(healthCheckApiRef);
+  const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
 
   // Access state
-  const { allowed: hasAccess, loading: accessLoading } =
-    accessApi.useAccess(healthCheckAccess.details);
-
-  // Retention config state
-  const [retentionConfig, setRetentionConfig] = useState<RetentionConfig>(
-    DEFAULT_RETENTION_CONFIG
+  const { allowed: hasAccess, loading: accessLoading } = accessApi.useAccess(
+    healthCheckAccess.details
   );
-  const [retentionLoading, setRetentionLoading] = useState(true);
-
-  // Raw data state
-  const [rawRuns, setRawRuns] = useState<
-    TypedHealthCheckRun<Record<string, unknown>>[]
-  >([]);
-  const [rawLoading, setRawLoading] = useState(false);
-
-  // Aggregated data state
-  const [aggregatedBuckets, setAggregatedBuckets] = useState<
-    TypedAggregatedBucket<Record<string, unknown>>[]
-  >([]);
-  const [aggregatedLoading, setAggregatedLoading] = useState(false);
 
   // Calculate date range in days
   const dateRangeDays = useMemo(() => {
@@ -107,69 +78,64 @@ export function useHealthCheckData({
     );
   }, [dateRange.startDate, dateRange.endDate]);
 
+  // Query: Fetch retention config
+  const { data: retentionData, isLoading: retentionLoading } =
+    healthCheckClient.getRetentionConfig.useQuery(
+      { systemId, configurationId },
+      { enabled: !!systemId && !!configurationId && hasAccess }
+    );
+
+  const retentionConfig =
+    retentionData?.retentionConfig ?? DEFAULT_RETENTION_CONFIG;
+
   // Determine if we should use aggregated data
   const isAggregated = dateRangeDays > retentionConfig.rawRetentionDays;
 
-  // Fetch retention config on mount
-  useEffect(() => {
-    setRetentionLoading(true);
-    api
-      .getRetentionConfig({ systemId, configurationId })
-      .then((response) =>
-        setRetentionConfig(response.retentionConfig ?? DEFAULT_RETENTION_CONFIG)
-      )
-      .catch(() => {
-        // Fall back to default on error
-        setRetentionConfig(DEFAULT_RETENTION_CONFIG);
-      })
-      .finally(() => setRetentionLoading(false));
-  }, [api, systemId, configurationId]);
-
-  // Fetch raw data function - extracted for reuse by signal handler
-  const fetchRawData = useCallback(
-    (showLoading = true) => {
-      if (showLoading) {
-        setRawLoading(true);
-      }
-      api
-        .getDetailedHistory({
-          systemId,
-          configurationId,
-          startDate: dateRange.startDate,
-          // Don't pass endDate for live updates - backend defaults to 'now'
-          limit,
-          offset,
-        })
-        .then((response) => {
-          setRawRuns(
-            response.runs.map((r) => ({
-              id: r.id,
-              configurationId,
-              systemId,
-              status: r.status,
-              timestamp: r.timestamp,
-              latencyMs: r.latencyMs,
-              result: r.result,
-            }))
-          );
-        })
-        .finally(() => setRawLoading(false));
+  // Query: Fetch raw data (when in raw mode)
+  const {
+    data: rawData,
+    isLoading: rawLoading,
+    refetch: refetchRawData,
+  } = healthCheckClient.getDetailedHistory.useQuery(
+    {
+      systemId,
+      configurationId,
+      startDate: dateRange.startDate,
+      limit,
+      offset,
     },
-    [api, systemId, configurationId, dateRange.startDate, limit, offset]
+    {
+      enabled:
+        !!systemId &&
+        !!configurationId &&
+        hasAccess &&
+        !accessLoading &&
+        !retentionLoading &&
+        !isAggregated,
+    }
   );
 
-  // Fetch raw data when in raw mode
-  useEffect(() => {
-    if (!hasAccess || accessLoading || retentionLoading || isAggregated)
-      return;
-    fetchRawData(true);
-  }, [
-    fetchRawData,
-    hasAccess,
-    accessLoading,
-    retentionLoading,
-    isAggregated,
-  ]);
+  // Query: Fetch aggregated data (when in aggregated mode)
+  const bucketSize = dateRangeDays > 30 ? "daily" : "hourly";
+  const { data: aggregatedData, isLoading: aggregatedLoading } =
+    healthCheckClient.getDetailedAggregatedHistory.useQuery(
+      {
+        systemId,
+        configurationId,
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        bucketSize,
+      },
+      {
+        enabled:
+          !!systemId &&
+          !!configurationId &&
+          hasAccess &&
+          !accessLoading &&
+          !retentionLoading &&
+          isAggregated,
+      }
+    );
 
   // Listen for realtime health check updates to refresh data silently
   useSignal(HEALTH_CHECK_RUN_COMPLETED, ({ systemId: changedId }) => {
@@ -181,50 +147,35 @@ export function useHealthCheckData({
       !retentionLoading &&
       !isAggregated
     ) {
-      fetchRawData(false);
+      void refetchRawData();
     }
   });
 
-  // Fetch aggregated data when in aggregated mode
-  useEffect(() => {
-    if (
-      !hasAccess ||
-      accessLoading ||
-      retentionLoading ||
-      !isAggregated
-    )
-      return;
-
-    setAggregatedLoading(true);
-    // Use daily buckets for ranges > 30 days, hourly otherwise
-    const bucketSize = dateRangeDays > 30 ? "daily" : "hourly";
-    // Use detailed endpoint to get aggregatedResult since we have access
-    api
-      .getDetailedAggregatedHistory({
-        systemId,
-        configurationId,
-        startDate: dateRange.startDate,
-        endDate: dateRange.endDate,
-        bucketSize,
-      })
-      .then((response) => {
-        setAggregatedBuckets(
-          response.buckets as TypedAggregatedBucket<Record<string, unknown>>[]
-        );
-      })
-      .finally(() => setAggregatedLoading(false));
-  }, [
-    api,
-    systemId,
-    configurationId,
-    hasAccess,
-    accessLoading,
-    retentionLoading,
-    isAggregated,
-    dateRangeDays,
-    dateRange.startDate,
-    dateRange.endDate,
-  ]);
+  // Transform raw runs to typed format
+  const rawRuns = useMemo((): TypedHealthCheckRun<
+    Record<string, unknown>
+  >[] => {
+    if (!rawData?.runs) return [];
+    return rawData.runs.map((r) => ({
+      id: r.id,
+      configurationId,
+      systemId,
+      status: r.status,
+      timestamp: r.timestamp,
+      latencyMs: r.latencyMs,
+      result: r.result as Record<string, unknown>,
+    }));
+  }, [rawData, configurationId, systemId]);
+
+  // Transform aggregated buckets
+  const aggregatedBuckets = useMemo((): TypedAggregatedBucket<
+    Record<string, unknown>
+  >[] => {
+    if (!aggregatedData?.buckets) return [];
+    return aggregatedData.buckets as TypedAggregatedBucket<
+      Record<string, unknown>
+    >[];
+  }, [aggregatedData]);
 
   const context = useMemo((): HealthCheckDiagramSlotContext | undefined => {
     if (!hasAccess || accessLoading || retentionLoading) {

package/src/index.tsx

@@ -1,11 +1,8 @@
 import {
   createFrontendPlugin,
   createSlotExtension,
-  rpcApiRef,
-  type ApiRef,
   UserMenuItemsSlot,
 } from "@checkstack/frontend-api";
-import { healthCheckApiRef, type HealthCheckApiClient } from "./api";
 import { HealthCheckConfigPage } from "./pages/HealthCheckConfigPage";
 import { HealthCheckHistoryPage } from "./pages/HealthCheckHistoryPage";
 import { HealthCheckHistoryDetailPage } from "./pages/HealthCheckHistoryDetailPage";
@@ -23,7 +20,6 @@ import {
 } from "@checkstack/catalog-common";
 import {
   healthcheckRoutes,
-  HealthCheckApi,
   pluginMetadata,
 } from "@checkstack/healthcheck-common";
 
@@ -64,18 +60,8 @@ export default createFrontendPlugin({
       accessRule: healthCheckAccess.details,
     },
   ],
-  apis: [
-    {
-      ref: healthCheckApiRef,
-      factory: (deps: {
-        get: <T>(ref: ApiRef<T>) => T;
-      }): HealthCheckApiClient => {
-        const rpcApi = deps.get(rpcApiRef);
-        // HealthCheckApiClient is just the RPC contract - return it directly
-        return rpcApi.forPlugin(HealthCheckApi);
-      },
-    },
-  ],
+  // No APIs needed - components use usePluginClient() directly
+  apis: [],
   extensions: [
     createSlotExtension(UserMenuItemsSlot, {
       id: "healthcheck.user-menu.items",

package/src/pages/HealthCheckConfigPage.tsx

@@ -1,39 +1,42 @@
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
-  useApi,
+  usePluginClient,
   wrapInSuspense,
   accessApiRef,
+  useApi,
 } from "@checkstack/frontend-api";
-import { healthCheckApiRef } from "../api";
+import { HealthCheckApi } from "../api";
 import {
   HealthCheckConfiguration,
-  HealthCheckStrategyDto,
   CreateHealthCheckConfiguration,
   healthcheckRoutes,
   healthCheckAccess,
 } from "@checkstack/healthcheck-common";
 import { HealthCheckList } from "../components/HealthCheckList";
 import { HealthCheckEditor } from "../components/HealthCheckEditor";
-import { Button, ConfirmationModal, PageLayout } from "@checkstack/ui";
+import {
+  Button,
+  ConfirmationModal,
+  PageLayout,
+  useToast,
+} from "@checkstack/ui";
 import { Plus, History } from "lucide-react";
 import { Link } from "react-router-dom";
 import { resolveRoute } from "@checkstack/common";
 
 const HealthCheckConfigPageContent = () => {
-  const api = useApi(healthCheckApiRef);
+  const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
+  const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { allowed: canRead, loading: accessLoading } =
-    accessApi.useAccess(healthCheckAccess.configuration.read);
+  const { allowed: canRead, loading: accessLoading } = accessApi.useAccess(
+    healthCheckAccess.configuration.read
+  );
   const { allowed: canManage } = accessApi.useAccess(
     healthCheckAccess.configuration.manage
   );
 
-  const [configurations, setConfigurations] = useState<
-    HealthCheckConfiguration[]
-  >([]);
-  const [strategies, setStrategies] = useState<HealthCheckStrategyDto[]>([]);
   const [isEditorOpen, setIsEditorOpen] = useState(false);
   const [editingConfig, setEditingConfig] = useState<
     HealthCheckConfiguration | undefined
@@ -42,20 +45,17 @@ const HealthCheckConfigPageContent = () => {
   // Delete modal state
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [idToDelete, setIdToDelete] = useState<string | undefined>();
-  const [isDeleting, setIsDeleting] = useState(false);
-
-  const fetchData = async () => {
-    const [{ configurations: configs }, strats] = await Promise.all([
-      api.getConfigurations(),
-      api.getStrategies(),
-    ]);
-    setConfigurations(configs);
-    setStrategies(strats);
-  };
 
-  useEffect(() => {
-    fetchData();
-  }, [api]);
+  // Fetch configurations with useQuery
+  const { data: configurationsData, refetch: refetchConfigurations } =
+    healthCheckClient.getConfigurations.useQuery({});
+
+  // Fetch strategies with useQuery
+  const { data: strategies = [] } = healthCheckClient.getStrategies.useQuery(
+    {}
+  );
+
+  const configurations = configurationsData?.configurations ?? [];
 
   // Handle ?action=create URL parameter (from command palette)
   useEffect(() => {
@@ -68,6 +68,38 @@ const HealthCheckConfigPageContent = () => {
     }
   }, [searchParams, canManage, setSearchParams]);
 
+  // Mutations
+  const createMutation = healthCheckClient.createConfiguration.useMutation({
+    onSuccess: () => {
+      setIsEditorOpen(false);
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to create");
+    },
+  });
+
+  const updateMutation = healthCheckClient.updateConfiguration.useMutation({
+    onSuccess: () => {
+      setIsEditorOpen(false);
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to update");
+    },
+  });
+
+  const deleteMutation = healthCheckClient.deleteConfiguration.useMutation({
+    onSuccess: () => {
+      setIsDeleteModalOpen(false);
+      setIdToDelete(undefined);
+      void refetchConfigurations();
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : "Failed to delete");
+    },
+  });
+
   const handleCreate = () => {
     setEditingConfig(undefined);
     setIsEditorOpen(true);
@@ -83,25 +115,17 @@ const HealthCheckConfigPageContent = () => {
     setIsDeleteModalOpen(true);
   };
 
-  const confirmDelete = async () => {
+  const confirmDelete = () => {
     if (!idToDelete) return;
-    setIsDeleting(true);
-    try {
-      await api.deleteConfiguration(idToDelete);
-      await fetchData();
-    } finally {
-      setIsDeleting(false);
-      setIsDeleteModalOpen(false);
-      setIdToDelete(undefined);
-    }
+    deleteMutation.mutate(idToDelete);
   };
 
   const handleSave = async (data: CreateHealthCheckConfiguration) => {
-    await (editingConfig
-      ? api.updateConfiguration({ id: editingConfig.id, body: data })
-      : api.createConfiguration(data));
-    setIsEditorOpen(false);
-    await fetchData();
+    if (editingConfig) {
+      updateMutation.mutate({ id: editingConfig.id, body: data });
+    } else {
+      createMutation.mutate(data);
+    }
   };
 
   const handleEditorClose = () => {
@@ -153,7 +177,7 @@ const HealthCheckConfigPageContent = () => {
         message="Are you sure you want to delete this health check configuration? This action cannot be undone."
         confirmText="Delete"
         variant="danger"
-        isLoading={isDeleting}
+        isLoading={deleteMutation.isPending}
       />
     </PageLayout>
   );

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -1,18 +1,20 @@
 import { useState } from "react";
 import {
-  useApi,
   wrapInSuspense,
   accessApiRef,
+  useApi,
+  usePluginClient,
 } from "@checkstack/frontend-api";
-import { healthCheckApiRef } from "../api";
 import {
   healthcheckRoutes,
   healthCheckAccess,
+  HealthCheckApi,
 } from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   PageLayout,
   usePagination,
+  usePaginationSync,
   Card,
   CardHeader,
   CardTitle,
@@ -34,33 +36,32 @@ const HealthCheckHistoryDetailPageContent = () => {
     configurationId: string;
   }>();
 
-  const api = useApi(healthCheckApiRef);
+  const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
-  const { allowed: canManage, loading: accessLoading } =
-    accessApi.useAccess(healthCheckAccess.configuration.manage);
+  const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
+    healthCheckAccess.configuration.manage
+  );
 
   const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
 
-  const {
-    items: runs,
-    loading,
-    pagination,
-  } = usePagination({
-    fetchFn: (params) =>
-      api.getDetailedHistory({
-        systemId,
-        configurationId,
-        startDate: params.startDate,
-        endDate: params.endDate,
-        limit: params.limit,
-        offset: params.offset,
-      }),
-    getItems: (response) => response.runs as HealthCheckRunDetailed[],
-    getTotal: (response) => response.total,
-    defaultLimit: 20,
-    extraParams: { startDate: dateRange.startDate, endDate: dateRange.endDate },
+  // Pagination state
+  const pagination = usePagination({ defaultLimit: 20 });
+
+  // Fetch data with useQuery
+  const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({
+    systemId,
+    configurationId,
+    startDate: dateRange.startDate,
+    endDate: dateRange.endDate,
+    limit: pagination.limit,
+    offset: pagination.offset,
   });
 
+  // Sync total from response
+  usePaginationSync(pagination, data?.total);
+
+  const runs = (data?.runs ?? []) as HealthCheckRunDetailed[];
+
   return (
     <PageLayout
       title="Health Check Run History"
@@ -88,7 +89,7 @@ const HealthCheckHistoryDetailPageContent = () => {
           />
           <HealthCheckRunsTable
             runs={runs}
-            loading={loading}
+            loading={isLoading}
             emptyMessage="No health check runs found for this configuration."
             pagination={pagination}
           />

package/src/pages/HealthCheckHistoryPage.tsx

@@ -1,12 +1,13 @@
 import {
-  useApi,
   wrapInSuspense,
   accessApiRef,
+  useApi,
+  usePluginClient,
 } from "@checkstack/frontend-api";
-import { healthCheckApiRef } from "../api";
 import {
   PageLayout,
   usePagination,
+  usePaginationSync,
   Card,
   CardHeader,
   CardTitle,
@@ -16,29 +17,32 @@ import {
   HealthCheckRunsTable,
   type HealthCheckRunDetailed,
 } from "../components/HealthCheckRunsTable";
-import { healthCheckAccess } from "@checkstack/healthcheck-common";
+import {
+  healthCheckAccess,
+  HealthCheckApi,
+} from "@checkstack/healthcheck-common";
 
 const HealthCheckHistoryPageContent = () => {
-  const api = useApi(healthCheckApiRef);
+  const healthCheckClient = usePluginClient(HealthCheckApi);
   const accessApi = useApi(accessApiRef);
-  const { allowed: canManage, loading: accessLoading } =
-    accessApi.useAccess(healthCheckAccess.configuration.manage);
+  const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
+    healthCheckAccess.configuration.manage
+  );
 
-  const {
-    items: runs,
-    loading,
-    pagination,
-  } = usePagination({
-    fetchFn: (params: { limit: number; offset: number }) =>
-      api.getDetailedHistory({
-        limit: params.limit,
-        offset: params.offset,
-      }),
-    getItems: (response) => response.runs as HealthCheckRunDetailed[],
-    getTotal: (response) => response.total,
-    defaultLimit: 20,
+  // Pagination state
+  const pagination = usePagination({ defaultLimit: 20 });
+
+  // Fetch data with useQuery
+  const { data, isLoading } = healthCheckClient.getDetailedHistory.useQuery({
+    limit: pagination.limit,
+    offset: pagination.offset,
   });
 
+  // Sync total from response
+  usePaginationSync(pagination, data?.total);
+
+  const runs = (data?.runs ?? []) as HealthCheckRunDetailed[];
+
   return (
     <PageLayout
       title="Health Check History"
@@ -53,7 +57,7 @@ const HealthCheckHistoryPageContent = () => {
         <CardContent>
           <HealthCheckRunsTable
             runs={runs}
-            loading={loading}
+            loading={isLoading}
             showFilterColumns
             pagination={pagination}
           />