@checkstack/healthcheck-frontend 0.12.1 → 0.13.0

package/src/components/assignments/AssignmentTree.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import { Settings, Gauge, Database, Radio, Plus, Check } from "lucide-react";
+import { IDETreeNode, IDETreeSection } from "@checkstack/ui";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export type AssignmentNodeId =
+  | `general:${string}`
+  | `thresholds:${string}`
+  | `retention:${string}`
+  | `execution:${string}`;
+
+interface AssignmentConfig {
+  configurationId: string;
+  configurationName: string;
+  enabled: boolean;
+  satelliteCount: number;
+}
+
+interface AssignmentTreeProps {
+  assigned: AssignmentConfig[];
+  available: Array<{ id: string; name: string; strategyId: string }>;
+  selectedNode: AssignmentNodeId | undefined;
+  onSelectNode: (nodeId: AssignmentNodeId) => void;
+  onToggleAssignment: (configId: string, assigned: boolean) => void;
+}
+
+// =============================================================================
+// ASSIGNMENT TREE
+// =============================================================================
+
+export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
+  assigned,
+  available,
+  selectedNode,
+  onSelectNode,
+  onToggleAssignment,
+}) => {
+  return (
+    <div className="py-2">
+      <IDETreeSection label="Assigned Health Checks" />
+
+      {assigned.length === 0 && (
+        <p className="px-3 py-2 text-xs text-muted-foreground italic">
+          No health checks assigned
+        </p>
+      )}
+
+      {assigned.map((assoc) => (
+        <div key={assoc.configurationId}>
+          {/* Config header — not clickable as a node, just a label */}
+          <div className="px-3 py-1.5 text-xs font-medium text-foreground flex items-center gap-2 mt-1">
+            <Check className="h-3 w-3 text-primary shrink-0" />
+            <span className="truncate">{assoc.configurationName}</span>
+            {!assoc.enabled && (
+              <span className="text-[9px] text-muted-foreground bg-muted px-1 rounded">
+                off
+              </span>
+            )}
+          </div>
+
+          {/* Sub-nodes */}
+          <IDETreeNode
+            nodeId={`general:${assoc.configurationId}`}
+            label="General"
+            icon={Settings}
+            selected={selectedNode === `general:${assoc.configurationId}`}
+            onClick={() => onSelectNode(`general:${assoc.configurationId}`)}
+            indent
+          />
+          <IDETreeNode
+            nodeId={`thresholds:${assoc.configurationId}`}
+            label="Thresholds"
+            icon={Gauge}
+            selected={selectedNode === `thresholds:${assoc.configurationId}`}
+            onClick={() => onSelectNode(`thresholds:${assoc.configurationId}`)}
+            indent
+          />
+          <IDETreeNode
+            nodeId={`retention:${assoc.configurationId}`}
+            label="Retention"
+            icon={Database}
+            selected={selectedNode === `retention:${assoc.configurationId}`}
+            onClick={() => onSelectNode(`retention:${assoc.configurationId}`)}
+            indent
+          />
+          <IDETreeNode
+            nodeId={`execution:${assoc.configurationId}`}
+            label="Execution"
+            icon={Radio}
+            selected={selectedNode === `execution:${assoc.configurationId}`}
+            onClick={() => onSelectNode(`execution:${assoc.configurationId}`)}
+            indent
+            badge={assoc.satelliteCount > 0 ? `${assoc.satelliteCount}` : undefined}
+          />
+        </div>
+      ))}
+
+      {/* Available (unassigned) health checks */}
+      {available.length > 0 && (
+        <>
+          <IDETreeSection label="Available" />
+          {available.map((config) => (
+            <button
+              key={config.id}
+              type="button"
+              onClick={() => onToggleAssignment(config.id, false)}
+              className="flex items-center gap-2 w-full px-3 py-2 pl-7 text-sm text-left transition-colors text-muted-foreground hover:text-foreground hover:bg-muted/50 border-l-2 border-transparent"
+            >
+              <Plus className="h-4 w-4 shrink-0" />
+              <span className="truncate flex-1">{config.name}</span>
+              <span className="text-[10px] text-muted-foreground shrink-0">
+                {config.strategyId.split(".").pop()}
+              </span>
+            </button>
+          ))}
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/assignments/ExecutionPanel.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { Checkbox, Label, Tooltip } from "@checkstack/ui";
+import { Satellite } from "lucide-react";
+
+interface SatelliteDto {
+  id: string;
+  name: string;
+  region: string;
+  status: "online" | "offline";
+}
+
+interface ExecutionPanelProps {
+  includeLocal: boolean;
+  satelliteIds: string[];
+  satellites: SatelliteDto[];
+  onToggleLocal: () => void;
+  onToggleSatellite: (satelliteId: string) => void;
+  saving: boolean;
+}
+
+/**
+ * Panel for configuring where a health check executes:
+ * core server (local) and/or remote satellites.
+ */
+export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
+  includeLocal,
+  satelliteIds,
+  satellites,
+  onToggleLocal,
+  onToggleSatellite,
+  saving,
+}) => {
+  const hasSatellites = satelliteIds.length > 0;
+  const willRunAnywhere = includeLocal || hasSatellites;
+
+  return (
+    <div className="p-6 space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold">Execution Sources</h3>
+        <p className="text-xs text-muted-foreground mt-1">
+          Choose where this health check runs. You can combine local
+          execution with remote satellites.
+        </p>
+      </div>
+
+      {/* Include Local Toggle */}
+      <div className="p-4 bg-muted/50 rounded-lg border">
+        <div className="flex items-center gap-3">
+          <Checkbox
+            checked={includeLocal}
+            onCheckedChange={onToggleLocal}
+            disabled={saving || (!hasSatellites && includeLocal)}
+          />
+          <div>
+            <Label className="text-sm font-medium">Run Locally</Label>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              Execute this health check on the core server
+            </p>
+          </div>
+        </div>
+        {!includeLocal && !hasSatellites && (
+          <p className="text-xs text-warning mt-2">
+            ⚠ Enable at least one execution source (local or satellite)
+          </p>
+        )}
+      </div>
+
+      {/* Satellite Picker */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Label className="text-sm font-medium">Assigned Satellites</Label>
+          <Tooltip content="Select which satellites should execute this health check remotely" />
+        </div>
+        {satellites.length === 0 ? (
+          <p className="text-sm text-muted-foreground italic py-2">
+            No satellites registered. Create one in the Satellites settings.
+          </p>
+        ) : (
+          <div className="space-y-1.5">
+            {satellites.map((sat) => {
+              const isChecked = satelliteIds.includes(sat.id);
+              return (
+                <div
+                  key={sat.id}
+                  className="flex items-center gap-3 p-2.5 rounded-md border hover:bg-muted/30 transition-colors"
+                >
+                  <Checkbox
+                    checked={isChecked}
+                    onCheckedChange={() => onToggleSatellite(sat.id)}
+                    disabled={saving}
+                  />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <Satellite className="h-3.5 w-3.5 text-muted-foreground" />
+                      <span className="text-sm font-medium truncate">
+                        {sat.name}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground truncate mt-0.5">
+                      {sat.region}
+                    </p>
+                  </div>
+                  <span
+                    className={`text-xs px-1.5 py-0.5 rounded-full ${
+                      sat.status === "online"
+                        ? "bg-success/10 text-success"
+                        : "bg-muted text-muted-foreground"
+                    }`}
+                  >
+                    {sat.status === "online" ? "Online" : "Offline"}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Execution Summary */}
+      <div className="p-3 bg-muted/30 rounded-lg border text-xs text-muted-foreground">
+        <span className="font-medium">Execution: </span>
+        {willRunAnywhere ? (
+          <>
+            {includeLocal && "Core server"}
+            {includeLocal && hasSatellites && " + "}
+            {hasSatellites &&
+              `${satelliteIds.length} satellite${satelliteIds.length > 1 ? "s" : ""}`}
+          </>
+        ) : (
+          <span className="text-warning">No execution sources configured</span>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/assignments/GeneralPanel.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { Button, Checkbox, Label } from "@checkstack/ui";
+import { ExternalLink, Trash2 } from "lucide-react";
+import { Link } from "react-router-dom";
+import { resolveRoute } from "@checkstack/common";
+import { healthcheckRoutes } from "@checkstack/healthcheck-common";
+
+interface GeneralPanelProps {
+  configurationName: string;
+  strategyId: string;
+  configurationId: string;
+  enabled: boolean;
+  onToggleEnabled: () => void;
+  onUnassign: () => void;
+  saving: boolean;
+}
+
+/**
+ * Panel showing general assignment info: toggle enabled + link to config editor.
+ */
+export const GeneralPanel: React.FC<GeneralPanelProps> = ({
+  configurationName,
+  strategyId,
+  configurationId,
+  enabled,
+  onToggleEnabled,
+  onUnassign,
+  saving,
+}) => {
+  const editUrl = resolveRoute(healthcheckRoutes.routes.edit, {
+    configId: configurationId,
+  });
+
+  return (
+    <div className="p-6 space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold">General</h3>
+        <p className="text-xs text-muted-foreground mt-1">
+          Basic assignment settings for this health check on this system.
+        </p>
+      </div>
+
+      {/* Enabled Toggle */}
+      <div className="p-4 bg-muted/50 rounded-lg border">
+        <div className="flex items-center gap-3">
+          <Checkbox
+            checked={enabled}
+            onCheckedChange={onToggleEnabled}
+            disabled={saving}
+          />
+          <div>
+            <Label className="text-sm font-medium">Enabled</Label>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              When disabled, this health check will not run for this system
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Config Info */}
+      <div className="p-4 bg-muted/50 rounded-lg border space-y-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <Label className="text-sm font-medium">Configuration</Label>
+            <p className="text-xs text-muted-foreground mt-0.5">
+              {configurationName}
+            </p>
+          </div>
+          <Link
+            to={editUrl}
+            className="text-xs text-primary hover:underline flex items-center gap-1"
+          >
+            Edit configuration
+            <ExternalLink className="h-3 w-3" />
+          </Link>
+        </div>
+        <div className="text-xs text-muted-foreground">
+          Strategy: <code className="bg-muted px-1 py-0.5 rounded text-foreground">{strategyId}</code>
+        </div>
+      </div>
+
+      {/* Unassign */}
+      <div className="pt-2 border-t">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onUnassign}
+          disabled={saving}
+          className="text-destructive hover:text-destructive hover:bg-destructive/10"
+        >
+          <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+          Remove Assignment
+        </Button>
+        <p className="text-xs text-muted-foreground mt-1">
+          This will unassign the health check from this system entirely.
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/components/assignments/RetentionPanel.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import { Button, Input, LoadingSpinner } from "@checkstack/ui";
+
+export interface RetentionData {
+  rawRetentionDays: number;
+  hourlyRetentionDays: number;
+  dailyRetentionDays: number;
+  isCustom: boolean;
+}
+
+interface RetentionPanelProps {
+  data: RetentionData | undefined;
+  onFieldChange: (field: string, value: number) => void;
+  onSave: () => void;
+  onReset: () => void;
+  saving: boolean;
+}
+
+/**
+ * Panel for configuring tiered retention periods (raw → hourly → daily).
+ */
+export const RetentionPanel: React.FC<RetentionPanelProps> = ({
+  data,
+  onFieldChange,
+  onSave,
+  onReset,
+  saving,
+}) => {
+  if (!data) {
+    return (
+      <div className="flex justify-center py-12">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  const isValidHierarchy =
+    data.rawRetentionDays < data.hourlyRetentionDays &&
+    data.hourlyRetentionDays < data.dailyRetentionDays;
+
+  return (
+    <div className="p-6 space-y-3">
+      <div>
+        <h3 className="text-sm font-semibold">Data Retention</h3>
+        <p className="text-xs text-muted-foreground mt-1">
+          Configure how long health check run data is retained at each
+          aggregation tier.
+        </p>
+      </div>
+
+      {!data.isCustom && (
+        <div className="rounded-md bg-muted p-3 text-sm text-muted-foreground">
+          Using default retention settings. Customize below to override.
+        </div>
+      )}
+
+      {!isValidHierarchy && (
+        <div className="rounded-md bg-destructive/10 border border-destructive/30 p-3 text-sm text-destructive">
+          Retention periods must increase: Raw &lt; Hourly &lt; Daily
+        </div>
+      )}
+
+      {/* Raw Data */}
+      <RetentionTier
+        label="Raw Data Retention"
+        description="Individual run data before hourly aggregation"
+        value={data.rawRetentionDays}
+        min={1}
+        max={30}
+        onChange={(v) => onFieldChange("rawRetentionDays", v)}
+      />
+
+      {/* Hourly Aggregates */}
+      <RetentionTier
+        label="Hourly Aggregates"
+        description="Hourly stats before daily rollup"
+        value={data.hourlyRetentionDays}
+        min={7}
+        max={365}
+        onChange={(v) => onFieldChange("hourlyRetentionDays", v)}
+      />
+
+      {/* Daily Aggregates */}
+      <RetentionTier
+        label="Daily Aggregates"
+        description="Long-term storage before deletion"
+        value={data.dailyRetentionDays}
+        min={30}
+        max={1095}
+        onChange={(v) => onFieldChange("dailyRetentionDays", v)}
+      />
+
+      {/* Actions */}
+      <div className="flex justify-between pt-2 border-t">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onReset}
+          disabled={saving || !data.isCustom}
+        >
+          Reset to Defaults
+        </Button>
+        <Button
+          size="sm"
+          onClick={onSave}
+          disabled={saving || !isValidHierarchy}
+        >
+          {saving ? "Saving..." : "Save Retention"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// RETENTION TIER — Shared sub-component
+// =============================================================================
+
+function RetentionTier({
+  label,
+  description,
+  value,
+  min,
+  max,
+  onChange,
+}: {
+  label: string;
+  description: string;
+  value: number;
+  min: number;
+  max: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <div className="p-3 rounded-lg border bg-muted/30">
+      <div className="flex items-center justify-between">
+        <div>
+          <span className="text-sm font-medium">{label}</span>
+          <p className="text-xs text-muted-foreground">{description}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Input
+            type="number"
+            min={min}
+            max={max}
+            value={value}
+            onChange={(e) => onChange(Number(e.target.value))}
+            className="h-8 w-20 text-center"
+          />
+          <span className="text-sm text-muted-foreground w-10">days</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { DEFAULT_RETENTION_CONFIG } from "@checkstack/healthcheck-common";