Skip to content

Commit 42bbda1

Browse files
acarranoqoveryclaude
acarranoqovery
and
claude
committed
feat(cluster-metrics): distinguish deploying vs removing nodes in node list
Show 'Deploying' status (blue) for nodes with Ready=False that are not cordoned, and 'Removing' status (neutral) for cordoned/unschedulable nodes. Uses node.unschedulable as the universal signal across all k8s providers. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 1280bbf commit 42bbda1

File tree

1 file changed

+24
-36
lines changed

1 file changed

+24
-36
lines changed

‎libs/domains/cluster-metrics/feature/src/lib/cluster-table-node/cluster-table-node.tsx‎

Lines changed: 24 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ function MetricProgressBar({
3333
<div className="flex w-full items-center gap-1 text-ssm">
3434
<span
3535
className={clsx('flex min-w-8 items-center gap-1 whitespace-nowrap', {
36-
'text-negative': isPressure,
37-
'text-neutral-subtle': !isPressure,
36+
'text-red-500': isPressure,
37+
'text-neutral-400': !isPressure,
3838
})}
3939
>
4040
{totalPercentage}%
@@ -49,21 +49,21 @@ function MetricProgressBar({
4949
<Tooltip
5050
content={
5151
<div className="flex flex-col gap-1 font-normal">
52-
<div className="flex items-center justify-between border-b border-neutralInvert">
52+
<div className="flex items-center justify-between border-b border-neutral-400">
5353
<span className="px-2.5 py-1.5">{type === 'cpu' ? 'CPU' : 'Memory'}</span>
5454
</div>
5555
<div className="flex flex-col gap-1 px-2.5 py-1.5">
5656
<div className="flex w-full items-center gap-1.5">
5757
<span className="flex items-center gap-2">
58-
<span className="h-2 w-2 rounded-full bg-brand-9" />
58+
<span className="h-2 w-2 rounded-full bg-brand-500" />
5959
Reserved
6060
</span>
6161
<span className="ml-auto block">
6262
{reserved} {unit}
6363
</span>
6464
</div>
6565
</div>
66-
<div className="flex items-center justify-between border-t border-neutralInvert px-2.5 py-1.5">
66+
<div className="flex items-center justify-between border-t border-neutral-400 px-2.5 py-1.5">
6767
<span>Total Available</span>
6868
<span className="ml-auto block">
6969
{total} {unit}
@@ -75,7 +75,7 @@ function MetricProgressBar({
7575
>
7676
<div className="relative w-full">
7777
<ProgressBar.Root>
78-
<ProgressBar.Cell value={reservedPercentage} color="var(--brand-9)" />
78+
<ProgressBar.Cell value={reservedPercentage} color="var(--color-brand-400)" />
7979
</ProgressBar.Root>
8080
</div>
8181
</Tooltip>
@@ -130,14 +130,16 @@ export function ClusterTableNode({
130130
// Using div with flex instead of Table.Root for better alignment with cluster-table-nodepool
131131
// Ensures consistent column widths and spacing between both tables
132132
return (
133-
<div className={twMerge('divide-y divide-neutral overflow-hidden border-t border-neutral text-ssm', className)}>
134-
<div className="flex divide-x divide-neutral bg-surface-neutral-subtle font-medium text-neutral-subtle">
135-
<div className="flex h-8 w-1/4 items-center px-3 text-neutral-subtle">Nodes</div>
136-
<div className="flex h-8 w-1/4 items-center px-3 text-neutral-subtle">CPU</div>
137-
<div className="flex h-8 w-1/4 items-center px-3 text-neutral-subtle">Memory</div>
138-
<div className="flex h-8 w-[calc(35%/3)] items-center px-3 text-neutral-subtle">Instance</div>
139-
<div className="flex h-8 w-[calc(20%/3)] items-center px-3 text-neutral-subtle">Disk</div>
140-
<div className="flex h-8 w-[calc(20%/3)] items-center px-3 text-neutral-subtle">Age</div>
133+
<div
134+
className={twMerge('divide-y divide-neutral-200 overflow-hidden border-t border-neutral-200 text-ssm', className)}
135+
>
136+
<div className="flex divide-x divide-neutral-200 bg-neutral-100 font-medium text-neutral-350">
137+
<div className="flex h-8 w-1/4 items-center px-3">Nodes</div>
138+
<div className="flex h-8 w-1/4 items-center px-3">CPU</div>
139+
<div className="flex h-8 w-1/4 items-center px-3">Memory</div>
140+
<div className="flex h-8 w-[calc(35%/3)] items-center px-3">Instance</div>
141+
<div className="flex h-8 w-[calc(20%/3)] items-center px-3">Disk</div>
142+
<div className="flex h-8 w-[calc(20%/3)] items-center px-3">Age</div>
141143
</div>
142144

143145
{nodes?.map((node) => {
@@ -154,14 +156,7 @@ export function ClusterTableNode({
154156
(condition) => condition.type === 'PIDPressure' && condition.status === 'True'
155157
)
156158

157-
const isRemoving =
158-
node.unschedulable ||
159-
node.taints?.some(
160-
(taint) =>
161-
taint.key === 'karpenter.sh/disrupted' ||
162-
taint.key === 'ToBeDeletedByClusterAutoscaler' ||
163-
taint.key === 'node.kubernetes.io/unschedulable'
164-
)
159+
const isRemoving = node.unschedulable
165160
const isDeploying = !isReady && !isRemoving
166161

167162
const isWarning =
@@ -249,7 +244,7 @@ export function ClusterTableNode({
249244
isPressure={isMemoryPressure}
250245
/>
251246
</div>
252-
<div className="flex h-12 w-[calc(35%/3)] items-center gap-2 overflow-hidden px-3 text-neutral-subtle">
247+
<div className="flex h-12 w-[calc(35%/3)] items-center gap-2 overflow-hidden px-3">
253248
<div className="flex items-center gap-1.5">
254249
<Badge variant="surface" radius="full" className="lowercase">
255250
{node.instance_type?.replace('_', ' ')}
@@ -263,15 +258,8 @@ export function ClusterTableNode({
263258
{node.labels[KEY_KARPENTER_CAPACITY_TYPE] === 'spot' && (
264259
<Tooltip content="Spot instance">
265260
<Badge variant="surface" radius="full" className="w-6 justify-center p-0">
266-
<svg
267-
className="text-neutral-subtle"
268-
xmlns="http://www.w3.org/2000/svg"
269-
width="12"
270-
height="12"
271-
fill="none"
272-
viewBox="0 0 12 12"
273-
>
274-
<g fill="currentColor" fillRule="evenodd" clipPath="url(#clip0_29751_96020)" clipRule="evenodd">
261+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
262+
<g fill="#383E50" fillRule="evenodd" clipPath="url(#clip0_29751_96020)" clipRule="evenodd">
275263
<path d="M1.5 11.625c0-.31.252-.562.563-.562h7.874a.562.562 0 1 1 0 1.124H2.064a.56.56 0 0 1-.563-.562M1.5.375c0-.31.252-.562.563-.562h7.874a.562.562 0 1 1 0 1.125H2.064A.563.563 0 0 1 1.5.375"></path>
276264
<path d="M5.602 5.602c.22-.22.576-.22.796 0L8.88 8.085c.316.316.494.746.494 1.193v2.347a.562.562 0 1 1-1.125 0V9.278c0-.149-.06-.292-.165-.397L6 6.795 3.915 8.881a.56.56 0 0 0-.165.397v2.347a.562.562 0 1 1-1.125 0V9.278c0-.447.178-.876.494-1.193z"></path>
277265
<path d="M3.188-.187c.31 0 .562.251.562.562v2.347c0 .149.06.292.165.397L6 5.205l2.085-2.086a.56.56 0 0 0 .165-.397V.375a.563.563 0 0 1 1.125 0v2.347c0 .447-.178.876-.494 1.193L6.398 6.398a.563.563 0 0 1-.796 0L3.12 3.915a1.7 1.7 0 0 1-.494-1.193V.375c0-.31.252-.562.563-.562"></path>
@@ -288,21 +276,21 @@ export function ClusterTableNode({
288276
</div>
289277
<div
290278
className={twMerge(
291-
clsx('flex h-12 w-[calc(20%/3)] items-center px-3 text-neutral-subtle', {
292-
'text-negative': isDiskPressure,
279+
clsx('flex h-12 w-[calc(20%/3)] items-center px-3 text-neutral-400', {
280+
'text-red-500': isDiskPressure,
293281
})
294282
)}
295283
>
296284
{formatNumber(mibToGib(node.resources_capacity.ephemeral_storage_mib || 0))} GB
297285
{isDiskPressure && (
298286
<Tooltip content="Node has disk pressure condition. Update the size or your instance type.">
299-
<span className="ml-1 inline-block text-negative">
287+
<span className="ml-1 inline-block text-red-500">
300288
<Icon iconName="circle-exclamation" iconStyle="regular" />
301289
</span>
302290
</Tooltip>
303291
)}
304292
</div>
305-
<div className="flex h-12 w-[calc(20%/3)] items-center px-3 text-neutral-subtle">
293+
<div className="flex h-12 w-[calc(20%/3)] items-center px-3 text-neutral-400">
306294
{timeAgo(new Date(node.created_at), true)}
307295
</div>
308296
</div>

0 commit comments

Comments
 (0)