@miragon/pulse-analytics-connector 0.0.0-bootstrap.0 → 0.21.0

package/src/widgets/failure-dashboard/failure-rate-table.tsx

@@ -0,0 +1,170 @@
+import { TONE_DOT, cn } from "@miragon/mcp-toolkit-ui"
+import {
+  HandOffButton,
+  ListTable,
+  NamedId,
+  Section,
+  TableEmptyState,
+  TableSkeleton,
+  Td,
+  WidgetShell,
+  formatNumber,
+  type ListTableColumn,
+} from "@miragon/pulse-widget-shell/widgets"
+import type { FailureDashboardData, ProcessFailureItem } from "@miragon/pulse-analytics-client"
+import { useFailureDashboardSelfFetch, type FailureScopeProps, type FailureView } from "./lib.js"
+import { QueryGate } from "../query-gate.js"
+import { useT, type T } from "../../messages/use-t.js"
+import { engineIdsOf, useHandOff, type HandOff } from "../hand-off.js"
+import { processNameOf } from "../../bpmn-names.js"
+import { Figure, FigureLegend, StateCount } from "../figure.js"
+
+/**
+ * What drives ONE process's open incidents right now (live gauges: open
+ * incidents per 100 running instances, dead jobs — #336). The regression
+ * check goes to the tools that measure incident rates over time —
+ * analytics_version_compare cannot split incidents by version, so its
+ * incident rates are null (#327).
+ */
+export function failureRateHandOff(
+  proc: ProcessFailureItem,
+  data: Pick<FailureDashboardData, "engines">,
+): HandOff {
+  return {
+    intent: "askAi.failureRate",
+    ids: { engine: engineIdsOf(data.engines), processDefinitionKey: proc.processDefinitionKey },
+    // A rate over no running instance is null — left out, never a 0.
+    facts: {
+      openIncidentsNow: proc.openIncidents,
+      runningNow: proc.runningNow,
+      incidentRatePct: proc.incidentRatePct,
+      deadJobs: proc.deadJobs,
+    },
+    tools: [
+      "analytics_compare_execution_periods",
+      "analytics_cluster_compare",
+      "analytics_element_bottleneck",
+    ],
+  }
+}
+
+/**
+ * The bar's length: the rate against the largest rate in the table, so
+ * every bar is comparable and none is cut off. A rate of incidents per 100
+ * running instances may pass 100 (one instance can carry several), which a
+ * scale capped at 100 would hide.
+ */
+export function rateBarWidth(rate: number, max: number): number {
+  if (!(max > 0) || !(rate > 0)) return 0
+  return Math.min(100, (rate / max) * 100)
+}
+
+function columns(t: T): ListTableColumn[] {
+  return [
+    { label: t("aFailureRate.colProcess") },
+    { label: t("aFailureRate.colRunningNow"), align: "right" },
+    { label: t("aFailureRate.colOpenIncidents"), align: "right" },
+    { label: t("aFailureRate.colDeadJobs"), align: "right" },
+    { label: t("aFailureRate.colIncidentRate"), align: "right" },
+    {
+      label: <span className="sr-only">{t("aFailureRate.colAi")}</span>,
+      plain: true,
+      sticky: true,
+    },
+  ]
+}
+
+/**
+ * The rate as a number over a bar. The bar is a magnitude, not a state: it
+ * takes the data-viz blue (decision j), not the danger red. A rate is judged
+ * only against a threshold or the period before (U17), and this live ratio
+ * has neither; the open incidents beside it already carry the danger.
+ */
+function RateCell({ rate, max, t }: { rate: number | null; max: number; t: T }) {
+  if (rate === null) return <Figure value={null} why={t("aFigure.noRate")} />
+  return (
+    <span className="ml-auto flex w-24 flex-col items-end gap-1">
+      <span className="tabular-nums">{formatNumber(rate, { maximumFractionDigits: 1 })}</span>
+      <span aria-hidden="true" className="bg-muted block h-1.5 w-full overflow-hidden rounded-full">
+        <span
+          className={cn("block h-full rounded-full", TONE_DOT.info)}
+          style={{ width: `${rateBarWidth(rate, max)}%` }}
+        />
+      </span>
+    </span>
+  )
+}
+
+export function FailureRateTable({
+  data: initialData,
+  engine,
+}: { data: FailureView | null } & FailureScopeProps) {
+  const fallbackQuery = useFailureDashboardSelfFetch(initialData, { engine })
+  const t = useT()
+  const { ask } = useHandOff()
+  return (
+    <QueryGate initialData={initialData} query={fallbackQuery} skeleton={<TableSkeleton />}>
+      {(data) => {
+        if (data.processBreakdown.length === 0) {
+          return (
+            <WidgetShell>
+              <TableEmptyState variant="done">{t("aFailureRate.emptyState")}</TableEmptyState>
+            </WidgetShell>
+          )
+        }
+        const max = Math.max(0, ...data.processBreakdown.map((p) => p.incidentRatePct ?? 0))
+        return (
+          <WidgetShell>
+            <Section
+              title={t("aFailureRate.heading")}
+              count={data.processBreakdown.length}
+              defaultOpen
+            >
+              <ListTable ariaLabel={t("aFailureRate.tableLabel")} columns={columns(t)}>
+                {data.processBreakdown.map((proc) => (
+                  <tr key={proc.processDefinitionKey}>
+                    <Td>
+                      <NamedId
+                        name={processNameOf(data.names, proc.processDefinitionKey)}
+                        id={proc.processDefinitionKey}
+                      />
+                    </Td>
+                    <Td align="right" className="tabular-nums">
+                      {formatNumber(proc.runningNow)}
+                    </Td>
+                    {/* The states of a process (decision f), on the kit's one
+                        ladder: open incidents and dead jobs (no retries left)
+                        edged in danger while there are any, as camunda7 and
+                        the landscape show them; none is a plain count. */}
+                    <Td align="right" className="tabular-nums">
+                      <StateCount value={proc.openIncidents} />
+                    </Td>
+                    <Td align="right" className="tabular-nums">
+                      <StateCount value={proc.deadJobs} />
+                    </Td>
+                    <Td align="right">
+                      <RateCell rate={proc.incidentRatePct} max={max} t={t} />
+                    </Td>
+                    <Td align="right">
+                      <HandOffButton
+                        action="findCause"
+                        variant="icon"
+                        prompt={ask(failureRateHandOff(proc, data))}
+                      />
+                    </Td>
+                  </tr>
+                ))}
+              </ListTable>
+              <FigureLegend
+                reasons={[
+                  data.processBreakdown.some((p) => p.incidentRatePct === null) &&
+                    t("aFigure.noRate"),
+                ]}
+              />
+            </Section>
+          </WidgetShell>
+        )
+      }}
+    </QueryGate>
+  )
+}

