963 lines
43 KiB
TypeScript
963 lines
43 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, useCallback, useRef } from "react";
|
||
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
|
||
import {
|
||
fetchCapacitySummary, fetchCracStatus, fetchAlarms, fetchLeakStatus,
|
||
fetchFloorLayout, saveFloorLayout,
|
||
type CapacitySummary, type CracStatus, type Alarm, type LeakSensorStatus,
|
||
} from "@/lib/api";
|
||
import { RackDetailSheet } from "@/components/dashboard/rack-detail-sheet";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Skeleton } from "@/components/ui/skeleton";
|
||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import {
|
||
Wind, WifiOff, Thermometer, Zap, CheckCircle2, AlertTriangle,
|
||
Droplets, Cable, Flame, Snowflake, Settings2, Plus, Trash2,
|
||
GripVertical, ChevronDown, ChevronUp,
|
||
} from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
import { useThresholds } from "@/lib/threshold-context";
|
||
|
||
const SITE_ID = "sg-01";
|
||
|
||
// ── Layout type ───────────────────────────────────────────────────────────────
|
||
|
||
type RowLayout = { label: string; racks: string[] };
|
||
type RoomLayout = { label: string; crac_id: string; rows: RowLayout[] };
|
||
type FloorLayout = Record<string, RoomLayout>;
|
||
|
||
const DEFAULT_LAYOUT: FloorLayout = {
|
||
"hall-a": {
|
||
label: "Hall A",
|
||
crac_id: "crac-01",
|
||
rows: [
|
||
{ label: "Row 1", racks: Array.from({ length: 20 }, (_, i) => `SG1A01.${String(i + 1).padStart(2, "0")}`) },
|
||
{ label: "Row 2", racks: Array.from({ length: 20 }, (_, i) => `SG1A02.${String(i + 1).padStart(2, "0")}`) },
|
||
],
|
||
},
|
||
"hall-b": {
|
||
label: "Hall B",
|
||
crac_id: "crac-02",
|
||
rows: [
|
||
{ label: "Row 1", racks: Array.from({ length: 20 }, (_, i) => `SG1B01.${String(i + 1).padStart(2, "0")}`) },
|
||
{ label: "Row 2", racks: Array.from({ length: 20 }, (_, i) => `SG1B02.${String(i + 1).padStart(2, "0")}`) },
|
||
],
|
||
},
|
||
};
|
||
|
||
// Derive feed from row index: even index → "A", odd → "B"
|
||
function getFeed(layout: FloorLayout, rackId: string): "A" | "B" | undefined {
|
||
for (const room of Object.values(layout)) {
|
||
for (let i = 0; i < room.rows.length; i++) {
|
||
if (room.rows[i].racks.includes(rackId)) return i % 2 === 0 ? "A" : "B";
|
||
}
|
||
}
|
||
return undefined;
|
||
}
|
||
|
||
// ── Colour helpers ────────────────────────────────────────────────────────────
|
||
|
||
function tempBg(temp: number | null, warn = 26, crit = 28) {
|
||
if (temp === null) return "oklch(0.22 0.02 265)";
|
||
if (temp >= crit + 4) return "oklch(0.55 0.22 25)";
|
||
if (temp >= crit) return "oklch(0.65 0.20 45)";
|
||
if (temp >= warn) return "oklch(0.72 0.18 84)";
|
||
if (temp >= warn - 2) return "oklch(0.78 0.14 140)";
|
||
if (temp >= warn - 4) return "oklch(0.68 0.14 162)";
|
||
return "oklch(0.60 0.15 212)";
|
||
}
|
||
|
||
function powerBg(pct: number | null) {
|
||
if (pct === null) return "oklch(0.22 0.02 265)";
|
||
if (pct >= 90) return "oklch(0.55 0.22 25)";
|
||
if (pct >= 75) return "oklch(0.65 0.20 45)";
|
||
if (pct >= 55) return "oklch(0.72 0.18 84)";
|
||
if (pct >= 35) return "oklch(0.68 0.14 162)";
|
||
return "oklch(0.60 0.15 212)";
|
||
}
|
||
|
||
type Overlay = "temp" | "power" | "alarms" | "feed" | "crac";
|
||
|
||
function alarmBg(count: number): string {
|
||
if (count === 0) return "oklch(0.22 0.02 265)";
|
||
if (count >= 3) return "oklch(0.55 0.22 25)";
|
||
if (count >= 1) return "oklch(0.65 0.20 45)";
|
||
return "oklch(0.68 0.14 162)";
|
||
}
|
||
|
||
function feedBg(feed: "A" | "B" | undefined): string {
|
||
if (feed === "A") return "oklch(0.55 0.18 255)";
|
||
if (feed === "B") return "oklch(0.60 0.18 40)";
|
||
return "oklch(0.22 0.02 265)";
|
||
}
|
||
|
||
const CRAC_ZONE_COLORS = [
|
||
"oklch(0.55 0.18 255)", // blue — zone 1
|
||
"oklch(0.60 0.18 40)", // amber — zone 2
|
||
"oklch(0.60 0.16 145)", // teal — zone 3
|
||
"oklch(0.58 0.18 310)", // purple — zone 4
|
||
];
|
||
|
||
// ── Rack tile ─────────────────────────────────────────────────────────────────
|
||
|
||
function RackTile({
|
||
rackId, temp, powerPct, alarmCount, overlay, feed, cracColor, onClick, tempWarn = 26, tempCrit = 28,
|
||
}: {
|
||
rackId: string; temp: number | null; powerPct: number | null;
|
||
alarmCount: number; overlay: Overlay; feed?: "A" | "B"; cracColor?: string; onClick: () => void;
|
||
tempWarn?: number; tempCrit?: number;
|
||
}) {
|
||
const offline = temp === null && powerPct === null;
|
||
const bg = offline ? "oklch(0.22 0.02 265)"
|
||
: overlay === "temp" ? tempBg(temp, tempWarn, tempCrit)
|
||
: overlay === "power" ? powerBg(powerPct)
|
||
: overlay === "feed" ? feedBg(feed)
|
||
: overlay === "crac" ? (cracColor ?? "oklch(0.22 0.02 265)")
|
||
: alarmBg(alarmCount);
|
||
|
||
const shortId = rackId.replace("rack-", "").toUpperCase();
|
||
const mainVal = overlay === "temp" ? (temp !== null ? `${temp}°` : null)
|
||
: overlay === "power" ? (powerPct !== null ? `${Math.round(powerPct)}%` : null)
|
||
: overlay === "feed" ? (feed ?? null)
|
||
: (alarmCount > 0 ? String(alarmCount) : null);
|
||
const subVal = overlay === "temp" ? (powerPct !== null ? `${Math.round(powerPct)}%` : null)
|
||
: overlay === "power" ? (temp !== null ? `${temp}°C` : null)
|
||
: overlay === "feed" ? (temp !== null ? `${temp}°C` : null)
|
||
: (temp !== null ? `${temp}°C` : null);
|
||
|
||
return (
|
||
<button
|
||
onClick={onClick}
|
||
title={`${rackId} — ${temp ?? "—"}°C · ${powerPct != null ? Math.round(powerPct) : "—"}% load · ${alarmCount} alarm${alarmCount !== 1 ? "s" : ""}`}
|
||
aria-label={`${rackId} — ${temp ?? "—"}°C · ${powerPct != null ? Math.round(powerPct) : "—"}% load · ${alarmCount} alarm${alarmCount !== 1 ? "s" : ""}`}
|
||
className="group relative flex flex-col items-center justify-center gap-0.5 rounded-lg cursor-pointer select-none transition-all duration-200 hover:ring-2 hover:ring-white/40 hover:scale-105 active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
||
style={{
|
||
backgroundColor: bg,
|
||
width: 76, height: 92,
|
||
backgroundImage: offline
|
||
? "repeating-linear-gradient(45deg,transparent,transparent 5px,oklch(1 0 0/5%) 5px,oklch(1 0 0/5%) 10px)"
|
||
: undefined,
|
||
}}
|
||
>
|
||
<span className="text-[9px] font-bold text-white/60 tracking-widest">{shortId}</span>
|
||
{offline ? (
|
||
<WifiOff className="w-4 h-4 text-white/30" />
|
||
) : overlay === "alarms" && alarmCount === 0 ? (
|
||
<CheckCircle2 className="w-4 h-4 text-white/40" />
|
||
) : (
|
||
<span className="text-[17px] font-bold text-white leading-none">{mainVal ?? "—"}</span>
|
||
)}
|
||
{subVal && (
|
||
<span className="text-[9px] text-white/55 opacity-0 group-hover:opacity-100 transition-opacity">{subVal}</span>
|
||
)}
|
||
{overlay === "temp" && powerPct !== null && (
|
||
<div className="absolute bottom-1.5 left-2 right-2 h-[3px] rounded-full bg-white/15 overflow-hidden">
|
||
<div className="h-full rounded-full bg-white/50" style={{ width: `${powerPct}%` }} />
|
||
</div>
|
||
)}
|
||
{overlay !== "alarms" && alarmCount > 0 && (
|
||
<div className="absolute top-1 right-1 w-3.5 h-3.5 rounded-full bg-destructive flex items-center justify-center">
|
||
<span className="text-[8px] font-bold text-white leading-none">{alarmCount}</span>
|
||
</div>
|
||
)}
|
||
</button>
|
||
);
|
||
}
|
||
|
||
// ── CRAC strip ────────────────────────────────────────────────────────────────
|
||
|
||
function CracStrip({ crac }: { crac: CracStatus | undefined }) {
|
||
const online = crac?.state === "online";
|
||
return (
|
||
<div className={cn(
|
||
"flex items-center gap-4 rounded-lg px-4 py-2.5 border text-sm",
|
||
online ? "bg-primary/5 border-primary/20" : "bg-destructive/5 border-destructive/20"
|
||
)}>
|
||
<Wind className={cn("w-4 h-4 shrink-0", online ? "text-primary" : "text-destructive")} />
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-semibold text-xs">{crac?.crac_id.toUpperCase() ?? "CRAC"}</span>
|
||
<span className={cn(
|
||
"flex items-center gap-1 text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase",
|
||
online ? "bg-green-500/10 text-green-400" : "bg-destructive/10 text-destructive"
|
||
)}>
|
||
{online ? <CheckCircle2 className="w-3 h-3" /> : <AlertTriangle className="w-3 h-3" />}
|
||
{online ? "Online" : "Fault"}
|
||
</span>
|
||
</div>
|
||
{crac && online && (
|
||
<div className="flex items-center gap-4 ml-2 text-xs text-muted-foreground">
|
||
<span>
|
||
<Thermometer className="w-3 h-3 inline mr-0.5 text-primary" />
|
||
Supply <strong className="text-foreground">{crac.supply_temp ?? "—"}°C</strong>
|
||
</span>
|
||
<span>
|
||
<Thermometer className="w-3 h-3 inline mr-0.5 text-orange-400" />
|
||
Return <strong className="text-foreground">{crac.return_temp ?? "—"}°C</strong>
|
||
</span>
|
||
{crac.delta !== null && (
|
||
<span>ΔT <strong className={cn(
|
||
crac.delta > 14 ? "text-destructive" : crac.delta > 11 ? "text-amber-400" : "text-green-400"
|
||
)}>+{crac.delta}°C</strong></span>
|
||
)}
|
||
{crac.fan_pct !== null && (
|
||
<span>Fan <strong className="text-foreground">{crac.fan_pct}%</strong></span>
|
||
)}
|
||
{crac.cooling_capacity_pct !== null && (
|
||
<span>Cap <strong className={cn(
|
||
(crac.cooling_capacity_pct ?? 0) >= 90 ? "text-destructive" :
|
||
(crac.cooling_capacity_pct ?? 0) >= 75 ? "text-amber-400" : "text-foreground"
|
||
)}>{crac.cooling_capacity_pct?.toFixed(0)}%</strong></span>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Room plan ─────────────────────────────────────────────────────────────────
|
||
|
||
function RoomPlan({
|
||
roomId, layout, data, cracs, overlay, alarmsByRack, onRackClick, tempWarn = 26, tempCrit = 28,
|
||
}: {
|
||
roomId: string;
|
||
layout: FloorLayout;
|
||
data: CapacitySummary;
|
||
cracs: CracStatus[];
|
||
overlay: Overlay;
|
||
alarmsByRack: Map<string, number>;
|
||
onRackClick: (id: string) => void;
|
||
tempWarn?: number;
|
||
tempCrit?: number;
|
||
}) {
|
||
const roomLayout = layout[roomId];
|
||
if (!roomLayout) return null;
|
||
|
||
const rackMap = new Map(data.racks.map((r) => [r.rack_id, r]));
|
||
const crac = cracs.find((c) => c.crac_id === roomLayout.crac_id);
|
||
const roomRacks = data.racks.filter((r) => r.room_id === roomId);
|
||
const offlineCount = roomRacks.filter((r) => r.temp === null && r.power_kw === null).length;
|
||
|
||
const avgTemp = (() => {
|
||
const temps = roomRacks.map((r) => r.temp).filter((t): t is number => t !== null);
|
||
return temps.length ? Math.round((temps.reduce((a, b) => a + b, 0) / temps.length) * 10) / 10 : null;
|
||
})();
|
||
const totalPower = (() => {
|
||
const powers = roomRacks.map((r) => r.power_kw).filter((p): p is number => p !== null);
|
||
return powers.length ? Math.round(powers.reduce((a, b) => a + b, 0) * 10) / 10 : null;
|
||
})();
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-6 text-xs text-muted-foreground">
|
||
<span>{roomRacks.length} racks</span>
|
||
{avgTemp !== null && (
|
||
<span className="flex items-center gap-1">
|
||
<Thermometer className="w-3 h-3" />
|
||
Avg <strong className="text-foreground">{avgTemp}°C</strong>
|
||
</span>
|
||
)}
|
||
{totalPower !== null && (
|
||
<span className="flex items-center gap-1">
|
||
<Zap className="w-3 h-3" />
|
||
<strong className="text-foreground">{totalPower} kW</strong> IT load
|
||
</span>
|
||
)}
|
||
{offlineCount > 0 && (
|
||
<span className="flex items-center gap-1 text-muted-foreground/60">
|
||
<WifiOff className="w-3 h-3" />
|
||
{offlineCount} offline
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<TransformWrapper initialScale={1} minScale={0.4} maxScale={3} limitToBounds={false} wheel={{ disabled: true }}>
|
||
{({ zoomIn, zoomOut, resetTransform }) => (
|
||
<>
|
||
<div className="flex items-center gap-1 mb-2">
|
||
<button
|
||
onClick={() => zoomIn()}
|
||
className="px-2 py-1 rounded border border-border text-xs text-muted-foreground hover:bg-muted/50 transition-colors"
|
||
title="Zoom in"
|
||
>+</button>
|
||
<button
|
||
onClick={() => resetTransform()}
|
||
className="px-2 py-1 rounded border border-border text-xs text-muted-foreground hover:bg-muted/50 transition-colors"
|
||
title="Reset zoom"
|
||
>⊙</button>
|
||
<button
|
||
onClick={() => zoomOut()}
|
||
className="px-2 py-1 rounded border border-border text-xs text-muted-foreground hover:bg-muted/50 transition-colors"
|
||
title="Zoom out"
|
||
>−</button>
|
||
<span className="text-[10px] text-muted-foreground/50 ml-1">Drag to pan</span>
|
||
</div>
|
||
<TransformComponent wrapperStyle={{ width: "100%", overflow: "hidden", borderRadius: "0.75rem" }}>
|
||
<div className="rounded-xl border border-border bg-muted/10 p-5 space-y-3" style={{ minWidth: "100%" }}>
|
||
<CracStrip crac={crac} />
|
||
|
||
<div
|
||
className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-widest px-2 rounded-md py-2"
|
||
style={{ backgroundColor: "oklch(0.55 0.22 25 / 6%)", color: "oklch(0.65 0.20 45)" }}
|
||
>
|
||
<div className="flex-1 h-px" style={{ backgroundColor: "oklch(0.65 0.20 45 / 30%)" }} />
|
||
<Flame className="w-3 h-3 shrink-0" style={{ color: "oklch(0.65 0.20 45)" }} />
|
||
HOT AISLE
|
||
<Flame className="w-3 h-3 shrink-0" style={{ color: "oklch(0.65 0.20 45)" }} />
|
||
<div className="flex-1 h-px" style={{ backgroundColor: "oklch(0.65 0.20 45 / 30%)" }} />
|
||
</div>
|
||
|
||
{roomLayout.rows.map((row, rowIdx) => {
|
||
const rowCracColor = CRAC_ZONE_COLORS[rowIdx % CRAC_ZONE_COLORS.length];
|
||
return (
|
||
<div key={rowIdx}>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[9px] text-muted-foreground/40 uppercase tracking-widest w-10 shrink-0 text-right">
|
||
{row.label}
|
||
</span>
|
||
<div className="flex gap-2 flex-wrap">
|
||
{row.racks.map((rackId) => {
|
||
const rack = rackMap.get(rackId);
|
||
return (
|
||
<RackTile
|
||
key={rackId}
|
||
rackId={rackId}
|
||
temp={rack?.temp ?? null}
|
||
powerPct={rack?.power_pct ?? null}
|
||
alarmCount={alarmsByRack.get(rackId) ?? 0}
|
||
overlay={overlay}
|
||
feed={getFeed(layout, rackId)}
|
||
cracColor={rowCracColor}
|
||
onClick={() => onRackClick(rackId)}
|
||
tempWarn={tempWarn}
|
||
tempCrit={tempCrit}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
{rowIdx < roomLayout.rows.length - 1 && (
|
||
<div
|
||
className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-widest px-2 mt-2 mb-1 rounded-md py-2"
|
||
style={{ backgroundColor: "oklch(0.62 0.17 212 / 7%)", color: "oklch(0.62 0.17 212)" }}
|
||
>
|
||
<div className="flex-1 h-px border-t border-dashed" style={{ borderColor: "oklch(0.62 0.17 212 / 30%)" }} />
|
||
<Snowflake className="w-3 h-3 shrink-0" style={{ color: "oklch(0.62 0.17 212)" }} />
|
||
COLD AISLE
|
||
<Snowflake className="w-3 h-3 shrink-0" style={{ color: "oklch(0.62 0.17 212)" }} />
|
||
<div className="flex-1 h-px border-t border-dashed" style={{ borderColor: "oklch(0.62 0.17 212 / 30%)" }} />
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
|
||
<div
|
||
className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-widest px-2 rounded-md py-2"
|
||
style={{ backgroundColor: "oklch(0.55 0.22 25 / 6%)", color: "oklch(0.65 0.20 45)" }}
|
||
>
|
||
<div className="flex-1 h-px" style={{ backgroundColor: "oklch(0.65 0.20 45 / 30%)" }} />
|
||
<Flame className="w-3 h-3 shrink-0" style={{ color: "oklch(0.65 0.20 45)" }} />
|
||
HOT AISLE
|
||
<Flame className="w-3 h-3 shrink-0" style={{ color: "oklch(0.65 0.20 45)" }} />
|
||
<div className="flex-1 h-px" style={{ backgroundColor: "oklch(0.65 0.20 45 / 30%)" }} />
|
||
</div>
|
||
</div>
|
||
</TransformComponent>
|
||
</>
|
||
)}
|
||
</TransformWrapper>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Leak sensor panel ─────────────────────────────────────────────────────────
|
||
|
||
function LeakSensorPanel({ sensors }: { sensors: LeakSensorStatus[] }) {
|
||
if (sensors.length === 0) return null;
|
||
const active = sensors.filter((s) => s.state === "detected");
|
||
const byZone = sensors.reduce<Record<string, LeakSensorStatus[]>>((acc, s) => {
|
||
const zone = s.floor_zone ?? "unknown";
|
||
(acc[zone] ??= []).push(s);
|
||
return acc;
|
||
}, {});
|
||
|
||
return (
|
||
<Card className={cn("border", active.length > 0 && "border-destructive/50")}>
|
||
<CardHeader className="pb-2">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
||
<Droplets className={cn("w-4 h-4", active.length > 0 ? "text-destructive" : "text-blue-400")} />
|
||
Leak Sensor Status
|
||
</CardTitle>
|
||
<span className={cn(
|
||
"text-[10px] font-semibold px-2.5 py-0.5 rounded-full uppercase",
|
||
active.length > 0 ? "bg-destructive/10 text-destructive" : "bg-green-500/10 text-green-400",
|
||
)}>
|
||
{active.length > 0 ? `${active.length} leak${active.length > 1 ? "s" : ""} detected` : "All clear"}
|
||
</span>
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||
{Object.entries(byZone).map(([zone, zoneSensors]) => (
|
||
<div key={zone} className="rounded-lg border border-border/50 bg-muted/10 p-3 space-y-2">
|
||
<p className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{zone}</p>
|
||
{zoneSensors.map((s) => {
|
||
const detected = s.state === "detected";
|
||
return (
|
||
<div key={s.sensor_id} className="flex items-start justify-between gap-2">
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-1.5">
|
||
<div className={cn(
|
||
"w-2 h-2 rounded-full shrink-0",
|
||
detected ? "bg-destructive animate-pulse" :
|
||
s.state === "unknown" ? "bg-muted-foreground/30" : "bg-green-500",
|
||
)} />
|
||
<span className="text-xs font-medium truncate">{s.sensor_id}</span>
|
||
</div>
|
||
<p className="text-[9px] text-muted-foreground/60 mt-0.5 truncate">
|
||
{[
|
||
s.under_floor ? "Under floor" : "Surface mount",
|
||
s.near_crac ? "near CRAC" : null,
|
||
s.room_id ?? null,
|
||
].filter(Boolean).join(" · ")}
|
||
</p>
|
||
</div>
|
||
<span className={cn(
|
||
"text-[10px] font-semibold shrink-0",
|
||
detected ? "text-destructive" :
|
||
s.state === "unknown" ? "text-muted-foreground/50" : "text-green-400",
|
||
)}>
|
||
{detected ? "LEAK" : s.state === "unknown" ? "unknown" : "clear"}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
// ── Layout editor ─────────────────────────────────────────────────────────────
|
||
|
||
function LayoutEditor({
|
||
layout, onSave, saving,
|
||
}: {
|
||
layout: FloorLayout;
|
||
onSave: (l: FloorLayout) => void;
|
||
saving?: boolean;
|
||
}) {
|
||
const [draft, setDraft] = useState<FloorLayout>(() => JSON.parse(JSON.stringify(layout)));
|
||
const [newRoomId, setNewRoomId] = useState("");
|
||
const [newRoomLabel, setNewRoomLabel] = useState("");
|
||
const [newRoomCrac, setNewRoomCrac] = useState("");
|
||
const [expandedRoom, setExpandedRoom] = useState<string | null>(Object.keys(draft)[0] ?? null);
|
||
|
||
function updateRoom(roomId: string, patch: Partial<RoomLayout>) {
|
||
setDraft(d => ({ ...d, [roomId]: { ...d[roomId], ...patch } }));
|
||
}
|
||
|
||
function deleteRoom(roomId: string) {
|
||
setDraft(d => { const n = { ...d }; delete n[roomId]; return n; });
|
||
if (expandedRoom === roomId) setExpandedRoom(null);
|
||
}
|
||
|
||
function addRoom() {
|
||
const id = newRoomId.trim().toLowerCase().replace(/\s+/g, "-");
|
||
if (!id || !newRoomLabel.trim() || draft[id]) return;
|
||
setDraft(d => ({
|
||
...d,
|
||
[id]: { label: newRoomLabel.trim(), crac_id: newRoomCrac.trim(), rows: [] },
|
||
}));
|
||
setNewRoomId(""); setNewRoomLabel(""); setNewRoomCrac("");
|
||
setExpandedRoom(id);
|
||
}
|
||
|
||
function addRow(roomId: string) {
|
||
const room = draft[roomId];
|
||
const label = `Row ${room.rows.length + 1}`;
|
||
updateRoom(roomId, { rows: [...room.rows, { label, racks: [] }] });
|
||
}
|
||
|
||
function deleteRow(roomId: string, rowIdx: number) {
|
||
const rows = draft[roomId].rows.filter((_, i) => i !== rowIdx);
|
||
updateRoom(roomId, { rows });
|
||
}
|
||
|
||
function updateRowLabel(roomId: string, rowIdx: number, label: string) {
|
||
const rows = draft[roomId].rows.map((r, i) => i === rowIdx ? { ...r, label } : r);
|
||
updateRoom(roomId, { rows });
|
||
}
|
||
|
||
function addRack(roomId: string, rowIdx: number, rackId: string) {
|
||
const id = rackId.trim();
|
||
if (!id) return;
|
||
const rows = draft[roomId].rows.map((r, i) =>
|
||
i === rowIdx ? { ...r, racks: [...r.racks, id] } : r
|
||
);
|
||
updateRoom(roomId, { rows });
|
||
}
|
||
|
||
function removeRack(roomId: string, rowIdx: number, rackIdx: number) {
|
||
const rows = draft[roomId].rows.map((r, i) =>
|
||
i === rowIdx ? { ...r, racks: r.racks.filter((_, j) => j !== rackIdx) } : r
|
||
);
|
||
updateRoom(roomId, { rows });
|
||
}
|
||
|
||
function moveRow(roomId: string, rowIdx: number, dir: -1 | 1) {
|
||
const rows = [...draft[roomId].rows];
|
||
const target = rowIdx + dir;
|
||
if (target < 0 || target >= rows.length) return;
|
||
[rows[rowIdx], rows[target]] = [rows[target], rows[rowIdx]];
|
||
updateRoom(roomId, { rows });
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col h-full">
|
||
<div className="px-6 pt-6 pb-4 border-b border-border shrink-0">
|
||
<h2 className="text-base font-semibold flex items-center gap-2">
|
||
<Settings2 className="w-4 h-4 text-primary" /> Floor Layout Editor
|
||
</h2>
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
Configure rooms, rows, and rack positions. Changes are saved for all users.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
|
||
{Object.entries(draft).map(([roomId, room]) => (
|
||
<div key={roomId} className="rounded-xl border border-border bg-muted/10 overflow-hidden">
|
||
{/* Room header */}
|
||
<div className="flex items-center gap-2 px-3 py-2.5 bg-muted/20 border-b border-border/60">
|
||
<button
|
||
onClick={() => setExpandedRoom(expandedRoom === roomId ? null : roomId)}
|
||
className="flex items-center gap-2 flex-1 min-w-0 text-left focus-visible:outline-none"
|
||
>
|
||
{expandedRoom === roomId
|
||
? <ChevronUp className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
|
||
: <ChevronDown className="w-3.5 h-3.5 text-muted-foreground shrink-0" />}
|
||
<span className="text-sm font-semibold truncate">{room.label}</span>
|
||
<span className="text-[10px] text-muted-foreground font-mono">{roomId}</span>
|
||
<span className="text-[10px] text-muted-foreground ml-1">
|
||
· {room.rows.reduce((s, r) => s + r.racks.length, 0)} racks
|
||
</span>
|
||
</button>
|
||
<button
|
||
onClick={() => deleteRoom(roomId)}
|
||
className="text-muted-foreground hover:text-destructive transition-colors shrink-0 p-1"
|
||
aria-label={`Delete ${room.label}`}
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
|
||
{expandedRoom === roomId && (
|
||
<div className="p-3 space-y-3">
|
||
{/* Room fields */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<div className="space-y-1">
|
||
<label className="text-[10px] text-muted-foreground font-medium">Room Label</label>
|
||
<input
|
||
value={room.label}
|
||
onChange={e => updateRoom(roomId, { label: e.target.value })}
|
||
className="w-full h-7 rounded border border-border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<label className="text-[10px] text-muted-foreground font-medium">CRAC ID</label>
|
||
<input
|
||
value={room.crac_id}
|
||
onChange={e => updateRoom(roomId, { crac_id: e.target.value })}
|
||
placeholder="e.g. crac-01"
|
||
className="w-full h-7 rounded border border-border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Rows */}
|
||
<div className="space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Rows</p>
|
||
<button
|
||
onClick={() => addRow(roomId)}
|
||
className="flex items-center gap-1 text-[10px] text-primary hover:text-primary/80 transition-colors"
|
||
>
|
||
<Plus className="w-3 h-3" /> Add Row
|
||
</button>
|
||
</div>
|
||
|
||
{room.rows.length === 0 && (
|
||
<p className="text-[10px] text-muted-foreground/50 py-2 text-center">No rows — click Add Row</p>
|
||
)}
|
||
|
||
{room.rows.map((row, rowIdx) => (
|
||
<div key={rowIdx} className="rounded-lg border border-border/60 bg-background/50 p-2.5 space-y-2">
|
||
<div className="flex items-center gap-1.5">
|
||
<GripVertical className="w-3 h-3 text-muted-foreground/30 shrink-0" />
|
||
<input
|
||
value={row.label}
|
||
onChange={e => updateRowLabel(roomId, rowIdx, e.target.value)}
|
||
className="flex-1 h-6 rounded border border-border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
<button onClick={() => moveRow(roomId, rowIdx, -1)} disabled={rowIdx === 0}
|
||
className="p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-20 transition-colors">
|
||
<ChevronUp className="w-3 h-3" />
|
||
</button>
|
||
<button onClick={() => moveRow(roomId, rowIdx, 1)} disabled={rowIdx === room.rows.length - 1}
|
||
className="p-0.5 text-muted-foreground hover:text-foreground disabled:opacity-20 transition-colors">
|
||
<ChevronDown className="w-3 h-3" />
|
||
</button>
|
||
<button onClick={() => deleteRow(roomId, rowIdx)}
|
||
className="p-0.5 text-muted-foreground hover:text-destructive transition-colors">
|
||
<Trash2 className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Racks in this row */}
|
||
<div className="flex flex-wrap gap-1">
|
||
{row.racks.map((rackId, rackIdx) => (
|
||
<span key={rackIdx} className="inline-flex items-center gap-0.5 bg-muted rounded px-1.5 py-0.5 text-[10px] font-mono">
|
||
{rackId}
|
||
<button
|
||
onClick={() => removeRack(roomId, rowIdx, rackIdx)}
|
||
className="text-muted-foreground hover:text-destructive transition-colors ml-0.5"
|
||
aria-label={`Remove ${rackId}`}
|
||
>
|
||
×
|
||
</button>
|
||
</span>
|
||
))}
|
||
<RackAdder onAdd={(id) => addRack(roomId, rowIdx, id)} />
|
||
</div>
|
||
<p className="text-[9px] text-muted-foreground/40">
|
||
Feed: {rowIdx % 2 === 0 ? "A (even rows)" : "B (odd rows)"} · {row.racks.length} rack{row.racks.length !== 1 ? "s" : ""}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
|
||
{/* Add new room */}
|
||
<div className="rounded-xl border border-dashed border-border p-3 space-y-2">
|
||
<p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">Add New Room</p>
|
||
<div className="grid grid-cols-3 gap-2">
|
||
<input
|
||
value={newRoomId}
|
||
onChange={e => setNewRoomId(e.target.value)}
|
||
placeholder="room-id (e.g. hall-c)"
|
||
className="h-7 rounded border border-border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
<input
|
||
value={newRoomLabel}
|
||
onChange={e => setNewRoomLabel(e.target.value)}
|
||
placeholder="Label (e.g. Hall C)"
|
||
className="h-7 rounded border border-border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
<input
|
||
value={newRoomCrac}
|
||
onChange={e => setNewRoomCrac(e.target.value)}
|
||
placeholder="CRAC ID (e.g. crac-03)"
|
||
className="h-7 rounded border border-border bg-background px-2 text-xs focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
</div>
|
||
<button
|
||
onClick={addRoom}
|
||
disabled={!newRoomId.trim() || !newRoomLabel.trim()}
|
||
className="flex items-center gap-1.5 text-xs text-primary hover:text-primary/80 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
<Plus className="w-3.5 h-3.5" /> Add Room
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer actions */}
|
||
<div className="px-6 py-4 border-t border-border shrink-0 flex items-center justify-between gap-3">
|
||
<button
|
||
onClick={() => { setDraft(JSON.parse(JSON.stringify(DEFAULT_LAYOUT))); setExpandedRoom(Object.keys(DEFAULT_LAYOUT)[0]); }}
|
||
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
|
||
>
|
||
Reset to default
|
||
</button>
|
||
<Button size="sm" onClick={() => onSave(draft)} disabled={saving}>
|
||
{saving ? "Saving…" : "Save Layout"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Small inline input to add a rack ID to a row
|
||
function RackAdder({ onAdd }: { onAdd: (id: string) => void }) {
|
||
const [val, setVal] = useState("");
|
||
function submit() {
|
||
if (val.trim()) { onAdd(val.trim()); setVal(""); }
|
||
}
|
||
return (
|
||
<span className="inline-flex items-center gap-0.5">
|
||
<input
|
||
value={val}
|
||
onChange={e => setVal(e.target.value)}
|
||
onKeyDown={e => e.key === "Enter" && submit()}
|
||
placeholder="rack-id"
|
||
className="h-5 w-20 rounded border border-dashed border-border bg-background px-1.5 text-[10px] font-mono focus:outline-none focus:ring-1 focus:ring-primary"
|
||
/>
|
||
<button
|
||
onClick={submit}
|
||
className="text-primary hover:text-primary/70 transition-colors"
|
||
aria-label="Add rack"
|
||
>
|
||
<Plus className="w-3 h-3" />
|
||
</button>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||
|
||
export default function FloorMapPage() {
|
||
const { thresholds } = useThresholds();
|
||
const [layout, setLayout] = useState<FloorLayout>(DEFAULT_LAYOUT);
|
||
const [data, setData] = useState<CapacitySummary | null>(null);
|
||
const [cracs, setCracs] = useState<CracStatus[]>([]);
|
||
const [alarms, setAlarms] = useState<Alarm[]>([]);
|
||
const [leakSensors, setLeakSensors] = useState<LeakSensorStatus[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [overlay, setOverlay] = useState<Overlay>("temp");
|
||
const [activeRoom, setActiveRoom] = useState<string>("");
|
||
const [selectedRack, setSelectedRack] = useState<string | null>(null);
|
||
const [editorOpen, setEditorOpen] = useState(false);
|
||
const [layoutSaving, setLayoutSaving] = useState(false);
|
||
|
||
// Load layout from backend on mount
|
||
useEffect(() => {
|
||
fetchFloorLayout(SITE_ID)
|
||
.then((remote) => {
|
||
const parsed = remote as FloorLayout;
|
||
setLayout(parsed);
|
||
setActiveRoom(Object.keys(parsed)[0] ?? "");
|
||
})
|
||
.catch(() => {
|
||
// No saved layout yet — use default
|
||
setActiveRoom(Object.keys(DEFAULT_LAYOUT)[0] ?? "");
|
||
});
|
||
}, []);
|
||
|
||
const alarmsByRack = new Map<string, number>();
|
||
for (const a of alarms) {
|
||
if (a.rack_id) alarmsByRack.set(a.rack_id, (alarmsByRack.get(a.rack_id) ?? 0) + 1);
|
||
}
|
||
|
||
const load = useCallback(async () => {
|
||
try {
|
||
const [d, c, a, ls] = await Promise.all([
|
||
fetchCapacitySummary(SITE_ID),
|
||
fetchCracStatus(SITE_ID),
|
||
fetchAlarms(SITE_ID, "active", 200),
|
||
fetchLeakStatus(SITE_ID).catch(() => [] as LeakSensorStatus[]),
|
||
]);
|
||
setData(d);
|
||
setCracs(c);
|
||
setAlarms(a);
|
||
setLeakSensors(ls);
|
||
} catch { /* keep stale */ }
|
||
finally { setLoading(false); }
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
load();
|
||
const id = setInterval(load, 30_000);
|
||
return () => clearInterval(id);
|
||
}, [load]);
|
||
|
||
async function handleSaveLayout(newLayout: FloorLayout) {
|
||
setLayoutSaving(true);
|
||
try {
|
||
await saveFloorLayout(SITE_ID, newLayout as unknown as Record<string, unknown>);
|
||
setLayout(newLayout);
|
||
if (!newLayout[activeRoom]) setActiveRoom(Object.keys(newLayout)[0] ?? "");
|
||
setEditorOpen(false);
|
||
} catch {
|
||
// save failed — keep editor open so user can retry
|
||
} finally {
|
||
setLayoutSaving(false);
|
||
}
|
||
}
|
||
|
||
const roomIds = Object.keys(layout);
|
||
|
||
return (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||
<div>
|
||
<h1 className="text-xl font-semibold">Floor Map</h1>
|
||
<p className="text-sm text-muted-foreground">Singapore DC01 — live rack layout · refreshes every 30s</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
{/* Overlay selector */}
|
||
<div className="flex items-center gap-0.5 rounded-lg bg-muted p-1">
|
||
{([
|
||
{ val: "temp" as Overlay, icon: Thermometer, label: "Temperature" },
|
||
{ val: "power" as Overlay, icon: Zap, label: "Power %" },
|
||
{ val: "alarms" as Overlay, icon: AlertTriangle, label: "Alarms" },
|
||
{ val: "feed" as Overlay, icon: Cable, label: "Power Feed" },
|
||
{ val: "crac" as Overlay, icon: Wind, label: "CRAC Coverage" },
|
||
]).map(({ val, icon: Icon, label }) => (
|
||
<button
|
||
key={val}
|
||
onClick={() => setOverlay(val)}
|
||
aria-label={label}
|
||
aria-pressed={overlay === val}
|
||
className={cn(
|
||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
|
||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
|
||
overlay === val ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
|
||
)}
|
||
>
|
||
<Icon className="w-3.5 h-3.5" /> {label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Layout editor trigger */}
|
||
<Sheet open={editorOpen} onOpenChange={setEditorOpen}>
|
||
<SheetTrigger asChild>
|
||
<Button variant="outline" size="sm" className="flex items-center gap-1.5">
|
||
<Settings2 className="w-3.5 h-3.5" /> Edit Layout
|
||
</Button>
|
||
</SheetTrigger>
|
||
<SheetContent side="right" className="p-0 w-[420px] sm:w-[480px] flex flex-col">
|
||
<LayoutEditor layout={layout} onSave={handleSaveLayout} saving={layoutSaving} />
|
||
</SheetContent>
|
||
</Sheet>
|
||
</div>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<Skeleton className="h-96 w-full" />
|
||
) : !data ? (
|
||
<div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
|
||
Unable to load floor map data.
|
||
</div>
|
||
) : (
|
||
<>
|
||
<RackDetailSheet siteId={SITE_ID} rackId={selectedRack} onClose={() => setSelectedRack(null)} />
|
||
|
||
<Card>
|
||
<CardHeader className="pb-3">
|
||
<div className="flex items-center justify-between">
|
||
<CardTitle className="text-sm font-semibold">Room View</CardTitle>
|
||
{roomIds.length > 0 && (
|
||
<Tabs value={activeRoom} onValueChange={setActiveRoom}>
|
||
<TabsList className="h-7">
|
||
{roomIds.map((id) => (
|
||
<TabsTrigger key={id} value={id} className="text-xs px-3 py-0.5">
|
||
{layout[id].label}
|
||
</TabsTrigger>
|
||
))}
|
||
</TabsList>
|
||
</Tabs>
|
||
)}
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{activeRoom && layout[activeRoom] ? (
|
||
<RoomPlan
|
||
roomId={activeRoom}
|
||
layout={layout}
|
||
data={data}
|
||
cracs={cracs}
|
||
overlay={overlay}
|
||
alarmsByRack={alarmsByRack}
|
||
onRackClick={setSelectedRack}
|
||
tempWarn={thresholds.temp.warn}
|
||
tempCrit={thresholds.temp.critical}
|
||
/>
|
||
) : (
|
||
<div className="flex flex-col items-center justify-center h-48 gap-3 text-muted-foreground">
|
||
<Settings2 className="w-8 h-8 opacity-30" />
|
||
<p className="text-sm">No rooms configured</p>
|
||
<p className="text-xs">Use Edit Layout to add rooms and racks</p>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<LeakSensorPanel sensors={leakSensors} />
|
||
|
||
{/* Legend */}
|
||
<div className="flex items-center gap-3 text-[10px] text-muted-foreground flex-wrap">
|
||
{overlay === "alarms" ? (
|
||
<>
|
||
<span className="font-medium">Alarm count:</span>
|
||
<div className="flex items-center gap-1">
|
||
{([
|
||
{ c: "oklch(0.22 0.02 265)", l: "0" },
|
||
{ c: "oklch(0.65 0.20 45)", l: "1–2" },
|
||
{ c: "oklch(0.55 0.22 25)", l: "3+" },
|
||
]).map(({ c, l }) => (
|
||
<span key={l} className="flex items-center gap-0.5">
|
||
<span className="w-6 h-4 rounded-sm inline-block" style={{ backgroundColor: c }} />
|
||
<span>{l}</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : overlay === "feed" ? (
|
||
<>
|
||
<span className="font-medium">Power feed:</span>
|
||
<div className="flex items-center gap-2">
|
||
<span className="flex items-center gap-1">
|
||
<span className="w-6 h-4 rounded-sm inline-block" style={{ backgroundColor: "oklch(0.55 0.18 255)" }} />
|
||
<span>Feed A (even rows)</span>
|
||
</span>
|
||
<span className="flex items-center gap-1">
|
||
<span className="w-6 h-4 rounded-sm inline-block" style={{ backgroundColor: "oklch(0.60 0.18 40)" }} />
|
||
<span>Feed B (odd rows)</span>
|
||
</span>
|
||
</div>
|
||
</>
|
||
) : overlay === "crac" ? (
|
||
<>
|
||
<span className="font-medium">CRAC thermal zones:</span>
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
{CRAC_ZONE_COLORS.slice(0, layout[activeRoom]?.rows.length ?? 2).map((c, i) => (
|
||
<span key={i} className="flex items-center gap-1">
|
||
<span className="w-6 h-4 rounded-sm inline-block" style={{ backgroundColor: c }} />
|
||
<span>Zone {i + 1}</span>
|
||
</span>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="font-medium">{overlay === "temp" ? "Temperature:" : "Power utilisation:"}</span>
|
||
<div className="flex items-center gap-1">
|
||
{overlay === "temp"
|
||
? (["oklch(0.60 0.15 212)","oklch(0.68 0.14 162)","oklch(0.78 0.14 140)","oklch(0.72 0.18 84)","oklch(0.65 0.20 45)","oklch(0.55 0.22 25)"] as string[]).map((c, i) => (
|
||
<span key={i} className="w-7 h-4 rounded-sm inline-block" style={{ backgroundColor: c }} />
|
||
))
|
||
: (["oklch(0.60 0.15 212)","oklch(0.68 0.14 162)","oklch(0.72 0.18 84)","oklch(0.65 0.20 45)","oklch(0.55 0.22 25)"] as string[]).map((c, i) => (
|
||
<span key={i} className="w-7 h-4 rounded-sm inline-block" style={{ backgroundColor: c }} />
|
||
))}
|
||
<span className="ml-1">{overlay === "temp" ? "Cool → Hot" : "Low → High"}</span>
|
||
</div>
|
||
{overlay === "temp" && <span className="ml-auto">Warn: {thresholds.temp.warn}°C | Critical: {thresholds.temp.critical}°C</span>}
|
||
{overlay === "power" && <span className="ml-auto">Warn: 75% | Critical: 90%</span>}
|
||
</>
|
||
)}
|
||
<span className="text-muted-foreground/50">Click any rack to drill down</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|