Add service map to services and trace view page (#518)

* Add more information on service map hover tooltip Signed-off-by: Joshua Li <joshuali925@gmail.com> * Add service map to trace view Signed-off-by: Joshua Li <joshuali925@gmail.com> * Update tests Signed-off-by: Joshua Li <joshuali925@gmail.com>
opensearch-project · Mar 2, 2022 · bf4c145 · bf4c145
1 parent 6b6fca2
commit bf4c145
Show file tree

Hide file tree

Showing 10 changed files with 1,319 additions and 41 deletions.
diff --git a/...ds-observability/public/components/trace_analytics/components/common/helper_functions.tsx b/...ds-observability/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -135,26 +135,25 @@ export function getServiceMapGraph(
       };
     }
 
-    const message =
-      { latency: 'Average latency: ', error_rate: 'Error rate: ', throughput: 'Throughput: ' }[
-        idSelected
-      ] +
-      (value! >= 0
-        ? value + (idSelected === 'latency' ? 'ms' : idSelected === 'error_rate' ? '%' : '')
-        : 'N/A');
+    let hover = service;
+    hover += `\n\nAverage latency: ${map[service].latency! >= 0 ? map[service].latency + 'ms' : 'N/A'}`;
+    hover += `\nError rate: ${map[service].error_rate! >= 0 ? map[service].error_rate + '%' : 'N/A'}`;
+    hover += `\nThroughput: ${map[service].throughput! >= 0 ? map[service].throughput : 'N/A'}`;
+    if (map[service].throughputPerMinute != null)
+      hover += ` (${map[service].throughputPerMinute} per minute)`;
 
     return {
       id: map[service].id,
       label: service,
       size: service === currService ? 30 : 15,
-      title: `${service}\n\n${message}`,
+      title: hover,
       ...styleOptions,
     };
   });
   const edges: Array<{ from: number; to: number; color: string }> = [];
   const edgeColor = uiSettingsService.get('theme:darkMode') ? '255, 255, 255' : '0, 0, 0';
   Object.keys(map).map((service) => {
-    map[service].targetServices.map((target) => {
+    map[service].targetServices.filter((target) => map[target]).map((target) => {
       edges.push({
         from: map[service].id,
         to: map[target].id,

diff --git a/...s-observability/public/components/trace_analytics/components/common/plots/service_map.tsx b/...s-observability/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -35,6 +35,7 @@ export interface ServiceObject {
     latency?: number;
     error_rate?: number;
     throughput?: number;
+    throughputPerMinute?: number;
     relatedServices?: string[]; // services appear in the same traces this service appears
   };
 }
@@ -52,7 +53,7 @@ export function ServiceMap({
   setIdSelected: (newId: 'latency' | 'error_rate' | 'throughput') => void;
   addFilter?: (filter: FilterType) => void;
   currService?: string;
-  page: 'app' | 'appCreate' | 'dashboard' | 'traces' | 'services' | 'serviceView' | 'detailFlyout';
+  page: 'app' | 'appCreate' | 'dashboard' | 'traces' | 'services' | 'serviceView' | 'detailFlyout' | 'traceView';
 }) {
   const [invalid, setInvalid] = useState(false);
   const [network, setNetwork] = useState(null);