@checkstack/healthcheck-frontend 0.14.2 → 0.16.0

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()}