okengine 0.11.2 → 0.13.0

package/src/console/ui-next/src/features/store/performance/kv-performance-panel.tsx

@@ -0,0 +1,223 @@
+/**
+ * Store KV engine telemetry — INFO KPIs, commandstats, SLOWLOG (no hot-keys).
+ */
+
+import { useMemo, useState, type JSX, type ReactNode } from "react";
+import { Activity03Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  STORE_KV_STATS_SERVER_WIDE_GAP,
+  STORE_KV_STATS_SLOWLOG_ARGS_GAP,
+  type StoreKvCommandStatRow,
+  type StoreKvSlowlogRow,
+  type StoreListStore,
+} from "@/client.ts";
+import { DetailHeader } from "@/components/explorer/detail-header.tsx";
+import { ExplorerEmpty } from "@/components/explorer/explorer-empty.tsx";
+import { EXPLORER_STRIP_CLASS } from "@/components/explorer/explorer-chrome.ts";
+import { CallPiiButton } from "@/features/units/call/call-pii-button.tsx";
+import { QueryResults } from "../query/query-results.tsx";
+import { pickQueryStore } from "../lib/query-defaults.ts";
+import { useStoreKvStats } from "../data/use-store-kv-stats.ts";
+
+/** Props for {@link KvPerformancePanel}. */
+export interface KvPerformancePanelProps {
+  readonly stores: readonly StoreListStore[];
+  readonly selectedEffectRef: string | null;
+  readonly tenant: string | null;
+  /** Start-panel collapse control. */
+  readonly leading?: ReactNode;
+}
+
+/**
+ * Right-pane engine telemetry for the KV facet.
+ *
+ * @param props - Stores + selection
+ */
+export function KvPerformancePanel({
+  stores,
+  selectedEffectRef,
+  tenant,
+  leading,
+}: KvPerformancePanelProps): JSX.Element {
+  const store = pickQueryStore(stores, "kv", selectedEffectRef);
+  const [reveal, setReveal] = useState(false);
+  const statsInput = store
+    ? { ref: store.ref, ...(tenant ? { tenant } : {}), ...(reveal ? { revealPii: true } : {}) }
+    : null;
+  const stats = useStoreKvStats(statsInput);
+
+  const statsError = errorMessage(stats.error);
+  const statsCode = errorCode(stats.error);
+  const commandRows = useMemo(
+    () => (stats.data?.commands ?? []).map(commandDisplayRow),
+    [stats.data?.commands],
+  );
+  const slowRows = useMemo(
+    () => (stats.data?.slowlog ?? []).map(slowlogDisplayRow),
+    [stats.data?.slowlog],
+  );
+
+  if (!store) {
+    return (
+      <ExplorerEmpty
+        icon={Activity03Icon}
+        title="No KV store"
+        description="KV performance reads INFO / COMMANDSTATS / SLOWLOG on a redis-backed namespace."
+        leading={leading}
+      />
+    );
+  }
+
+  if (statsCode === "KvStatsUnsupported") {
+    return (
+      <ExplorerEmpty
+        leading={leading}
+        icon={Activity03Icon}
+        title="Engine telemetry unavailable"
+        description={
+          statsError ??
+          "KV stats are not available on this driver (in-process memory has no INFO / SLOWLOG)."
+        }
+      />
+    );
+  }
+
+  const kpis = stats.data?.kpis;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden" data-slot="store-kv-performance">
+      <DetailHeader
+        dataSlot="store-kv-performance-header"
+        leading={leading}
+        icon={<HugeiconsIcon icon={Activity03Icon} className="size-4" />}
+        title="KV performance"
+        badge={
+          <span className="font-mono text-[10px] font-medium tracking-[0.08em] text-muted-foreground">
+            {store.ref}
+          </span>
+        }
+        subtitle={
+          <span className="font-mono text-[11px] leading-none text-muted-foreground">
+            {stats.data?.engine ?? "—"}
+          </span>
+        }
+        actions={
+          <CallPiiButton
+            piiMasked={!reveal}
+            disabled={stats.isPending}
+            onToggle={() => setReveal((v) => !v)}
+          />
+        }
+      />
+      <p
+        className="shrink-0 border-b border-border/60 bg-amber-500/8 px-3 py-1.5 text-[11px] leading-relaxed text-amber-900 dark:text-amber-200"
+        data-slot="store-kv-stats-gap"
+        role="note"
+      >
+        INFO / COMMANDSTATS / LATENCY are instance-wide, not scoped to{" "}
+        <span className="font-mono">{stats.data?.namespacePrefix ?? "oke:kv:{ns}:"}</span>.
+        Limitation: {STORE_KV_STATS_SERVER_WIDE_GAP}. SLOWLOG args are keys and values — collapsed
+        until reveal. Limitation: {STORE_KV_STATS_SLOWLOG_ARGS_GAP}. No hot-key table (OSS Redis
+        does not expose one without MONITOR).
+      </p>
+      <div className={EXPLORER_STRIP_CLASS}>
+        <KpiChip
+          label="Hit rate"
+          value={formatPct(kpis?.hitRate ?? null)}
+          title="keyspace_hits / (hits + misses)"
+        />
+        <KpiChip
+          label="Ops / sec"
+          value={kpis?.opsPerSec != null ? String(kpis.opsPerSec) : "—"}
+          title="instantaneous_ops_per_sec"
+        />
+        <KpiChip
+          label="Evicted"
+          value={kpis?.evictedKeys != null ? String(kpis.evictedKeys) : "—"}
+          title="evicted_keys"
+        />
+        <KpiChip
+          label="Expired"
+          value={kpis?.expiredKeys != null ? String(kpis.expiredKeys) : "—"}
+          title="expired_keys"
+        />
+      </div>
+      <div className="min-h-0 flex-1">
+        <QueryResults
+          rows={commandRows}
+          error={statsError}
+          pending={stats.isPending}
+          meta={stats.data ? `${stats.data.commands.length} commands` : null}
+          storeRef={store.ref}
+        />
+      </div>
+      <div className="min-h-0 flex-1 border-t border-border/60">
+        <QueryResults
+          rows={slowRows}
+          error={null}
+          pending={stats.isPending && !stats.data}
+          meta={
+            stats.data
+              ? `${stats.data.slowlog.length} slowlog · ${stats.data.masked ? "args collapsed" : "args revealed"}`
+              : "slowlog"
+          }
+          storeRef={store.ref}
+        />
+      </div>
+    </div>
+  );
+}
+
+function KpiChip({
+  label,
+  value,
+  title,
+}: {
+  readonly label: string;
+  readonly value: string;
+  readonly title: string;
+}): JSX.Element {
+  return (
+    <span
+      className="inline-flex h-full items-center gap-1.5 border-r border-border/60 px-2 text-[11px]"
+      title={title}
+    >
+      <span className="font-mono tabular-nums">{value}</span>
+      <span className="text-muted-foreground">{label}</span>
+    </span>
+  );
+}
+
+function commandDisplayRow(row: StoreKvCommandStatRow): Record<string, unknown> {
+  return {
+    command: row.command,
+    calls: row.calls,
+    usec: row.usec,
+    usec_per_call: row.usecPerCall,
+  };
+}
+
+function slowlogDisplayRow(row: StoreKvSlowlogRow): Record<string, unknown> {
+  return {
+    command: row.command,
+    duration_us: row.durationUs,
+    args: row.args.join(" "),
+    id: row.id,
+  };
+}
+
+function formatPct(value: number | null): string {
+  if (value == null) return "—";
+  return `${(value * 100).toFixed(2)}%`;
+}
+
+function errorMessage(error: unknown): string | null {
+  if (!error) return null;
+  return error instanceof Error ? error.message : String(error);
+}
+
+function errorCode(error: unknown): string | null {
+  if (!error || typeof error !== "object" || !("code" in error)) return null;
+  return typeof error.code === "string" ? error.code : null;
+}

