@echothink-ui/admin 0.1.0

package/src/components/BillingUsagePanel.tsx

@@ -0,0 +1,171 @@
+import type { CSSProperties } from "react";
+import { Badge, Surface, type EthSeverity, type SurfaceComponentProps } from "@echothink-ui/core";
+import type { BillingUsageMetric } from "./types";
+
+export interface BillingUsagePanelProps extends Omit<SurfaceComponentProps, "children"> {
+  metrics: BillingUsageMetric[];
+  period: string;
+}
+
+type UsageTone = "normal" | "warning" | "danger" | "neutral";
+
+interface UsageState {
+  label: string;
+  severity: EthSeverity;
+  tone: UsageTone;
+}
+
+type UsageMeterStyle = CSSProperties & {
+  "--eth-admin-billing-usage-percent": string;
+};
+
+export function BillingUsagePanel({ metrics, period, title, className, ...props }: BillingUsagePanelProps) {
+  const entries = metrics.map((metric) => {
+    const percent = metric.limit > 0 ? (metric.current / metric.limit) * 100 : 0;
+    const roundedPercent = Math.round(percent);
+    const cappedPercent = Math.min(100, Math.max(0, percent));
+    const state = usageState(percent, metric.limit);
+
+    return {
+      metric,
+      percent,
+      roundedPercent,
+      cappedPercent,
+      state,
+      trendLabel: formatTrend(metric.trend),
+      usageLabel:
+        metric.limit > 0
+          ? `${formatNumber(metric.current)} / ${formatNumber(metric.limit)} ${formatUnit(metric.unit, metric.limit)}`
+          : `${formatNumber(metric.current)} ${formatUnit(metric.unit, metric.current)}`
+    };
+  });
+
+  const highestUsage = entries.reduce<(typeof entries)[number] | undefined>((highest, entry) => {
+    if (!highest || entry.percent > highest.percent) return entry;
+    return highest;
+  }, undefined);
+  const overLimitCount = entries.filter((entry) => entry.percent >= 100).length;
+  const watchedCount = entries.filter((entry) => entry.percent >= 80 && entry.percent < 100).length;
+  const quotaStatus = getQuotaStatus(overLimitCount, watchedCount);
+
+  return (
+    <Surface
+      {...props}
+      title={title ?? "Billing usage"}
+      subtitle={period}
+      className={["eth-admin-billing-usage", className].filter(Boolean).join(" ")}
+      data-eth-component="BillingUsagePanel"
+    >
+      {entries.length ? (
+        <>
+          <dl className="eth-admin-billing-usage__summary" aria-label="Billing usage summary">
+            <div>
+              <dt>Tracked quotas</dt>
+              <dd>{entries.length}</dd>
+            </div>
+            <div>
+              <dt>Highest usage</dt>
+              <dd>
+                {highestUsage ? `${highestUsage.metric.label} ${highestUsage.roundedPercent}%` : "n/a"}
+              </dd>
+            </div>
+            <div>
+              <dt>Quota status</dt>
+              <dd>
+                <Badge severity={quotaStatus.severity}>{quotaStatus.label}</Badge>
+              </dd>
+            </div>
+          </dl>
+
+          <div className="eth-admin-billing-usage__metrics">
+            {entries.map(({ metric, roundedPercent, cappedPercent, state, trendLabel, usageLabel }) => (
+              <section key={`${metric.label}-${metric.unit}`} className="eth-admin-billing-usage__metric">
+                <div className="eth-admin-billing-usage__metric-header">
+                  <div>
+                    <h3>{metric.label}</h3>
+                    <p>{usageLabel}</p>
+                  </div>
+                  <Badge severity={state.severity}>{state.label}</Badge>
+                </div>
+
+                <div
+                  className="eth-admin-billing-usage__meter"
+                  role="progressbar"
+                  aria-label={`${metric.label} quota usage`}
+                  aria-valuemin={0}
+                  aria-valuemax={100}
+                  aria-valuenow={Math.round(cappedPercent)}
+                  aria-valuetext={
+                    metric.limit > 0 ? `${roundedPercent}% of quota used` : "No quota limit configured"
+                  }
+                >
+                  <span
+                    className={`eth-admin-billing-usage__meter-fill eth-admin-billing-usage__meter-fill--${state.tone}`}
+                    style={
+                      {
+                        "--eth-admin-billing-usage-percent": `${cappedPercent}%`
+                      } as UsageMeterStyle
+                    }
+                  />
+                </div>
+
+                <dl className="eth-admin-billing-usage__metric-details">
+                  <div>
+                    <dt>Utilization</dt>
+                    <dd>{metric.limit > 0 ? `${roundedPercent}%` : "No limit"}</dd>
+                  </div>
+                  <div>
+                    <dt>Limit</dt>
+                    <dd>
+                      {metric.limit > 0
+                        ? `${formatNumber(metric.limit)} ${formatUnit(metric.unit, metric.limit)}`
+                        : "Unlimited"}
+                    </dd>
+                  </div>
+                  {trendLabel ? (
+                    <div>
+                      <dt>Change</dt>
+                      <dd>{trendLabel}</dd>
+                    </div>
+                  ) : null}
+                </dl>
+              </section>
+            ))}
+          </div>
+        </>
+      ) : (
+        <p className="eth-admin-billing-usage__empty">No usage metrics are available for this period.</p>
+      )}
+    </Surface>
+  );
+}
+
+function usageState(percent: number, limit: number): UsageState {
+  if (limit <= 0) return { label: "No limit", severity: "neutral", tone: "neutral" };
+  if (percent >= 100) return { label: "Over limit", severity: "danger", tone: "danger" };
+  if (percent >= 80) return { label: "Watch", severity: "warning", tone: "warning" };
+  return { label: "Within limit", severity: "success", tone: "normal" };
+}
+
+function getQuotaStatus(overLimitCount: number, watchedCount: number): Pick<UsageState, "label" | "severity"> {
+  if (overLimitCount > 0) return { label: `${overLimitCount} over limit`, severity: "danger" };
+  if (watchedCount > 0) return { label: `${watchedCount} nearing limit`, severity: "warning" };
+  return { label: "Within limits", severity: "success" };
+}
+
+function formatNumber(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    maximumFractionDigits: value % 1 === 0 ? 0 : 2
+  }).format(value);
+}
+
+function formatUnit(unit: string, value: number) {
+  if (unit.toLowerCase() === "user") return value === 1 ? "user" : "users";
+  return unit;
+}
+
+function formatTrend(trend?: number) {
+  if (trend === undefined) return undefined;
+  if (trend === 0) return "Unchanged";
+  return `${trend > 0 ? "+" : ""}${trend}% vs previous period`;
+}

