@echothink-ui/admin 0.1.0

package/src/components/WorkerPoolPanel.tsx

@@ -0,0 +1,281 @@
+import * as React from "react";
+import {
+  ActionGroup,
+  Badge,
+  Button,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { WorkerPool } from "./types";
+
+export interface WorkerPoolPanelProps extends Omit<SurfaceComponentProps, "children"> {
+  pools: WorkerPool[];
+  onScale?: (id: string, delta: number) => void;
+}
+
+type WorkerPoolTone = "normal" | "warning" | "danger" | "neutral";
+
+interface WorkerPoolState {
+  label: string;
+  tone: WorkerPoolTone;
+}
+
+interface WorkerPoolStatusSummary {
+  label: string;
+  severity: EthSeverity;
+}
+
+type WorkerPoolMeterStyle = React.CSSProperties & {
+  "--eth-admin-worker-pool-capacity": string;
+};
+
+type WorkerPoolRow = Record<string, unknown> &
+  WorkerPool & {
+    cappedPercent: number;
+    capacityLabel: string;
+    percent: number;
+    percentLabel: string;
+    state: WorkerPoolState;
+  };
+
+export function WorkerPoolPanel({
+  pools,
+  onScale,
+  title = "Worker pools",
+  subtitle,
+  description,
+  actions,
+  density = "compact",
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  eyebrow: _eyebrow,
+  status: _status,
+  severity: _severity,
+  loading: _loading,
+  empty: _empty,
+  error: _error,
+  items: _items,
+  metadata: _metadata,
+  footer: _footer,
+  ...sectionProps
+}: WorkerPoolPanelProps) {
+  const headingId = React.useId();
+  const rows: WorkerPoolRow[] = pools.map((pool) => {
+    const percent = pool.total > 0 ? (pool.active / pool.total) * 100 : 0;
+    const cappedPercent = Math.min(100, Math.max(0, percent));
+
+    return {
+      ...pool,
+      cappedPercent,
+      capacityLabel:
+        pool.total > 0
+          ? `${formatNumber(pool.active)} / ${formatNumber(pool.total)} active`
+          : `${formatNumber(pool.active)} active`,
+      percent,
+      percentLabel: pool.total > 0 ? formatPercent(percent) : "No capacity",
+      state: workerPoolState(pool, percent)
+    };
+  });
+  const totals = pools.reduce(
+    (summary, pool) => ({
+      active: summary.active + pool.active,
+      failed: summary.failed + pool.failed,
+      idle: summary.idle + pool.idle,
+      total: summary.total + pool.total
+    }),
+    { active: 0, failed: 0, idle: 0, total: 0 }
+  );
+  const utilization = totals.total > 0 ? (totals.active / totals.total) * 100 : 0;
+  const statusSummary = workerPoolStatusSummary(pools.length, totals.failed, utilization);
+  const supportingText = subtitle ?? description;
+  const columns: DataColumn<WorkerPoolRow>[] = [
+    {
+      key: "name",
+      header: "Pool",
+      width: "26%",
+      render: (row) => (
+        <div className="eth-admin-worker-pool__pool">
+          <strong>{row.name}</strong>
+          <span>{row.state.label}</span>
+        </div>
+      )
+    },
+    {
+      key: "active",
+      header: "Capacity",
+      width: "34%",
+      render: (row) => (
+        <div className="eth-admin-worker-pool__capacity">
+          <div className="eth-admin-worker-pool__capacity-copy">
+            <span>{row.capacityLabel}</span>
+            <strong>{row.percentLabel}</strong>
+          </div>
+          <span
+            className="eth-admin-worker-pool__meter"
+            role="progressbar"
+            aria-label={`${row.name} capacity`}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(row.cappedPercent)}
+            aria-valuetext={`${formatNumber(row.active)} of ${formatNumber(
+              row.total
+            )} workers active`}
+            style={
+              {
+                "--eth-admin-worker-pool-capacity": `${row.cappedPercent}%`
+              } as WorkerPoolMeterStyle
+            }
+          >
+            <span
+              className={[
+                "eth-admin-worker-pool__meter-fill",
+                `eth-admin-worker-pool__meter-fill--${row.state.tone}`
+              ].join(" ")}
+            />
+          </span>
+        </div>
+      )
+    },
+    {
+      key: "idle",
+      header: "Idle",
+      align: "end",
+      width: "12%",
+      render: (row) => (
+        <span className="eth-admin-worker-pool__number">{formatNumber(row.idle)}</span>
+      )
+    },
+    {
+      key: "failed",
+      header: "Failed",
+      align: "end",
+      width: "12%",
+      render: (row) => (
+        <Badge severity={row.failed > 0 ? "danger" : "success"}>{formatNumber(row.failed)}</Badge>
+      )
+    },
+    {
+      key: "scale",
+      header: "Scale",
+      align: "end",
+      width: "10rem",
+      render: (row) => (
+        <div
+          className="eth-admin-worker-pool__scale"
+          role="group"
+          aria-label={`${row.name} scale controls`}
+        >
+          <Button
+            type="button"
+            intent="ghost"
+            density="compact"
+            className="eth-admin-worker-pool__scale-button"
+            disabled={!onScale}
+            aria-label={`Scale ${row.name} down by 1`}
+            onClick={() => onScale?.(row.id, -1)}
+          >
+            -1
+          </Button>
+          <Button
+            type="button"
+            intent="ghost"
+            density="compact"
+            className="eth-admin-worker-pool__scale-button"
+            disabled={!onScale}
+            aria-label={`Scale ${row.name} up by 1`}
+            onClick={() => onScale?.(row.id, 1)}
+          >
+            +1
+          </Button>
+        </div>
+      )
+    }
+  ];
+
+  return (
+    <section
+      {...sectionProps}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : headingId)}
+      className={["eth-admin-worker-pool", className].filter(Boolean).join(" ")}
+      data-eth-component="WorkerPoolPanel"
+    >
+      <header>
+        <div className="eth-admin-worker-pool__heading">
+          <h3 id={headingId}>{title}</h3>
+          {supportingText ? <p>{supportingText}</p> : null}
+        </div>
+        <div className="eth-admin-worker-pool__header-actions">
+          <Badge severity={statusSummary.severity}>{statusSummary.label}</Badge>
+          <ActionGroup actions={actions} />
+        </div>
+      </header>
+      <dl className="eth-admin-worker-pool__summary" aria-label="Worker pool totals">
+        <div>
+          <dt>Tracked pools</dt>
+          <dd>{formatPoolCount(pools.length)}</dd>
+        </div>
+        <div>
+          <dt>Active capacity</dt>
+          <dd>
+            {formatNumber(totals.active)} / {formatNumber(totals.total)}
+          </dd>
+        </div>
+        <div>
+          <dt>Failures</dt>
+          <dd>{formatFailureCount(totals.failed)}</dd>
+        </div>
+      </dl>
+      <DataTable
+        rows={rows}
+        columns={columns}
+        rowKey="id"
+        density={density}
+        className="eth-admin-worker-pool__table"
+        emptyState={
+          <p className="eth-admin-worker-pool__empty">No worker pools are configured.</p>
+        }
+      />
+    </section>
+  );
+}
+
+function workerPoolState(pool: WorkerPool, percent: number): WorkerPoolState {
+  if (pool.failed > 0) return { label: "Failure requires review", tone: "danger" };
+  if (pool.total <= 0) return { label: "No capacity", tone: "neutral" };
+  if (percent >= 100) return { label: "At capacity", tone: "warning" };
+  if (pool.idle > 0) return { label: "Capacity available", tone: "normal" };
+  return { label: "Active", tone: "normal" };
+}
+
+function workerPoolStatusSummary(
+  poolCount: number,
+  failedCount: number,
+  utilization: number
+): WorkerPoolStatusSummary {
+  if (poolCount === 0) return { label: "No pools", severity: "neutral" };
+  if (failedCount === 1) return { label: "Failure in pool", severity: "danger" };
+  if (failedCount > 1) {
+    return { label: `${formatNumber(failedCount)} failures`, severity: "danger" };
+  }
+  if (utilization >= 90) return { label: "Capacity tight", severity: "warning" };
+  return { label: "Operational", severity: "success" };
+}
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat("en-US").format(value);
+}
+
+function formatPercent(value: number) {
+  return `${value.toLocaleString("en-US", { maximumFractionDigits: 0 })}%`;
+}
+
+function formatPoolCount(value: number) {
+  return `${formatNumber(value)} ${value === 1 ? "pool" : "pools"}`;
+}
+
+function formatFailureCount(value: number) {
+  return `${formatNumber(value)} failed`;
+}