package/src/console/ui-next/src/features/store/performance/performance-panel.tsx

@@ -0,0 +1,442 @@
+/**
+ * Store SQL query performance — pg_stat_statements, lock blocking, Index Advisor.
+ */
+
+import { useMemo, useState, type JSX, type ReactNode } from "react";
+import { Activity03Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  STORE_SQL_STATS_PII_GAP,
+  type StoreListStore,
+  type StoreSqlAdviseResult,
+  type StoreSqlStatementRow,
+} from "@/client.ts";
+import { DetailHeader } from "@/components/explorer/detail-header.tsx";
+import { ExplorerEmpty } from "@/components/explorer/explorer-empty.tsx";
+import {
+  EXPLORER_STRIP_CLASS,
+  EXPLORER_STRIP_TOKEN_CLASS,
+  EXPLORER_STRIP_TOKEN_IDLE_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils.ts";
+import { CallPiiButton } from "@/features/units/call/call-pii-button.tsx";
+import { QueryResults } from "../query/query-results.tsx";
+import { pickQueryStore } from "../lib/query-defaults.ts";
+import { useStoreSql } from "../data/use-store-sql.ts";
+import { useStoreSqlAdvise } from "../data/use-store-sql-advise.ts";
+import { useStoreSqlLocks } from "../data/use-store-sql-locks.ts";
+import { useStoreSqlStats } from "../data/use-store-sql-stats.ts";
+import { indexAdvisorEnableMode } from "./advisor-enable.ts";
+import { PG_LIBRARY_EXTENSIONS, extensionInstallSql } from "../lib/pg-extension-library.ts";
+import { KvPerformancePanel } from "./kv-performance-panel.tsx";
+
+/** Props for {@link PerformancePanel}. */
+export interface PerformancePanelProps {
+  readonly stores: readonly StoreListStore[];
+  readonly selectedEffectRef: string | null;
+  readonly tenant: string | null;
+  /** Which facet opened the performance pane (`kv` vs SQL default). */
+  readonly facet?: "sql" | "kv";
+  /** Start-panel collapse control. */
+  readonly leading?: ReactNode;
+}
+
+/**
+ * Right-pane engine telemetry for the SQL or KV facet.
+ *
+ * @param props - Stores + selection
+ */
+export function PerformancePanel({
+  stores,
+  selectedEffectRef,
+  tenant,
+  facet = "sql",
+  leading,
+}: PerformancePanelProps): JSX.Element {
+  if (facet === "kv") {
+    return (
+      <KvPerformancePanel
+        stores={stores}
+        selectedEffectRef={selectedEffectRef}
+        tenant={tenant}
+        leading={leading}
+      />
+    );
+  }
+  const store = pickQueryStore(stores, "sql", selectedEffectRef);
+  const [lockReveal, setLockReveal] = useState(false);
+  const [adviseFor, setAdviseFor] = useState<StoreSqlStatementRow | null>(null);
+  const statsInput = store ? { ref: store.ref, ...(tenant ? { tenant } : {}) } : null;
+  const stats = useStoreSqlStats(statsInput);
+  const locks = useStoreSqlLocks(
+    store ? { ...statsInput!, ...(lockReveal ? { revealPii: true } : {}) } : null,
+  );
+  const advise = useStoreSqlAdvise();
+  const enableSql = useStoreSql();
+
+  const statsError = errorMessage(stats.error);
+  const statsCode = errorCode(stats.error);
+  const lockError = errorMessage(locks.error);
+
+  const statementRows = useMemo(
+    () => (stats.data?.statements ?? []).map(statementDisplayRow),
+    [stats.data?.statements],
+  );
+  const lockRows = useMemo(() => (locks.data?.rows ?? []).map(lockDisplayRow), [locks.data?.rows]);
+
+  if (!store) {
+    return (
+      <ExplorerEmpty
+        icon={Activity03Icon}
+        title="No SQL store"
+        description="Query performance reads pg_stat_statements on a postgres-backed SQL store."
+        leading={leading}
+      />
+    );
+  }
+
+  if (statsCode === "PgStatStatementsNotPreloaded") {
+    return (
+      <ExplorerEmpty
+        leading={leading}
+        icon={Activity03Icon}
+        title="pg_stat_statements is not preloaded"
+        description={
+          <>
+            Enabling the extension is not enough — add it to{" "}
+            <span className="font-mono">shared_preload_libraries</span> at container start, recreate{" "}
+            <span className="font-mono">store-sql</span>, then create the extension. Limitation:{" "}
+            {statsCode}.
+          </>
+        }
+      />
+    );
+  }
+
+  if (statsCode === "PgStatStatementsUnsupported") {
+    return (
+      <ExplorerEmpty
+        leading={leading}
+        icon={Activity03Icon}
+        title="Engine telemetry unavailable"
+        description={
+          statsError ??
+          "pg_stat_statements is not available on this driver (memory, pglite, or CockroachDB)."
+        }
+      />
+    );
+  }
+
+  const advisor = stats.data?.advisor;
+  const advisorMode = indexAdvisorEnableMode(advisor);
+  const kpis = stats.data?.kpis;
+  const advisorCataloged = PG_LIBRARY_EXTENSIONS.some((ext) => ext.name === "index_advisor");
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden" data-slot="store-performance">
+      <DetailHeader
+        dataSlot="store-performance-header"
+        leading={leading}
+        icon={<HugeiconsIcon icon={Activity03Icon} className="size-4" />}
+        title="Query performance"
+        badge={
+          <span className="font-mono text-[10px] font-medium tracking-[0.08em] text-muted-foreground">
+            {store.ref}
+          </span>
+        }
+        subtitle={
+          <span
+            className="text-[11px] leading-none text-muted-foreground"
+            data-slot="locks-polling"
+          >
+            locks polling
+          </span>
+        }
+        actions={
+          <>
+            <CallPiiButton
+              piiMasked={!lockReveal}
+              disabled={locks.isPending}
+              onToggle={() => setLockReveal((v) => !v)}
+            />
+            <AdvisorEnable
+              advisor={advisor}
+              pending={enableSql.isPending}
+              onEnable={() => {
+                void enableSql
+                  .mutateAsync({
+                    ref: store.ref,
+                    sql: extensionInstallSql("index_advisor", { cascade: true }),
+                    allowWrite: true,
+                    ...(tenant ? { tenant } : {}),
+                  })
+                  .then(() => stats.refetch());
+              }}
+            />
+          </>
+        }
+      />
+      <p
+        className="shrink-0 border-b border-border/60 bg-amber-500/8 px-3 py-1.5 text-[11px] leading-relaxed text-amber-900 dark:text-amber-200"
+        data-slot="store-sql-stats-pii-gap"
+        role="note"
+      >
+        Engine-native query text from pg_stat_statements (usually{" "}
+        <span className="font-mono">$n</span> fingerprints) and live lock activity. Live{" "}
+        <span className="font-mono">pg_stat_activity.query</span> can contain literals — collapsed
+        until reveal. Limitation: {STORE_SQL_STATS_PII_GAP}. Not the Store browse / projectRun
+        guarantee.
+        {advisorMode === "cta" ? (
+          <>
+            {" "}
+            Index Advisor is not in <span className="font-mono">pg_available_extensions</span>
+            {advisorCataloged
+              ? " — pin oke-postgres-advisor:18-alpine (or supabase/postgres)."
+              : "."}
+          </>
+        ) : null}
+      </p>
+      <div className={EXPLORER_STRIP_CLASS}>
+        <KpiChip
+          label="Slow queries"
+          value={kpis ? String(kpis.slowQueries) : "—"}
+          title="Statements with mean exec ≥ 100ms"
+        />
+        <KpiChip
+          label="Cache hit rate"
+          value={formatPct(kpis?.cacheHitRate ?? null)}
+          title="shared_blks_hit / (hit + read) across listed statements"
+        />
+        <KpiChip
+          label="Avg rows / call"
+          value={kpis?.avgRowsPerCall != null ? kpis.avgRowsPerCall.toFixed(1) : "—"}
+          title="sum(rows) / sum(calls)"
+        />
+      </div>
+      <div className="min-h-0 flex-1">
+        <QueryResults
+          rows={statementRows}
+          error={statsCode && statsCode !== "PgStatStatementsNotCreated" ? statsError : null}
+          pending={stats.isPending}
+          meta={
+            stats.data
+              ? `${stats.data.rowCount} statements${stats.data.truncated ? " (capped)" : ""}`
+              : null
+          }
+          storeRef={store.ref}
+        />
+      </div>
+      {advisor?.installed && (stats.data?.statements.length ?? 0) > 0 ? (
+        <div className="flex shrink-0 flex-wrap items-center gap-1.5 border-t border-border/60 px-3 py-1.5">
+          <span className="text-[11px] text-muted-foreground">Suggest indexes</span>
+          {(stats.data?.statements ?? []).slice(0, 6).map((row, index) => (
+            <Button
+              key={row.queryid ?? index}
+              type="button"
+              size="sm"
+              variant="outline"
+              className="h-7 rounded-none text-[11px]"
+              disabled={!row.query || advise.isPending}
+              onClick={() => {
+                setAdviseFor(row);
+                advise.mutate({
+                  ref: store.ref,
+                  query: row.query ?? "",
+                  ...(tenant ? { tenant } : {}),
+                });
+              }}
+              data-slot="store-sql-advise"
+            >
+              #{index + 1}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+      {adviseFor ? (
+        <AdviseStrip
+          query={adviseFor.query}
+          result={advise.data ?? null}
+          error={errorMessage(advise.error)}
+          pending={advise.isPending}
+        />
+      ) : null}
+      <div className="min-h-0 flex-1 border-t border-border/60">
+        <QueryResults
+          rows={lockRows}
+          error={lockError}
+          pending={locks.isPending && !locks.data}
+          meta={
+            locks.data
+              ? `${locks.data.rows.length} blocking pair${locks.data.rows.length === 1 ? "" : "s"} · polling`
+              : "locks"
+          }
+          storeRef={store.ref}
+        />
+      </div>
+    </div>
+  );
+}
+
+function AdvisorEnable({
+  advisor,
+  pending,
+  onEnable,
+}: {
+  readonly advisor?: { readonly available: boolean; readonly installed: boolean };
+  readonly pending: boolean;
+  readonly onEnable: () => void;
+}): JSX.Element | null {
+  const mode = indexAdvisorEnableMode(advisor);
+  if (mode === "on") {
+    return (
+      <span
+        className={cn(EXPLORER_STRIP_TOKEN_CLASS, EXPLORER_STRIP_TOKEN_IDLE_CLASS)}
+        data-slot="index-advisor-on"
+      >
+        Index Advisor on
+      </span>
+    );
+  }
+  if (mode === "cta") return null;
+  if (mode !== "enable") return null;
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="sm"
+      className="h-full rounded-none px-2 text-[11px]"
+      disabled={pending}
+      onClick={onEnable}
+      data-slot="index-advisor-enable"
+    >
+      Enable Index Advisor
+    </Button>
+  );
+}
+
+function AdviseStrip({
+  query,
+  result,
+  error,
+  pending,
+}: {
+  readonly query: string | null;
+  readonly result: StoreSqlAdviseResult | null;
+  readonly error: string | null;
+  readonly pending: boolean;
+}): JSX.Element {
+  return (
+    <div
+      className="shrink-0 border-t border-border/60 px-3 py-2 text-[11px]"
+      data-slot="index-advisor-result"
+    >
+      <p className="truncate font-mono text-muted-foreground">{query}</p>
+      {pending ? <p className="mt-1 text-muted-foreground">Advising…</p> : null}
+      {error ? <p className="mt-1 text-destructive">{error}</p> : null}
+      {result ? (
+        <div className="mt-1 flex flex-col gap-0.5">
+          <p>
+            Cost {fmtCost(result.totalCostBefore)} → {fmtCost(result.totalCostAfter)}
+          </p>
+          {result.indexStatements.length === 0 ? (
+            <p className="text-muted-foreground">No index suggestion.</p>
+          ) : (
+            result.indexStatements.map((sql) => (
+              <div key={sql} className="flex items-start gap-2">
+                <code className="min-w-0 flex-1 font-mono text-foreground">{sql}</code>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 rounded-none px-1.5 text-[11px]"
+                  onClick={() => void navigator.clipboard.writeText(sql)}
+                >
+                  Copy
+                </Button>
+              </div>
+            ))
+          )}
+          {result.errors.map((err) => (
+            <p key={err} className="text-destructive">
+              {err}
+            </p>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function KpiChip({
+  label,
+  value,
+  title,
+}: {
+  readonly label: string;
+  readonly value: string;
+  readonly title: string;
+}): JSX.Element {
+  return (
+    <span
+      className="inline-flex h-full items-center gap-1.5 border-r border-border/60 px-2 text-[11px]"
+      title={title}
+    >
+      <span className="font-mono tabular-nums">{value}</span>
+      <span className="text-muted-foreground">{label}</span>
+    </span>
+  );
+}
+
+function statementDisplayRow(row: StoreSqlStatementRow): Record<string, unknown> {
+  return {
+    query: row.query,
+    calls: row.calls,
+    total_ms: Number(row.totalExecMs.toFixed(2)),
+    mean_ms: Number(row.meanExecMs.toFixed(2)),
+    max_ms: Number(row.maxExecMs.toFixed(2)),
+    min_ms: Number(row.minExecMs.toFixed(2)),
+    rows: row.rows,
+    cache_hit: formatPct(row.cacheHitRate),
+  };
+}
+
+function lockDisplayRow(row: {
+  readonly blockedPid: number | null;
+  readonly blockedUser: string | null;
+  readonly blockedQuery: string | null;
+  readonly blockingPid: number | null;
+  readonly blockingUser: string | null;
+  readonly blockingQuery: string | null;
+  readonly blockingState: string | null;
+}): Record<string, unknown> {
+  return {
+    blocked_pid: row.blockedPid,
+    blocked_user: row.blockedUser,
+    blocked_query: row.blockedQuery,
+    blocking_pid: row.blockingPid,
+    blocking_user: row.blockingUser,
+    blocking_query: row.blockingQuery,
+    blocking_state: row.blockingState,
+  };
+}
+
+function formatPct(value: number | null): string {
+  if (value == null) return "—";
+  return `${(value * 100).toFixed(2)}%`;
+}
+
+function fmtCost(value: unknown): string {
+  if (value == null) return "—";
+  return String(value);
+}
+
+function errorMessage(error: unknown): string | null {
+  if (!error) return null;
+  return error instanceof Error ? error.message : String(error);
+}
+
+function errorCode(error: unknown): string | null {
+  if (!error || typeof error !== "object" || !("code" in error)) return null;
+  return typeof error.code === "string" ? error.code : null;
+}