596 lines
26 KiB
TypeScript
596 lines
26 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { toast } from "sonner";
|
|
import { fetchCapacitySummary, type CapacitySummary, type RoomCapacity, type RackCapacity } from "@/lib/api";
|
|
import { PageShell } from "@/components/layout/page-shell";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine, ResponsiveContainer, Cell } from "recharts";
|
|
import { Zap, Wind, Server, RefreshCw, AlertTriangle, TrendingDown, TrendingUp, Clock } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const SITE_ID = "sg-01";
|
|
const ROOM_LABELS: Record<string, string> = { "hall-a": "Hall A", "hall-b": "Hall B" };
|
|
|
|
// ── Radial gauge ──────────────────────────────────────────────────────────────
|
|
|
|
function RadialGauge({ pct, warn, crit, headroom, unit }: { pct: number; warn: number; crit: number; headroom?: number; unit?: string }) {
|
|
const r = 36;
|
|
const circumference = 2 * Math.PI * r;
|
|
const arc = circumference * 0.75; // 270° sweep
|
|
const filled = Math.min(pct / 100, 1) * arc;
|
|
|
|
const color =
|
|
pct >= crit ? "#ef4444" :
|
|
pct >= warn ? "#f59e0b" :
|
|
"#22c55e";
|
|
const textColor =
|
|
pct >= crit ? "text-destructive" :
|
|
pct >= warn ? "text-amber-400" :
|
|
"text-green-400";
|
|
|
|
return (
|
|
<div className="relative flex items-center justify-center py-1">
|
|
<svg viewBox="0 0 100 100" className="w-28 h-28 -rotate-[135deg]" style={{ overflow: "visible" }}>
|
|
{/* Track */}
|
|
<circle
|
|
cx="50" cy="50" r={r}
|
|
fill="none"
|
|
strokeWidth="9"
|
|
className="stroke-muted"
|
|
strokeDasharray={`${arc} ${circumference}`}
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Fill */}
|
|
<circle
|
|
cx="50" cy="50" r={r}
|
|
fill="none"
|
|
strokeWidth="9"
|
|
stroke={color}
|
|
strokeDasharray={`${filled} ${circumference}`}
|
|
strokeLinecap="round"
|
|
style={{ transition: "stroke-dasharray 0.7s ease" }}
|
|
/>
|
|
</svg>
|
|
<div className="absolute text-center pointer-events-none">
|
|
<span className={cn("text-3xl font-bold tabular-nums leading-none", textColor)}>
|
|
{pct.toFixed(1)}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">%</span>
|
|
{headroom !== undefined && unit !== undefined && (
|
|
<p className="text-[9px] text-muted-foreground leading-tight mt-0.5">
|
|
{headroom.toFixed(1)} {unit}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Capacity gauge card ────────────────────────────────────────────────────────
|
|
|
|
function CapacityGauge({
|
|
label, used, capacity, unit, pct, headroom, icon: Icon, warn = 70, crit = 85,
|
|
}: {
|
|
label: string; used: number; capacity: number; unit: string; pct: number;
|
|
headroom: number; icon: React.ElementType; warn?: number; crit?: number;
|
|
}) {
|
|
const textColor = pct >= crit ? "text-destructive" : pct >= warn ? "text-amber-400" : "text-green-400";
|
|
const status = pct >= crit ? "Critical" : pct >= warn ? "Warning" : "OK";
|
|
|
|
return (
|
|
<div className="space-y-2 rounded-xl border border-border bg-muted/10 p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm font-medium">
|
|
<Icon className="w-4 h-4 text-primary" />
|
|
{label}
|
|
</div>
|
|
<span className={cn("text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase", textColor,
|
|
pct >= crit ? "bg-destructive/10" : pct >= warn ? "bg-amber-500/10" : "bg-green-500/10"
|
|
)}>
|
|
{status}
|
|
</span>
|
|
</div>
|
|
|
|
<RadialGauge pct={pct} warn={warn} crit={crit} headroom={headroom} unit={unit} />
|
|
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span><strong className="text-foreground">{used.toFixed(1)}</strong> {unit} used</span>
|
|
<span><strong className="text-foreground">{capacity.toFixed(0)}</strong> {unit} rated</span>
|
|
</div>
|
|
|
|
<div className={cn(
|
|
"rounded-lg px-3 py-2 text-xs",
|
|
pct >= crit ? "bg-destructive/10 text-destructive" :
|
|
pct >= warn ? "bg-amber-500/10 text-amber-400" :
|
|
"bg-green-500/10 text-green-400"
|
|
)}>
|
|
{headroom.toFixed(1)} {unit} headroom remaining
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Capacity runway component ──────────────────────────────────────
|
|
// Assumes ~0.5 kW/week average growth rate to forecast when limits are hit
|
|
|
|
const GROWTH_KW_WEEK = 0.5;
|
|
const WARN_PCT = 85;
|
|
|
|
function RunwayCard({ rooms }: { rooms: RoomCapacity[] }) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
|
<Clock className="w-4 h-4 text-muted-foreground" />
|
|
Capacity Runway
|
|
<span className="text-[10px] text-muted-foreground font-normal ml-1">
|
|
(assuming {GROWTH_KW_WEEK} kW/week growth)
|
|
</span>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{rooms.map((room) => {
|
|
const powerHeadroomToWarn = Math.max(0, room.power.capacity_kw * (WARN_PCT / 100) - room.power.used_kw);
|
|
const coolHeadroomToWarn = Math.max(0, room.cooling.capacity_kw * (WARN_PCT / 100) - room.cooling.load_kw);
|
|
const powerRunwayWeeks = Math.round(powerHeadroomToWarn / GROWTH_KW_WEEK);
|
|
const coolRunwayWeeks = Math.round(coolHeadroomToWarn / GROWTH_KW_WEEK);
|
|
const constrainedBy = powerRunwayWeeks <= coolRunwayWeeks ? "power" : "cooling";
|
|
const minRunway = Math.min(powerRunwayWeeks, coolRunwayWeeks);
|
|
|
|
const runwayColor =
|
|
minRunway < 4 ? "text-destructive" :
|
|
minRunway < 12 ? "text-amber-400" :
|
|
"text-green-400";
|
|
|
|
// N+1 cooling: at 1 CRAC per room, losing it means all load hits chillers/other rooms
|
|
const n1Margin = room.cooling.capacity_kw - room.cooling.load_kw;
|
|
const n1Ok = n1Margin > room.cooling.capacity_kw * 0.2; // 20% spare = N+1 safe
|
|
|
|
return (
|
|
<div key={room.room_id} className="rounded-xl border border-border bg-muted/10 p-4 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-semibold">{ROOM_LABELS[room.room_id] ?? room.room_id}</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className={cn(
|
|
"text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase",
|
|
n1Ok ? "bg-green-500/10 text-green-400" : "bg-amber-500/10 text-amber-400",
|
|
)}>
|
|
{n1Ok ? "N+1 OK" : "N+1 marginal"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<TrendingUp className={cn("w-8 h-8 shrink-0", runwayColor)} />
|
|
<div>
|
|
<p className={cn("text-2xl font-bold tabular-nums leading-none", runwayColor)}>
|
|
{minRunway}w
|
|
</p>
|
|
<p className={cn("text-xs tabular-nums text-muted-foreground leading-none mt-0.5")}>
|
|
≈{(minRunway / 4.33).toFixed(1)}mo
|
|
</p>
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">
|
|
until {WARN_PCT}% {constrainedBy} limit
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 text-[11px]">
|
|
<div className={cn(
|
|
"rounded-lg px-2.5 py-2",
|
|
powerRunwayWeeks < 4 ? "bg-destructive/10" :
|
|
powerRunwayWeeks < 12 ? "bg-amber-500/10" : "bg-muted/30",
|
|
)}>
|
|
<p className="text-muted-foreground mb-0.5">Power runway</p>
|
|
<p className={cn(
|
|
"font-bold",
|
|
powerRunwayWeeks < 4 ? "text-destructive" :
|
|
powerRunwayWeeks < 12 ? "text-amber-400" : "text-green-400",
|
|
)}>
|
|
{powerRunwayWeeks}w / ≈{(powerRunwayWeeks / 4.33).toFixed(1)}mo
|
|
</p>
|
|
<p className="text-muted-foreground">{powerHeadroomToWarn.toFixed(1)} kW free</p>
|
|
</div>
|
|
<div className={cn(
|
|
"rounded-lg px-2.5 py-2",
|
|
coolRunwayWeeks < 4 ? "bg-destructive/10" :
|
|
coolRunwayWeeks < 12 ? "bg-amber-500/10" : "bg-muted/30",
|
|
)}>
|
|
<p className="text-muted-foreground mb-0.5">Cooling runway</p>
|
|
<p className={cn(
|
|
"font-bold",
|
|
coolRunwayWeeks < 4 ? "text-destructive" :
|
|
coolRunwayWeeks < 12 ? "text-amber-400" : "text-green-400",
|
|
)}>
|
|
{coolRunwayWeeks}w / ≈{(coolRunwayWeeks / 4.33).toFixed(1)}mo
|
|
</p>
|
|
<p className="text-muted-foreground">{coolHeadroomToWarn.toFixed(1)} kW free</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// ── Room summary strip ────────────────────────────────────────────────────────
|
|
|
|
function RoomSummaryStrip({ rooms }: { rooms: RoomCapacity[] }) {
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{rooms.map((room) => {
|
|
const powerPct = room.power.pct;
|
|
const coolPct = room.cooling.pct;
|
|
const worstPct = Math.max(powerPct, coolPct);
|
|
const worstColor =
|
|
worstPct >= 85 ? "border-destructive/40 bg-destructive/5" :
|
|
worstPct >= 70 ? "border-amber-500/40 bg-amber-500/5" :
|
|
"border-border bg-muted/10";
|
|
|
|
return (
|
|
<div key={room.room_id} className={cn("rounded-xl border px-4 py-3 space-y-2", worstColor)}>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-semibold">{ROOM_LABELS[room.room_id] ?? room.room_id}</span>
|
|
<span className={cn(
|
|
"text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase",
|
|
worstPct >= 85 ? "bg-destructive/10 text-destructive" :
|
|
worstPct >= 70 ? "bg-amber-500/10 text-amber-400" :
|
|
"bg-green-500/10 text-green-400"
|
|
)}>
|
|
{worstPct >= 85 ? "Critical" : worstPct >= 70 ? "Warning" : "OK"}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3 text-xs">
|
|
<div>
|
|
<p className="text-muted-foreground mb-1">Power</p>
|
|
<p className={cn("font-bold text-sm", powerPct >= 85 ? "text-destructive" : powerPct >= 70 ? "text-amber-400" : "text-green-400")}>
|
|
{powerPct.toFixed(1)}%
|
|
</p>
|
|
<p className="text-[10px] text-muted-foreground">{room.power.used_kw.toFixed(1)} / {room.power.capacity_kw} kW</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground mb-1">Cooling</p>
|
|
<p className={cn("font-bold text-sm", coolPct >= 80 ? "text-destructive" : coolPct >= 65 ? "text-amber-400" : "text-green-400")}>
|
|
{coolPct.toFixed(1)}%
|
|
</p>
|
|
<p className="text-[10px] text-muted-foreground">{room.cooling.load_kw.toFixed(1)} / {room.cooling.capacity_kw} kW</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground mb-1">Space</p>
|
|
<p className="font-bold text-sm text-foreground">{room.space.racks_populated} / {room.space.racks_total}</p>
|
|
<p className="text-[10px] text-muted-foreground">{room.space.racks_total - room.space.racks_populated} slots free</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Room capacity section ─────────────────────────────────────────────────────
|
|
|
|
function RoomCapacityPanel({ room, racks, config }: {
|
|
room: RoomCapacity;
|
|
racks: RackCapacity[];
|
|
config: CapacitySummary["config"];
|
|
}) {
|
|
const roomRacks = racks.filter((r) => r.room_id === room.room_id);
|
|
|
|
const chartData = roomRacks
|
|
.map((r) => ({
|
|
rack: r.rack_id.replace("rack-", "").toUpperCase(),
|
|
rack_id: r.rack_id,
|
|
pct: r.power_pct ?? 0,
|
|
kw: r.power_kw ?? 0,
|
|
temp: r.temp,
|
|
}))
|
|
.sort((a, b) => b.pct - a.pct);
|
|
|
|
const forecastPct = Math.min(100, (chartData.reduce((s, d) => s + d.pct, 0) / Math.max(1, chartData.length)) + (GROWTH_KW_WEEK * 13 / config.rack_power_kw * 100));
|
|
|
|
const highLoad = roomRacks.filter((r) => (r.power_pct ?? 0) >= 75);
|
|
const stranded = roomRacks.filter((r) => r.power_kw !== null && (r.power_pct ?? 0) < 20);
|
|
const strandedKw = stranded.reduce((s, r) => s + ((config.rack_power_kw - (r.power_kw ?? 0))), 0);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<CapacityGauge
|
|
label="Power"
|
|
used={room.power.used_kw}
|
|
capacity={room.power.capacity_kw}
|
|
unit="kW"
|
|
pct={room.power.pct}
|
|
headroom={room.power.headroom_kw}
|
|
icon={Zap}
|
|
/>
|
|
<CapacityGauge
|
|
label="Cooling"
|
|
used={room.cooling.load_kw}
|
|
capacity={room.cooling.capacity_kw}
|
|
unit="kW"
|
|
pct={room.cooling.pct}
|
|
headroom={room.cooling.headroom_kw}
|
|
icon={Wind}
|
|
warn={65}
|
|
crit={80}
|
|
/>
|
|
<div className="space-y-2 rounded-xl border border-border bg-muted/10 p-4">
|
|
<div className="flex items-center gap-2 text-sm font-medium">
|
|
<Server className="w-4 h-4 text-primary" /> Space
|
|
</div>
|
|
<div className="flex items-center justify-center py-1">
|
|
<div className="relative w-28 h-28 flex items-center justify-center">
|
|
<svg viewBox="0 0 100 100" className="w-28 h-28 -rotate-[135deg]" style={{ overflow: "visible" }}>
|
|
<circle cx="50" cy="50" r="36" fill="none" strokeWidth="9" className="stroke-muted"
|
|
strokeDasharray={`${2 * Math.PI * 36 * 0.75} ${2 * Math.PI * 36}`} strokeLinecap="round" />
|
|
<circle cx="50" cy="50" r="36" fill="none" strokeWidth="9" stroke="oklch(0.62 0.17 212)"
|
|
strokeDasharray={`${(room.space.pct / 100) * 2 * Math.PI * 36 * 0.75} ${2 * Math.PI * 36}`}
|
|
strokeLinecap="round" style={{ transition: "stroke-dasharray 0.7s ease" }} />
|
|
</svg>
|
|
<div className="absolute text-center">
|
|
<span className="text-2xl font-bold tabular-nums leading-none text-foreground">
|
|
{room.space.racks_populated}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">/{room.space.racks_total}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between text-xs text-muted-foreground">
|
|
<span><strong className="text-foreground">{room.space.racks_populated}</strong> active</span>
|
|
<span><strong className="text-foreground">{room.space.racks_total - room.space.racks_populated}</strong> free</span>
|
|
</div>
|
|
<div className="rounded-lg px-3 py-2 text-xs bg-muted/40 text-muted-foreground">
|
|
Each rack rated {config.rack_u_total}U / {config.rack_power_kw} kW max
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
|
<Zap className="w-4 h-4 text-primary" /> Per-rack Power Utilisation
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{chartData.length === 0 ? (
|
|
<div className="h-48 flex items-center justify-center text-sm text-muted-foreground">
|
|
No rack data available
|
|
</div>
|
|
) : (
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<BarChart data={chartData} margin={{ top: 4, right: 16, left: -10, bottom: 0 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="oklch(1 0 0 / 8%)" vertical={false} />
|
|
<XAxis
|
|
dataKey="rack"
|
|
tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
|
|
tickLine={false} axisLine={false}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 10, fill: "oklch(0.65 0.04 257)" }}
|
|
tickLine={false} axisLine={false}
|
|
domain={[0, 100]} tickFormatter={(v) => `${v}%`}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{ backgroundColor: "oklch(0.16 0.04 265)", border: "1px solid oklch(1 0 0/9%)", borderRadius: "6px", fontSize: "12px" }}
|
|
formatter={(v, _name, props) => [
|
|
`${Number(v).toFixed(1)}% (${props.payload.kw.toFixed(2)} kW)`, "Power load"
|
|
]}
|
|
/>
|
|
<ReferenceLine y={75} stroke="oklch(0.72 0.18 84)" strokeDasharray="4 4" strokeWidth={1}
|
|
label={{ value: "Warn 75%", fontSize: 9, fill: "oklch(0.72 0.18 84)", position: "insideTopRight" }} />
|
|
<ReferenceLine y={90} stroke="oklch(0.55 0.22 25)" strokeDasharray="4 4" strokeWidth={1}
|
|
label={{ value: "Crit 90%", fontSize: 9, fill: "oklch(0.55 0.22 25)", position: "insideTopRight" }} />
|
|
<ReferenceLine y={forecastPct} stroke="oklch(0.62 0.17 212)" strokeDasharray="6 3" strokeWidth={1.5}
|
|
label={{ value: "90d forecast", fontSize: 9, fill: "oklch(0.62 0.17 212)", position: "insideTopLeft" }} />
|
|
<Bar dataKey="pct" radius={[3, 3, 0, 0]}>
|
|
{chartData.map((d) => (
|
|
<Cell
|
|
key={d.rack_id}
|
|
fill={
|
|
d.pct >= 90 ? "oklch(0.55 0.22 25)" :
|
|
d.pct >= 75 ? "oklch(0.65 0.20 45)" :
|
|
d.pct >= 50 ? "oklch(0.68 0.14 162)" :
|
|
"oklch(0.62 0.17 212)"
|
|
}
|
|
/>
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4 text-amber-400" /> High Load Racks
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{highLoad.length === 0 ? (
|
|
<p className="text-sm text-green-400">All racks within normal limits</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{highLoad.sort((a, b) => (b.power_pct ?? 0) - (a.power_pct ?? 0)).map((r) => (
|
|
<div key={r.rack_id} className="flex items-center justify-between text-xs">
|
|
<span className="font-medium">{r.rack_id.toUpperCase()}</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground">{r.power_kw?.toFixed(1)} kW</span>
|
|
<span className={cn(
|
|
"font-bold",
|
|
(r.power_pct ?? 0) >= 90 ? "text-destructive" : "text-amber-400"
|
|
)}>{r.power_pct?.toFixed(1)}%</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-2">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-sm font-semibold flex items-center gap-2">
|
|
<TrendingDown className="w-4 h-4 text-muted-foreground" /> Stranded Capacity
|
|
</CardTitle>
|
|
{stranded.length > 0 && (
|
|
<span className="text-xs font-semibold text-amber-400">
|
|
{strandedKw.toFixed(1)} kW recoverable
|
|
</span>
|
|
)}
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{stranded.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No underutilised racks detected</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{stranded.sort((a, b) => (a.power_pct ?? 0) - (b.power_pct ?? 0)).map((r) => (
|
|
<div key={r.rack_id} className="flex items-center justify-between text-xs">
|
|
<span className="font-medium">{r.rack_id.toUpperCase()}</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground">{r.power_kw?.toFixed(1)} kW</span>
|
|
<span className="text-muted-foreground">{r.power_pct?.toFixed(1)}% utilised</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<p className="text-[10px] text-muted-foreground pt-1">
|
|
{stranded.length} rack{stranded.length > 1 ? "s" : ""} below 20% — consider consolidation
|
|
</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Page ──────────────────────────────────────────────────────────────────────
|
|
|
|
export default function CapacityPage() {
|
|
const [data, setData] = useState<CapacitySummary | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeRoom, setActiveRoom] = useState("hall-a");
|
|
|
|
const load = useCallback(async () => {
|
|
try { setData(await fetchCapacitySummary(SITE_ID)); }
|
|
catch { toast.error("Failed to load capacity data"); }
|
|
finally { setLoading(false); }
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
load();
|
|
const id = setInterval(load, 30_000);
|
|
return () => clearInterval(id);
|
|
}, [load]);
|
|
|
|
const sitePower = data?.rooms.reduce((s, r) => s + r.power.used_kw, 0) ?? 0;
|
|
const siteCapacity = data?.rooms.reduce((s, r) => s + r.power.capacity_kw, 0) ?? 0;
|
|
|
|
return (
|
|
<PageShell className="p-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-xl font-semibold">Capacity Planning</h1>
|
|
<p className="text-sm text-muted-foreground">Singapore DC01 — power, cooling & space headroom</p>
|
|
</div>
|
|
<button
|
|
onClick={load}
|
|
className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<RefreshCw className="w-3.5 h-3.5" /> Refresh
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="space-y-4">
|
|
<Skeleton className="h-32 w-full" />
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-56" />)}
|
|
</div>
|
|
<Skeleton className="h-64 w-full" />
|
|
</div>
|
|
) : !data ? (
|
|
<div className="flex items-center justify-center h-64 text-sm text-muted-foreground">
|
|
Unable to load capacity data.
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Site summary banner */}
|
|
<div className="rounded-xl border border-border bg-muted/10 px-5 py-3 flex items-center gap-8 text-sm flex-wrap">
|
|
<div>
|
|
<span className="text-muted-foreground">Site IT load</span>
|
|
{" "}
|
|
<strong className="text-foreground text-base">{sitePower.toFixed(1)} kW</strong>
|
|
<span className="text-muted-foreground"> / {siteCapacity.toFixed(0)} kW rated</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-muted-foreground">Site load</span>
|
|
{" "}
|
|
<strong className={cn(
|
|
"text-base",
|
|
(sitePower / siteCapacity * 100) >= 85 ? "text-destructive" :
|
|
(sitePower / siteCapacity * 100) >= 70 ? "text-amber-400" : "text-green-400"
|
|
)}>
|
|
{(sitePower / siteCapacity * 100).toFixed(1)}%
|
|
</strong>
|
|
</div>
|
|
<div className="ml-auto text-xs text-muted-foreground">
|
|
Capacity config: {data.config.rack_power_kw} kW/rack ·{" "}
|
|
{data.config.crac_cooling_kw} kW CRAC ·{" "}
|
|
{data.config.rack_u_total}U/rack
|
|
</div>
|
|
</div>
|
|
|
|
{/* Room comparison strip */}
|
|
<RoomSummaryStrip rooms={data.rooms} />
|
|
|
|
{/* Capacity runway + N+1 */}
|
|
<RunwayCard rooms={data.rooms} />
|
|
|
|
{/* Per-room detail tabs */}
|
|
<div>
|
|
<Tabs value={activeRoom} onValueChange={setActiveRoom}>
|
|
<TabsList>
|
|
{data.rooms.map((r) => (
|
|
<TabsTrigger key={r.room_id} value={r.room_id}>
|
|
{ROOM_LABELS[r.room_id] ?? r.room_id}
|
|
{r.power.pct >= 85 && (
|
|
<AlertTriangle className="w-3 h-3 ml-1.5 text-destructive" />
|
|
)}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</Tabs>
|
|
|
|
<div className="mt-6">
|
|
{data.rooms
|
|
.filter((r) => r.room_id === activeRoom)
|
|
.map((room) => (
|
|
<RoomCapacityPanel
|
|
key={room.room_id}
|
|
room={room}
|
|
racks={data.racks}
|
|
config={data.config}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</PageShell>
|
|
);
|
|
}
|