@checkstack/healthcheck-frontend 0.14.2 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +47 -0
  2. package/package.json +1 -1
  3. package/src/components/HealthCheckDrawer.tsx +546 -0
  4. package/src/components/HealthCheckList.tsx +102 -57
  5. package/src/components/HealthCheckSystemOverview.tsx +78 -458
  6. package/src/components/SystemHealthBadge.tsx +2 -2
  7. package/src/components/assignments/AssignmentTree.tsx +3 -1
  8. package/src/components/assignments/ExecutionPanel.tsx +4 -2
  9. package/src/components/assignments/GeneralPanel.tsx +5 -2
  10. package/src/components/assignments/RetentionPanel.tsx +10 -2
  11. package/src/components/assignments/ThresholdsPanel.tsx +13 -1
  12. package/src/pages/AssignmentIDEPage.tsx +16 -0
package/src/components/HealthCheckList.tsx CHANGED
@@ -14,6 +14,7 @@ import {
14
14
  Badge,
15
15
  } from "@checkstack/ui";
16
16
  import { Trash2, Edit, Pause, Play } from "lucide-react";
17
+ import { useProvenanceLock } from "@checkstack/gitops-frontend";
17
18
 
18
19
  interface HealthCheckListProps {
19
20
  configurations: HealthCheckConfiguration[];
@@ -59,64 +60,16 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
59
60
  </TableRow>
60
61
  ) : (
61
62
  configurations.map((config) => (
62
- <TableRow
63
+ <HealthCheckRow
63
64
  key={config.id}
64
- className={config.paused ? "opacity-60" : ""}
65
- >
66
- <TableCell className="font-medium">{config.name}</TableCell>
67
- <TableCell>{getStrategyName(config.strategyId)}</TableCell>
68
- <TableCell>{config.intervalSeconds}</TableCell>
69
- <TableCell>
70
- {config.paused ? (
71
- <Badge variant="secondary">Paused</Badge>
72
- ) : (
73
- <Badge variant="default">Active</Badge>
74
- )}
75
- </TableCell>
76
- <TableCell className="text-right">
77
- <div className="flex justify-end gap-2">
78
- {canManage &&
79
- onPause &&
80
- onResume &&
81
- (config.paused ? (
82
- <Button
83
- variant="ghost"
84
- size="icon"
85
- onClick={() => onResume(config.id)}
86
- title="Resume health check"
87
- >
88
- <Play className="h-4 w-4" />
89
- </Button>
90
- ) : (
91
- <Button
92
- variant="ghost"
93
- size="icon"
94
- onClick={() => onPause(config.id)}
95
- title="Pause health check"
96
- >
97
- <Pause className="h-4 w-4" />
98
- </Button>
99
- ))}
100
- <Button
101
- variant="ghost"
102
- size="icon"
103
- onClick={() => onEdit(config)}
104
- >
105
- <Edit className="h-4 w-4" />
106
- </Button>
107
- {canManage && (
108
- <Button
109
- variant="ghost"
110
- size="icon"
111
- className="text-destructive hover:text-destructive"
112
- onClick={() => onDelete(config.id)}
113
- >
114
- <Trash2 className="h-4 w-4" />
115
- </Button>
116
- )}
117
- </div>
118
- </TableCell>
119
- </TableRow>
65
+ config={config}
66
+ strategyName={getStrategyName(config.strategyId)}
67
+ onEdit={onEdit}
68
+ onDelete={onDelete}
69
+ onPause={onPause}
70
+ onResume={onResume}
71
+ canManage={canManage}
72
+ />
120
73
  ))
121
74
  )}
122
75
  </TableBody>
@@ -124,3 +77,95 @@ export const HealthCheckList: React.FC<HealthCheckListProps> = ({
124
77
  </div>
125
78
  );
126
79
  };
80
+
81
+ interface HealthCheckRowProps {
82
+ config: HealthCheckConfiguration;
83
+ strategyName: string;
84
+ onEdit: (config: HealthCheckConfiguration) => void;
85
+ onDelete: (id: string) => void;
86
+ onPause?: (id: string) => void;
87
+ onResume?: (id: string) => void;
88
+ canManage: boolean;
89
+ }
90
+
91
+ const HealthCheckRow: React.FC<HealthCheckRowProps> = ({
92
+ config,
93
+ strategyName,
94
+ onEdit,
95
+ onDelete,
96
+ onPause,
97
+ onResume,
98
+ canManage,
99
+ }) => {
100
+ const { isLocked } = useProvenanceLock({
101
+ kind: "Healthcheck",
102
+ entityId: config.id,
103
+ });
104
+
105
+ return (
106
+ <TableRow className={config.paused ? "opacity-60" : ""}>
107
+ <TableCell className="font-medium">{config.name}</TableCell>
108
+ <TableCell>{strategyName}</TableCell>
109
+ <TableCell>{config.intervalSeconds}</TableCell>
110
+ <TableCell>
111
+ {config.paused ? (
112
+ <Badge variant="secondary">Paused</Badge>
113
+ ) : (
114
+ <Badge variant="default">Active</Badge>
115
+ )}
116
+ </TableCell>
117
+ <TableCell className="text-right">
118
+ <div className="flex justify-end gap-2">
119
+ {canManage &&
120
+ onPause &&
121
+ onResume &&
122
+ (config.paused ? (
123
+ <Button
124
+ variant="ghost"
125
+ size="icon"
126
+ onClick={() => onResume(config.id)}
127
+ title={isLocked ? "Managed by GitOps" : "Resume health check"}
128
+ disabled={isLocked}
129
+ >
130
+ <Play className="h-4 w-4" />
131
+ </Button>
132
+ ) : (
133
+ <Button
134
+ variant="ghost"
135
+ size="icon"
136
+ onClick={() => onPause(config.id)}
137
+ title={isLocked ? "Managed by GitOps" : "Pause health check"}
138
+ disabled={isLocked}
139
+ >
140
+ <Pause className="h-4 w-4" />
141
+ </Button>
142
+ ))}
143
+ <Button
144
+ variant="ghost"
145
+ size="icon"
146
+ onClick={() => onEdit(config)}
147
+ title={
148
+ isLocked
149
+ ? "View configuration (Managed by GitOps)"
150
+ : "Edit configuration"
151
+ }
152
+ >
153
+ <Edit className="h-4 w-4" />
154
+ </Button>
155
+ {canManage && (
156
+ <Button
157
+ variant="ghost"
158
+ size="icon"
159
+ className="text-destructive hover:text-destructive"
160
+ onClick={() => onDelete(config.id)}
161
+ disabled={isLocked}
162
+ title={isLocked ? "Managed by GitOps" : "Delete configuration"}
163
+ >
164
+ <Trash2 className="h-4 w-4" />
165
+ </Button>
166
+ )}
167
+ </div>
168
+ </TableCell>
169
+ </TableRow>
170
+ );
171
+ };