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

Merge pull request #109 from SigNoz/issues-93

Browse Source 
Add default view in dropdown service-picker in ServiceMap
This commit is contained in:
Ankit Nayan 2021-05-17 17:23:26 +05:30 committed by GitHub
commit bb155d2356
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/modules/Servicemap/SelectService.tsx
View File

@ -4,6 +4,7 @@ import { InfoCircleOutlined } from "@ant-design/icons";
import { Select } from "antd";
import styled from "styled-components";
const { Option } = Select;
import { cloneDeep } from "lodash";
const Container = styled.div`
margin-top: 12px;
@ -25,14 +26,25 @@ const Container = styled.div`
interface SelectServiceProps {
services: servicesItem[];
zoomToService: (arg0: string) => void;
zoomToDefault: () => void;
}
const defaultOption = {
serviceName: "Default"
};
const SelectService = (props: SelectServiceProps) => {
const [selectedVal, setSelectedVal] = useState<string>();
const { services, zoomToService } = props;
const [selectedVal, setSelectedVal] = useState<string>(defaultOption.serviceName);
const { zoomToService, zoomToDefault } = props;
const services = cloneDeep(props.services);
services.unshift(defaultOption)
const handleSelect = (value: string) => {
if(value === defaultOption.serviceName){
zoomToDefault()
} else {
zoomToService(value);
}
setSelectedVal(value);
zoomToService(value);
};
return (
<Container>

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

@ -75,6 +75,10 @@ const ServiceMap = (props: ServiceMapProps) => {
fgRef && fgRef.current.zoomToFit(700, getZoomPx(), (e) => e.id === value);
};
const zoomToDefault = () => {
fgRef && fgRef.current.zoomToFit(100, 120);
};
const { nodes, links } = getGraphData(serviceMap);
const graphData = { nodes, links };
return (
@ -82,6 +86,7 @@ const ServiceMap = (props: ServiceMapProps) => {
<SelectService
services={serviceMap.services}
zoomToService={zoomToService}
zoomToDefault={zoomToDefault}
/>
<ForceGraph2D
ref={fgRef}