react-aiops

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

npm install react-aiops

import "react-aiops/dist/index.css";

Quickstart (absolute minimum)

A single server on screen in 5 lines:

import "react-aiops/dist/index.css";
import { Server3D } from "react-aiops";

export default function App() {
  return <Server3D status="online" cpuLoad={42} memLoad={60} />;
}

Minimal dashboard

A full rotating carousel with one service — no config objects, no state management:

import "react-aiops/dist/index.css";
import { AIOPsDashboard, SAPService } from "react-aiops";

export default function App() {
  return (
    <AIOPsDashboard>
      <SAPService
        config={{
          name: "SAP HR",
          wdStatus: "online",
          msStatus: "online",
          srv1Status: "online",
          srv2Status: "online",
          srv3Status: "online",
          pdbStatus: "online",
          sdbStatus: "online",
          dbSync: true,
        }}
      />
    </AIOPsDashboard>
  );
}

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

Full-featured dashboard

Multiple services, mixed statuses, service dialog metadata:

import "react-aiops/dist/index.css";
import {
  AIOPsDashboard,
  SAPService,
  ExchangeService,
  computeSAPServiceStatus,
  computeSAPDialogMetrics,
  computeSAPDialogAlerts,
  computeExchangeServiceStatus,
  computeExchangeDialogMetrics,
  computeExchangeDialogAlerts,
} from "react-aiops";
import type { SAPServiceConfig, ExchangeServiceConfig, ServiceMeta } from "react-aiops";

const sapHR: SAPServiceConfig = {
  name: "SAP HR",
  wdStatus: "online",
  msStatus: "online",
  srv1Status: "online",
  srv2Status: "warning",
  srv3Status: "online",
  pdbStatus: "online",
  sdbStatus: "online",
  dbSync: true,
};

const exchange: ExchangeServiceConfig = {
  name: "Exchange",
  dispStatus: "critical",
  srv1Status: "online",
  srv2Status: "online",
  srv3Status: "offline",
  pdbStatus: "online",
  sdbStatus: "warning",
  dbSync: false,
};

const services: ServiceMeta[] = [
  {
    name: sapHR.name,
    status: computeSAPServiceStatus(sapHR),
    dbSync: sapHR.dbSync,
    metrics: computeSAPDialogMetrics(sapHR),
    alerts: computeSAPDialogAlerts(sapHR),
  },
  {
    name: exchange.name,
    status: computeExchangeServiceStatus(exchange),
    dbSync: exchange.dbSync,
    metrics: computeExchangeDialogMetrics(exchange),
    alerts: computeExchangeDialogAlerts(exchange),
  },
];

export default function App() {
  return (
    <AIOPsDashboard services={services} brandName="MY AIOPS" brandTag="LIVE">
      <SAPService config={sapHR} />
      <ExchangeService config={exchange} />
    </AIOPsDashboard>
  );
}

Components

Layout

| Component | Description | |---|---| | AIOPsDashboard | Full dashboard shell with header, carousel, and state management. Drop services in as children. | | Carousel | Low-level carousel container. Use this if you want to manage view state yourself. | | Service | Service container — positions child nodes on a 3D orbit and draws connection lines. | | ServiceNode | Positions a 3D component in the topology with floating animation, scan line, and labels. |

3D Hardware Models

| Component | Props | Description | |---|---|---| | Server3D | status, cpuLoad, memLoad, name | Vertical server tower with LEDs, drive bays, CPU/memory bars. | | Database3D | status, capacity, name | Three-platter database cylinder with status LEDs and capacity bar. | | WebDispatcher3D | status, traffic, activeRoutes, name | Flat network appliance with 8 port LEDs and traffic metrics. | | MessageServer3D | status, queueDepth, msgsPerSec, instances, name | Message server with ABAP instance LEDs and queue metrics. | | Human3D | status, scale | SVG wireframe person icon for user/actor nodes. |

All 3D components share these optional props: rotateX, rotateY, rotateZ, scale, autoRotate.

Status Indicators

| Component | Props | Description | |---|---|---| | SyncBridge | synced, latencyMs | Database replication status bridge (synced/lag with latency). | | NodeCallout | status, title, msg, ex, ey, offsetX, offsetY | Alert callout with leader line for unhealthy nodes. | | HoloBase | size, color, widthRatio | Neon holographic base platform. | | SvgConnection | x1, y1, x2, y2, show | Animated dashed SVG connection line. |

Dialogs

| Component | Description | |---|---| | ServiceDialog | Service-level statistics panel (auto-rendered by Carousel). | | ComponentDialog | Component drill-down with sub-component internals and sparkline graphs. |

Drill-down Internals

These render inside ComponentDialog when a component is drilled into:

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 library primitives to create any topology:

import {
  Service,
  ServiceNode,
  Server3D,
  Database3D,
  NodeCallout,
  SyncBridge,
} from "react-aiops";

function MyService() {
  return (
    <Service
      name="My Service"
      status="online"
      connections={[
        { from: [330, 200], to: [200, 350], visibleAtPhase: 3 },
        { from: [330, 200], to: [460, 350], visibleAtPhase: 3 },
      ]}
    >
      <ServiceNode
        ex={200} ey={350}
        compactOffset={{ x: -30, y: -20 }}
        zIndex={8}
        label="SRV-01" subLabel="APP SERVER"
        componentInfo={{ type: "server", name: "SRV-01", status: "online" }}
      >
        <Server3D status="online" cpuLoad={42} memLoad={60} />
      </ServiceNode>

      <ServiceNode
        ex={460} ey={350}
        compactOffset={{ x: 30, y: -20 }}
        zIndex={7}
        label="DB-01" subLabel="PRIMARY"
        componentInfo={{ type: "database", name: "DB-01", status: "online" }}
      >
        <Database3D status="online" capacity={55} />
      </ServiceNode>
    </Service>
  );
}

Status types

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

Each status maps to a color/glow pair via STATUS_CFG:

| 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 "react-aiops";

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

License

MIT