React DashStream

Holographic 3D infrastructure monitoring dashboard for React. Pure CSS-3D — no WebGL, no canvas, no dependencies beyond React.

npm install react-dashstream

Quick start

import "dashstream/dist/index.css";
import { AIOPsDashboard, Service, ServerNode, DatabaseNode } from "dashstream";
import type { ServiceMeta } from "dashstream";

const services: ServiceMeta[] = [
    {
        name: "My Service",
        status: "online",
        metrics: [
            { label: "Service Health", value: "99.9%", color: "#00ff88" },
            { label: "Avg Response Time", value: "14ms", color: "#00e5ff" },
        ],
        alerts: [{ level: "info", message: "All Systems Nominal" }],
    },
];

export default function App() {
    return (
        <AIOPsDashboard brandName="MY DASHBOARD" services={services}>
            <Service
                name="My Service"
                status="online"
                connections={[
                    { from: [330, 200], to: [200, 380], visibleAtPhase: 3 },
                    { from: [330, 200], to: [460, 380], visibleAtPhase: 3 },
                ]}
            >
                <ServerNode
                    ex={200}
                    ey={380}
                    compactOffset={{ x: -30, y: -20 }}
                    zIndex={8}
                    name="SRV-01"
                    subLabel="APP SERVER"
                    status="online"
                    cpuLoad={42}
                    memLoad={60}
                />
                <DatabaseNode
                    ex={460}
                    ey={380}
                    compactOffset={{ x: 30, y: -20 }}
                    zIndex={7}
                    name="DB-01"
                    subLabel="PRIMARY"
                    status="online"
                    capacity={55}
                />
            </Service>
        </AIOPsDashboard>
    );
}

Click a service to expand its topology. Click a component to drill into its internals.

Full example — multi-service, multi-layer

Two services with different topologies rotating in a 3D carousel. This is the example included in example/Dashboard.tsx inside this package.

import "dashstream/dist/index.css";
import { AIOPsDashboard, Service, HumanNode, WebDispatcherNode, ServerNode, DatabaseNode } from "dashstream";
import type { ServiceMeta } from "dashstream";

// ── Service metadata (drives the stats dialog) ──────────────────────────

const services: ServiceMeta[] = [
    {
        name: "Payment Gateway",
        status: "critical",
        metrics: [
            { label: "Service Health", value: "76.3%", color: "#ff8c00" },
            { label: "Avg Response Time", value: "243ms", color: "#ff8c00" },
            { label: "Active Connections", value: "1,847", color: "#bb55ff" },
            { label: "Request Throughput", value: "3.2k req/s", color: "#00e5ff" },
            { label: "Error Rate", value: "3.81%", color: "#ff2255" },
        ],
        alerts: [{ level: "critical", message: "SRV-01 CPU at 99% — immediate action required" }],
    },
    {
        name: "Auth Service",
        status: "online",
        metrics: [
            { label: "Service Health", value: "99.9%", color: "#00ff88" },
            { label: "Avg Response Time", value: "11ms", color: "#00e5ff" },
            { label: "Active Sessions", value: "8,421", color: "#bb55ff" },
            { label: "Auth Rate", value: "920 req/s", color: "#00e5ff" },
            { label: "Failed Logins", value: "0.03%", color: "#00ff88" },
        ],
        alerts: [{ level: "info", message: "All Systems Nominal" }],
    },
];

// ── Payment Gateway — 4-layer topology ──────────────────────────────────

