GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-09-23 10:43:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

calculate nodes size and color via RPS errorRate

Browse Source
This commit is contained in:
dhrubesh 2021-05-09 15:41:57 +05:30
parent c7ed2daf4a
commit bc02aa5eef
2 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/modules/Servicemap/ServiceMap.tsx
View File

@ -44,10 +44,11 @@ const ServiceMap = (props: ServiceMapProps) => {
getDetailedServiceMapItems(globalTime); getDetailedServiceMapItems(globalTime);
}, []); }, []);
if (!serviceMap.items.length) { if (!serviceMap.items.length || !serviceMap.services.length) {
return "loading"; return "loading";
} }
const { nodes, links } = getGraphData(serviceMap.items);
const { nodes, links } = getGraphData(serviceMap);
const graphData = { nodes, links }; const graphData = { nodes, links };
return ( return (
<div> <div>
@ -63,10 +64,11 @@ const ServiceMap = (props: ServiceMapProps) => {
linkDirectionalParticleSpeed={(d) => d.value} linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx, globalScale) => { nodeCanvasObject={(node, ctx, globalScale) => {
const label = node.id; const label = node.id;
const fontSize = 16 / globalScale; const fontSize = node.fontSize;
ctx.font = `${fontSize}px Sans-Serif`; ctx.font = `${fontSize}px Sans-Serif`;
const textWidth = ctx.measureText(label).width; const textWidth = ctx.measureText(label).width;
const bckgDimensions = [textWidth, fontSize].map((n) => n + fontSize); // some padding const width = textWidth > node.width ? textWidth : node.width;
const bckgDimensions = [width, fontSize].map((n) => n + fontSize); // some padding
ctx.fillStyle = node.color; ctx.fillStyle = node.color;
ctx.fillRect( ctx.fillRect(
node.x - bckgDimensions[0] / 2, node.x - bckgDimensions[0] / 2,

50
frontend/src/modules/Servicemap/utils.ts
View File

@ -1,12 +1,31 @@
import { uniqBy, uniq, maxBy, cloneDeep } from "lodash"; import { uniqBy, uniq, maxBy, cloneDeep, find } from "lodash";
import { servicesMapItem } from "Src/store/actions"; import { serviceMapStore } from "Src/store/actions";
import { graphDataType } from "./ServiceMap"; import { graphDataType } from "./ServiceMap";
export const getGraphData = (item: servicesMapItem[]): graphDataType => { export const getDimensions = (num, highest) => {
const highestNum = maxBy(item, (e) => e.callCount).callCount; const MAX_WIDTH = 8;
const divNum = Number(String(1).padEnd(highestNum.toString().length, "0")); const MIN_WIDTH = 5;
const MAX_FONT_SIZE = 8;
const MIN_FONT_SIZE = 5;
const percentage = (num / highest) * 100;
const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
const fontSize =
(percentage * (MAX_FONT_SIZE - MIN_FONT_SIZE)) / 100 + MIN_FONT_SIZE;
return {
fontSize,
width,
};
};
const links = cloneDeep(item).map((node) => { export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
const { items, services } = serviceMap;
const highestCallCount = maxBy(items, (e) => e.callCount).callCount;
const highestCallRate = maxBy(services, (e) => e.callRate).callRate;
const divNum = Number(
String(1).padEnd(highestCallCount.toString().length, "0"),
);
const links = cloneDeep(items).map((node) => {
const { parent, child, callCount } = node; const { parent, child, callCount } = node;
return { return {
source: parent, source: parent,
@ -14,13 +33,20 @@ export const getGraphData = (item: servicesMapItem[]): graphDataType => {
value: (100 - callCount / divNum) * 0.01, value: (100 - callCount / divNum) * 0.01,
}; };
}); });
const uniqParent = uniqBy(cloneDeep(item), "parent").map((e) => e.parent); const uniqParent = uniqBy(cloneDeep(items), "parent").map((e) => e.parent);
const uniqChild = uniqBy(cloneDeep(item), "child").map((e) => e.child); const uniqChild = uniqBy(cloneDeep(items), "child").map((e) => e.child);
const uniqNodes = uniq([...uniqParent, ...uniqChild]); const uniqNodes = uniq([...uniqParent, ...uniqChild]);
const nodes = uniqNodes.map((node, i) => ({ const nodes = uniqNodes.map((node, i) => {
id: node, const service = find(services, (service) => service.serviceName === node);
group: i + 1, let color = "#84ff00";
})); if (service.errorRate > 0) {
color = "#f00a0a";
} else if (service.fourXXRate > 0) {
color = "#ebeb15";
}
const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
return { id: node, group: i + 1, fontSize, width, color, nodeVal: width };
});
return { return {
nodes, nodes,
links, links,