Skip to content

Commit b4e07aa

Browse files
ps48opensearch-changeset-bot[bot]
ps48
and
opensearch-changeset-bot[bot]
authored
Add @osd/apm-topology package for APM service map, trace map and GenAI agent trace visualization (#11394)
* Add support for apm topology map Signed-off-by: ps48 <pshenoy36@gmail.com> * Add content agent kind, update colors Signed-off-by: ps48 <pshenoy36@gmail.com> * update file names to snake case Signed-off-by: ps48 <pshenoy36@gmail.com> * Add support for node, edge click types and custom colors Signed-off-by: ps48 <pshenoy36@gmail.com> * Changeset file for PR #11394 created/updated * update transformIgnorePatterns in jest config Signed-off-by: ps48 <pshenoy36@gmail.com> * address comments, remove older pascal case files Signed-off-by: ps48 <pshenoy36@gmail.com> * remove the pascal files from git index Signed-off-by: ps48 <pshenoy36@gmail.com> * ignore generated css Signed-off-by: ps48 <pshenoy36@gmail.com> * Fix: Windows CI bootstrap failure caused by rm command Signed-off-by: ps48 <pshenoy36@gmail.com> * add osd/i18n optional dependency to pick the language Signed-off-by: ps48 <pshenoy36@gmail.com> * update package.json Signed-off-by: ps48 <pshenoy36@gmail.com> * update package.json Signed-off-by: ps48 <pshenoy36@gmail.com> * remove del cli Signed-off-by: ps48 <pshenoy36@gmail.com> * use rimraf Signed-off-by: ps48 <pshenoy36@gmail.com> * use rimraf in yarn.lock Signed-off-by: ps48 <pshenoy36@gmail.com> * update yarn.lock to use symlink Signed-off-by: ps48 <pshenoy36@gmail.com> --------- Signed-off-by: ps48 <pshenoy36@gmail.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
1 parent cde17bd commit b4e07aa

347 files changed

Lines changed: 20955 additions & 6 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.stylelintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
build
22
target
3+
**/*.generated.scss

‎changelogs/fragments/11394.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
feat:
2+
- 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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
- [Osd ace](../packages/osd-ace/README.md)
128128
- [Osd agents](../packages/osd-agents/README.md)
129129
- [Osd apm config loader](../packages/osd-apm-config-loader/README.md)
130+
- [Osd apm topology](../packages/osd-apm-topology/README.md)
130131
- [Osd babel preset](../packages/osd-babel-preset/README.md)
131132
- [Osd config](../packages/osd-config/README.md)
132133
- [Osd config schema](../packages/osd-config-schema/README.md)

‎examples/apm_topology_example/opensearch_dashboards.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"id": "apmTopologyExample",
3+
"version": "0.0.1",
4+
"opensearchDashboardsVersion": "opensearchDashboards",
5+
"server": false,
6+
"ui": true,
7+
"requiredPlugins": ["developerExamples"],
8+
"optionalPlugins": []
9+
}

‎examples/apm_topology_example/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "apm-topology-example",
3+
"version": "0.0.1",
4+
"private": true
5+
}

‎examples/apm_topology_example/public/agent_mock_data.ts‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/*
2+
* Copyright OpenSearch Contributors
3+
* SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
import type { AgentNodeData } from '@osd/apm-topology';
7+
8+
interface AgentMockNode {
9+
id: string;
10+
type: string;
11+
position: { x: number; y: number };
12+
data: AgentNodeData;
13+
}
14+
15+
interface AgentMockEdge {
16+
id: string;
17+
source: string;
18+
target: string;
19+
type?: string;
20+
data?: {
21+
style?: {
22+
dashed?: boolean;
23+
animated?: boolean;
24+
color?: string;
25+
label?: string;
26+
marker?: 'arrow' | 'arrowClosed' | 'none';
27+
type?: 'solid' | 'dashed' | 'dotted';
28+
animationType?: 'none' | 'flow' | 'pulse';
29+
strokeWidth?: number;
30+
};
31+
};
32+
}
33+
34+
export const agentTraceNodes: AgentMockNode[] = [
35+
{
36+
id: 'a1',
37+
type: 'agentCard',
38+
position: { x: 0, y: 0 },
39+
data: {
40+
id: 'a1',
41+
nodeKind: 'agent',
42+
title: 'agent.run',
43+
duration: 14660,
44+
latency: '14.66s',
45+
status: 'warning',
46+
statusLabel: 'Slow',
47+
},
48+
},
49+
{
50+
id: 'a2',
51+
type: 'agentCard',
52+
position: { x: 0, y: 0 },
53+
data: {
54+
id: 'a2',
55+
nodeKind: 'llm',
56+
title: 'ChatCompletion',
57+
subtitle: 'claude-3-opus',
58+
duration: 5200,
59+
latency: '5.2s',
60+
status: 'ok',
61+
model: 'claude-3-opus',
62+
provider: 'anthropic',
63+
metrics: [
64+
{ label: 'Duration', value: 5200, max: 14660, formattedValue: '5.2s' },
65+
{ label: 'Tokens', value: 1200, max: 4096, color: '#A855F7', formattedValue: '1.2k' },
66+
],
67+
},
68+
},
69+
{
70+
id: 'a3',
71+
type: 'agentCard',
72+
position: { x: 0, y: 0 },
73+
data: {
74+
id: 'a3',
75+
nodeKind: 'tool',
76+
title: 'ListIndexTool',
77+
duration: 868,
78+
latency: '868ms',
79+
status: 'ok',
80+
},
81+
},
82+
{
83+
id: 'a4',
84+
type: 'agentCard',
85+
position: { x: 0, y: 0 },
86+
data: {
87+
id: 'a4',
88+
nodeKind: 'tool',
89+
title: 'SearchTool',
90+
duration: 2340,
91+
latency: '2.34s',
92+
status: 'ok',
93+
},
94+
},
95+
{
96+
id: 'a5',
97+
type: 'agentCard',
98+
position: { x: 0, y: 0 },
99+
data: {
100+
id: 'a5',
101+
nodeKind: 'llm',
102+
title: 'ChatCompletion',
103+
subtitle: 'gpt-4o',
104+
duration: 1990,
105+
latency: '1.99s',
106+
status: 'ok',
107+
model: 'gpt-4o',
108+
provider: 'openai',
109+
},
110+
},
111+
{
112+
id: 'a6',
113+
type: 'agentCard',
114+
position: { x: 0, y: 0 },
115+
data: {
116+
id: 'a6',
117+
nodeKind: 'retrieval',
118+
title: 'VectorStoreRetriever',
119+
duration: 450,
120+
latency: '450ms',
121+
status: 'ok',
122+
},
123+
},
124+
{
125+
id: 'a7',
126+
type: 'agentCard',
127+
position: { x: 0, y: 0 },
128+
data: {
129+
id: 'a7',
130+
nodeKind: 'embeddings',
131+
title: 'text-embedding-3-small',
132+
duration: 120,
133+
latency: '120ms',
134+
status: 'ok',
135+
model: 'text-embedding-3-small',
136+
provider: 'openai',
137+
},
138+
},
139+
{
140+
id: 'a8',
141+
type: 'agentCard',
142+
position: { x: 0, y: 0 },
143+
data: {
144+
id: 'a8',
145+
nodeKind: 'other',
146+
title: 'PostProcessor',
147+
duration: 35,
148+
latency: '35ms',
149+
status: 'ok',
150+
},
151+
},
152+
{
153+
id: 'a9',
154+
type: 'agentCard',
155+
position: { x: 0, y: 0 },
156+
data: {
157+
id: 'a9',
158+
nodeKind: 'content',
159+
title: 'KnowledgeBase',
160+
duration: 80,
161+
latency: '80ms',
162+
status: 'ok',
163+
},
164+
},
165+
];
166+
167+
export const agentTraceEdges: AgentMockEdge[] = [
168+
{
169+
id: 'ae1',
170+
source: 'a1',
171+
target: 'a2',
172+
type: 'celestialEdge',
173+
data: { style: { type: 'dashed', label: 'invoke', animationType: 'flow' } },
174+
},
175+
{ id: 'ae2', source: 'a2', target: 'a3', type: 'celestialEdge' },
176+
{ id: 'ae3', source: 'a2', target: 'a4', type: 'celestialEdge' },
177+
{
178+
id: 'ae4',
179+
source: 'a1',
180+
target: 'a5',
181+
type: 'celestialEdge',
182+
data: { style: { type: 'dashed', label: 'invoke', animationType: 'pulse' } },
183+
},
184+
{ id: 'ae5', source: 'a5', target: 'a6', type: 'celestialEdge' },
185+
{
186+
id: 'ae6',
187+
source: 'a6',
188+
target: 'a7',
189+
type: 'celestialEdge',
190+
data: { style: { type: 'dotted', label: 'embed', marker: 'arrow' } },
191+
},
192+
{
193+
id: 'ae7',
194+
source: 'a1',
195+
target: 'a8',
196+
type: 'celestialEdge',
197+
data: { style: { marker: 'none', color: '#9C9DA0', strokeWidth: 1 } },
198+
},
199+
{
200+
id: 'ae8',
201+
source: 'a6',
202+
target: 'a9',
203+
type: 'celestialEdge',
204+
data: { style: { type: 'dotted', label: 'retrieve', marker: 'arrow' } },
205+
},
206+
];

‎examples/apm_topology_example/public/app.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.ateApp {
2+
display: flex;
3+
flex-direction: column;
4+
height: 100%;
5+
}
6+
7+
.ateDetailsPanel {
8+
flex: 1;
9+
max-height: 500px;
10+
overflow-y: auto;
11+
}
12+
13+
.ateEventLogPanel {
14+
flex: 1;
15+
max-height: 400px;
16+
display: flex;
17+
flex-direction: column;
18+
}
19+
20+
.ateLogEntries {
21+
flex: 1;
22+
overflow-y: auto;
23+
}
24+
25+
.ateLogEntry {
26+
padding: 8px 12px;
27+
margin-bottom: 4px;
28+
border-radius: 4px;
29+
border-left: 3px solid $euiColorPrimary;
30+
}

0 commit comments

Comments
 (0)