package/src/components/types.ts

@@ -0,0 +1,131 @@
+import type * as React from "react";
+import type { Condition, FieldSchema, FormValues, JsonSchema, RuleDefinition } from "@echothink-ui/forms";
+
+export type ServiceHealthStatus = "healthy" | "degraded" | "down";
+
+export interface HealthService {
+  id: string;
+  name: string;
+  status: ServiceHealthStatus;
+  latencyMs?: number;
+  incidentsCount?: number;
+}
+
+export interface ServiceStatusSummary {
+  name: string;
+  status: ServiceHealthStatus;
+  latencyMs?: number;
+  incidentsCount?: number;
+  lastIncidentAt?: string;
+  uptimePercent?: number;
+}
+
+export interface AdminIncident {
+  id: string;
+  title: string;
+  severity: "info" | "warning" | "error" | "critical";
+  startedAt: string;
+}
+
+export interface AdminMetric {
+  label: string;
+  value: React.ReactNode;
+  trend?: React.ReactNode;
+}
+
+export interface WorkerPool {
+  id: string;
+  name: string;
+  active: number;
+  total: number;
+  idle: number;
+  failed: number;
+}
+
+export interface JobQueue {
+  id: string;
+  name: string;
+  depth: number;
+  processing: number;
+  failed: number;
+  retryRate?: number;
+}
+
+export interface QueueDepthPoint {
+  id?: string;
+  label?: string;
+  timestamp?: string;
+  depth: number;
+}
+
+export interface LogEntry {
+  id: string;
+  timestamp: string;
+  level?: "debug" | "info" | "warning" | "error";
+  source?: string;
+  message: string;
+  meta?: Record<string, unknown>;
+}
+
+export interface AuditLogEntry {
+  id: string;
+  timestamp: string;
+  actor: string;
+  action: string;
+  resource: string;
+  outcome: "success" | "failure" | string;
+  ip?: string;
+  userAgent?: string;
+}
+
+export interface AdminPolicyConfig {
+  id?: string;
+  name?: string;
+  description?: string;
+  rules?: RuleDefinition[];
+  variables?: string[];
+  condition?: Condition;
+  [key: string]: unknown;
+}
+
+export interface TenantSettingsSection {
+  id: string;
+  title: string;
+  description?: React.ReactNode;
+  fields: FieldSchema[];
+}
+
+export interface BillingUsageMetric {
+  label: string;
+  current: number;
+  limit: number;
+  unit: string;
+  trend?: number;
+}
+
+export interface FeatureFlag {
+  id: string;
+  name: string;
+  enabled: boolean;
+  rolloutPercent?: number;
+  environments?: string[];
+}
+
+export interface RateLimit {
+  id: string;
+  name: string;
+  current: number;
+  limit: number;
+  windowSeconds: number;
+}
+
+export interface IntegrationHealth {
+  id: string;
+  name: string;
+  status: ServiceHealthStatus;
+  incidentsCount?: number;
+  latencyMs?: number;
+  lastCheckedAt?: string;
+}
+
+export type { FormValues, JsonSchema };

