feat(system): instrument worker pipeline stages

2026-07-27 21:41:40 +03:00
parent 67e12a47a4
commit 667db00b52
10 changed files with 446 additions and 152 deletions
@@ -0,0 +1,72 @@
+import type { CSSProperties } from "react";
+
+import type { WorkerPipelineStage } from "../../core/system/workerTelemetry";
+
+interface WorkerPipelineStagesProps {
+  stages: WorkerPipelineStage[];
+}
+
+function stateLabel(state: WorkerPipelineStage["state"]): string {
+  if (state === "active") return "выполняется";
+  if (state === "waiting") return "ожидает";
+  if (state === "ready") return "готов";
+  return "нет live-состояния";
+}
+
+function stageDuration(value: number | null): string {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  if (value < 1) return `${Math.round(value * 1000)} мс`;
+  return `${new Intl.NumberFormat("ru-RU", {
+    maximumFractionDigits: value < 10 ? 2 : 1,
+  }).format(value)} с`;
+}
+
+function stageDetail(stage: WorkerPipelineStage): string {
+  if (
+    typeof stage.activations !== "number"
+    || typeof stage.share_percent !== "number"
+    || !Number.isFinite(stage.share_percent)
+  ) {
+    return "Измерений ещё нет";
+  }
+  const share = new Intl.NumberFormat("ru-RU", {
+    maximumFractionDigits: 1,
+  }).format(stage.share_percent);
+  return `${stage.activations} проходов · ${share}% измеренного времени`;
+}
+
+export function WorkerPipelineStages({ stages }: WorkerPipelineStagesProps) {
+  return (
+    <ol className="worker-stage-list" aria-label="Стадии текущей задачи">
+      {stages.map((stage, index) => {
+        const share = typeof stage.share_percent === "number"
+          ? Math.max(0, Math.min(100, stage.share_percent))
+          : 0;
+        const style = {
+          "--worker-stage-share": `${share}%`,
+        } as CSSProperties;
+        return (
+          <li
+            key={stage.id}
+            data-state={stage.state}
+            style={style}
+            aria-label={`${stage.label}: ${stageDetail(stage)}`}
+          >
+            <span className="worker-stage-list__fill" aria-hidden="true" />
+            <span className="worker-stage-list__index">
+              {String(index + 1).padStart(2, "0")}
+            </span>
+            <div>
+              <strong>{stage.label}</strong>
+              <small>{stageDetail(stage)}</small>
+            </div>
+            <div className="worker-stage-list__value">
+              <strong>{stageDuration(stage.elapsed_seconds)}</strong>
+              <small>{stateLabel(stage.state)}</small>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}