package/src/components/FeatureFlagPanel.tsx

@@ -0,0 +1,178 @@
+import * as React from "react";
+import {
+  ActionGroup,
+  Badge,
+  NumberInput,
+  Toggle,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { FeatureFlag } from "./types";
+
+export interface FeatureFlagPanelProps extends Omit<
+  SurfaceComponentProps,
+  "children" | "onToggle"
+> {
+  flags: FeatureFlag[];
+  onToggle?: (id: string) => void;
+  onUpdate?: (id: string, update: Partial<FeatureFlag>) => void;
+}
+
+type FeatureFlagRow = Record<string, unknown> & FeatureFlag;
+type RolloutMeterStyle = React.CSSProperties & {
+  "--eth-admin-feature-flag-rollout": string;
+};
+
+export function FeatureFlagPanel({
+  flags,
+  onToggle,
+  onUpdate,
+  className,
+  title = "Feature flags",
+  subtitle,
+  description,
+  actions,
+  density = "compact",
+  "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
+}: FeatureFlagPanelProps) {
+  const headingId = React.useId();
+  const enabledCount = flags.filter((flag) => flag.enabled).length;
+  const disabledCount = flags.length - enabledCount;
+  const rows: FeatureFlagRow[] = flags.map((flag) => ({ ...flag }));
+  const columns: DataColumn<FeatureFlagRow>[] = [
+    {
+      key: "name",
+      header: "Flag",
+      width: "34%",
+      render: (row) => <span className="eth-admin-feature-flag__name">{row.name}</span>
+    },
+    {
+      key: "enabled",
+      header: "Status",
+      width: "13rem",
+      render: (row) => (
+        <div className="eth-admin-feature-flag__status">
+          <Toggle
+            label={`${row.name} is ${row.enabled ? "enabled" : "disabled"}`}
+            hideLabel
+            onLabel=""
+            offLabel=""
+            checked={row.enabled}
+            readOnly={!onToggle}
+            density={density}
+            onChange={() => onToggle?.(row.id)}
+          />
+          <Badge severity={row.enabled ? "success" : "neutral"}>
+            {row.enabled ? "Enabled" : "Disabled"}
+          </Badge>
+        </div>
+      )
+    },
+    {
+      key: "rolloutPercent",
+      header: "Rollout",
+      width: "18rem",
+      render: (row) => (
+        <div className="eth-admin-feature-flag__rollout">
+          <NumberInput
+            aria-label={`${row.name} rollout percent`}
+            className="eth-admin-feature-flag__rollout-input"
+            density={density}
+            hideLabel
+            min={0}
+            max={100}
+            step={1}
+            readOnly={!onUpdate}
+            value={normalizeRolloutPercent(row.rolloutPercent)}
+            onChange={(event) =>
+              onUpdate?.(row.id, {
+                rolloutPercent: normalizeRolloutPercent(Number(event.currentTarget.value))
+              })
+            }
+          />
+          <span className="eth-admin-feature-flag__rollout-unit" aria-hidden="true">
+            %
+          </span>
+          <span className="eth-admin-feature-flag__meter" aria-hidden="true">
+            <span
+              style={
+                {
+                  "--eth-admin-feature-flag-rollout": `${normalizeRolloutPercent(row.rolloutPercent)}%`
+                } as RolloutMeterStyle
+              }
+            />
+          </span>
+        </div>
+      )
+    },
+    {
+      key: "environments",
+      header: "Environments",
+      render: (row) =>
+        row.environments?.length ? (
+          <div className="eth-admin-feature-flag__environments">
+            {row.environments.map((environment) => (
+              <Badge key={environment} severity="neutral">
+                {environment}
+              </Badge>
+            ))}
+          </div>
+        ) : (
+          <Badge severity="neutral">All environments</Badge>
+        )
+    }
+  ];
+  const supportingText = subtitle ?? description;
+
+  return (
+    <section
+      {...sectionProps}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : headingId)}
+      className={["eth-admin-feature-flag", className].filter(Boolean).join(" ")}
+      data-eth-component="FeatureFlagPanel"
+    >
+      <header>
+        <div className="eth-admin-feature-flag__heading">
+          <h3 id={headingId}>{title}</h3>
+          {supportingText ? <p>{supportingText}</p> : null}
+        </div>
+        <div className="eth-admin-feature-flag__header-actions">
+          <div
+            className="eth-admin-feature-flag__summary"
+            aria-label={`${flags.length} feature flags`}
+          >
+            <Badge severity="success">{enabledCount} enabled</Badge>
+            <Badge severity="neutral">{disabledCount} disabled</Badge>
+          </div>
+          <ActionGroup actions={actions} />
+        </div>
+      </header>
+      <DataTable
+        rows={rows}
+        columns={columns}
+        density={density}
+        rowKey="id"
+        className="eth-admin-feature-flag__table"
+        emptyState={<p className="eth-admin-feature-flag__empty">No feature flags configured.</p>}
+      />
+    </section>
+  );
+}
+
+function normalizeRolloutPercent(value: number | undefined) {
+  const numericValue = value ?? 0;
+  if (!Number.isFinite(numericValue)) return 0;
+  return Math.min(100, Math.max(0, Math.round(numericValue)));
+}