package/src/index.tsx

@@ -0,0 +1,37 @@
+import "./styles.css";
+
+export * from "./components/types";
+export * from "./components/AdminShell";
+export * from "./components/SystemHealthDashboard";
+export * from "./components/ServiceStatusCard";
+export * from "./components/WorkerPoolPanel";
+export * from "./components/JobQueuePanel";
+export * from "./components/QueueDepthChart";
+export * from "./components/RuntimeLogViewer";
+export * from "./components/AuditLogViewer";
+export * from "./components/PolicyConfigPanel";
+export * from "./components/BillingUsagePanel";
+export * from "./components/TenantSettingsPanel";
+export * from "./components/FeatureFlagPanel";
+export * from "./components/RateLimitPanel";
+export * from "./components/IntegrationHealthTable";
+export * from "./components/AdminHealthTemplate";
+
+export const AdminComponentNames = [
+  "AdminShell",
+  "SystemHealthDashboard",
+  "ServiceStatusCard",
+  "WorkerPoolPanel",
+  "JobQueuePanel",
+  "QueueDepthChart",
+  "RuntimeLogViewer",
+  "AuditLogViewer",
+  "PolicyConfigPanel",
+  "BillingUsagePanel",
+  "TenantSettingsPanel",
+  "FeatureFlagPanel",
+  "RateLimitPanel",
+  "IntegrationHealthTable",
+  "AdminHealthTemplate"
+] as const;
+export type AdminComponentName = (typeof AdminComponentNames)[number];