Merge pull request #109 from SigNoz/issues-93

Add default view in dropdown service-picker in ServiceMap

frontend/src/modules/Servicemap/SelectService.tsx

@@ -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 [selectedVal, setSelectedVal] = useState<string>(defaultOption.serviceName);
-	const { services, zoomToService } = props;
+	const { zoomToService, zoomToDefault } = props;
+	const services = cloneDeep(props.services);
+	services.unshift(defaultOption)
 	const handleSelect = (value: string) => {
-		setSelectedVal(value);
+		if(value === defaultOption.serviceName){
+			zoomToDefault()
+		} else {
 			zoomToService(value);
+		}
+		setSelectedVal(value);
 	};
 	return (
 		<Container>

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -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}