+
{
fgRef.current.zoomToFit(100, 200)}
+ onEngineStop={() => fgRef.current.zoomToFit(100, 120)}
graphData={graphData}
nodeLabel="id"
linkAutoColorBy={(d) => d.target}
@@ -75,46 +92,46 @@ const ServiceMap = (props: ServiceMapProps) => {
nodeCanvasObject={(node, ctx, globalScale) => {
const label = node.id;
const fontSize = node.fontSize;
- ctx.font = `${fontSize}px Sans-Serif`;
- const textWidth = ctx.measureText(label).width;
- const width = textWidth > node.width ? textWidth : node.width;
- const bckgDimensions = [width, node.height].map((n) => n + fontSize); // some padding
+ ctx.font = `${fontSize}px Roboto`;
+ const width = node.width;
+
ctx.fillStyle = node.color;
- ctx.fillRect(
- node.x - bckgDimensions[0] / 2,
- node.y - bckgDimensions[1] / 2,
- ...bckgDimensions,
- );
+ ctx.beginPath();
+ ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false);
+ ctx.fill();
ctx.textAlign = "center";
ctx.textBaseline = "middle";
- ctx.fillStyle = "black";
+ ctx.fillStyle = "#333333";
ctx.fillText(label, node.x, node.y);
-
- node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
}}
onNodeClick={(node) => {
const tooltip = document.querySelector(".graph-tooltip");
if (tooltip && node) {
- tooltip.innerHTML = `
-
${node.id}
-
P99 latency: ${node.p99 / 1000000}
-
Error Rate: ${node.errorRate}%
-
Request Per Sec: ${node.callRate}
+ tooltip.innerHTML = `
+
${node.id}
+
+
P99 latency:
+
${node.p99 / 1000000}
+
+
+
Request:
+
${node.callRate}/sec
+
+
+
Error Rate:
+
${node.errorRate}%
+
`;
}
}}
nodePointerAreaPaint={(node, color, ctx) => {
ctx.fillStyle = color;
- const bckgDimensions = node.__bckgDimensions;
- bckgDimensions &&
- ctx.fillRect(
- node.x - bckgDimensions[0] / 2,
- node.y - bckgDimensions[1] / 2,
- ...bckgDimensions,
- );
+ ctx.beginPath();
+ ctx.arc(node.x, node.y, 5, 0, 2 * Math.PI, false);
+ ctx.fill();
}}
/>
-
);
};
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 28eceeb336..72fb61782a 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -2,20 +2,16 @@ import { uniqBy, uniq, maxBy, cloneDeep, find } from "lodash";
import { serviceMapStore } from "Src/store/actions";
import { graphDataType } from "./ServiceMap";
-const MIN_WIDTH = 25;
-const MAX_WIDTH = 50;
-const MIN_HEIGHT = 10;
-const MAX_HEIGHT = 15;
-const DEFAULT_FONT_SIZE = 4;
+const MIN_WIDTH = 12;
+const MAX_WIDTH = 20;
+const DEFAULT_FONT_SIZE = 6;
export const getDimensions = (num, highest) => {
const percentage = (num / highest) * 100;
const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
- const height = (percentage * (MAX_HEIGHT - MIN_HEIGHT)) / 100 + MIN_HEIGHT;
const fontSize = DEFAULT_FONT_SIZE;
return {
fontSize,
width,
- height,
};
};
@@ -40,14 +36,13 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
const uniqNodes = uniq([...uniqParent, ...uniqChild]);
const nodes = uniqNodes.map((node, i) => {
const service = find(services, (service) => service.serviceName === node);
- let color = "#84ff00";
+ let color = "#88CEA5";
if (!service) {
return {
id: node,
group: i + 1,
fontSize: DEFAULT_FONT_SIZE,
width: MIN_WIDTH,
- height: MIN_HEIGHT,
color,
nodeVal: MIN_WIDTH,
callRate: 0,
@@ -56,17 +51,16 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
};
}
if (service.errorRate > 0) {
- color = "#f00a0a";
+ color = "#F98989";
} else if (service.fourXXRate > 0) {
- color = "#ebeb15";
+ color = "#F9DA7B";
}
- const { fontSize, width, height } = getDimensions(service.callRate, highestCallRate);
+ const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
return {
id: node,
group: i + 1,
fontSize,
width,
- height,
color,
nodeVal: width,
callRate: service.callRate,
diff --git a/frontend/src/store/actions/serviceMap.ts b/frontend/src/store/actions/serviceMap.ts
index 883e274a71..d8706fecda 100644
--- a/frontend/src/store/actions/serviceMap.ts
+++ b/frontend/src/store/actions/serviceMap.ts
@@ -44,36 +44,36 @@ export const getServiceMapItems = (globalTime: GlobalTime) => {
"&end=" +
globalTime.maxTime;
- const response = await api.get
(apiV1 + request_string);
- // const response = {
- // data: [
- // {
- // parent: "driver",
- // child: "redis",
- // callCount: 17050,
- // },
- // {
- // parent: "frontend",
- // child: "driver",
- // callCount: 1263,
- // },
- // {
- // parent: "customer",
- // child: "mysql",
- // callCount: 1262,
- // },
- // {
- // parent: "frontend",
- // child: "customer",
- // callCount: 1262,
- // },
- // {
- // parent: "frontend",
- // child: "route",
- // callCount: 12636,
- // },
- // ],
- // };
+ // const response = await api.get(apiV1 + request_string);
+ const response = {
+ data: [
+ {
+ parent: "driver",
+ child: "redisredisredisredisredisredisredisredisre",
+ callCount: 17050,
+ },
+ {
+ parent: "frontend",
+ child: "driver",
+ callCount: 1263,
+ },
+ {
+ parent: "customer",
+ child: "mysql",
+ callCount: 1262,
+ },
+ {
+ parent: "frontend",
+ child: "customer",
+ callCount: 1262,
+ },
+ {
+ parent: "frontend",
+ child: "route",
+ callCount: 12636,
+ },
+ ],
+ };
dispatch({
type: ActionTypes.getServiceMapItems,
payload: response.data,
@@ -86,77 +86,77 @@ export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
let request_string =
"/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
- const response = await api.get(apiV1 + request_string);
- // const response = {
- // data: [
- // {
- // serviceName: "redis",
- // p99: 1179518000,
- // avgDuration: 742158850,
- // numCalls: 1898,
- // callRate: 0.019097411,
- // numErrors: 0,
- // errorRate: 3,
- // num4XX: 0,
- // fourXXRate: 0,
- // },
- // {
- // serviceName: "mysql",
- // p99: 1179518000,
- // avgDuration: 742158850,
- // numCalls: 1898,
- // callRate: 0.019097411,
- // numErrors: 0,
- // errorRate: 0,
- // num4XX: 0,
- // fourXXRate: 0,
- // },
- // {
- // serviceName: "frontend",
- // p99: 1179518000,
- // avgDuration: 742158850,
- // numCalls: 1898,
- // callRate: 0.000019097411,
- // numErrors: 0,
- // errorRate: 0,
- // num4XX: 0,
- // fourXXRate: 0,
- // },
- // {
- // serviceName: "customer",
- // p99: 728385000,
- // avgDuration: 342475680,
- // numCalls: 1897,
- // callRate: 0.000019087349,
- // numErrors: 0,
- // errorRate: 0,
- // num4XX: 0,
- // fourXXRate: 0.6325778,
- // },
- // {
- // serviceName: "driver",
- // p99: 243808000,
- // avgDuration: 204640670,
- // numCalls: 1898,
- // callRate: 0.000019097411,
- // numErrors: 0,
- // errorRate: 0,
- // num4XX: 0,
- // fourXXRate: 0.63224447,
- // },
- // {
- // serviceName: "route",
- // p99: 79419000,
- // avgDuration: 50748804,
- // numCalls: 18979,
- // callRate: 0.00019096404,
- // numErrors: 0,
- // errorRate: 3,
- // num4XX: 0,
- // fourXXRate: 0,
- // },
- // ],
- // };
+ // const response = await api.get(apiV1 + request_string);
+ const response = {
+ data: [
+ {
+ serviceName: "redisredisredisredisredisredisredisredisre",
+ p99: 1179518000,
+ avgDuration: 742158850,
+ numCalls: 1898,
+ callRate: 0.019097411,
+ numErrors: 0,
+ errorRate: 3,
+ num4XX: 0,
+ fourXXRate: 0,
+ },
+ {
+ serviceName: "mysql",
+ p99: 1179518000,
+ avgDuration: 742158850,
+ numCalls: 1898,
+ callRate: 0.019097411,
+ numErrors: 0,
+ errorRate: 0,
+ num4XX: 0,
+ fourXXRate: 0,
+ },
+ {
+ serviceName: "frontend",
+ p99: 1179518000,
+ avgDuration: 742158850,
+ numCalls: 1898,
+ callRate: 0.000019097411,
+ numErrors: 0,
+ errorRate: 0,
+ num4XX: 0,
+ fourXXRate: 0,
+ },
+ {
+ serviceName: "customer",
+ p99: 728385000,
+ avgDuration: 342475680,
+ numCalls: 1897,
+ callRate: 0.000019087349,
+ numErrors: 0,
+ errorRate: 0,
+ num4XX: 0,
+ fourXXRate: 0.6325778,
+ },
+ {
+ serviceName: "driver",
+ p99: 243808000,
+ avgDuration: 204640670,
+ numCalls: 1898,
+ callRate: 0.000019097411,
+ numErrors: 0,
+ errorRate: 0,
+ num4XX: 0,
+ fourXXRate: 0.63224447,
+ },
+ {
+ serviceName: "route",
+ p99: 79419000,
+ avgDuration: 50748804,
+ numCalls: 18979,
+ callRate: 0.00019096404,
+ numErrors: 0,
+ errorRate: 3,
+ num4XX: 0,
+ fourXXRate: 0,
+ },
+ ],
+ };
dispatch({
type: ActionTypes.getServices,
payload: response.data,