@checkstack/healthcheck-frontend 0.2.0 → 0.4.0

package/src/hooks/useHealthCheckData.ts

@@ -1,8 +1,12 @@
-import { useEffect, useState, useMemo, useCallback } from "react";
-import { useApi, permissionApiRef } from "@checkstack/frontend-api";
-import { healthCheckApiRef } from "../api";
+import { useMemo } from "react";
 import {
-  permissions,
+  usePluginClient,
+  accessApiRef,
+  useApi,
+} from "@checkstack/frontend-api";
+import { HealthCheckApi } from "../api";
+import {
+  healthCheckAccess,
   DEFAULT_RETENTION_CONFIG,
   type RetentionConfig,
   HEALTH_CHECK_RUN_COMPLETED,
@@ -36,10 +40,10 @@ interface UseHealthCheckDataResult {
   isAggregated: boolean;
   /** The resolved retention config */
   retentionConfig: RetentionConfig;
-  /** Whether user has permission to view detailed data */
-  hasPermission: boolean;
-  /** Whether permission is still loading */
-  permissionLoading: boolean;
+  /** Whether user has access to view detailed data */
+  hasAccess: boolean;
+  /** Whether access is still loading */
+  accessLoading: boolean;
 }
 
 /**
@@ -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, hasPermission } = useHealthCheckData({
- *   systemId,
- *   configurationId,
- *   strategyId,
- *   dateRange: { startDate, endDate },
- * });
- *
- * if (!hasPermission) return <NoPermissionMessage />;
- * 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 permissionApi = useApi(permissionApiRef);
-
-  // Permission state
-  const { allowed: hasPermission, loading: permissionLoading } =
-    permissionApi.usePermission(permissions.healthCheckDetailsRead.id);
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+  const accessApi = useApi(accessApiRef);
 
-  // Retention config state
-  const [retentionConfig, setRetentionConfig] = useState<RetentionConfig>(
-    DEFAULT_RETENTION_CONFIG
+  // Access state
+  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,127 +78,107 @@ 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 (!hasPermission || permissionLoading || retentionLoading || isAggregated)
-      return;
-    fetchRawData(true);
-  }, [
-    fetchRawData,
-    hasPermission,
-    permissionLoading,
-    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 }) => {
-    // Only refresh if we're in raw mode (not aggregated) and have permission
+    // Only refresh if we're in raw mode (not aggregated) and have access
     if (
       changedId === systemId &&
-      hasPermission &&
-      !permissionLoading &&
+      hasAccess &&
+      !accessLoading &&
       !retentionLoading &&
       !isAggregated
     ) {
-      fetchRawData(false);
+      void refetchRawData();
     }
   });
 
-  // Fetch aggregated data when in aggregated mode
-  useEffect(() => {
-    if (
-      !hasPermission ||
-      permissionLoading ||
-      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 permission
-    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,
-    hasPermission,
-    permissionLoading,
-    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 (!hasPermission || permissionLoading || retentionLoading) {
+    if (!hasAccess || accessLoading || retentionLoading) {
       return undefined;
     }
 
@@ -249,8 +200,8 @@ export function useHealthCheckData({
       runs: rawRuns,
     };
   }, [
-    hasPermission,
-    permissionLoading,
+    hasAccess,
+    accessLoading,
     retentionLoading,
     isAggregated,
     systemId,
@@ -261,7 +212,7 @@ export function useHealthCheckData({
   ]);
 
   const loading =
-    permissionLoading ||
+    accessLoading ||
     retentionLoading ||
     (isAggregated ? aggregatedLoading : rawLoading);
 
@@ -270,7 +221,7 @@ export function useHealthCheckData({
     loading,
     isAggregated,
     retentionConfig,
-    hasPermission,
-    permissionLoading,
+    hasAccess,
+    accessLoading,
   };
 }

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";
@@ -13,7 +10,7 @@ import { HealthCheckMenuItems } from "./components/HealthCheckMenuItems";
 import { HealthCheckSystemOverview } from "./components/HealthCheckSystemOverview";
 import { SystemHealthCheckAssignment } from "./components/SystemHealthCheckAssignment";
 import { SystemHealthBadge } from "./components/SystemHealthBadge";
-import { permissions } from "@checkstack/healthcheck-common";
+import { healthCheckAccess } from "@checkstack/healthcheck-common";
 import { autoChartExtension } from "./auto-charts";
 
 import {
@@ -23,7 +20,6 @@ import {
 } from "@checkstack/catalog-common";
 import {
   healthcheckRoutes,
-  HealthCheckApi,
   pluginMetadata,
 } from "@checkstack/healthcheck-common";
 
@@ -49,33 +45,23 @@ export default createFrontendPlugin({
       route: healthcheckRoutes.routes.config,
       element: <HealthCheckConfigPage />,
       title: "Health Checks",
-      permission: permissions.healthCheckManage,
+      accessRule: healthCheckAccess.configuration.manage,
     },
     {
       route: healthcheckRoutes.routes.history,
       element: <HealthCheckHistoryPage />,
       title: "Health Check History",
-      permission: permissions.healthCheckRead,
+      accessRule: healthCheckAccess.configuration.read,
     },
     {
       route: healthcheckRoutes.routes.historyDetail,
       element: <HealthCheckHistoryDetailPage />,
       title: "Health Check Detail",
-      permission: permissions.healthCheckDetailsRead,
-    },
-  ],
-  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);
-      },
+      accessRule: healthCheckAccess.details,
     },
   ],
+  // 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,
-  permissionApiRef,
+  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 permissionApi = useApi(permissionApiRef);
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+  const accessApi = useApi(accessApiRef);
+  const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { allowed: canRead, loading: permissionLoading } =
-    permissionApi.useResourcePermission("healthcheck", "read");
-  const { allowed: canManage } = permissionApi.useResourcePermission(
-    "healthcheck",
-    "manage"
+  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 = () => {
@@ -113,7 +137,7 @@ const HealthCheckConfigPageContent = () => {
     <PageLayout
       title="Health Checks"
       subtitle="Manage health check configurations"
-      loading={permissionLoading}
+      loading={accessLoading}
       allowed={canRead}
       actions={
         <div className="flex gap-2">
@@ -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,15 +1,20 @@
 import { useState } from "react";
 import {
-  useApi,
   wrapInSuspense,
-  permissionApiRef,
+  accessApiRef,
+  useApi,
+  usePluginClient,
 } from "@checkstack/frontend-api";
-import { healthCheckApiRef } from "../api";
-import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+import {
+  healthcheckRoutes,
+  healthCheckAccess,
+  HealthCheckApi,
+} from "@checkstack/healthcheck-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   PageLayout,
   usePagination,
+  usePaginationSync,
   Card,
   CardHeader,
   CardTitle,
@@ -31,33 +36,32 @@ const HealthCheckHistoryDetailPageContent = () => {
     configurationId: string;
   }>();
 
-  const api = useApi(healthCheckApiRef);
-  const permissionApi = useApi(permissionApiRef);
-  const { allowed: canManage, loading: permissionLoading } =
-    permissionApi.useResourcePermission("healthcheck", "manage");
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+  const accessApi = useApi(accessApiRef);
+  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"
@@ -65,7 +69,7 @@ const HealthCheckHistoryDetailPageContent = () => {
         0,
         8
       )}...`}
-      loading={permissionLoading}
+      loading={accessLoading}
       allowed={canManage}
       actions={
         <BackLink to={resolveRoute(healthcheckRoutes.routes.history)}>
@@ -85,7 +89,7 @@ const HealthCheckHistoryDetailPageContent = () => {
           />
           <HealthCheckRunsTable
             runs={runs}
-            loading={loading}
+            loading={isLoading}
             emptyMessage="No health check runs found for this configuration."
             pagination={pagination}
           />