From 6f12d06a3220ccc80749324695804b81d05ba128 Mon Sep 17 00:00:00 2001
From: dhrubesh <dhrubesh97@gmail.com>
Date: Sun, 9 May 2021 18:27:37 +0530
Subject: [PATCH] adds selection of service and zoom into node feature

---
 .../src/modules/Servicemap/SelectService.tsx  | 34 +++++++++++++++++++
 .../src/modules/Servicemap/ServiceMap.tsx     | 31 ++++++++++++++---
 frontend/src/modules/Servicemap/utils.ts      | 12 ++++++-
 3 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/modules/Servicemap/SelectService.tsx

diff --git a/frontend/src/modules/Servicemap/SelectService.tsx b/frontend/src/modules/Servicemap/SelectService.tsx
new file mode 100644
index 0000000000..7247c984f5
--- /dev/null
+++ b/frontend/src/modules/Servicemap/SelectService.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { servicesItem } from "Src/store/actions";
+import { Select } from "antd";
+const { Option } = Select;
+
+interface SelectServiceProps {
+	services: servicesItem[];
+	zoomToService: (arg0: string) => void;
+}
+
+const SelectService = (props: SelectServiceProps) => {
+	const [selectedVal, setSelectedVal] = useState<string>();
+	const { services, zoomToService } = props;
+	const handleSelect = (value: string) => {
+		setSelectedVal(value);
+		zoomToService(value);
+	};
+	return (
+		<Select
+			style={{ width: 270, marginBottom: "56px" }}
+			placeholder="Select a service"
+			onChange={handleSelect}
+			value={selectedVal}
+		>
+			{services.map(({ serviceName }) => (
+				<Option key={serviceName} value={serviceName}>
+					{serviceName}
+				</Option>
+			))}
+		</Select>
+	);
+};
+
+export default SelectService;
diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index d75003ce5e..ecbceb4795 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 import {
@@ -7,10 +7,12 @@ import {
 	getServiceMapItems,
 	getDetailedServiceMapItems,
 } from "Src/store/actions";
+import { Spin } from "antd";
+
 import { StoreState } from "../../store/reducers";
 import { getGraphData } from "./utils";
+import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
-
 interface ServiceMapProps extends RouteComponentProps<any> {
 	serviceMap: serviceMapStore;
 	globalTime: GlobalTime;
@@ -39,26 +41,34 @@ const ServiceMap = (props: ServiceMapProps) => {
 		globalTime,
 		serviceMap,
 	} = props;
+
 	useEffect(() => {
 		getServiceMapItems(globalTime);
 		getDetailedServiceMapItems(globalTime);
 	}, []);
 
 	if (!serviceMap.items.length || !serviceMap.services.length) {
-		return "loading";
+		return <Spin />;
 	}
 
+	const zoomToService = (value: string) => {
+		fgRef && fgRef.current.zoomToFit(700, 350, (e) => e.id === value);
+	};
+
 	const { nodes, links } = getGraphData(serviceMap);
 	const graphData = { nodes, links };
 	return (
 		<div>
+			<SelectService
+				services={serviceMap.services}
+				zoomToService={zoomToService}
+			/>
 			<ForceGraph2D
 				ref={fgRef}
 				cooldownTicks={100}
-				onEngineStop={() => fgRef.current.zoomToFit(100, 100)}
+				onEngineStop={() => fgRef.current.zoomToFit(100, 200)}
 				graphData={graphData}
 				nodeLabel="id"
-				nodeAutoColorBy={(d) => d.id}
 				linkAutoColorBy={(d) => d.target}
 				linkDirectionalParticles="value"
 				linkDirectionalParticleSpeed={(d) => d.value}
@@ -83,6 +93,17 @@ const ServiceMap = (props: ServiceMapProps) => {
 
 					node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
 				}}
+				onNodeClick={(node) => {
+					const tooltip = document.querySelector(".graph-tooltip");
+					if (tooltip && node) {
+						tooltip.innerHTML = `<div style="padding:12px;background: black;border: 1px solid #BDBDBD;border-radius: 2px;">
+								<div style="color:white; font-weight:bold; margin-bottom:8px;">${node.id}</div>
+								<div style="color:white">P99 latency: ${node.p99 / 1000000}</div>
+								<div style="color:white">Error Rate: ${node.errorRate}%</div>
+								<div style="color:white">Request Per Sec: ${node.callRate}</div>
+							</div>`;
+					}
+				}}
 				nodePointerAreaPaint={(node, color, ctx) => {
 					ctx.fillStyle = color;
 					const bckgDimensions = node.__bckgDimensions;
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index b97776e2fc..a321f8bcec 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -45,7 +45,17 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 			color = "#ebeb15";
 		}
 		const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
-		return { id: node, group: i + 1, fontSize, width, color, nodeVal: width };
+		return {
+			id: node,
+			group: i + 1,
+			fontSize,
+			width,
+			color,
+			nodeVal: width,
+			callRate: service.callRate,
+			errorRate: service.errorRate,
+			p99: service.p99,
+		};
 	});
 	return {
 		nodes,