GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 02:48:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #107 from SigNoz/issues-106

Browse Source 
Display upto 20 characters in name of service in ServiceMap
This commit is contained in:
Ankit Nayan 2021-05-17 18:03:32 +05:30 committed by GitHub
commit e6b3a6c9db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,8 @@ import {
import { Spin } from "antd"; import { Spin } from "antd";
import styled from "styled-components"; import styled from "styled-components";
import { StoreState } from "../../store/reducers"; import { StoreState } from "../../store/reducers";
import { getZoomPx, getGraphData, getTooltip } from "./utils";
import { getZoomPx, getGraphData, getTooltip, transformLabel } from "./utils";
import SelectService from "./SelectService"; import SelectService from "./SelectService";
import { ForceGraph2D } from "react-force-graph"; import { ForceGraph2D } from "react-force-graph";
@ -97,7 +98,7 @@ const ServiceMap = (props: ServiceMapProps) => {
linkDirectionalParticles="value" linkDirectionalParticles="value"
linkDirectionalParticleSpeed={(d) => d.value} linkDirectionalParticleSpeed={(d) => d.value}
nodeCanvasObject={(node, ctx, globalScale) => { nodeCanvasObject={(node, ctx, globalScale) => {
const label = node.id; const label = transformLabel(node.id);
const fontSize = node.fontSize; const fontSize = node.fontSize;
ctx.font = `${fontSize}px Roboto`; ctx.font = `${fontSize}px Roboto`;
const width = node.width; const width = node.width;

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

@ -107,3 +107,12 @@ export const getTooltip = (node: {
</div> </div>
</div>`; </div>`;
}; };
export const transformLabel = (label: string) => {
const MAX_LENGTH = 13;
const MAX_SHOW = 10;
if (label.length > MAX_LENGTH) {
return `${label.slice(0, MAX_SHOW)}...`;
}
return label;
};