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

Merge pull request #104 from SigNoz/issue-103-

Browse Source 
Fixes multiple re-renders
This commit is contained in:
Ankit Nayan 2021-05-16 17:23:55 +05:30 committed by GitHub
commit 9dd9f1133b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,7 @@ import {
import { Spin } from "antd";
import styled from "styled-components";
import { StoreState } from "../../store/reducers";
import { getZoomPx, getGraphData } from "./utils";
import { getGraphData, getTooltip } from "./utils";
import SelectService from "./SelectService";
import { ForceGraph2D } from "react-force-graph";
@ -72,7 +73,7 @@ const ServiceMap = (props: ServiceMapProps) => {
}
const zoomToService = (value: string) => {
fgRef && fgRef.current.zoomToFit(700, 380, (e) => e.id === value);
fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value);
};
const { nodes, links } = getGraphData(serviceMap);

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

@ -74,6 +74,16 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
};
};
export const getZoomPx = (): number => {
const width = window.screen.width;
if (width < 1400) {
return 190;
} else if (width > 1400 && width < 2500) {
return 380;
} else if (width > 2500) {
return 360;
}
export const getTooltip = (node: {
p99: number;
errorRate: number;
@ -95,4 +105,5 @@ export const getTooltip = (node: {
<div class="val">${node.errorRate}%</div>
</div>
</div>`;
};

14
frontend/src/store/actions/serviceMap.ts
View File

@ -38,6 +38,11 @@ export interface servicesAction {
export const getServiceMapItems = (globalTime: GlobalTime) => {
return async (dispatch: Dispatch) => {
dispatch<serviceMapItemAction>({
type: ActionTypes.getServiceMapItems,
payload: [],
});
let request_string =
"/serviceMapDependencies?start=" +
globalTime.minTime +
@ -45,7 +50,7 @@ export const getServiceMapItems = (globalTime: GlobalTime) => {
globalTime.maxTime;
const response = await api.get<servicesMapItem[]>(apiV1 + request_string);
dispatch<serviceMapItemAction>({
type: ActionTypes.getServiceMapItems,
payload: response.data,
@ -55,11 +60,16 @@ export const getServiceMapItems = (globalTime: GlobalTime) => {
export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
return async (dispatch: Dispatch) => {
dispatch<servicesAction>({
type: ActionTypes.getServices,
payload: [],
});
let request_string =
"/services?start=" + globalTime.minTime + "&end=" + globalTime.maxTime;
const response = await api.get<servicesItem[]>(apiV1 + request_string);
dispatch<servicesAction>({
type: ActionTypes.getServices,
payload: response.data,