/* global React */
const { useState, useEffect, useMemo } = React;
// ---------- Mock data ----------
const ROOMS = [
{
id: "A", name: "Hall A", sub: "Compute · 24 racks",
status: "ok",
powerKw: 86.4, powerCapKw: 160, powerThresholdKw: 128,
uUsed: 412, uTotal: 1008,
tempCold: 19.4, tempHot: 26.8,
racks: { ok: 22, warn: 2, crit: 0 },
sbyk: [78, 80, 82, 81, 84, 85, 83, 84, 86, 88, 87, 86, 85, 86, 87, 86.4],
},
{
id: "B", name: "Hall B", sub: "Compute + Storage · 32 racks",
status: "warn",
powerKw: 142.8, powerCapKw: 200, powerThresholdKw: 160,
uUsed: 1024, uTotal: 1344,
tempCold: 20.1, tempHot: 30.4,
racks: { ok: 25, warn: 5, crit: 2 },
sbyk: [120, 122, 125, 130, 132, 138, 142, 144, 146, 144, 140, 141, 143, 144, 145, 142.8],
},
{
id: "C", name: "Hall C", sub: "Edge / GPU · 12 racks",
status: "ok",
powerKw: 64.2, powerCapKw: 120, powerThresholdKw: 96,
uUsed: 318, uTotal: 504,
tempCold: 19.2, tempHot: 25.1,
racks: { ok: 12, warn: 0, crit: 0 },
sbyk: [58, 60, 61, 62, 64, 63, 65, 66, 64, 63, 62, 64, 65, 66, 65, 64.2],
},
{
id: "D", name: "Hall D", sub: "Network + colo · 18 racks",
status: "warn",
powerKw: 78.1, powerCapKw: 100, powerThresholdKw: 80,
uUsed: 612, uTotal: 756,
tempCold: 20.8, tempHot: 28.6,
racks: { ok: 15, warn: 3, crit: 0 },
sbyk: [72, 73, 74, 76, 75, 77, 78, 79, 78, 77, 78, 79, 78, 77, 78, 78.1],
},
];
const ALERTS_LIVE = [
{ id: "AL-2041", sev: "crit", msg: "Load PDU > 90% (5920W / 6400W)", src: "pdu-d03-a · titan-33 · Hall B", at: "14:31", ago: "4 min" },
{ id: "AL-2040", sev: "crit", msg: "Temperature sortie d'aisle > 30°C", src: "thermo-r-d03 · titan-33 · Hall B", at: "14:23", ago: "12 min" },
{ id: "AL-2039", sev: "warn", msg: "Load PDU > 85% pendant 15 min", src: "pdu-b03-a · mars-05 · Hall B", at: "14:13", ago: "22 min" },
{ id: "AL-2038", sev: "warn", msg: "Unbalanced load A/B > 100W", src: "mercury-15 · Hall A", at: "13:54", ago: "41 min" },
{ id: "AL-2037", sev: "warn", msg: "SNMP timeout intermittent", src: "pdu-a05-a · mercury-15 · Hall A", at: "14:21", ago: "14 min" },
{ id: "AL-2034", sev: "crit", msg: "Loss redondance alim (PSU2 KO)", src: "srv-lyon-db-01 · titan-33", at: "13:33", ago: "1h 02" },
];
const TICKETS_TODAY = {
open: 14, inProgress: 6, doneToday: 8,
// 7 derniers jours : [opened, closed]
bars: [[5, 4], [7, 6], [4, 5], [9, 7], [6, 8], [5, 4], [8, 8]],
days: ["L", "M", "M", "J", "V", "S", "D"],
top: [
{ id: 2841, title: "Rslot PSU2 — srv-lyon-db-01", pri: "high", progress: 50, room: "B" },
{ id: 2837, title: "Verify unbalanced load PDU titan-31", pri: "high", progress: 0, room: "D" },
{ id: 2839, title: "Decom 4 servers HPE en mercury-13", pri: "normal", progress: 62, room: "A" },
],
};
const TICKER_EVENTS = [
{ t: "14:31", sev: "crit", text: "AL-2041 opene · pdu-d03-a load 5920W/6400W" },
{ t: "14:28", sev: "ok", text: "TIC-2838 closed · cabling fibre mars-07" },
{ t: "14:23", sev: "crit", text: "AL-2040 opene · temperature hot aisle titan-33 = 31.2°C" },
{ t: "14:21", sev: "warn", text: "AL-2037 flap · SNMP timeout pdu-a05-a" },
{ t: "14:18", sev: "ok", text: "Backup quotidien completed · 2.4 TB · duration 1h12" },
{ t: "14:13", sev: "warn", text: "AL-2039 opene · pdu-b03-a load > 85%" },
{ t: "14:08", sev: "info", text: "TIC-2841 step 2/4 validatede · srv-lyon-db-01 identified" },
{ t: "13:54", sev: "warn", text: "AL-2038 opene · unbalanced A/B > 100W mercury-15" },
{ t: "13:42", sev: "info", text: "TIC-2841 step 1/4 · byt sortie du stock" },
{ t: "13:33", sev: "crit", text: "AL-2034 opene · PSU2 KO sur srv-lyon-db-01" },
];
// ---------- Helpers ----------
const fmt2 = (n) => n.toFixed(1);
const ratioColor = (r) => {
if (r < 0.55) return "var(--noc-ok)";
if (r < 0.75) return "oklch(0.78 0.15 95)";
if (r < 0.9) return "var(--noc-warn)";
return "var(--noc-crit)";
};
// ---------- Sbykline ----------
function Sbyk({ data, color, height = 30 }) {
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const w = 200;
const pts = data.map((v, i) => `${(i / (data.length - 1)) * w},${height - ((v - min) / range) * (height - 4) - 2}`).join(" ");
const areaPts = `0,${height} ${pts} ${w},${height}`;
return (
);
}
// ---------- Header ----------
function Header() {
const [now, setNow] = useState(new Date());
useEffect(() => {
const t = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(t);
}, []);
const pad = (n) => String(n).padStart(2, "0");
const time = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
const dateStr = now.toLocaleDateString("fr-FR", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
return (
);
}
// ---------- KPI XL ----------
function KpiXL({ kind, label, value, unit, sub, trend, trendKind, sbykColor, sbykData, live }) {
return (
{label}
{live && LIVE}
{value}{unit && {unit}}
{sbykData && (
)}
);
}
function Kpis() {
const totalPower = ROOMS.reduce((s, r) => s + r.powerKw, 0);
const totalCap = ROOMS.reduce((s, r) => s + r.powerCapKw, 0);
const uUsed = ROOMS.reduce((s, r) => s + r.uUsed, 0);
const uTot = ROOMS.reduce((s, r) => s + r.uTotal, 0);
const uFreePct = ((uTot - uUsed) / uTot * 100);
const critN = ALERTS_LIVE.filter(a => a.sev === "crit").length;
const warnN = ALERTS_LIVE.filter(a => a.sev === "warn").length;
const tk = TICKETS_TODAY;
return (
{((totalPower / totalCap) * 100).toFixed(0)}% capacity · {totalCap} kW max}
trend="▲ +4.2 kW"
trendKind="up-bad"
sbykData={[340, 348, 352, 358, 362, 365, 368, 370, 369, 372, 371, totalPower]}
sbykColor="var(--noc-info)"
live
/>
{uFreePct.toFixed(0)}% free · {uTot} U total}
trend="▼ -8 U / 30j"
trendKind="down-bad"
/>
en cours {tk.inProgress} · resolved aujourd'hui {tk.doneToday}}
trend="▲ +2"
trendKind="up-bad"
/>
criticals {critN} · warnings {warnN} · MTTA 4 min}
trend="▲ +3"
trendKind="up-bad"
live
/>
);
}
// ---------- Rooms card ----------
function RoomsCard() {
return (
Rooms · load / capacity / temperature
refresh · 10s
{ROOMS.map(r => {
const pRatio = r.powerKw / r.powerCapKw;
const uRatio = r.uUsed / r.uTotal;
const pColor = ratioColor(pRatio);
const uColor = ratioColor(uRatio);
const tempCrit = r.tempHot > 30;
const tempWarn = r.tempHot > 28;
return (
{r.name}
{r.sub}
{r.status === "ok" ? "Nameinal" : r.status === "warn" ? "Vigilance" : "Critical"}
Load energy
{fmt2(r.powerKw)}/ {r.powerCapKw} kW
Occupation U
{r.uUsed}/ {r.uTotal} U
Cold aisle
{fmt2(r.tempCold)}°C
Hot aisle
{fmt2(r.tempHot)}°C
Racks alert
{r.racks.warn + r.racks.crit}
);
})}
);
}
// ---------- Tickets card ----------
function TicketsCard() {
const tk = TICKETS_TODAY;
const max = Math.max(...tk.bars.flat());
return (
Tickets · 7 jours
SLA met · 96%
In progress
{tk.inProgress}
Faits aujourd'hui
{tk.doneToday}
{tk.bars.map(([o, c], i) => (
{tk.days[i]}
))}
OUVERTS
FERMÉS
{tk.top.map(t => (
{t.title}
Hall {t.room} · {t.progress}% · due aujourd'hui
#{t.id}
))}
);
}
// ---------- Alerts card ----------
function AlertsCard() {
return (
Alerts · live feed
stream · ● active
{ALERTS_LIVE.slice(0, 6).map(a => (
{a.sev === "crit" ? "CRIT" : a.sev === "warn" ? "WARN" : "INFO"}
))}
);
}
// ---------- Power & cooling ----------
function PowerCard() {
return (
Energy & recoldissement
redondance · N+1 ✓
⚡
Network ENEDIS
412kW
ONLINE
▣
UPSs
98%
CHARGÉS · 12 min
⛁
Genset
100%
STANDBY · 4200 L
);
}
// ---------- Ticker ----------
function Ticker() {
// duplicate so the loop is seamless
const stream = [...TICKER_EVENTS, ...TICKER_EVENTS];
return (
);
}
// ---------- Main ----------
function VueWallboard() {
// Slight live tick to make values shimmer
const [, setTick] = useState(0);
useEffect(() => {
const t = setInterval(() => setTick(x => x + 1), 5000);
return () => clearInterval(t);
}, []);
return (
);
}
window.VueWallboard = VueWallboard;