diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 2c4d1ac378..ffd79658d9 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/frontend/src/modules/Servicemap/ServiceMap.tsx @@ -64,12 +64,15 @@ const ServiceMap = (props: ServiceMapProps) => { getDetailedServiceMapItems(globalTime); }, []); + useEffect(() => { + fgRef.current && fgRef.current.d3Force("charge").strength(-400); + }); if (!serviceMap.items.length || !serviceMap.services.length) { return ; } const zoomToService = (value: string) => { - fgRef && fgRef.current.zoomToFit(700, 390, (e) => e.id === value); + fgRef && fgRef.current.zoomToFit(700, 399, (e) => e.id === value); }; const { nodes, links } = getGraphData(serviceMap); @@ -83,7 +86,9 @@ const ServiceMap = (props: ServiceMapProps) => { fgRef.current.zoomToFit(100, 120)} + onEngineStop={() => { + fgRef.current.zoomToFit(100, 120); + }} graphData={graphData} nodeLabel="id" linkAutoColorBy={(d) => d.target} @@ -111,7 +116,7 @@ const ServiceMap = (props: ServiceMapProps) => {
${node.id}
P99 latency:
-
${node.p99 / 1000000}
+
${node.p99 / 1000000}ms
Request:
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts index 72fb61782a..775af2a3b8 100644 --- a/frontend/src/modules/Servicemap/utils.ts +++ b/frontend/src/modules/Servicemap/utils.ts @@ -63,7 +63,7 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => { width, color, nodeVal: width, - callRate: service.callRate, + callRate: service.callRate.toFixed(2), errorRate: service.errorRate, p99: service.p99, };