@grafana/alloy-pipeline-graph

Shared Alloy pipeline graph visualization for Grafana Alloy and Grafana Fleet Management.

Usage

import { PipelineGraph, type PipelineGraphData } from '@grafana/alloy-pipeline-graph';
import '@grafana/alloy-pipeline-graph/style.css';

const graph: PipelineGraphData = {
  nodes: [/* ... */],
  edges: [/* ... */],
};

// Graph-level handler — fires for every node click.
<PipelineGraph graph={graph} onNodeClick={(node) => console.log(node.id)} />

Consumers build the PipelineGraph input from their own data source:

• Alloy — runtime component API (/api/v0/web/components)
• Collector app — parsed Alloy config via @grafana-cloud/alloy-configurator

A runnable demo/ renders the component against several example datasets and documents the input shape — see demo/README.md.

Click handling

A node is interactive when there's a graph-level onNodeClick and/or the node carries its own onClick. Both fire on click (the per-node handler runs first), so individual nodes can override or augment the default behavior:

const graph: PipelineGraphData = {
  nodes: [
    { id: 'a', /* ... */, onClick: (node) => openDrawerFor(node) }, // per-node
  ],
  edges: [/* ... */],
};

Optional fields

• PipelineEdge.metric — single aggregate live flow rate. When present, shown on the edge label and collapses the edge to one line.
• PipelineEdge.signalMetrics — per-signal live rates ({ signal, value, unit? }[]). Each entry renders as its own colored line labelled with its rate, keeping the multi-signal fan-out under live data. Takes precedence over metric. Use this when a single edge carries several signals at independent rates (e.g. an OTLP receiver emitting metrics, logs and traces).
• SignalKind.Targets — service-discovery output (target counts), colored distinctly from telemetry signals. discovery.* components infer to Targets.
• PipelineNode.kind / parentId — expandable custom component containers.
• PipelineNode.description / docsUrl — shown in the node's hover tooltip (docsUrl adds a "View docs" link).
• PipelineNode.onClick — per-node click handler (see above).
• PipelineNode.health / meta — carried on the node for consumers (e.g. in onClick); not rendered by the default node.
• PipelineGraphProps.ui — inject Grafana Icon / Tooltip for in-app consistency.

Theming

The bundled light/dark themes mirror Grafana's GrafanaTheme2 values (colors, radius, shadows, icons), so the graph looks identical inside and outside of Grafana without depending on @grafana/ui / @grafana/data. Pass theme="light" | "dark", or a full PipelineGraphTheme object mapped from a live GrafanaTheme2 when running in-app.

Development

npm install
npm run build
npm test

Release

Releases use Changesets.

For any user-facing change, add a changeset in the PR:

npm run changeset

Pick patch, minor, or major when prompted. That choice decides the next version.

After the PR merges to main and CI passes, the release job opens/updates a release PR with the version bump and changelog. Merging that release PR publishes the package to npm.

Note: if package.json already contains a new unpublished version and there are no pending changesets, the release job will publish that version to npm.

License

Apache-2.0