feat(ui): improve Kubernetes node view [r8s-47] (#84)

pull/12292/merge
Steven Kang 2 weeks ago committed by GitHub
parent 81322664ea
commit 8ed7cd80cb

@ -0,0 +1,53 @@
import { NodeCondition } from 'kubernetes-types/core/v1';
import { CellContext } from '@tanstack/react-table';
import { Badge } from '@@/Badge';
import { Tooltip } from '@@/Tip/Tooltip';
import { NodeRowData } from '../types';
import { columnHelper } from './helper';
export const conditions = columnHelper.accessor((row) => getConditions(row), {
header: () => (
<>
Conditions
<Tooltip
position="top"
message="Green indicates the node is healthy. Orange indicates the node is experiencing MemoryPressure, DiskPressure, or PIDPressure."
/>
</>
),
id: 'conditions',
cell: ConditionsCell,
});
function ConditionsCell({
row: { original: node },
}: CellContext<NodeRowData, NodeCondition[]>) {
const conditions = getConditions(node);
return (
<div className="flex flex-wrap gap-1">
{conditions.length > 0
? conditions.map((condition) => (
<Badge
key={condition.type?.toString()}
type={condition.status === 'True' ? 'warn' : 'success'}
>
{condition.type}
</Badge>
))
: '-'}
</div>
);
}
function getConditions(node: NodeRowData) {
return (
// exclude the Ready condition as it is already being utilised in the Status column
node.status?.conditions?.filter(
(condition) => condition.type !== 'Ready'
) ?? []
);
}

@ -1,6 +1,7 @@
import { name } from './name';
import { role } from './role';
import { status } from './status';
import { conditions } from './conditions';
import { cpu } from './cpu';
import { memory } from './memory';
import { version } from './version';
@ -9,13 +10,14 @@ import { getActions } from './actions';
export function getColumns(isServerMetricsEnabled: boolean) {
if (!isServerMetricsEnabled) {
return [name, role, status, cpu, memory, version, ip];
return [name, role, status, conditions, cpu, memory, version, ip];
}
return [
name,
role,
status,
conditions,
cpu,
memory,
version,

Loading…
Cancel
Save