@checkstack/healthcheck-frontend 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @checkstack/healthcheck-frontend
 
+## 0.16.0
+
+### Minor Changes
+
+- 80cbc51: Enforce GitOps provenance lock on backend API endpoints to prevent manual configuration drift for synchronized resources.
+
+### Patch Changes
+
+- @checkstack/dashboard-frontend@0.4.1
+
 ## 0.15.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/healthcheck-frontend",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/HealthCheckList.tsx

@@ -14,6 +14,7 @@ import {
   Badge,
 } from "@checkstack/ui";
 import { Trash2, Edit, Pause, Play } from "lucide-react";
+import { useProvenanceLock } from "@checkstack/gitops-frontend";
 
 interface HealthCheckListProps {
   configurations: HealthCheckConfiguration[];
@@ -59,64 +60,16 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
             </TableRow>
           ) : (
             configurations.map((config) => (
-              <TableRow
+              <HealthCheckRow
                 key={config.id}
-                className={config.paused ? "opacity-60" : ""}
-              >
-                <TableCell className="font-medium">{config.name}</TableCell>
-                <TableCell>{getStrategyName(config.strategyId)}</TableCell>
-                <TableCell>{config.intervalSeconds}</TableCell>
-                <TableCell>
-                  {config.paused ? (
-                    <Badge variant="secondary">Paused</Badge>
-                  ) : (
-                    <Badge variant="default">Active</Badge>
-                  )}
-                </TableCell>
-                <TableCell className="text-right">
-                  <div className="flex justify-end gap-2">
-                    {canManage &&
-                      onPause &&
-                      onResume &&
-                      (config.paused ? (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => onResume(config.id)}
-                          title="Resume health check"
-                        >
-                          <Play className="h-4 w-4" />
-                        </Button>
-                      ) : (
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          onClick={() => onPause(config.id)}
-                          title="Pause health check"
-                        >
-                          <Pause className="h-4 w-4" />
-                        </Button>
-                      ))}
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onEdit(config)}
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    {canManage && (
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-destructive hover:text-destructive"
-                        onClick={() => onDelete(config.id)}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                </TableCell>
-              </TableRow>
+                config={config}
+                strategyName={getStrategyName(config.strategyId)}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                onPause={onPause}
+                onResume={onResume}
+                canManage={canManage}
+              />
             ))
           )}
         </TableBody>
@@ -124,3 +77,95 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
     </div>
   );
 };
+
+interface HealthCheckRowProps {
+  config: HealthCheckConfiguration;
+  strategyName: string;
+  onEdit: (config: HealthCheckConfiguration) => void;
+  onDelete: (id: string) => void;
+  onPause?: (id: string) => void;
+  onResume?: (id: string) => void;
+  canManage: boolean;
+}
+
+const HealthCheckRow: React.FC<HealthCheckRowProps> = ({
+  config,
+  strategyName,
+  onEdit,
+  onDelete,
+  onPause,
+  onResume,
+  canManage,
+}) => {
+  const { isLocked } = useProvenanceLock({
+    kind: "Healthcheck",
+    entityId: config.id,
+  });
+
+  return (
+    <TableRow className={config.paused ? "opacity-60" : ""}>
+      <TableCell className="font-medium">{config.name}</TableCell>
+      <TableCell>{strategyName}</TableCell>
+      <TableCell>{config.intervalSeconds}</TableCell>
+      <TableCell>
+        {config.paused ? (
+          <Badge variant="secondary">Paused</Badge>
+        ) : (
+          <Badge variant="default">Active</Badge>
+        )}
+      </TableCell>
+      <TableCell className="text-right">
+        <div className="flex justify-end gap-2">
+          {canManage &&
+            onPause &&
+            onResume &&
+            (config.paused ? (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onResume(config.id)}
+                title={isLocked ? "Managed by GitOps" : "Resume health check"}
+                disabled={isLocked}
+              >
+                <Play className="h-4 w-4" />
+              </Button>
+            ) : (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => onPause(config.id)}
+                title={isLocked ? "Managed by GitOps" : "Pause health check"}
+                disabled={isLocked}
+              >
+                <Pause className="h-4 w-4" />
+              </Button>
+            ))}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onEdit(config)}
+            title={
+              isLocked
+                ? "View configuration (Managed by GitOps)"
+                : "Edit configuration"
+            }
+          >
+            <Edit className="h-4 w-4" />
+          </Button>
+          {canManage && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              onClick={() => onDelete(config.id)}
+              disabled={isLocked}
+              title={isLocked ? "Managed by GitOps" : "Delete configuration"}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+};

