@checkstack/healthcheck-frontend 0.12.0 → 0.13.0

package/src/components/assignments/ThresholdsPanel.tsx

@@ -0,0 +1,254 @@
+import React from "react";
+import type { StateThresholds } from "@checkstack/healthcheck-common";
+
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Tooltip,
+} from "@checkstack/ui";
+
+interface ThresholdsPanelProps {
+  thresholds: StateThresholds;
+  onChange: (thresholds: StateThresholds) => void;
+  onSave: () => void;
+  saving: boolean;
+}
+
+/**
+ * Panel for configuring health check evaluation thresholds.
+ * Supports two modes: consecutive (streak-based) and window (count in last N runs).
+ */
+export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
+  thresholds,
+  onChange,
+  onSave,
+  saving,
+}) => {
+  return (
+    <div className="p-6 space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold">State Thresholds</h3>
+        <p className="text-xs text-muted-foreground mt-1">
+          Configure how health check results determine the system&apos;s status.
+        </p>
+      </div>
+
+      {/* Mode Selector */}
+      <div className="p-4 bg-muted/50 rounded-lg border">
+        <div className="flex items-center gap-2 mb-2">
+          <Label className="text-sm font-medium">Evaluation Mode</Label>
+          <Tooltip content="How health status is calculated based on check results" />
+        </div>
+        <Select
+          value={thresholds.mode}
+          onValueChange={(value: "consecutive" | "window") => {
+            if (value === "consecutive") {
+              onChange({
+                mode: "consecutive",
+                healthy: { minSuccessCount: 1 },
+                degraded: { minFailureCount: 2 },
+                unhealthy: { minFailureCount: 5 },
+              });
+            } else {
+              onChange({
+                mode: "window",
+                windowSize: 10,
+                degraded: { minFailureCount: 3 },
+                unhealthy: { minFailureCount: 7 },
+              });
+            }
+          }}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="consecutive">
+              Consecutive (streak-based)
+            </SelectItem>
+            <SelectItem value="window">
+              Window (count in last N runs)
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground mt-2">
+          {thresholds.mode === "consecutive"
+            ? "Status changes when a streak of consecutive results is reached."
+            : "Status is based on how many failures occur within a rolling window."}
+        </p>
+      </div>
+
+      {/* Threshold Cards */}
+      {thresholds.mode === "consecutive" ? (
+        <div className="space-y-3">
+          <ThresholdCard
+            status="healthy"
+            label="Healthy"
+            tooltip="System returns to healthy after this many consecutive successful checks"
+            value={thresholds.healthy.minSuccessCount}
+            suffix="consecutive ✓"
+            onChange={(v) =>
+              onChange({ ...thresholds, healthy: { minSuccessCount: v } })
+            }
+          />
+          <ThresholdCard
+            status="warning"
+            label="Degraded"
+            tooltip="System becomes degraded after this many consecutive failures"
+            value={thresholds.degraded.minFailureCount}
+            suffix="consecutive ✗"
+            onChange={(v) =>
+              onChange({ ...thresholds, degraded: { minFailureCount: v } })
+            }
+          />
+          <ThresholdCard
+            status="destructive"
+            label="Unhealthy"
+            tooltip="System becomes unhealthy after this many consecutive failures"
+            value={thresholds.unhealthy.minFailureCount}
+            suffix="consecutive ✗"
+            onChange={(v) =>
+              onChange({ ...thresholds, unhealthy: { minFailureCount: v } })
+            }
+          />
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {/* Window Size */}
+          <div className="p-3 rounded-lg border bg-muted/30">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">Window Size</span>
+                <Tooltip content="How many recent runs to analyze when calculating status" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Input
+                  type="number"
+                  min={3}
+                  max={100}
+                  value={thresholds.windowSize}
+                  onChange={(e) =>
+                    onChange({
+                      ...thresholds,
+                      windowSize: Number.parseInt(e.target.value) || 10,
+                    })
+                  }
+                  className="h-8 w-16 text-center"
+                />
+                <span className="text-xs text-muted-foreground">runs</span>
+              </div>
+            </div>
+          </div>
+
+          <ThresholdCard
+            status="warning"
+            label="Degraded"
+            tooltip="System becomes degraded when failures in the window reach this count"
+            value={thresholds.degraded.minFailureCount}
+            prefix="≥"
+            suffix="failures"
+            onChange={(v) =>
+              onChange({ ...thresholds, degraded: { minFailureCount: v } })
+            }
+          />
+          <ThresholdCard
+            status="destructive"
+            label="Unhealthy"
+            tooltip="System becomes unhealthy when failures in the window reach this count"
+            value={thresholds.unhealthy.minFailureCount}
+            prefix="≥"
+            suffix="failures"
+            onChange={(v) =>
+              onChange({ ...thresholds, unhealthy: { minFailureCount: v } })
+            }
+          />
+        </div>
+      )}
+
+      {/* Save Button */}
+      <div className="flex justify-end pt-2 border-t">
+        <Button size="sm" onClick={onSave} disabled={saving}>
+          {saving ? "Saving..." : "Save Thresholds"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// THRESHOLD CARD — Shared sub-component
+// =============================================================================
+
+const STATUS_STYLES = {
+  healthy: {
+    dot: "bg-success",
+    text: "text-success",
+    border: "border-success/30",
+    bg: "bg-success/5",
+  },
+  warning: {
+    dot: "bg-warning",
+    text: "text-warning",
+    border: "border-warning/30",
+    bg: "bg-warning/5",
+  },
+  destructive: {
+    dot: "bg-destructive",
+    text: "text-destructive",
+    border: "border-destructive/30",
+    bg: "bg-destructive/5",
+  },
+} as const;
+
+function ThresholdCard({
+  status,
+  label,
+  tooltip,
+  value,
+  prefix,
+  suffix,
+  onChange,
+}: {
+  status: keyof typeof STATUS_STYLES;
+  label: string;
+  tooltip: string;
+  value: number;
+  prefix?: string;
+  suffix: string;
+  onChange: (value: number) => void;
+}) {
+  const styles = STATUS_STYLES[status];
+  return (
+    <div className={`p-3 rounded-lg border ${styles.border} ${styles.bg}`}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className={`h-2 w-2 rounded-full ${styles.dot}`} />
+          <span className={`text-sm font-medium ${styles.text}`}>{label}</span>
+          <Tooltip content={tooltip} />
+        </div>
+        <div className="flex items-center gap-2">
+          {prefix && (
+            <span className="text-xs text-muted-foreground">{prefix}</span>
+          )}
+          <Input
+            type="number"
+            min={1}
+            value={value}
+            onChange={(e) => onChange(Number.parseInt(e.target.value) || 1)}
+            className="h-8 w-16 text-center"
+          />
+          <span className="text-xs text-muted-foreground w-20">{suffix}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Re-export DEFAULT_STATE_THRESHOLDS for convenience
+export { DEFAULT_STATE_THRESHOLDS } from "@checkstack/healthcheck-common";

package/src/components/editor/EditorTree.tsx

@@ -5,8 +5,11 @@ import type {
 } from "@checkstack/healthcheck-common";
 import { Plus, Settings, Shield, ChevronRight } from "lucide-react";
 import { isBuiltInCollector } from "../../hooks/useCollectors";
-import type { ValidationIssue } from "./IDEStatusBar";
-import { Badge } from "@checkstack/ui";
+import {
+  IDETreeNode,
+  IDETreeSection,
+  type ValidationIssue,
+} from "@checkstack/ui";
 
 // =============================================================================
 // TYPES
@@ -28,66 +31,6 @@ interface EditorTreeProps {
   strategyId: string;
 }
 
-// =============================================================================
-// VALIDATION INDICATOR
-// =============================================================================
-
-function ValidationDot({ nodeId, issues }: { nodeId: string; issues: ValidationIssue[] }) {
-  const nodeIssues = issues.filter((i) => i.nodeId === nodeId);
-  if (nodeIssues.length === 0) return;
-
-  return (
-    <span className="ml-auto flex h-2 w-2 rounded-full bg-destructive shrink-0" />
-  );
-}
-
-// =============================================================================
-// TREE NODE
-// =============================================================================
-
-function TreeNode({
-  nodeId,
-  label,
-  icon: Icon,
-  selected,
-  onClick,
-  issues,
-  indent = false,
-  badge,
-}: {
-  nodeId: string;
-  label: string;
-  icon: React.ElementType;
-  selected: boolean;
-  onClick: () => void;
-  issues: ValidationIssue[];
-  indent?: boolean;
-  badge?: string;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors ${
-        indent ? "pl-7" : ""
-      } ${
-        selected
-          ? "bg-primary/10 text-primary border-l-2 border-primary"
-          : "hover:bg-muted/50 border-l-2 border-transparent"
-      }`}
-    >
-      <Icon className="h-4 w-4 shrink-0 opacity-60" />
-      <span className="truncate flex-1">{label}</span>
-      {badge && (
-        <Badge variant="secondary" className="text-[10px] shrink-0">
-          {badge}
-        </Badge>
-      )}
-      <ValidationDot nodeId={nodeId} issues={issues} />
-    </button>
-  );
-}
-
 // =============================================================================
 // EDITOR TREE
 // =============================================================================
@@ -111,7 +54,7 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
   return (
     <div className="py-2">
       {/* General */}
-      <TreeNode
+      <IDETreeNode
         nodeId="general"
         label="General"
         icon={Settings}
@@ -121,11 +64,7 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
       />
 
       {/* Collectors Section Header */}
-      <div className="px-3 pt-4 pb-1">
-        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-          Check Items
-        </span>
-      </div>
+      <IDETreeSection label="Check Items" />
 
       {/* Configured Collectors */}
       {collectors.map((entry) => {
@@ -135,7 +74,7 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
         const builtIn = isBuiltInCollector(entry.collectorId, strategyId);
 
         return (
-          <TreeNode
+          <IDETreeNode
             key={entry.id}
             nodeId={`collector:${entry.id}`}
             label={collector?.displayName ?? entry.collectorId}
@@ -166,13 +105,9 @@ export const EditorTree: React.FC<EditorTreeProps> = ({
       )}
 
       {/* Access Control */}
-      <div className="px-3 pt-4 pb-1">
-        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-          Permissions
-        </span>
-      </div>
+      <IDETreeSection label="Permissions" />
 
-      <TreeNode
+      <IDETreeNode
         nodeId="access"
         label="Access Control"
         icon={Shield}

package/src/components/editor/IDEStatusBar.tsx

@@ -1,58 +1,5 @@
-import React from "react";
-import type { TreeNodeId } from "./EditorTree";
-import { AlertCircle, CheckCircle2 } from "lucide-react";
-
-// =============================================================================
-// TYPES
-// =============================================================================
-
-export interface ValidationIssue {
-  nodeId: TreeNodeId;
-  message: string;
-}
-
-interface IDEStatusBarProps {
-  issues: ValidationIssue[];
-  onIssueClick: (nodeId: TreeNodeId) => void;
-}
-
-// =============================================================================
-// STATUS BAR
-// =============================================================================
-
-export const IDEStatusBar: React.FC<IDEStatusBarProps> = ({
-  issues,
-  onIssueClick,
-}) => {
-  if (issues.length === 0) {
-    return (
-      <div className="flex items-center gap-2 px-4 py-2 mt-2 rounded-md border bg-card text-xs text-muted-foreground">
-        <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
-        <span>No issues found</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-3 px-4 py-2 mt-2 rounded-md border bg-card text-xs">
-      <div className="flex items-center gap-1.5 text-destructive shrink-0">
-        <AlertCircle className="h-3.5 w-3.5" />
-        <span className="font-medium">
-          {issues.length} {issues.length === 1 ? "issue" : "issues"}
-        </span>
-      </div>
-      <div className="flex items-center gap-2 overflow-x-auto">
-        {issues.map((issue, i) => (
-          <button
-            key={`${issue.nodeId}-${i}`}
-            type="button"
-            onClick={() => onIssueClick(issue.nodeId)}
-            className="text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap underline-offset-2 hover:underline"
-          >
-            {issue.message}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
+/**
+ * Re-export IDEStatusBar and ValidationIssue from the shared UI package.
+ * Kept for backward compatibility — existing imports from this path continue to work.
+ */
+export { IDEStatusBar, type ValidationIssue } from "@checkstack/ui";

package/src/hooks/useCollectors.ts

@@ -26,7 +26,7 @@ export function useCollectors(strategyId: string): UseCollectorsResult {
   );
 
   const collectors = data ?? [];
-  const error = queryError instanceof Error ? queryError : undefined;
+  const error = queryError ?? undefined;
 
   return {
     collectors,

package/src/hooks/useHealthCheckData.ts

@@ -23,6 +23,8 @@ interface UseHealthCheckDataProps {
     startDate: Date;
     endDate: Date;
   };
+  /** Filter by source: "local" = core only, satellite UUID = specific satellite, undefined = all */
+  sourceFilter?: string;
   /** Whether the date range is a rolling preset (e.g., 'Last 7 days') that should auto-update */
   isRollingPreset?: boolean;
   /** Callback to update the date range (e.g., to refresh endDate to current time) */
@@ -60,6 +62,7 @@ export function useHealthCheckData({
   configurationId,
   strategyId,
   dateRange,
+  sourceFilter,
   isRollingPreset = false,
   onDateRangeRefresh,
 }: UseHealthCheckDataProps): UseHealthCheckDataResult {
@@ -82,6 +85,7 @@ export function useHealthCheckData({
       configurationId,
       startDate: dateRange.startDate,
       endDate: dateRange.endDate,
+      sourceFilter,
       targetPoints: 500,
     },
     {

package/src/index.tsx

@@ -6,6 +6,7 @@ import {
 import { HealthCheckConfigPage } from "./pages/HealthCheckConfigPage";
 import { StrategyPickerPage } from "./pages/StrategyPickerPage";
 import { HealthCheckIDEPage } from "./pages/HealthCheckIDEPage";
+import { AssignmentIDEPage } from "./pages/AssignmentIDEPage";
 import { HealthCheckHistoryPage } from "./pages/HealthCheckHistoryPage";
 import { HealthCheckHistoryDetailPage } from "./pages/HealthCheckHistoryDetailPage";
 import { HealthCheckMenuItems } from "./components/HealthCheckMenuItems";
@@ -57,6 +58,12 @@ export default createFrontendPlugin({
       title: "Edit Health Check",
       accessRule: healthCheckAccess.configuration.manage,
     },
+    {
+      route: healthcheckRoutes.routes.assignments,
+      element: <AssignmentIDEPage />,
+      title: "Health Check Assignments",
+      accessRule: healthCheckAccess.configuration.manage,
+    },
     {
       route: healthcheckRoutes.routes.history,
       element: <HealthCheckHistoryPage />,