package/src/widgets/failure-dashboard/lib.ts

@@ -0,0 +1,32 @@
+import { useToolQuery } from "@miragon/mcp-toolkit-ui"
+import type { EngineFilterInput, FailureDashboardData } from "@miragon/pulse-analytics-client"
+import type { Named } from "../../bpmn-names.js"
+import { ANALYTICS_FAILURE_DASHBOARD_DATA } from "../../tool-names.js"
+
+/** The failure payload the widgets read: the figures plus the process names behind their keys. */
+export type FailureView = Named<FailureDashboardData>
+
+/** The cell props every failure widget takes — the engine scope its self-fetch reads. */
+export interface FailureScopeProps {
+  /** Configured engine id(s); omitted = every configured engine (the feed resolves it). */
+  engine?: EngineFilterInput
+}
+
+// Centralised so the three failure widgets share one self-fetch contract. The
+// failure dashboard is point-in-time (live state gauges), so there is no period
+// scope — only the engine scope, carried in the args AND the cache key so an
+// engine-scoped cell never reads a fleet-wide entry. Self-fetches the app-only
+// *_data feed — calling the show_* tool from inside the iframe is host-defined
+// behavior (hosts honoring resultCanProduceWidget may render a second widget
+// per refresh).
+export function useFailureDashboardSelfFetch(
+  initialData: FailureView | null,
+  { engine }: FailureScopeProps,
+) {
+  return useToolQuery<FailureView>(
+    ["analytics:failure-dashboard", engine ?? null],
+    ANALYTICS_FAILURE_DASHBOARD_DATA,
+    engine === undefined ? {} : { engine },
+    { enabled: !initialData },
+  )
+}

package/src/widgets/failure-dashboard/summary-kpi.tsx