package/src/components/IntegrationHealthTable.tsx

@@ -0,0 +1,196 @@
+import * as React from "react";
+import {
+  ActionGroup,
+  Badge,
+  type EthSeverity,
+  type SurfaceComponentProps
+} from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { IntegrationHealth } from "./types";
+
+export interface IntegrationHealthTableProps extends Omit<SurfaceComponentProps, "children"> {
+  integrations: IntegrationHealth[];
+}
+
+type IntegrationHealthRow = Record<string, unknown> & IntegrationHealth;
+
+export function IntegrationHealthTable({
+  integrations,
+  className,
+  title = "Integration health",
+  subtitle,
+  description,
+  actions,
+  density = "compact",
+  "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
+}: IntegrationHealthTableProps) {
+  const headingId = React.useId();
+  const incidentCount = integrations.reduce(
+    (sum, integration) => sum + (integration.incidentsCount ?? 0),
+    0
+  );
+  const impairedCount = integrations.filter(
+    (integration) => integration.status !== "healthy"
+  ).length;
+  const healthyCount = integrations.length - impairedCount;
+  const rows: IntegrationHealthRow[] = integrations.map((integration) => ({ ...integration }));
+  const columns: DataColumn<IntegrationHealthRow>[] = [
+    {
+      key: "name",
+      header: "Integration",
+      width: "32%",
+      render: (row) => (
+        <span className="eth-admin-integration-health__name">
+          <strong>{row.name}</strong>
+          <span>{row.id}</span>
+        </span>
+      )
+    },
+    {
+      key: "status",
+      header: "Status",
+      width: "9rem",
+      render: (row) => (
+        <Badge severity={statusSeverity(row.status)}>{statusLabel(row.status)}</Badge>
+      )
+    },
+    {
+      key: "latencyMs",
+      header: "Latency",
+      width: "8rem",
+      align: "end",
+      render: (row) => (
+        <span className={latencyMetricClassName(row.latencyMs)}>
+          {formatLatency(row.latencyMs)}
+        </span>
+      )
+    },
+    {
+      key: "incidentsCount",
+      header: "Incidents",
+      width: "8rem",
+      align: "end",
+      render: (row) => (
+        <Badge severity={incidentSeverity(row.incidentsCount)}>
+          {formatIncidentCount(row.incidentsCount)}
+        </Badge>
+      )
+    },
+    {
+      key: "lastCheckedAt",
+      header: "Last checked",
+      width: "10rem",
+      render: (row) => (
+        <span className="eth-admin-integration-health__checked">
+          {row.lastCheckedAt ?? "Not checked"}
+        </span>
+      )
+    }
+  ];
+  const supportingText = subtitle ?? description;
+
+  return (
+    <section
+      {...sectionProps}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy ?? (ariaLabel ? undefined : headingId)}
+      className={["eth-admin-integration-health", className].filter(Boolean).join(" ")}
+      data-eth-component="IntegrationHealthTable"
+    >
+      <header>
+        <div className="eth-admin-integration-health__heading">
+          <h3 id={headingId}>{title}</h3>
+          {supportingText ? <p>{supportingText}</p> : null}
+        </div>
+        <div className="eth-admin-integration-health__header-actions">
+          <div
+            className="eth-admin-integration-health__summary"
+            aria-label={summaryLabel(rows.length, incidentCount, healthyCount)}
+          >
+            <Badge severity={!rows.length ? "neutral" : impairedCount ? "warning" : "success"}>
+              {formatHealthySummary(rows.length, healthyCount)}
+            </Badge>
+            <Badge severity={incidentCount ? "danger" : "neutral"}>
+              {incidentCount} {incidentCount === 1 ? "incident" : "incidents"}
+            </Badge>
+          </div>
+          <ActionGroup actions={actions} />
+        </div>
+      </header>
+      <DataTable
+        rows={rows}
+        columns={columns}
+        density={density}
+        rowKey="id"
+        className="eth-admin-integration-health__table"
+        emptyState={
+          <p className="eth-admin-integration-health__empty">No integrations are reporting.</p>
+        }
+      />
+    </section>
+  );
+}
+
+function statusSeverity(status: IntegrationHealth["status"]): EthSeverity {
+  if (status === "healthy") return "success";
+  if (status === "degraded") return "warning";
+  return "danger";
+}
+
+function statusLabel(status: IntegrationHealth["status"]) {
+  if (status === "down") return "Down";
+  if (status === "degraded") return "Degraded";
+  return "Healthy";
+}
+
+function latencySeverity(latencyMs: IntegrationHealth["latencyMs"]): EthSeverity | null {
+  if (latencyMs === undefined) return null;
+  if (latencyMs >= 1000) return "danger";
+  if (latencyMs >= 500) return "warning";
+  return null;
+}
+
+function latencyMetricClassName(latencyMs: IntegrationHealth["latencyMs"]) {
+  const severity = latencySeverity(latencyMs);
+  return [
+    "eth-admin-integration-health__metric",
+    severity ? `eth-admin-integration-health__metric--${severity}` : undefined
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+function incidentSeverity(count: IntegrationHealth["incidentsCount"]): EthSeverity {
+  if (!count) return "success";
+  return count > 1 ? "danger" : "warning";
+}
+
+function formatLatency(latencyMs: IntegrationHealth["latencyMs"]) {
+  return latencyMs === undefined ? "n/a" : `${latencyMs} ms`;
+}
+
+function formatIncidentCount(count: IntegrationHealth["incidentsCount"]) {
+  return String(count ?? 0);
+}
+
+function formatHealthySummary(total: number, healthyCount: number) {
+  return total ? `${healthyCount}/${total} healthy` : "0 integrations";
+}
+
+function summaryLabel(total: number, incidentCount: number, healthyCount: number) {
+  if (!total) return `No integrations reporting, ${incidentCount} open incidents`;
+  return `${healthyCount} of ${total} integrations healthy, ${incidentCount} open ${
+    incidentCount === 1 ? "incident" : "incidents"
+  }`;
+}