@checkstack/healthcheck-frontend 0.12.1 → 0.13.1

package/src/pages/AssignmentIDEPage.tsx

@@ -0,0 +1,477 @@
+import { useState, useEffect, useMemo } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { usePluginClient, wrapInSuspense } from "@checkstack/frontend-api";
+import { HealthCheckApi } from "../api";
+import { SatelliteApi } from "@checkstack/satellite-common";
+import {
+  DEFAULT_STATE_THRESHOLDS,
+  DEFAULT_RETENTION_CONFIG,
+} from "@checkstack/healthcheck-common";
+import type { StateThresholds } from "@checkstack/healthcheck-common";
+import { PageLayout, IDELayout, useToast, BackLink } from "@checkstack/ui";
+import { Settings } from "lucide-react";
+import { extractErrorMessage, resolveRoute } from "@checkstack/common";
+import { catalogRoutes } from "@checkstack/catalog-common";
+import {
+  AssignmentTree,
+  type AssignmentNodeId,
+} from "../components/assignments/AssignmentTree";
+import { GeneralPanel } from "../components/assignments/GeneralPanel";
+import { ThresholdsPanel } from "../components/assignments/ThresholdsPanel";
+import {
+  RetentionPanel,
+  type RetentionData,
+} from "../components/assignments/RetentionPanel";
+import { ExecutionPanel } from "../components/assignments/ExecutionPanel";
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function parseNodeId(nodeId: AssignmentNodeId): {
+  panel: "general" | "thresholds" | "retention" | "execution";
+  configId: string;
+} {
+  const [panel, ...rest] = nodeId.split(":") as [string, ...string[]];
+  return {
+    panel: panel as "general" | "thresholds" | "retention" | "execution",
+    configId: rest.join(":"),
+  };
+}
+
+// =============================================================================
+// PAGE
+// =============================================================================
+
+const AssignmentIDEPageContent = () => {
+  const { systemId } = useParams<{ systemId: string }>();
+  const navigate = useNavigate();
+  const toast = useToast();
+  const healthCheckClient = usePluginClient(HealthCheckApi);
+  const satelliteClient = usePluginClient(SatelliteApi);
+
+  // --- Data Fetching ---
+
+  const { data: configurationsData, isLoading: configsLoading } =
+    healthCheckClient.getConfigurations.useQuery({});
+
+  const { data: associations = [], refetch: refetchAssociations } =
+    healthCheckClient.getSystemAssociations.useQuery(
+      { systemId: systemId ?? "" },
+      { enabled: !!systemId },
+    );
+
+  const { data: satellitesData } = satelliteClient.listSatellites.useQuery({});
+
+  // --- UI State ---
+
+  const [selectedNode, setSelectedNode] = useState<AssignmentNodeId>();
+  const [localThresholds, setLocalThresholds] = useState<
+    Record<string, StateThresholds>
+  >({});
+  const [retentionData, setRetentionData] = useState<
+    Record<string, RetentionData>
+  >({});
+
+  const configs = useMemo(
+    () => configurationsData?.configurations ?? [],
+    [configurationsData],
+  );
+  const satellites = satellitesData?.satellites ?? [];
+  const assignedIds = useMemo(
+    () => new Set(associations.map((a) => a.configurationId)),
+    [associations],
+  );
+
+  // Fetch retention for selected config
+  const selectedConfigId = selectedNode
+    ? parseNodeId(selectedNode).configId
+    : undefined;
+  const isRetentionPanel = selectedNode?.startsWith("retention:");
+
+  const { data: retentionConfigData } =
+    healthCheckClient.getRetentionConfig.useQuery(
+      {
+        systemId: systemId ?? "",
+        configurationId: selectedConfigId ?? "",
+      },
+      {
+        enabled:
+          !!isRetentionPanel &&
+          !!selectedConfigId &&
+          !retentionData[selectedConfigId],
+      },
+    );
+
+  useEffect(() => {
+    if (
+      retentionConfigData &&
+      selectedConfigId &&
+      !retentionData[selectedConfigId]
+    ) {
+      setRetentionData((prev) => ({
+        ...prev,
+        [selectedConfigId]: {
+          rawRetentionDays:
+            retentionConfigData.retentionConfig?.rawRetentionDays ??
+            DEFAULT_RETENTION_CONFIG.rawRetentionDays,
+          hourlyRetentionDays:
+            retentionConfigData.retentionConfig?.hourlyRetentionDays ??
+            DEFAULT_RETENTION_CONFIG.hourlyRetentionDays,
+          dailyRetentionDays:
+            retentionConfigData.retentionConfig?.dailyRetentionDays ??
+            DEFAULT_RETENTION_CONFIG.dailyRetentionDays,
+          isCustom: !!retentionConfigData.retentionConfig,
+        },
+      }));
+    }
+  }, [retentionConfigData, selectedConfigId, retentionData]);
+
+  // --- Auto-select first node ---
+
+  useEffect(() => {
+    if (!selectedNode && associations.length > 0) {
+      setSelectedNode(`general:${associations[0].configurationId}`);
+    }
+  }, [selectedNode, associations]);
+
+  // --- Mutations ---
+
+  const associateMutation = healthCheckClient.associateSystem.useMutation({
+    onSuccess: () => void refetchAssociations(),
+    onError: (error) =>
+      toast.error(extractErrorMessage(error, "Failed to update")),
+  });
+
+  const disassociateMutation = healthCheckClient.disassociateSystem.useMutation(
+    {
+      onSuccess: () => {
+        toast.success("Health check unassigned");
+        void refetchAssociations();
+      },
+      onError: (error) =>
+        toast.error(extractErrorMessage(error, "Failed to update")),
+    },
+  );
+
+  const updateRetentionMutation =
+    healthCheckClient.updateRetentionConfig.useMutation({
+      onSuccess: () => toast.success("Retention settings saved"),
+      onError: (error) =>
+        toast.error(extractErrorMessage(error, "Failed to save")),
+    });
+
+  const saving =
+    associateMutation.isPending ||
+    disassociateMutation.isPending ||
+    updateRetentionMutation.isPending;
+
+  // --- Handlers ---
+
+  const handleToggleAssignment = (configId: string, isAssigned: boolean) => {
+    if (!systemId) return;
+
+    if (isAssigned) {
+      disassociateMutation.mutate({ systemId, configId });
+      if (selectedNode && parseNodeId(selectedNode).configId === configId) {
+        setSelectedNode(undefined);
+      }
+    } else {
+      associateMutation.mutate({
+        systemId,
+        body: {
+          configurationId: configId,
+          enabled: true,
+          stateThresholds: DEFAULT_STATE_THRESHOLDS,
+          includeLocal: true,
+        },
+      });
+    }
+  };
+
+  const handleToggleEnabled = (configId: string, currentEnabled: boolean) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+
+    associateMutation.mutate({
+      systemId,
+      body: {
+        configurationId: configId,
+        enabled: !currentEnabled,
+        stateThresholds: assoc.stateThresholds,
+        satelliteIds: assoc.satelliteIds,
+        includeLocal: assoc.includeLocal,
+      },
+    });
+  };
+
+  const handleThresholdChange = (
+    configId: string,
+    thresholds: StateThresholds,
+  ) => {
+    setLocalThresholds((prev) => ({ ...prev, [configId]: thresholds }));
+  };
+
+  const handleSaveThresholds = (configId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    const thresholds = localThresholds[configId] ?? assoc?.stateThresholds;
+    if (!assoc) return;
+
+    associateMutation.mutate(
+      {
+        systemId,
+        body: {
+          configurationId: configId,
+          enabled: assoc.enabled,
+          stateThresholds: thresholds,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success("Thresholds saved");
+          setLocalThresholds((prev) => {
+            const next = { ...prev };
+            delete next[configId];
+            return next;
+          });
+        },
+      },
+    );
+  };
+
+  const handleToggleSatellite = (configId: string, satelliteId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+
+    const currentIds = assoc.satelliteIds ?? [];
+    const isAssigned = currentIds.includes(satelliteId);
+    const newIds = isAssigned
+      ? currentIds.filter((id) => id !== satelliteId)
+      : [...currentIds, satelliteId];
+
+    associateMutation.mutate({
+      systemId,
+      body: {
+        configurationId: configId,
+        enabled: assoc.enabled,
+        stateThresholds: assoc.stateThresholds,
+        satelliteIds: newIds,
+        includeLocal: assoc.includeLocal,
+      },
+    });
+  };
+
+  const handleToggleLocal = (configId: string) => {
+    if (!systemId) return;
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+
+    associateMutation.mutate({
+      systemId,
+      body: {
+        configurationId: configId,
+        enabled: assoc.enabled,
+        stateThresholds: assoc.stateThresholds,
+        satelliteIds: assoc.satelliteIds,
+        includeLocal: !assoc.includeLocal,
+      },
+    });
+  };
+
+  const handleSaveRetention = (configId: string) => {
+    if (!systemId) return;
+    const data = retentionData[configId];
+    if (!data) return;
+
+    updateRetentionMutation.mutate({
+      systemId,
+      configurationId: configId,
+      retentionConfig: {
+        rawRetentionDays: data.rawRetentionDays,
+        hourlyRetentionDays: data.hourlyRetentionDays,
+        dailyRetentionDays: data.dailyRetentionDays,
+      },
+    });
+  };
+
+  const handleResetRetention = (configId: string) => {
+    if (!systemId) return;
+    updateRetentionMutation.mutate(
+      {
+        systemId,
+        configurationId: configId,
+        // eslint-disable-next-line unicorn/no-null -- RPC contract uses nullable()
+        retentionConfig: null,
+      },
+      {
+        onSuccess: () => {
+          setRetentionData((prev) => ({
+            ...prev,
+            [configId]: {
+              rawRetentionDays: DEFAULT_RETENTION_CONFIG.rawRetentionDays,
+              hourlyRetentionDays: DEFAULT_RETENTION_CONFIG.hourlyRetentionDays,
+              dailyRetentionDays: DEFAULT_RETENTION_CONFIG.dailyRetentionDays,
+              isCustom: false,
+            },
+          }));
+          toast.success("Reset to defaults");
+        },
+      },
+    );
+  };
+
+  const updateRetentionField = (
+    configId: string,
+    field: string,
+    value: number,
+  ) => {
+    setRetentionData((prev) => ({
+      ...prev,
+      [configId]: { ...prev[configId], [field]: value, isCustom: true },
+    }));
+  };
+
+  // --- Derived Data ---
+
+  const assignedConfigs = useMemo(
+    () =>
+      associations
+        .map((assoc) => ({
+          configurationId: assoc.configurationId,
+          configurationName: assoc.configurationName,
+          enabled: assoc.enabled,
+          satelliteCount: assoc.satelliteIds?.length ?? 0,
+        }))
+        .toSorted((a, b) =>
+          a.configurationName.localeCompare(b.configurationName),
+        ),
+    [associations],
+  );
+
+  const availableConfigs = useMemo(
+    () =>
+      configs
+        .filter((c) => !assignedIds.has(c.id))
+        .map((c) => ({ id: c.id, name: c.name, strategyId: c.strategyId }))
+        .toSorted((a, b) => a.name.localeCompare(b.name)),
+    [configs, assignedIds],
+  );
+
+  // --- Render Panel ---
+
+  const renderPanel = () => {
+    if (!selectedNode) {
+      return (
+        <div className="flex items-center justify-center h-full text-sm text-muted-foreground p-12">
+          {associations.length === 0
+            ? "Add a health check from the left panel to get started."
+            : "Select an item from the left panel to configure it."}
+        </div>
+      );
+    }
+
+    const { panel, configId } = parseNodeId(selectedNode);
+    const assoc = associations.find((a) => a.configurationId === configId);
+    if (!assoc) return;
+
+    switch (panel) {
+      case "general": {
+        return (
+          <GeneralPanel
+            configurationName={assoc.configurationName}
+            strategyId={
+              configs.find((c) => c.id === configId)?.strategyId ?? ""
+            }
+            configurationId={configId}
+            enabled={assoc.enabled}
+            onToggleEnabled={() => handleToggleEnabled(configId, assoc.enabled)}
+            onUnassign={() => handleToggleAssignment(configId, true)}
+            saving={saving}
+          />
+        );
+      }
+      case "thresholds": {
+        const thresholds =
+          localThresholds[configId] ??
+          assoc.stateThresholds ??
+          DEFAULT_STATE_THRESHOLDS;
+        return (
+          <ThresholdsPanel
+            thresholds={thresholds}
+            onChange={(t) => handleThresholdChange(configId, t)}
+            onSave={() => handleSaveThresholds(configId)}
+            saving={saving}
+          />
+        );
+      }
+      case "retention": {
+        return (
+          <RetentionPanel
+            data={retentionData[configId]}
+            onFieldChange={(field, value) =>
+              updateRetentionField(configId, field, value)
+            }
+            onSave={() => handleSaveRetention(configId)}
+            onReset={() => handleResetRetention(configId)}
+            saving={saving}
+          />
+        );
+      }
+      case "execution": {
+        return (
+          <ExecutionPanel
+            includeLocal={assoc.includeLocal}
+            satelliteIds={assoc.satelliteIds ?? []}
+            satellites={satellites}
+            onToggleLocal={() => handleToggleLocal(configId)}
+            onToggleSatellite={(satId) =>
+              handleToggleSatellite(configId, satId)
+            }
+            saving={saving}
+          />
+        );
+      }
+    }
+  };
+
+  if (configsLoading) {
+    return (
+      <PageLayout title="Health Check Assignments" icon={Settings} loading>
+        <div />
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout
+      title="Health Check Assignments"
+      icon={Settings}
+      maxWidth="full"
+      actions={
+        <BackLink
+          onClick={() => navigate(resolveRoute(catalogRoutes.routes.config))}
+        >
+          Back to Systems
+        </BackLink>
+      }
+    >
+      <IDELayout
+        tree={
+          <AssignmentTree
+            assigned={assignedConfigs}
+            available={availableConfigs}
+            selectedNode={selectedNode}
+            onSelectNode={setSelectedNode}
+            onToggleAssignment={handleToggleAssignment}
+          />
+        }
+        panel={renderPanel()}
+      />
+    </PageLayout>
+  );
+};
+
+export const AssignmentIDEPage = wrapInSuspense(AssignmentIDEPageContent);

