@checkstack/healthcheck-frontend 0.0.2

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useHealthCheckData } from "./useHealthCheckData";

package/src/hooks/useHealthCheckData.ts

@@ -0,0 +1,257 @@
+import { useEffect, useState, useMemo } from "react";
+import { useApi, permissionApiRef } from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+import {
+  permissions,
+  DEFAULT_RETENTION_CONFIG,
+  type RetentionConfig,
+} from "@checkstack/healthcheck-common";
+import type {
+  HealthCheckDiagramSlotContext,
+  TypedHealthCheckRun,
+  TypedAggregatedBucket,
+} from "../slots";
+
+interface UseHealthCheckDataProps {
+  systemId: string;
+  configurationId: string;
+  strategyId: string;
+  dateRange: {
+    startDate: Date;
+    endDate: Date;
+  };
+  /** Pagination for raw data mode */
+  limit?: number;
+  offset?: number;
+}
+
+interface UseHealthCheckDataResult {
+  /** The context to pass to HealthCheckDiagramSlot */
+  context: HealthCheckDiagramSlotContext | undefined;
+  /** Whether data is currently loading */
+  loading: boolean;
+  /** Whether aggregated data mode is active */
+  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;
+}
+
+/**
+ * Hook that handles fetching health check data for visualization.
+ * Automatically determines whether to use raw or aggregated data based on:
+ * - The selected date range
+ * - 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,
+  configurationId,
+  strategyId,
+  dateRange,
+  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);
+
+  // Retention config state
+  const [retentionConfig, setRetentionConfig] = useState<RetentionConfig>(
+    DEFAULT_RETENTION_CONFIG
+  );
+  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(() => {
+    return Math.ceil(
+      (dateRange.endDate.getTime() - dateRange.startDate.getTime()) /
+        (1000 * 60 * 60 * 24)
+    );
+  }, [dateRange.startDate, dateRange.endDate]);
+
+  // 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 when in raw mode
+  useEffect(() => {
+    if (!hasPermission || permissionLoading || retentionLoading || isAggregated)
+      return;
+
+    setRawLoading(true);
+    api
+      .getDetailedHistory({
+        systemId,
+        configurationId,
+        startDate: dateRange.startDate,
+        endDate: dateRange.endDate,
+        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));
+  }, [
+    api,
+    systemId,
+    configurationId,
+    hasPermission,
+    permissionLoading,
+    retentionLoading,
+    isAggregated,
+    dateRange.startDate,
+    dateRange.endDate,
+    limit,
+    offset,
+  ]);
+
+  // 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,
+  ]);
+
+  const context = useMemo((): HealthCheckDiagramSlotContext | undefined => {
+    if (!hasPermission || permissionLoading || retentionLoading) {
+      return undefined;
+    }
+
+    if (isAggregated) {
+      return {
+        type: "aggregated",
+        systemId,
+        configurationId,
+        strategyId,
+        buckets: aggregatedBuckets,
+      };
+    }
+
+    return {
+      type: "raw",
+      systemId,
+      configurationId,
+      strategyId,
+      runs: rawRuns,
+    };
+  }, [
+    hasPermission,
+    permissionLoading,
+    retentionLoading,
+    isAggregated,
+    systemId,
+    configurationId,
+    strategyId,
+    rawRuns,
+    aggregatedBuckets,
+  ]);
+
+  const loading =
+    permissionLoading ||
+    retentionLoading ||
+    (isAggregated ? aggregatedLoading : rawLoading);
+
+  return {
+    context,
+    loading,
+    isAggregated,
+    retentionConfig,
+    hasPermission,
+    permissionLoading,
+  };
+}

package/src/index.tsx

@@ -0,0 +1,99 @@
+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";
+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 { autoChartExtension } from "./auto-charts";
+
+import {
+  SystemDetailsSlot,
+  CatalogSystemActionsSlot,
+  SystemStateBadgesSlot,
+} from "@checkstack/catalog-common";
+import {
+  healthcheckRoutes,
+  HealthCheckApi,
+  pluginMetadata,
+} from "@checkstack/healthcheck-common";
+
+// Export slot definitions for other plugins to use
+export {
+  HealthCheckDiagramSlot,
+  createStrategyDiagramExtension,
+  createDiagramExtensionFactory,
+  type HealthCheckDiagramSlotContext,
+  type RawDiagramContext,
+  type AggregatedDiagramContext,
+  type TypedHealthCheckRun,
+  type TypedAggregatedBucket,
+} from "./slots";
+
+// Export hooks for reusable data fetching
+export { useHealthCheckData } from "./hooks";
+
+export default createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: healthcheckRoutes.routes.config,
+      element: <HealthCheckConfigPage />,
+      title: "Health Checks",
+      permission: permissions.healthCheckManage,
+    },
+    {
+      route: healthcheckRoutes.routes.history,
+      element: <HealthCheckHistoryPage />,
+      title: "Health Check History",
+      permission: permissions.healthCheckRead,
+    },
+    {
+      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);
+      },
+    },
+  ],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "healthcheck.user-menu.items",
+      component: HealthCheckMenuItems,
+    }),
+    createSlotExtension(SystemStateBadgesSlot, {
+      id: "healthcheck.system-health-badge",
+      component: SystemHealthBadge,
+    }),
+    createSlotExtension(SystemDetailsSlot, {
+      id: "healthcheck.system-details.overview",
+      component: HealthCheckSystemOverview,
+    }),
+    createSlotExtension(CatalogSystemActionsSlot, {
+      id: "healthcheck.catalog.system-actions",
+      component: SystemHealthCheckAssignment,
+    }),
+    // Auto-generated charts based on schema metadata
+    autoChartExtension,
+  ],
+});

package/src/pages/HealthCheckConfigPage.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import {
+  useApi,
+  wrapInSuspense,
+  permissionApiRef,
+} from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+import {
+  HealthCheckConfiguration,
+  HealthCheckStrategyDto,
+  CreateHealthCheckConfiguration,
+  healthcheckRoutes,
+} from "@checkstack/healthcheck-common";
+import { HealthCheckList } from "../components/HealthCheckList";
+import { HealthCheckEditor } from "../components/HealthCheckEditor";
+import { Button, ConfirmationModal, PageLayout } 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 [searchParams, setSearchParams] = useSearchParams();
+  const { allowed: canRead, loading: permissionLoading } =
+    permissionApi.useResourcePermission("healthcheck", "read");
+  const { allowed: canManage } = permissionApi.useResourcePermission(
+    "healthcheck",
+    "manage"
+  );
+
+  const [configurations, setConfigurations] = useState<
+    HealthCheckConfiguration[]
+  >([]);
+  const [strategies, setStrategies] = useState<HealthCheckStrategyDto[]>([]);
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<
+    HealthCheckConfiguration | undefined
+  >();
+
+  // Delete modal state
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [idToDelete, setIdToDelete] = useState<string | undefined>();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const fetchData = async () => {
+    const [configs, strats] = await Promise.all([
+      api.getConfigurations(),
+      api.getStrategies(),
+    ]);
+    setConfigurations(configs);
+    setStrategies(strats);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [api]);
+
+  // Handle ?action=create URL parameter (from command palette)
+  useEffect(() => {
+    if (searchParams.get("action") === "create" && canManage) {
+      setEditingConfig(undefined);
+      setIsEditorOpen(true);
+      // Clear the URL param after opening
+      searchParams.delete("action");
+      setSearchParams(searchParams, { replace: true });
+    }
+  }, [searchParams, canManage, setSearchParams]);
+
+  const handleCreate = () => {
+    setEditingConfig(undefined);
+    setIsEditorOpen(true);
+  };
+
+  const handleEdit = (config: HealthCheckConfiguration) => {
+    setEditingConfig(config);
+    setIsEditorOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    setIdToDelete(id);
+    setIsDeleteModalOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!idToDelete) return;
+    setIsDeleting(true);
+    try {
+      await api.deleteConfiguration(idToDelete);
+      await fetchData();
+    } finally {
+      setIsDeleting(false);
+      setIsDeleteModalOpen(false);
+      setIdToDelete(undefined);
+    }
+  };
+
+  const handleSave = async (data: CreateHealthCheckConfiguration) => {
+    await (editingConfig
+      ? api.updateConfiguration({ id: editingConfig.id, body: data })
+      : api.createConfiguration(data));
+    setIsEditorOpen(false);
+    await fetchData();
+  };
+
+  const handleEditorClose = () => {
+    setIsEditorOpen(false);
+    setEditingConfig(undefined);
+  };
+
+  return (
+    <PageLayout
+      title="Health Checks"
+      subtitle="Manage health check configurations"
+      loading={permissionLoading}
+      allowed={canRead}
+      actions={
+        <div className="flex gap-2">
+          {canManage && (
+            <Button variant="outline" asChild>
+              <Link to={resolveRoute(healthcheckRoutes.routes.history)}>
+                <History className="mr-2 h-4 w-4" /> View History
+              </Link>
+            </Button>
+          )}
+          <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" /> Create Check
+          </Button>
+        </div>
+      }
+    >
+      <HealthCheckList
+        configurations={configurations}
+        strategies={strategies}
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+      />
+
+      <HealthCheckEditor
+        open={isEditorOpen}
+        strategies={strategies}
+        initialData={editingConfig}
+        onSave={handleSave}
+        onCancel={handleEditorClose}
+      />
+
+      <ConfirmationModal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        onConfirm={confirmDelete}
+        title="Delete Health Check"
+        message="Are you sure you want to delete this health check configuration? This action cannot be undone."
+        confirmText="Delete"
+        variant="danger"
+        isLoading={isDeleting}
+      />
+    </PageLayout>
+  );
+};
+
+export const HealthCheckConfigPage = wrapInSuspense(
+  HealthCheckConfigPageContent
+);

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import {
+  useApi,
+  wrapInSuspense,
+  permissionApiRef,
+} from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+import { resolveRoute } from "@checkstack/common";
+import {
+  PageLayout,
+  usePagination,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  BackLink,
+  DateRangeFilter,
+  getDefaultDateRange,
+  type DateRange,
+} from "@checkstack/ui";
+import { useParams } from "react-router-dom";
+import {
+  HealthCheckRunsTable,
+  type HealthCheckRunDetailed,
+} from "../components/HealthCheckRunsTable";
+
+const HealthCheckHistoryDetailPageContent = () => {
+  const { systemId, configurationId } = useParams<{
+    systemId: string;
+    configurationId: string;
+  }>();
+
+  const api = useApi(healthCheckApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const { allowed: canManage, loading: permissionLoading } =
+    permissionApi.useResourcePermission("healthcheck", "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 },
+  });
+
+  return (
+    <PageLayout
+      title="Health Check Run History"
+      subtitle={`System: ${systemId} • Configuration: ${configurationId?.slice(
+        0,
+        8
+      )}...`}
+      loading={permissionLoading}
+      allowed={canManage}
+      actions={
+        <BackLink to={resolveRoute(healthcheckRoutes.routes.history)}>
+          Back to All History
+        </BackLink>
+      }
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Run History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DateRangeFilter
+            value={dateRange}
+            onChange={setDateRange}
+            className="mb-4"
+          />
+          <HealthCheckRunsTable
+            runs={runs}
+            loading={loading}
+            emptyMessage="No health check runs found for this configuration."
+            pagination={pagination}
+          />
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+};
+
+export const HealthCheckHistoryDetailPage = wrapInSuspense(
+  HealthCheckHistoryDetailPageContent
+);

package/src/pages/HealthCheckHistoryPage.tsx

@@ -0,0 +1,67 @@
+import {
+  useApi,
+  wrapInSuspense,
+  permissionApiRef,
+} from "@checkstack/frontend-api";
+import { healthCheckApiRef } from "../api";
+import {
+  PageLayout,
+  usePagination,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from "@checkstack/ui";
+import {
+  HealthCheckRunsTable,
+  type HealthCheckRunDetailed,
+} from "../components/HealthCheckRunsTable";
+
+const HealthCheckHistoryPageContent = () => {
+  const api = useApi(healthCheckApiRef);
+  const permissionApi = useApi(permissionApiRef);
+  const { allowed: canManage, loading: permissionLoading } =
+    permissionApi.useResourcePermission("healthcheck", "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,
+  });
+
+  return (
+    <PageLayout
+      title="Health Check History"
+      subtitle="Detailed run history with full result data"
+      loading={permissionLoading}
+      allowed={canManage}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Run History</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <HealthCheckRunsTable
+            runs={runs}
+            loading={loading}
+            showFilterColumns
+            pagination={pagination}
+          />
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+};
+
+export const HealthCheckHistoryPage = wrapInSuspense(
+  HealthCheckHistoryPageContent
+);