function PaymentGateway({ name }: { name: string }) {
    return (
        <Service
            name={name}
            status="critical"
            connections={[
                { from: [330, 100], to: [330, 230], visibleAtPhase: 2, color: "#00e5ff" },
                { from: [330, 230], to: [200, 380], visibleAtPhase: 3 },
                { from: [330, 230], to: [460, 380], visibleAtPhase: 3 },
                { from: [200, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
                { from: [460, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
            ]}
        >
            <HumanNode
                ex={330}
                ey={100}
                compactOffset={{ x: 0, y: -50 }}
                zIndex={10}
                visibleAtPhase={2}
                color="#00e5ff"
                scale={1.5}
            />
            <WebDispatcherNode
                ex={330}
                ey={230}
                compactOffset={{ x: 0, y: -25 }}
                zIndex={9}
                name="GATEWAY"
                subLabel="HTTP LAYER"
                status="online"
                traffic={82}
                activeRoutes={6}
                visibleAtPhase={2}
            />
            <ServerNode
                ex={200}
                ey={380}
                compactOffset={{ x: -30, y: 10 }}
                zIndex={8}
                name="SRV-01"
                subLabel="PROCESSOR"
                status="critical"
                cpuLoad={99}
                memLoad={64}
                alert={{ offsetX: -160, offsetY: -60, align: "left" }}
            />
            <ServerNode
                ex={460}
                ey={380}
                compactOffset={{ x: 30, y: 10 }}
                zIndex={8}
                name="SRV-02"
                subLabel="PROCESSOR"
                delay="0.4s"
                status="online"
                cpuLoad={38}
                memLoad={51}
            />
            <DatabaseNode
                ex={330}
                ey={520}
                compactOffset={{ x: 0, y: 40 }}
                zIndex={7}
                name="PG-DB"
                subLabel="PRIMARY"
                color="#ff8c00"
                status="online"
                capacity={61}
            />
        </Service>
    );
}

// ── Auth Service — 2-layer topology ─────────────────────────────────────

function AuthService({ name }: { name: string }) {
    return (
        <Service
            name={name}
            status="online"
            connections={[
                { from: [200, 200], to: [200, 380], visibleAtPhase: 3 },
                { from: [460, 200], to: [460, 380], visibleAtPhase: 3 },
                { from: [200, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
                { from: [460, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
            ]}
        >
            <ServerNode
                ex={200}
                ey={380}
                compactOffset={{ x: -30, y: -20 }}
                zIndex={8}
                name="AUTH-01"
                subLabel="IDENTITY"
                status="online"
                cpuLoad={34}
                memLoad={48}
            />
            <ServerNode
                ex={460}
                ey={380}
                compactOffset={{ x: 30, y: -20 }}
                zIndex={8}
                name="AUTH-02"
                subLabel="SESSION"
                delay="0.4s"
                status="online"
                cpuLoad={29}
                memLoad={42}
            />
            <DatabaseNode
                ex={330}
                ey={520}
                compactOffset={{ x: 0, y: 20 }}
                zIndex={7}
                name="AUTH-DB"
                subLabel="PRIMARY"
                color="#ff8c00"
                status="online"
                capacity={37}
            />
        </Service>
    );
}

// ── Dashboard ───────────────────────────────────────────────────────────

export default function App() {
    return (
        <AIOPsDashboard brandName="DASHSTREAM" brandTag="EXAMPLE" services={services}>
            <PaymentGateway name="Payment Gateway" />
            <AuthService name="Auth Service" />
        </AIOPsDashboard>
    );
}

Components

Layout

| Component | Description | | ---------------- | -------------------------------------------------------------------------------------------------------------- | | AIOPsDashboard | Full dashboard shell — header, carousel, and state management. Drop services in as children. | | Service | Service container — positions child nodes on a 3D orbit and draws connection lines between them. | | ServiceNode | Low-level positioned wrapper with floating animation, scan line, and labels. Used by the compound nodes below. |

Compound nodes (recommended)

These combine ServiceNode + 3D model + componentInfo into a single element:

| Component | Key props | Description | | ------------------- | ------------------------------------------------- | ------------------------------------------------------- | | ServerNode | status, cpuLoad, memLoad, brandLabel | Application server tower with LEDs and CPU/memory bars. | | DatabaseNode | status, capacity | Three-platter database cylinder with capacity bar. | | WebDispatcherNode | status, traffic, activeRoutes | Network appliance with 8 port LEDs and traffic metrics. | | MessageServerNode | status, queueDepth, msgsPerSec, instances | Message server with instance LEDs and queue metrics. | | HumanNode | status, scale | SVG wireframe person icon for user/actor nodes. |

All compound nodes share: ex, ey, compactOffset, zIndex, name, subLabel, color, delay, visibleAtPhase, alert.

3D models (low-level)

If you need full control, use the raw 3D models inside a ServiceNode:

Server3D, Database3D, WebDispatcher3D, MessageServer3D, Human3D

All 3D models accept: rotateX, rotateY, rotateZ, scale, autoRotate.

Status indicators

| Component | Props | Description | | --------------- | ------------------------------------ | ---------------------------------------------------------------- | | SyncBridge | synced, latencyMs | Database replication bridge between primary and standby. | | NodeCallout | status, title, msg, ex, ey | Alert callout with leader line (auto-rendered by ServiceNode). | | HoloBase | size, color, widthRatio | Neon holographic base platform (auto-rendered by Service). Position via baseConfig on Service. | | SvgConnection | x1, y1, x2, y2, show | Animated dashed SVG connection line. |

Dialogs

| Component | Description | | ----------------- | ----------------------------------------------------------------------------------------------- | | ServiceDialog | Service-level stats panel — shows metrics and alerts. Auto-rendered when a service is expanded. | | ComponentDialog | Component drill-down with sub-component internals and sparkline graphs. |

Drill-down internals

Rendered inside ComponentDialog when a component is inspected:

CPU3D, Memory3D, DriveBay3D, NetworkBlock3D, ThreadPool3D, Platter3D, Port3D, HistoricalGraphPanel, ComponentDrillView

Pre-built services

| Component | Topology | | ----------------- | --------------------------------------------------------------------------------- | | SAPService | Users → Web Dispatcher + Message Server → 3 App Servers → Primary DB + Standby DB | | ExchangeService | Users → Dispatcher → 3 App Servers → Primary DB + Standby DB |

Building a custom service

Compose compound nodes inside a Service container. Each node needs:

• ex, ey — Position in the expanded topology (pixels from top-left of scene).
• compactOffset — Offset from the service center in the compact carousel view.
• zIndex — Stacking order (higher tiers get higher values).
• visibleAtPhase — When the node fades in during expansion (0–6). Use 2 for top-tier nodes, 3 for middle, etc.

HoloBase position

The holographic base platform rendered by each Service can be repositioned via baseConfig:

<Service
  name="My Service"
  baseConfig={{
    size: 90,
    color: "#00e5ff",
    widthRatio: 3,
    expandedX: 330,   // absolute X in expanded view (default: container centre)
    expandedY: 500,   // absolute Y in expanded view (default: 570)
    compactOffsetX: 0, // horizontal nudge in compact carousel view
    compactOffsetY: -20, // vertical nudge in compact carousel view
  }}
  ...
>

Connection lines

Define connection lines between nodes via the connections prop on Service:

connections={[
  { from: [x1, y1], to: [x2, y2], visibleAtPhase: 3 },
  { from: [x1, y1], to: [x2, y2], visibleAtPhase: 4, color: "#ff8c00" },
]}

Alerts

Nodes automatically detect threshold breaches and render alert callouts. Default thresholds:

• Warning at 70%
• Critical at 85%

Position the callout with the alert prop:

<ServerNode
  alert={{ offsetX: -160, offsetY: -60, align: "left" }}
  cpuLoad={99}
  ...
/>

Service dialog

Pass ServiceMeta objects to AIOPsDashboard via the services prop to populate the stats panel that appears when a service is expanded:

const services: ServiceMeta[] = [
    {
        name: "My Service",
        status: "online",
        metrics: [
            { label: "Service Health", value: "99.9%", color: "#00ff88" },
            { label: "Avg Response Time", value: "14ms", color: "#00e5ff" },
        ],
        alerts: [{ level: "info", message: "All Systems Nominal" }],
    },
];

Status types

type ComponentStatus = "online" | "warning" | "critical" | "offline";

| Status | Color | Glow | | ---------- | --------- | -------- | | online | #00e5ff | cyan | | warning | #ff8c00 | orange | | critical | #ff2255 | red | | offline | #1e3a5a | dim blue |

Theme constants

import { STATUS_CFG, HOLO_CYAN, HOLO_BLUE, HOLO_SURFACE, HOLO_GLASS, makeFaceStyles } from "dashstream";

• STATUS_CFG — status-to-color lookup table
• HOLO_CYAN / HOLO_BLUE — accent colors
• HOLO_SURFACE / HOLO_GLASS — CSS gradient backgrounds for 3D faces
• makeFaceStyles(W, H, D) — generates CSS transforms for the 6 faces of a 3D box

License

MIT