{#each Array.from({ length: rack.heightU }, (_, i) => rack.heightU - i) as unit (unit)}
@@ -76,7 +79,7 @@
position: absolute;
inset: 0;
overflow: auto;
- padding: 6.5rem 1rem 1rem;
+ padding: 10rem 1rem 1rem;
background: var(--app-bg, transparent);
}
@@ -107,6 +110,12 @@
color: var(--panel-contrast);
}
+ .rack-height-tag {
+ font-size: 0.7rem;
+ font-weight: 700;
+ color: var(--muted-text);
+ }
+
.rack-frame {
position: relative;
width: min(86vw, 340px);
@@ -137,8 +146,6 @@
.rack-slot {
position: absolute;
- left: 2.1rem;
- right: 0.35rem;
margin-top: 2px;
display: flex;
align-items: center;
diff --git a/src/lib/data/networkEditor.ts b/src/lib/data/networkEditor.ts
index 13b85c2..0a12e65 100644
--- a/src/lib/data/networkEditor.ts
+++ b/src/lib/data/networkEditor.ts
@@ -344,6 +344,42 @@ export function deletePort(
return cloned;
}
+export function renameRack(data: NetworkData, previousName: string, nextName: string): NetworkData {
+ const cloned = cloneNetworkData(data);
+ const trimmed = nextName.trim();
+ if (!trimmed || equalsIgnoreCase(previousName, trimmed)) {
+ return cloned;
+ }
+
+ for (const machine of cloned.machines) {
+ if (machine.rack && equalsIgnoreCase(machine.rack.name, previousName)) {
+ machine.rack.name = trimmed;
+ }
+ }
+ for (const device of cloned.devices) {
+ if (device.rack && equalsIgnoreCase(device.rack.name, previousName)) {
+ device.rack.name = trimmed;
+ }
+ }
+ const definition = cloned.racks?.find((rack) => equalsIgnoreCase(rack.name, previousName));
+ if (definition) {
+ definition.name = trimmed;
+ }
+ // renaming onto an existing rack merges them; keep the first definition
+ if (cloned.racks) {
+ const seen = new Set();
+ cloned.racks = cloned.racks.filter((rack) => {
+ const key = rack.name.toLowerCase();
+ if (seen.has(key)) {
+ return false;
+ }
+ seen.add(key);
+ return true;
+ });
+ }
+ return cloned;
+}
+
export function setPortCable(
data: NetworkData,
kind: OwnerKind,
diff --git a/src/lib/data/rackLayout.ts b/src/lib/data/rackLayout.ts
index 7435f04..a19ec57 100644
--- a/src/lib/data/rackLayout.ts
+++ b/src/lib/data/rackLayout.ts
@@ -8,31 +8,143 @@ export interface RackSlot {
heightU: number;
iconKey?: string;
subtitle: string;
+ /** Horizontal lane when several items share the same U (e.g. on a shelf). */
+ laneIndex: number;
+ laneCount: number;
}
export interface RackColumn {
name: string;
heightU: number;
+ declared: boolean;
+ declaredHeightU?: number;
slots: RackSlot[];
}
export interface RackLayout {
racks: RackColumn[];
- overlaps: string[];
+ warnings: string[];
unrackedCount: number;
}
const minimumRackHeightU = 12;
+function slotsOverlap(a: RackSlot, b: RackSlot): boolean {
+ const aTop = a.unit + a.heightU - 1;
+ const bTop = b.unit + b.heightU - 1;
+ return a.unit <= bTop && b.unit <= aTop;
+}
+
+function sameRange(a: RackSlot, b: RackSlot): boolean {
+ return a.unit === b.unit && a.heightU === b.heightU;
+}
+
+/**
+ * Assigns horizontal lanes so overlapping items render side by side.
+ * Items occupying the exact same U range are treated as sharing a shelf and
+ * do not warn; partially overlapping ranges are reported as conflicts.
+ */
+function assignLanes(slots: RackSlot[], rackName: string, warnings: string[]) {
+ // connected components of the overlap graph
+ const componentOf = new Map();
+ let componentCount = 0;
+ for (const slot of slots) {
+ const touching = slots.filter((other) => componentOf.has(other) && slotsOverlap(slot, other));
+ const componentIds = new Set(touching.map((other) => componentOf.get(other) ?? 0));
+ if (componentIds.size === 0) {
+ componentOf.set(slot, componentCount);
+ componentCount += 1;
+ continue;
+ }
+ const [target] = [...componentIds].sort((a, b) => a - b);
+ componentOf.set(slot, target);
+ for (const [other, id] of componentOf.entries()) {
+ if (componentIds.has(id)) {
+ componentOf.set(other, target);
+ }
+ }
+ }
+
+ const componentSlots = new Map();
+ for (const slot of slots) {
+ const id = componentOf.get(slot) ?? 0;
+ const members = componentSlots.get(id) ?? [];
+ members.push(slot);
+ componentSlots.set(id, members);
+ }
+
+ for (const members of componentSlots.values()) {
+ const ordered = [...members].sort((a, b) => a.unit - b.unit || a.name.localeCompare(b.name));
+ const lanes: RackSlot[][] = [];
+ for (const slot of ordered) {
+ let placed = false;
+ for (const [laneIndex, lane] of lanes.entries()) {
+ if (!lane.some((other) => slotsOverlap(slot, other))) {
+ lane.push(slot);
+ slot.laneIndex = laneIndex;
+ placed = true;
+ break;
+ }
+ }
+ if (!placed) {
+ slot.laneIndex = lanes.length;
+ lanes.push([slot]);
+ }
+ }
+ for (const slot of members) {
+ slot.laneCount = lanes.length;
+ }
+
+ for (let i = 0; i < ordered.length; i += 1) {
+ for (let j = i + 1; j < ordered.length; j += 1) {
+ const a = ordered[i];
+ const b = ordered[j];
+ if (slotsOverlap(a, b) && !sameRange(a, b)) {
+ warnings.push(
+ `Rack "${rackName}": "${a.name}" (U${a.unit}–U${a.unit + a.heightU - 1}) partially overlaps "${b.name}" (U${b.unit}–U${b.unit + b.heightU - 1}).`
+ );
+ }
+ }
+ }
+ }
+}
+
export function buildRackLayout(data: NetworkData): RackLayout {
const slotsByRack = new Map();
+ const canonicalNames = new Map();
let unrackedCount = 0;
- const place = (slot: Omit & { heightU?: number }, rackName: string) => {
- const key = rackName.trim();
- const slots = slotsByRack.get(key) ?? [];
- slots.push({ ...slot, heightU: Math.max(1, Math.round(slot.heightU ?? 1)) });
- slotsByRack.set(key, slots);
+ const canonical = (rawName: string): string => {
+ const trimmed = rawName.trim();
+ const key = trimmed.toLowerCase();
+ const existing = canonicalNames.get(key);
+ if (existing) {
+ return existing;
+ }
+ canonicalNames.set(key, trimmed);
+ return trimmed;
+ };
+
+ for (const definition of data.racks ?? []) {
+ const name = canonical(definition.name);
+ if (!slotsByRack.has(name)) {
+ slotsByRack.set(name, []);
+ }
+ }
+
+ const place = (
+ slot: Omit & { heightU?: number },
+ rackName: string
+ ) => {
+ const name = canonical(rackName);
+ const slots = slotsByRack.get(name) ?? [];
+ slots.push({
+ ...slot,
+ heightU: Math.max(1, Math.round(slot.heightU ?? 1)),
+ laneIndex: 0,
+ laneCount: 1
+ });
+ slotsByRack.set(name, slots);
};
for (const [index, machine] of data.machines.entries()) {
@@ -72,46 +184,57 @@ export function buildRackLayout(data: NetworkData): RackLayout {
);
}
- const overlaps: string[] = [];
+ const declaredByName = new Map(
+ (data.racks ?? []).map((definition) => [definition.name.trim().toLowerCase(), definition])
+ );
+
+ const warnings: string[] = [];
const racks: RackColumn[] = [...slotsByRack.entries()]
.sort(([a], [b]) => a.localeCompare(b))
.map(([name, slots]) => {
const sorted = [...slots].sort((a, b) => b.unit - a.unit || a.name.localeCompare(b.name));
- const topUnit = Math.max(...sorted.map((slot) => slot.unit + slot.heightU - 1));
- for (let i = 0; i < sorted.length; i += 1) {
- for (let j = i + 1; j < sorted.length; j += 1) {
- const a = sorted[i];
- const b = sorted[j];
- const aTop = a.unit + a.heightU - 1;
- const bTop = b.unit + b.heightU - 1;
- if (a.unit <= bTop && b.unit <= aTop) {
- overlaps.push(
- `Rack "${name}": "${a.name}" (U${a.unit}–U${aTop}) overlaps "${b.name}" (U${b.unit}–U${bTop}).`
- );
- }
- }
+ assignLanes(sorted, name, warnings);
+ const topUnit =
+ sorted.length > 0 ? Math.max(...sorted.map((slot) => slot.unit + slot.heightU - 1)) : 0;
+ const definition = declaredByName.get(name.toLowerCase());
+ const declaredHeightU = definition?.heightU;
+ if (typeof declaredHeightU === 'number' && topUnit > declaredHeightU) {
+ warnings.push(
+ `Rack "${name}" is declared as ${declaredHeightU}U but items reach U${topUnit}.`
+ );
}
+ const heightU =
+ typeof declaredHeightU === 'number'
+ ? Math.max(declaredHeightU, topUnit)
+ : Math.max(minimumRackHeightU, topUnit);
return {
name,
- heightU: Math.max(minimumRackHeightU, topUnit),
+ heightU,
+ declared: Boolean(definition),
+ declaredHeightU,
slots: sorted
};
});
- return { racks, overlaps, unrackedCount };
+ return { racks, warnings, unrackedCount };
}
export function knownRackNames(data: NetworkData): string[] {
- const names = new Set();
- for (const machine of data.machines) {
- if (machine.rack?.name) {
- names.add(machine.rack.name);
+ const names = new Map();
+ const add = (name: string | undefined) => {
+ const trimmed = name?.trim();
+ if (trimmed && !names.has(trimmed.toLowerCase())) {
+ names.set(trimmed.toLowerCase(), trimmed);
}
+ };
+ for (const definition of data.racks ?? []) {
+ add(definition.name);
+ }
+ for (const machine of data.machines) {
+ add(machine.rack?.name);
}
for (const device of data.devices) {
- if (device.rack?.name) {
- names.add(device.rack.name);
- }
+ add(device.rack?.name);
}
- return [...names].sort((a, b) => a.localeCompare(b));
+ return [...names.values()].sort((a, b) => a.localeCompare(b));
}
diff --git a/src/lib/shared/networkSchemaCore.mjs b/src/lib/shared/networkSchemaCore.mjs
index 4297a0f..483b2e9 100644
--- a/src/lib/shared/networkSchemaCore.mjs
+++ b/src/lib/shared/networkSchemaCore.mjs
@@ -9,7 +9,8 @@
* @typedef {{ machineName: string; ipAddress: string; role: string; operatingSystem: string; iconKey?: string; notes?: string; software: { vms: VM[] }; hardware: Hardware; ports?: Port[]; rack?: RackPlacement }} Machine
* @typedef {{ name: string; ipAddress: string; type: string; iconKey?: string; notes?: string; ports?: Port[]; rack?: RackPlacement }} NetworkDevice
* @typedef {{ cidr: string; name?: string; vlanId?: number }} Subnet
- * @typedef {{ machines: Machine[]; devices: NetworkDevice[]; subnets?: Subnet[] }} NetworkData
+ * @typedef {{ name: string; heightU?: number }} RackDefinition
+ * @typedef {{ machines: Machine[]; devices: NetworkDevice[]; subnets?: Subnet[]; racks?: RackDefinition[] }} NetworkData
* @typedef {{ valid: boolean; errors: ValidationIssue[]; data?: NetworkData }} ValidationResult
* @typedef {{ allowEmpty?: boolean; optional?: boolean }} ReadStringOptions
* @typedef {{ optional?: boolean; min?: number }} ReadNumberOptions
@@ -474,6 +475,28 @@ function normalizeSubnet(issues, path, value) {
};
}
+/**
+ * @param {ValidationIssue[]} issues
+ * @param {string} path
+ * @param {unknown} value
+ * @returns {RackDefinition | null}
+ */
+function normalizeRackDefinition(issues, path, value) {
+ if (!isRecord(value)) {
+ issues.push({ path, message: 'must be an object (rack)' });
+ return null;
+ }
+ const name = readString(issues, `${path}.name`, value.name);
+ const heightU = readNumber(issues, `${path}.heightU`, value.heightU, { optional: true, min: 1 });
+ if (!name) {
+ return null;
+ }
+ return {
+ name,
+ ...(typeof heightU === 'number' ? { heightU } : {})
+ };
+}
+
/**
* @param {unknown} value
* @returns {ValidationResult}
@@ -577,10 +600,38 @@ export function validateNetworkData(value) {
seenCidrs.add(subnet.cidr);
}
+ const racksRaw = value.racks;
+ const racksProvided = racksRaw !== undefined;
+ if (racksProvided && !Array.isArray(racksRaw)) {
+ issues.push({ path: '$.racks', message: 'must be an array when provided' });
+ }
+ const racks = [];
+ const rackEntries = [];
+ for (const [rackIndex, rackValue] of (Array.isArray(racksRaw) ? racksRaw : []).entries()) {
+ const rack = normalizeRackDefinition(issues, `$.racks[${rackIndex}]`, rackValue);
+ if (rack) {
+ racks.push(rack);
+ rackEntries.push({ rack, originalIndex: rackIndex });
+ }
+ }
+
+ const seenRackNames = new Set();
+ for (const { rack, originalIndex } of rackEntries) {
+ const key = rack.name.toLowerCase();
+ if (seenRackNames.has(key)) {
+ issues.push({
+ path: `$.racks[${originalIndex}].name`,
+ message: `duplicate rack name "${rack.name}"`
+ });
+ }
+ seenRackNames.add(key);
+ }
+
const data = {
machines,
devices,
- ...(subnetsProvided ? { subnets } : {})
+ ...(subnetsProvided ? { subnets } : {}),
+ ...(racksProvided ? { racks } : {})
};
return {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 22caab5..bf4c1d6 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -72,8 +72,14 @@ export interface Subnet {
vlanId?: number;
}
+export interface RackDefinition {
+ name: string;
+ heightU?: number;
+}
+
export interface NetworkData {
machines: Machine[];
devices: NetworkDevice[];
subnets?: Subnet[];
+ racks?: RackDefinition[];
}
diff --git a/static/data/network.json b/static/data/network.json
index 765346b..6c03388 100644
--- a/static/data/network.json
+++ b/static/data/network.json
@@ -556,7 +556,11 @@
"port": "11"
}
}
- ]
+ ],
+ "rack": {
+ "name": "Lab Rack",
+ "unit": 3
+ }
},
{
"name": "3DS",
@@ -598,7 +602,11 @@
"port": "20"
}
}
- ]
+ ],
+ "rack": {
+ "name": "Lab Rack",
+ "unit": 3
+ }
},
{
"name": "UPS Pi",
@@ -636,5 +644,11 @@
"name": "IoT",
"vlanId": 20
}
+ ],
+ "racks": [
+ {
+ "name": "Lab Rack",
+ "heightU": 12
+ }
]
}