package/src/pages/HealthCheckHistoryDetailPage.tsx

@@ -10,6 +10,7 @@ import {
   healthCheckAccess,
   HealthCheckApi,
 } from "@checkstack/healthcheck-common";
+import { SatelliteApi } from "@checkstack/satellite-common";
 import { resolveRoute } from "@checkstack/common";
 import {
   PageLayout,
@@ -26,7 +27,7 @@ import {
   type DateRange,
 } from "@checkstack/ui";
 import { useParams, useNavigate } from "react-router-dom";
-import { History, X } from "lucide-react";
+import { History, X, Server, Satellite } from "lucide-react";
 import { format } from "date-fns";
 import {
   HealthCheckRunsTable,
@@ -44,16 +45,22 @@ const HealthCheckHistoryDetailPageContent = () => {
 
   const navigate = useNavigate();
   const healthCheckClient = usePluginClient(HealthCheckApi);
+  const satelliteClient = usePluginClient(SatelliteApi);
   const accessApi = useApi(accessApiRef);
   const { allowed: canManage, loading: accessLoading } = accessApi.useAccess(
     healthCheckAccess.configuration.manage,
   );
 
   const [dateRange, setDateRange] = useState<DateRange>(getDefaultDateRange);
+  const [sourceFilter, setSourceFilter] = useState<string | undefined>();
 
   // Pagination state
   const pagination = usePagination({ defaultLimit: 20 });
 
+  // Fetch satellites for the source filter dropdown
+  const { data: satellitesData } = satelliteClient.listSatellites.useQuery({});
+  const satellites = satellitesData?.satellites ?? [];
+
   // Fetch specific run if runId is provided
   const { data: specificRun } = healthCheckClient.getRunById.useQuery(
     {
@@ -81,6 +88,7 @@ const HealthCheckHistoryDetailPageContent = () => {
     configurationId,
     startDate: dateRange.startDate,
     endDate: dateRange.endDate,
+    sourceFilter,
     limit: pagination.limit,
     offset: pagination.offset,
     sortOrder: "desc",
@@ -156,11 +164,50 @@ const HealthCheckHistoryDetailPageContent = () => {
           <CardTitle>Run History</CardTitle>
         </CardHeader>
         <CardContent>
-          <DateRangeFilter
-            value={dateRange}
-            onChange={setDateRange}
-            className="mb-4"
-          />
+          <div className="flex flex-wrap items-center gap-3 mb-4">
+            <DateRangeFilter value={dateRange} onChange={setDateRange} />
+            {/* Source filter */}
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Source:</span>
+              <div className="flex items-center gap-1">
+                <button
+                  onClick={() => setSourceFilter(undefined)}
+                  className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                    sourceFilter === undefined
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted text-muted-foreground hover:bg-muted/80"
+                  }`}
+                >
+                  All
+                </button>
+                <button
+                  onClick={() => setSourceFilter("local")}
+                  className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                    sourceFilter === "local"
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-muted text-muted-foreground hover:bg-muted/80"
+                  }`}
+                >
+                  <Server className="h-3 w-3" />
+                  Local
+                </button>
+                {satellites.map((sat) => (
+                  <button
+                    key={sat.id}
+                    onClick={() => setSourceFilter(sat.id)}
+                    className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full transition-colors ${
+                      sourceFilter === sat.id
+                        ? "bg-orange-500 text-white"
+                        : "bg-orange-500/10 text-orange-600 hover:bg-orange-500/20"
+                    }`}
+                  >
+                    <Satellite className="h-3 w-3" />
+                    {sat.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
           <HealthCheckRunsTable
             runs={runs}
             loading={isLoading}

package/src/pages/HealthCheckIDEPage.tsx

@@ -9,13 +9,12 @@ import {
   healthcheckRoutes,
   type CollectorConfigEntry,
 } from "@checkstack/healthcheck-common";
-import { PageLayout, Button, useToast } from "@checkstack/ui";
+import { PageLayout, Button, useToast, IDELayout, type ValidationIssue } from "@checkstack/ui";
 import { Save, Settings } from "lucide-react";
 import { resolveRoute, extractErrorMessage} from "@checkstack/common";
 import { useCollectors } from "../hooks/useCollectors";
 import { EditorTree, type TreeNodeId } from "../components/editor/EditorTree";
 import { EditorPanel } from "../components/editor/EditorPanel";
-import { IDEStatusBar, type ValidationIssue } from "../components/editor/IDEStatusBar";
 
 // =============================================================================
 // TYPES
@@ -328,9 +327,8 @@ const HealthCheckIDEPageContent = () => {
         </Button>
       }
     >
-      <div className="flex flex-col lg:flex-row gap-0 min-h-[60vh] border rounded-lg bg-card overflow-hidden">
-        {/* Explorer Tree — Left Panel */}
-        <div className="w-full lg:w-64 shrink-0 border-b lg:border-b-0 lg:border-r bg-muted/30">
+      <IDELayout
+        tree={
           <EditorTree
             collectors={formState.collectors}
             availableCollectors={availableCollectors}
@@ -340,10 +338,8 @@ const HealthCheckIDEPageContent = () => {
             validationIssues={validationIssues}
             strategyId={activeStrategyId ?? ""}
           />
-        </div>
-
-        {/* Editor Panel — Right Panel */}
-        <div className="flex-1 min-w-0">
+        }
+        panel={
           <EditorPanel
             selectedNode={selectedNode}
             formState={formState}
@@ -367,13 +363,9 @@ const HealthCheckIDEPageContent = () => {
             onCollectorAdd={handleCollectorAdd}
             strategyId={activeStrategyId ?? ""}
           />
-        </div>
-      </div>
-
-      {/* Status Bar */}
-      <IDEStatusBar
+        }
         issues={validationIssues}
-        onIssueClick={(nodeId) => setSelectedNode(nodeId)}
+        onIssueClick={(nodeId) => setSelectedNode(nodeId as TreeNodeId)}
       />
     </PageLayout>
   );