DataGrid - 운영 모니터링

import * as React from "react";
import { DataGrid, type DataGridColumn } from "@reopt-ai/opt-datagrid";

interface OpsRow {
  id: number;
  service: string;
  latencyMs: number;
}

const columns: DataGridColumn<OpsRow>[] = [
  { id: "service", title: "Service", getValue: (row) => row.service },
  {
    id: "latency",
    title: "Latency (ms)",
    align: "right",
    getValue: (row) => String(row.latencyMs),
  },
];

function OpsGrid() {
  const [sort, setSort] = React.useState<"sort-asc" | "sort-desc" | null>(null);
  const [windowInfo, setWindowInfo] = React.useState("r0-r0");
  const rows = React.useMemo<OpsRow[]>(
    () => [
      { id: 1, service: "API", latencyMs: 34 },
      { id: 2, service: "Worker", latencyMs: 81 },
      { id: 3, service: "Billing", latencyMs: 52 },
    ],
    [],
  );

  const sortedRows = React.useMemo(() => {
    if (!sort) return rows;
    return [...rows].sort((a, b) =>
      sort === "sort-asc" ? a.latencyMs - b.latencyMs : b.latencyMs - a.latencyMs,
    );
  }, [rows, sort]);

  return (
    <section>
      <p>Visible window: {windowInfo}</p>
      <DataGrid
        rows={sortedRows}
        columns={columns}
        onHeaderMenuAction={(colIndex, action) => {
          if (colIndex === 1) {
            setSort(action === "clear-sort" ? null : action);
          }
        }}
        onVisibleRegionChanged={(region) => {
          setWindowInfo(`r${region.startRow + 1}-r${region.endRow}`);
        }}
      />
    </section>
  );
}

import { DataGrid, type DataGridColumn } from "@reopt-ai/opt-datagrid";

interface ServiceRow {
  id: number;
  service: string;
  region: string;
  status: string;
  latencyMs: number;
  cpu: number;
}

const columns: DataGridColumn<ServiceRow>[] = [
  { id: "service", title: "Service", width: 220, editable: false, getValue: (row) => row.service },
  { id: "region", title: "Region", width: 140, editable: false, getValue: (row) => row.region },
  {
    id: "status",
    title: "Status",
    width: 120,
    editable: false,
    getValue: (row) => row.status,
    renderCell: ({ value }) => (
      <span className={value === "Active" ? "badge-green" : "badge-red"}>{value}</span>
    ),
  },
  { id: "latency", title: "Latency (ms)", width: 140, align: "right", editable: false, getValue: (row) => String(row.latencyMs) },
  { id: "cpu", title: "CPU (%)", width: 120, align: "right", editable: false, getValue: (row) => String(row.cpu) },
];