Clarify UI status and remove noisy live regions

This commit is contained in:
2026-10-07 18:47:02 -04:00
parent 45e9bcd4ce
commit e35b84475d
12 changed files with 172 additions and 108 deletions
+17 -3
View File
@@ -1,7 +1,20 @@
export type StatusTone = 'neutral' | 'online' | 'warning' | 'danger' | 'info';
export type StatusShape = 'hollow' | 'circle' | 'triangle' | 'square' | 'ring';
export interface StatusPresentation {
label: string;
tone: StatusTone;
shape: StatusShape;
}
/** A second visual cue keeps state readable without relying on color. */
export const statusShapes: Record<StatusTone, StatusShape> = {
neutral: 'hollow', online: 'circle', warning: 'triangle', danger: 'square', info: 'ring'
};
const states: Record<string, [string, StatusTone]> = {
provisioning: ['Provisioning', 'info'],
online: ['Online', 'online'], offline: ['Offline', 'danger'], stale: ['Report outdated', 'warning'], starting: ['Starting', 'info'],
online: ['Online', 'online'], offline: ['Offline', 'danger'], stale: ['Not responding', 'warning'], starting: ['Starting', 'info'],
'host-offline': ['Host offline', 'danger'], 'not-responding': ['Not responding', 'warning'], stopped: ['Stopped', 'neutral'], unknown: ['Unknown', 'neutral'],
queued: ['Queued', 'neutral'], pending: ['Queued for restart', 'neutral'], running: ['In progress', 'info'], active: ['In progress', 'info'],
deploying: ['Installing files', 'info'], restarting: ['Restarting', 'info'],
observing: ['Collecting test evidence', 'info'], 'rolling-back': ['Rolling back', 'info'],
@@ -15,7 +28,8 @@ const states: Record<string, [string, StatusTone]> = {
manual: ['Manual action needed', 'warning'], paused: ['Paused', 'warning'], inconclusive: ['Missing evidence', 'warning'],
untested: ['Needs testing', 'neutral'], testing: ['Beta active', 'info'], empty: ['No versions', 'neutral'], attention: ['Needs attention', 'warning']
};
export function statusPresentation(state: string): { label: string; tone: StatusTone } {
export function statusPresentation(state: string): StatusPresentation {
const result = states[state];
return result ? { label: result[0], tone: result[1] } : { label: (state.charAt(0).toUpperCase() + state.slice(1)).replaceAll('-', ' '), tone: 'neutral' };
const [label, tone] = result ?? [(state.charAt(0).toUpperCase() + state.slice(1)).replaceAll('-', ' ') || 'Unknown', 'neutral'];
return { label, tone, shape: statusShapes[tone] };
}