@@ -0,0 +1,122 @@
+import {
+  HandOffButton,
+  ViewMeta,
+  WidgetShell,
+  formatNumber,
+} from "@miragon/pulse-widget-shell/widgets"
+import type { FailureDashboardData } from "@miragon/pulse-analytics-client"
+import { KpiGrid, KpiGridSkeleton, WidgetHeader, cn, type KpiCell } from "@miragon/mcp-toolkit-ui"
+import { useFailureDashboardSelfFetch, type FailureScopeProps, type FailureView } from "./lib.js"
+import { QueryGate } from "../query-gate.js"
+import { useT, type T } from "../../messages/use-t.js"
+import { processNameOf } from "../../bpmn-names.js"
+import { engineIdsOf, useHandOff, type HandOff } from "../hand-off.js"
+import { enginesMeta } from "../view-meta.js"
+
+/**
+ * Triage of the open-incident snapshot. Only the headline numbers travel —
+ * the patterns themselves are read through the tools (bounded, and their
+ * messages stay tool output instead of the user's own words).
+ */
+export function failureSummaryHandOff(data: FailureDashboardData): HandOff {
+  return {
+    intent: "askAi.failureSummary",
+    ids: { engine: engineIdsOf(data.engines) },
+    facts: {
+      openIncidentsNow: data.totalIncidents,
+      incidentGroups: data.uniqueErrorPatterns,
+      mostAffectedProcess: data.mostAffectedProcess,
+    },
+    tools: [
+      "analytics_find_failed_instances",
+      "analytics_show_failure_dashboard",
+      "camunda7_list_incidents",
+      "camunda7_query_historic_incidents",
+    ],
+  }
+}
+
+/**
+ * The most affected process as a figure: its name (the key below it, quiet),
+ * or the key alone in mono when the model's name is unknown. With no open
+ * incident no process is affected, and the cell says so in quiet words: "—"
+ * means a figure nobody measured (U17), and this one is known.
+ */
+function mostAffectedCell(t: T, data: FailureView): KpiCell {
+  const label = t("aFailureSummary.mostAffected")
+  const key = data.mostAffectedProcess
+  if (!key) {
+    return {
+      label,
+      value: (
+        <span className="text-section text-muted-foreground block">
+          {t("aFailureSummary.mostAffectedNone")}
+        </span>
+      ),
+    }
+  }
+  const name = processNameOf(data.names, key)
+  return {
+    label,
+    value: (
+      <span className={cn("text-section block break-words", !name && "font-mono")}>
+        {name ?? key}
+      </span>
+    ),
+    trend: name ? <span className="font-mono break-all">{key}</span> : undefined,
+  }
+}
+
+export function FailureSummaryKpi({
+  data: initialData,
+  engine,
+}: { data: FailureView | null } & FailureScopeProps) {
+  const fallbackQuery = useFailureDashboardSelfFetch(initialData, { engine })
+  const t = useT()
+  const { ask } = useHandOff()
+
+  return (
+    <QueryGate
+      initialData={initialData}
+      query={fallbackQuery}
+      header={<WidgetHeader title={t("aFailureSummary.title")} />}
+      skeleton={<KpiGridSkeleton cells={3} boxed />}
+    >
+      {(data) => (
+        <WidgetShell>
+          <WidgetHeader
+            title={t("aFailureSummary.title")}
+            // A live snapshot: no period, the engines and when it was read.
+            sub={<ViewMeta engines={enginesMeta(data.engines)} asOf={data.asOf} />}
+            actions={
+              <HandOffButton
+                action="prioritize"
+                variant="primary"
+                prompt={ask(failureSummaryHandOff(data))}
+              />
+            }
+          />
+          {/* The dashboards' one KPI pattern (U14): a neutral strip, the state
+              as a dot. Only an open incident is a state (danger); how many
+              groups they form and which process has the most are neutral. */}
+          <KpiGrid
+            boxed
+            ariaLabel={t("aFailureSummary.summaryAriaLabel")}
+            cells={[
+              {
+                label: t("aFailureSummary.totalIncidents"),
+                value: formatNumber(data.totalIncidents),
+                tone: data.totalIncidents > 0 ? "danger" : undefined,
+              },
+              {
+                label: t("aFailureSummary.uniqueErrorPatterns"),
+                value: formatNumber(data.uniqueErrorPatterns),
+              },
+              mostAffectedCell(t, data),
+            ]}
+          />
+        </WidgetShell>
+      )}
+    </QueryGate>
+  )
+}