mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-24 08:57:25 +00:00
2e82eb44fe
The Topology view now offers three layouts so the canvas adapts to how the fleet is organised, not the other way around: - Hub: the gateway anchored on the left with remotes radiating right - Grouped (Skipper+): remotes cluster by their primary node label, with the local node in its own cluster and unlabeled remotes in an Unlabeled cluster - Free (Skipper+): drag any node; positions persist per browser via local storage Node cards gain label pills (Skipper+), a cordon banner with reason tooltip, a latency chip for online remotes, and a stale pilot-heartbeat glyph. All fields are sourced from /api/fleet/overview, which already returns cordon, latency, and pilot timestamps; no backend changes required. Community continues to see the single Hub layout (without the toolbar, no gating cues), matching the visibility principle that paid affordances are hidden from lower tiers rather than displayed as locked teasers. The backend /api/node-labels route is already requirePaid, so the data gate is honoured end to end. Includes unit tests for the layout module (hub/grouped/free coverage) and the preferences hook (round-trip plus corrupt-JSON fallback).
138 lines
5.1 KiB
TypeScript
138 lines
5.1 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import {
|
|
layoutFleetGraph,
|
|
LOCAL_CLUSTER_ID,
|
|
UNLABELED_CLUSTER_ID,
|
|
type FleetTopologyNode,
|
|
} from '../fleet-topology-layout';
|
|
|
|
function makeNode(
|
|
id: number,
|
|
type: 'local' | 'remote',
|
|
overrides: Partial<FleetTopologyNode> = {},
|
|
): FleetTopologyNode {
|
|
return {
|
|
id,
|
|
name: `node-${id}`,
|
|
type,
|
|
status: 'online',
|
|
cpuPercent: 10,
|
|
memPercent: 20,
|
|
diskPercent: 30,
|
|
stackCount: 1,
|
|
runningCount: 2,
|
|
critical: false,
|
|
labels: [],
|
|
cordoned: false,
|
|
cordonedReason: null,
|
|
latencyMs: null,
|
|
pilotLastSeen: null,
|
|
nodeMode: null,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
describe('layoutFleetGraph', () => {
|
|
it('returns empty arrays when there are no nodes', () => {
|
|
const result = layoutFleetGraph([], { mode: 'hub' });
|
|
expect(result.nodes).toEqual([]);
|
|
expect(result.edges).toEqual([]);
|
|
});
|
|
|
|
it('hub mode emits one edge from local to each remote', () => {
|
|
const nodes = [
|
|
makeNode(1, 'local'),
|
|
makeNode(2, 'remote'),
|
|
makeNode(3, 'remote'),
|
|
makeNode(4, 'remote'),
|
|
];
|
|
const result = layoutFleetGraph(nodes, { mode: 'hub' });
|
|
expect(result.edges).toHaveLength(3);
|
|
for (const edge of result.edges) {
|
|
expect(edge.source).toBe('1');
|
|
expect(['2', '3', '4']).toContain(edge.target);
|
|
}
|
|
expect(result.nodes.map(n => n.id).sort()).toEqual(['1', '2', '3', '4']);
|
|
for (const n of result.nodes) {
|
|
expect((n.data as { clusterLabel?: string }).clusterLabel).toBeUndefined();
|
|
}
|
|
});
|
|
|
|
it('grouped mode assigns local to __local__ and remotes to their primary label cluster', () => {
|
|
const nodes = [
|
|
makeNode(1, 'local', { labels: ['prod'] }),
|
|
makeNode(2, 'remote', { labels: ['prod', 'aws'] }),
|
|
makeNode(3, 'remote', { labels: ['staging'] }),
|
|
makeNode(4, 'remote', { labels: [] }),
|
|
];
|
|
const result = layoutFleetGraph(nodes, { mode: 'grouped' });
|
|
const clusterByNodeId = new Map<string, string | undefined>(
|
|
result.nodes.map(n => [n.id, (n.data as { clusterLabel?: string }).clusterLabel]),
|
|
);
|
|
expect(clusterByNodeId.get('1')).toBe(LOCAL_CLUSTER_ID);
|
|
// Primary label is alphabetically first: 'aws' wins over 'prod'.
|
|
expect(clusterByNodeId.get('2')).toBe('aws');
|
|
expect(clusterByNodeId.get('3')).toBe('staging');
|
|
expect(clusterByNodeId.get('4')).toBe(UNLABELED_CLUSTER_ID);
|
|
// Real edges only — pseudo intra-cluster edges must not surface.
|
|
for (const edge of result.edges) {
|
|
expect(edge.source).toBe('1');
|
|
}
|
|
});
|
|
|
|
it('grouped mode with no labels collapses remotes into the unlabeled cluster', () => {
|
|
const nodes = [
|
|
makeNode(1, 'local'),
|
|
makeNode(2, 'remote'),
|
|
makeNode(3, 'remote'),
|
|
];
|
|
const result = layoutFleetGraph(nodes, { mode: 'grouped' });
|
|
const cluster = (id: string) =>
|
|
(result.nodes.find(n => n.id === id)?.data as { clusterLabel?: string }).clusterLabel;
|
|
expect(cluster('1')).toBe(LOCAL_CLUSTER_ID);
|
|
expect(cluster('2')).toBe(UNLABELED_CLUSTER_ID);
|
|
expect(cluster('3')).toBe(UNLABELED_CLUSTER_ID);
|
|
});
|
|
|
|
it('free mode overrides positions for ids present in savedPositions', () => {
|
|
const nodes = [
|
|
makeNode(1, 'local'),
|
|
makeNode(2, 'remote'),
|
|
makeNode(3, 'remote'),
|
|
];
|
|
const saved = {
|
|
'2': { x: 500, y: 99 },
|
|
};
|
|
const result = layoutFleetGraph(nodes, { mode: 'free', savedPositions: saved });
|
|
const byId = new Map(result.nodes.map(n => [n.id, n.position]));
|
|
expect(byId.get('2')).toEqual({ x: 500, y: 99 });
|
|
// Node 3 has no saved position; falls back to Dagre-derived (some
|
|
// numeric coordinate, not the saved override).
|
|
const pos3 = byId.get('3')!;
|
|
expect(typeof pos3.x).toBe('number');
|
|
expect(pos3).not.toEqual({ x: 500, y: 99 });
|
|
});
|
|
|
|
it('free mode without any savedPositions matches hub layout positions', () => {
|
|
const nodes = [makeNode(1, 'local'), makeNode(2, 'remote')];
|
|
const hub = layoutFleetGraph(nodes, { mode: 'hub' });
|
|
const free = layoutFleetGraph(nodes, { mode: 'free' });
|
|
const hubPositions = new Map(hub.nodes.map(n => [n.id, n.position]));
|
|
const freePositions = new Map(free.nodes.map(n => [n.id, n.position]));
|
|
for (const id of ['1', '2']) {
|
|
expect(freePositions.get(id)).toEqual(hubPositions.get(id));
|
|
}
|
|
});
|
|
|
|
it('offline remote produces a dashed edge style', () => {
|
|
const nodes = [
|
|
makeNode(1, 'local'),
|
|
makeNode(2, 'remote', { status: 'offline' }),
|
|
];
|
|
const result = layoutFleetGraph(nodes, { mode: 'hub' });
|
|
const edge = result.edges[0];
|
|
const style = edge.style as { strokeDasharray?: string };
|
|
expect(style.strokeDasharray).toBe('4 4');
|
|
});
|
|
});
|