Add @osd/apm-topology package for APM service map, trace map and GenAI agent trace visualization

.stylelintignore

@@ -1,2 +1,3 @@
 build
 target
+**/*.generated.scss

changelogs/fragments/11394.yml

@@ -0,0 +1,2 @@
+feat:
+- Add @osd/apm-topology package for APM service map, trace map and GenAI agent trace visualization ([#11394](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/11394))

docs/_sidebar.md

@@ -127,6 +127,7 @@
     - [Osd ace](../packages/osd-ace/README.md)
     - [Osd agents](../packages/osd-agents/README.md)
     - [Osd apm config loader](../packages/osd-apm-config-loader/README.md)
+    - [Osd apm topology](../packages/osd-apm-topology/README.md)
     - [Osd babel preset](../packages/osd-babel-preset/README.md)
     - [Osd config](../packages/osd-config/README.md)
     - [Osd config schema](../packages/osd-config-schema/README.md)

examples/apm_topology_example/opensearch_dashboards.json

@@ -0,0 +1,9 @@
+{
+  "id": "apmTopologyExample",
+  "version": "0.0.1",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["developerExamples"],
+  "optionalPlugins": []
+}

examples/apm_topology_example/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "apm-topology-example",
+  "version": "0.0.1",
+  "private": true
+}

examples/apm_topology_example/public/agent_mock_data.ts

@@ -0,0 +1,206 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { AgentNodeData } from '@osd/apm-topology';
+
+interface AgentMockNode {
+  id: string;
+  type: string;
+  position: { x: number; y: number };
+  data: AgentNodeData;
+}
+
+interface AgentMockEdge {
+  id: string;
+  source: string;
+  target: string;
+  type?: string;
+  data?: {
+    style?: {
+      dashed?: boolean;
+      animated?: boolean;
+      color?: string;
+      label?: string;
+      marker?: 'arrow' | 'arrowClosed' | 'none';
+      type?: 'solid' | 'dashed' | 'dotted';
+      animationType?: 'none' | 'flow' | 'pulse';
+      strokeWidth?: number;
+    };
+  };
+}
+
+export const agentTraceNodes: AgentMockNode[] = [
+  {
+    id: 'a1',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a1',
+      nodeKind: 'agent',
+      title: 'agent.run',
+      duration: 14660,
+      latency: '14.66s',
+      status: 'warning',
+      statusLabel: 'Slow',
+    },
+  },
+  {
+    id: 'a2',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a2',
+      nodeKind: 'llm',
+      title: 'ChatCompletion',
+      subtitle: 'claude-3-opus',
+      duration: 5200,
+      latency: '5.2s',
+      status: 'ok',
+      model: 'claude-3-opus',
+      provider: 'anthropic',
+      metrics: [
+        { label: 'Duration', value: 5200, max: 14660, formattedValue: '5.2s' },
+        { label: 'Tokens', value: 1200, max: 4096, color: '#A855F7', formattedValue: '1.2k' },
+      ],
+    },
+  },
+  {
+    id: 'a3',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a3',
+      nodeKind: 'tool',
+      title: 'ListIndexTool',
+      duration: 868,
+      latency: '868ms',
+      status: 'ok',
+    },
+  },
+  {
+    id: 'a4',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a4',
+      nodeKind: 'tool',
+      title: 'SearchTool',
+      duration: 2340,
+      latency: '2.34s',
+      status: 'ok',
+    },
+  },
+  {
+    id: 'a5',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a5',
+      nodeKind: 'llm',
+      title: 'ChatCompletion',
+      subtitle: 'gpt-4o',
+      duration: 1990,
+      latency: '1.99s',
+      status: 'ok',
+      model: 'gpt-4o',
+      provider: 'openai',
+    },
+  },
+  {
+    id: 'a6',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a6',
+      nodeKind: 'retrieval',
+      title: 'VectorStoreRetriever',
+      duration: 450,
+      latency: '450ms',
+      status: 'ok',
+    },
+  },
+  {
+    id: 'a7',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a7',
+      nodeKind: 'embeddings',
+      title: 'text-embedding-3-small',
+      duration: 120,
+      latency: '120ms',
+      status: 'ok',
+      model: 'text-embedding-3-small',
+      provider: 'openai',
+    },
+  },
+  {
+    id: 'a8',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a8',
+      nodeKind: 'other',
+      title: 'PostProcessor',
+      duration: 35,
+      latency: '35ms',
+      status: 'ok',
+    },
+  },
+  {
+    id: 'a9',
+    type: 'agentCard',
+    position: { x: 0, y: 0 },
+    data: {
+      id: 'a9',
+      nodeKind: 'content',
+      title: 'KnowledgeBase',
+      duration: 80,
+      latency: '80ms',
+      status: 'ok',
+    },
+  },
+];
+
+export const agentTraceEdges: AgentMockEdge[] = [
+  {
+    id: 'ae1',
+    source: 'a1',
+    target: 'a2',
+    type: 'celestialEdge',
+    data: { style: { type: 'dashed', label: 'invoke', animationType: 'flow' } },
+  },
+  { id: 'ae2', source: 'a2', target: 'a3', type: 'celestialEdge' },
+  { id: 'ae3', source: 'a2', target: 'a4', type: 'celestialEdge' },
+  {
+    id: 'ae4',
+    source: 'a1',
+    target: 'a5',
+    type: 'celestialEdge',
+    data: { style: { type: 'dashed', label: 'invoke', animationType: 'pulse' } },
+  },
+  { id: 'ae5', source: 'a5', target: 'a6', type: 'celestialEdge' },
+  {
+    id: 'ae6',
+    source: 'a6',
+    target: 'a7',
+    type: 'celestialEdge',
+    data: { style: { type: 'dotted', label: 'embed', marker: 'arrow' } },
+  },
+  {
+    id: 'ae7',
+    source: 'a1',
+    target: 'a8',
+    type: 'celestialEdge',
+    data: { style: { marker: 'none', color: '#9C9DA0', strokeWidth: 1 } },
+  },
+  {
+    id: 'ae8',
+    source: 'a6',
+    target: 'a9',
+    type: 'celestialEdge',
+    data: { style: { type: 'dotted', label: 'retrieve', marker: 'arrow' } },
+  },
+];

examples/apm_topology_example/public/app.scss

@@ -0,0 +1,30 @@
+.ateApp {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.ateDetailsPanel {
+  flex: 1;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.ateEventLogPanel {
+  flex: 1;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.ateLogEntries {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ateLogEntry {
+  padding: 8px 12px;
+  margin-bottom: 4px;
+  border-radius: 4px;
+  border-left: 3px solid $euiColorPrimary;
+}