package/src/components/assignments/AssignmentTree.tsx

@@ -25,6 +25,7 @@ interface AssignmentTreeProps {
   selectedNode: AssignmentNodeId | undefined;
   onSelectNode: (nodeId: AssignmentNodeId) => void;
   onToggleAssignment: (configId: string, assigned: boolean) => void;
+  isLocked?: boolean;
 }
 
 // =============================================================================
@@ -37,6 +38,7 @@ export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
   selectedNode,
   onSelectNode,
   onToggleAssignment,
+  isLocked,
 }) => {
   return (
     <div className="py-2">
@@ -99,7 +101,7 @@ export const AssignmentTree: React.FC<AssignmentTreeProps> = ({
       ))}
 
       {/* Available (unassigned) health checks */}
-      {available.length > 0 && (
+      {!isLocked && available.length > 0 && (
         <>
           <IDETreeSection label="Available" />
           {available.map((config) => (

package/src/components/assignments/ExecutionPanel.tsx

@@ -16,6 +16,7 @@ interface ExecutionPanelProps {
   onToggleLocal: () => void;
   onToggleSatellite: (satelliteId: string) => void;
   saving: boolean;
+  isLocked?: boolean;
 }
 
 /**
@@ -29,6 +30,7 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
   onToggleLocal,
   onToggleSatellite,
   saving,
+  isLocked,
 }) => {
   const hasSatellites = satelliteIds.length > 0;
   const willRunAnywhere = includeLocal || hasSatellites;
@@ -49,7 +51,7 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
           <Checkbox
             checked={includeLocal}
             onCheckedChange={onToggleLocal}
-            disabled={saving || (!hasSatellites && includeLocal)}
+            disabled={saving || isLocked || (!hasSatellites && includeLocal)}
           />
           <div>
             <Label className="text-sm font-medium">Run Locally</Label>
@@ -87,7 +89,7 @@ export const ExecutionPanel: React.FC<ExecutionPanelProps> = ({
                   <Checkbox
                     checked={isChecked}
                     onCheckedChange={() => onToggleSatellite(sat.id)}
-                    disabled={saving}
+                    disabled={saving || isLocked}
                   />
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">

package/src/components/assignments/GeneralPanel.tsx

@@ -13,6 +13,7 @@ interface GeneralPanelProps {
   onToggleEnabled: () => void;
   onUnassign: () => void;
   saving: boolean;
+  isLocked?: boolean;
 }
 
 /**
@@ -26,6 +27,7 @@ export const GeneralPanel: React.FC<GeneralPanelProps> = ({
   onToggleEnabled,
   onUnassign,
   saving,
+  isLocked,
 }) => {
   const editUrl = resolveRoute(healthcheckRoutes.routes.edit, {
     configId: configurationId,
@@ -46,7 +48,7 @@ export const GeneralPanel: React.FC<GeneralPanelProps> = ({
           <Checkbox
             checked={enabled}
             onCheckedChange={onToggleEnabled}
-            disabled={saving}
+            disabled={saving || isLocked}
           />
           <div>
             <Label className="text-sm font-medium">Enabled</Label>
@@ -85,7 +87,8 @@ export const GeneralPanel: React.FC<GeneralPanelProps> = ({
           variant="ghost"
           size="sm"
           onClick={onUnassign}
-          disabled={saving}
+          disabled={saving || isLocked}
+          title={isLocked ? "Managed by GitOps" : undefined}
           className="text-destructive hover:text-destructive hover:bg-destructive/10"
         >
           <Trash2 className="h-3.5 w-3.5 mr-1.5" />

package/src/components/assignments/RetentionPanel.tsx

@@ -14,6 +14,7 @@ interface RetentionPanelProps {
   onSave: () => void;
   onReset: () => void;
   saving: boolean;
+  isLocked?: boolean;
 }
 
 /**
@@ -25,6 +26,7 @@ export const RetentionPanel: React.FC<RetentionPanelProps> = ({
   onSave,
   onReset,
   saving,
+  isLocked,
 }) => {
   if (!data) {
     return (
@@ -68,6 +70,7 @@ export const RetentionPanel: React.FC<RetentionPanelProps> = ({
         min={1}
         max={30}
         onChange={(v) => onFieldChange("rawRetentionDays", v)}
+        disabled={saving || isLocked}
       />
 
       {/* Hourly Aggregates */}
@@ -78,6 +81,7 @@ export const RetentionPanel: React.FC<RetentionPanelProps> = ({
         min={7}
         max={365}
         onChange={(v) => onFieldChange("hourlyRetentionDays", v)}
+        disabled={saving || isLocked}
       />
 
       {/* Daily Aggregates */}
@@ -88,6 +92,7 @@ export const RetentionPanel: React.FC<RetentionPanelProps> = ({
         min={30}
         max={1095}
         onChange={(v) => onFieldChange("dailyRetentionDays", v)}
+        disabled={saving || isLocked}
       />
 
       {/* Actions */}
@@ -96,14 +101,14 @@ export const RetentionPanel: React.FC<RetentionPanelProps> = ({
           variant="ghost"
           size="sm"
           onClick={onReset}
-          disabled={saving || !data.isCustom}
+          disabled={saving || isLocked || !data.isCustom}
         >
           Reset to Defaults
         </Button>
         <Button
           size="sm"
           onClick={onSave}
-          disabled={saving || !isValidHierarchy}
+          disabled={saving || isLocked || !isValidHierarchy}
         >
           {saving ? "Saving..." : "Save Retention"}
         </Button>
@@ -123,6 +128,7 @@ function RetentionTier({
   min,
   max,
   onChange,
+  disabled,
 }: {
   label: string;
   description: string;
@@ -130,6 +136,7 @@ function RetentionTier({
   min: number;
   max: number;
   onChange: (value: number) => void;
+  disabled?: boolean;
 }) {
   return (
     <div className="p-3 rounded-lg border bg-muted/30">
@@ -145,6 +152,7 @@ function RetentionTier({
             max={max}
             value={value}
             onChange={(e) => onChange(Number(e.target.value))}
+            disabled={disabled}
             className="h-8 w-20 text-center"
           />
           <span className="text-sm text-muted-foreground w-10">days</span>

package/src/components/assignments/ThresholdsPanel.tsx

@@ -18,6 +18,7 @@ interface ThresholdsPanelProps {
   onChange: (thresholds: StateThresholds) => void;
   onSave: () => void;
   saving: boolean;
+  isLocked?: boolean;
 }
 
 /**
@@ -29,6 +30,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
   onChange,
   onSave,
   saving,
+  isLocked,
 }) => {
   return (
     <div className="p-6 space-y-4">
@@ -64,6 +66,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
               });
             }
           }}
+          disabled={saving || isLocked}
         >
           <SelectTrigger className="w-full">
             <SelectValue />
@@ -96,6 +99,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
             onChange={(v) =>
               onChange({ ...thresholds, healthy: { minSuccessCount: v } })
             }
+            disabled={saving || isLocked}
           />
           <ThresholdCard
             status="warning"
@@ -106,6 +110,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
             onChange={(v) =>
               onChange({ ...thresholds, degraded: { minFailureCount: v } })
             }
+            disabled={saving || isLocked}
           />
           <ThresholdCard
             status="destructive"
@@ -116,6 +121,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
             onChange={(v) =>
               onChange({ ...thresholds, unhealthy: { minFailureCount: v } })
             }
+            disabled={saving || isLocked}
           />
         </div>
       ) : (
@@ -139,6 +145,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
                       windowSize: Number.parseInt(e.target.value) || 10,
                     })
                   }
+                  disabled={saving || isLocked}
                   className="h-8 w-16 text-center"
                 />
                 <span className="text-xs text-muted-foreground">runs</span>
@@ -156,6 +163,7 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
             onChange={(v) =>
               onChange({ ...thresholds, degraded: { minFailureCount: v } })
             }
+            disabled={saving || isLocked}
           />
           <ThresholdCard
             status="destructive"
@@ -167,13 +175,14 @@ export const ThresholdsPanel: React.FC<ThresholdsPanelProps> = ({
             onChange={(v) =>
               onChange({ ...thresholds, unhealthy: { minFailureCount: v } })
             }
+            disabled={saving || isLocked}
           />
         </div>
       )}
 
       {/* Save Button */}
       <div className="flex justify-end pt-2 border-t">
-        <Button size="sm" onClick={onSave} disabled={saving}>
+        <Button size="sm" onClick={onSave} disabled={saving || isLocked}>
           {saving ? "Saving..." : "Save Thresholds"}
         </Button>
       </div>
@@ -214,6 +223,7 @@ function ThresholdCard({
   prefix,
   suffix,
   onChange,
+  disabled,
 }: {
   status: keyof typeof STATUS_STYLES;
   label: string;
@@ -222,6 +232,7 @@ function ThresholdCard({
   prefix?: string;
   suffix: string;
   onChange: (value: number) => void;
+  disabled?: boolean;
 }) {
   const styles = STATUS_STYLES[status];
   return (
@@ -241,6 +252,7 @@ function ThresholdCard({
             min={1}
             value={value}
             onChange={(e) => onChange(Number.parseInt(e.target.value) || 1)}
+            disabled={disabled}
             className="h-8 w-16 text-center"
           />
           <span className="text-xs text-muted-foreground w-20">{suffix}</span>

package/src/pages/AssignmentIDEPage.tsx

@@ -18,6 +18,7 @@ import {
 } from "../components/assignments/AssignmentTree";
 import { GeneralPanel } from "../components/assignments/GeneralPanel";
 import { ThresholdsPanel } from "../components/assignments/ThresholdsPanel";
+import { useProvenanceLock, GitOpsLockBanner } from "@checkstack/gitops-frontend";
 import {
   RetentionPanel,
   type RetentionData,
@@ -61,6 +62,11 @@ const AssignmentIDEPageContent = () => {
       { enabled: !!systemId },
     );
 
+  const { isLocked, provenance } = useProvenanceLock({
+    kind: "System",
+    entityId: systemId,
+  });
+
   const { data: satellitesData } = satelliteClient.listSatellites.useQuery({});
 
   // --- UI State ---
@@ -390,6 +396,7 @@ const AssignmentIDEPageContent = () => {
             onToggleEnabled={() => handleToggleEnabled(configId, assoc.enabled)}
             onUnassign={() => handleToggleAssignment(configId, true)}
             saving={saving}
+            isLocked={isLocked}
           />
         );
       }
@@ -404,6 +411,7 @@ const AssignmentIDEPageContent = () => {
             onChange={(t) => handleThresholdChange(configId, t)}
             onSave={() => handleSaveThresholds(configId)}
             saving={saving}
+            isLocked={isLocked}
           />
         );
       }
@@ -417,6 +425,7 @@ const AssignmentIDEPageContent = () => {
             onSave={() => handleSaveRetention(configId)}
             onReset={() => handleResetRetention(configId)}
             saving={saving}
+            isLocked={isLocked}
           />
         );
       }
@@ -431,6 +440,7 @@ const AssignmentIDEPageContent = () => {
               handleToggleSatellite(configId, satId)
             }
             saving={saving}
+            isLocked={isLocked}
           />
         );
       }
@@ -458,6 +468,11 @@ const AssignmentIDEPageContent = () => {
         </BackLink>
       }
     >
+      {isLocked && provenance && (
+        <div className="mb-4">
+          <GitOpsLockBanner provenance={provenance} />
+        </div>
+      )}
       <IDELayout
         tree={
           <AssignmentTree
@@ -466,6 +481,7 @@ const AssignmentIDEPageContent = () => {
             selectedNode={selectedNode}
             onSelectNode={setSelectedNode}
             onToggleAssignment={handleToggleAssignment}
+            isLocked={isLocked}
           />
         }
         panel={renderPanel()}