bug: no service and loading check are added (#934)

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable  */
 //@ts-nocheck
 
+import { Card } from 'antd';
 import Spinner from 'components/Spinner';
 import React, { useEffect, useRef } from 'react';
 import { ForceGraph2D } from 'react-force-graph';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { getDetailedServiceMapItems, getServiceMapItems } from 'store/actions';
+import { getDetailedServiceMapItems, ServiceMapStore } from 'store/actions';
 import { AppState } from 'store/reducers';
 import styled from 'styled-components';
 import { GlobalTime } from 'types/actions/globalTime';
@@ -31,9 +32,8 @@ const Container = styled.div`
 `;
 
 interface ServiceMapProps extends RouteComponentProps<any> {
-	serviceMap: serviceMapStore;
+	serviceMap: ServiceMapStore;
 	globalTime: GlobalTime;
-	getServiceMapItems: (time: GlobalTime) => void;
 	getDetailedServiceMapItems: (time: GlobalTime) => void;
 }
 interface graphNode {
@@ -53,29 +53,32 @@ export interface graphDataType {
 function ServiceMap(props: ServiceMapProps): JSX.Element {
 	const fgRef = useRef();
 
-	const {
-		getDetailedServiceMapItems,
-		getServiceMapItems,
-		globalTime,
-		serviceMap,
-	} = props;
+	const { getDetailedServiceMapItems, globalTime, serviceMap } = props;
 
 	useEffect(() => {
 		/*
 			Call the apis only when the route is loaded.
 			Check this issue: https://github.com/SigNoz/signoz/issues/110
 		 */
-		getServiceMapItems(globalTime);
 		getDetailedServiceMapItems(globalTime);
-	}, [globalTime, getServiceMapItems, getDetailedServiceMapItems]);
+	}, [globalTime, getDetailedServiceMapItems]);
 
 	useEffect(() => {
 		fgRef.current && fgRef.current.d3Force('charge').strength(-400);
 	});
-	if (!serviceMap.items.length || !serviceMap.services.length) {
+
+	if (serviceMap.loading) {
 		return <Spinner size="large" tip="Loading..." />;
 	}
 
+	if (!serviceMap.loading && serviceMap.items.length === 0) {
+		return (
+			<Container>
+				<Card>No Service Found</Card>
+			</Container>
+		);
+	}
+
 	const zoomToService = (value: string): void => {
 		fgRef &&
 			fgRef.current &&
@@ -149,7 +152,6 @@ const mapStateToProps = (
 
 export default withRouter(
 	connect(mapStateToProps, {
-		getServiceMapItems,
 		getDetailedServiceMapItems,
 	})(ServiceMap),
 );

frontend/src/store/actions/serviceMap.ts

@@ -7,6 +7,7 @@ import { ActionTypes } from './types';
 export interface ServiceMapStore {
 	items: ServicesMapItem[];
 	services: ServicesItem[];
+	loading: boolean;
 }
 
 export interface ServicesItem {
@@ -37,38 +38,39 @@ export interface ServicesAction {
 	payload: ServicesItem[];
 }
 
-export const getServiceMapItems = (globalTime: GlobalTime) => {
-	return async (dispatch: Dispatch): Promise<void> => {
-		dispatch<ServiceMapItemAction>({
-			type: ActionTypes.getServiceMapItems,
-			payload: [],
-		});
-
-		const requestString = `/serviceMapDependencies?start=${globalTime.minTime}&end=${globalTime.maxTime}`;
-
-		const response = await api.get<ServicesMapItem[]>(requestString);
-
-		dispatch<ServiceMapItemAction>({
-			type: ActionTypes.getServiceMapItems,
-			payload: response.data,
-		});
-	};
+export interface ServiceMapLoading {
+	type: ActionTypes.serviceMapLoading;
+	payload: {
+		loading: ServiceMapStore['loading'];
 	};
+}
 
 export const getDetailedServiceMapItems = (globalTime: GlobalTime) => {
 	return async (dispatch: Dispatch): Promise<void> => {
-		dispatch<ServicesAction>({
-			type: ActionTypes.getServices,
-			payload: [],
-		});
-
 		const requestString = `/services?start=${globalTime.minTime}&end=${globalTime.maxTime}`;
 
-		const response = await api.get<ServicesItem[]>(requestString);
+		const serviceMapDependencies = `/serviceMapDependencies?start=${globalTime.minTime}&end=${globalTime.maxTime}`;
+
+		const [serviceMapDependenciesResponse, response] = await Promise.all([
+			api.get<ServicesMapItem[]>(serviceMapDependencies),
+			api.get<ServicesItem[]>(requestString),
+		]);
 
 		dispatch<ServicesAction>({
 			type: ActionTypes.getServices,
 			payload: response.data,
 		});
+
+		dispatch<ServiceMapItemAction>({
+			type: ActionTypes.getServiceMapItems,
+			payload: serviceMapDependenciesResponse.data,
+		});
+
+		dispatch<ServiceMapLoading>({
+			type: ActionTypes.serviceMapLoading,
+			payload: {
+				loading: false,
+			},
+		});
 	};
 };

frontend/src/store/actions/types.ts

@@ -1,14 +1,22 @@
-import { ServiceMapItemAction, ServicesAction } from './serviceMap';
+import {
+	ServiceMapItemAction,
+	ServiceMapLoading,
+	ServicesAction,
+} from './serviceMap';
 import { GetUsageDataAction } from './usage';
 
 export enum ActionTypes {
-	updateTraceFilters = 'UPDATE_TRACES_FILTER',
 	updateTimeInterval = 'UPDATE_TIME_INTERVAL',
 	getServiceMapItems = 'GET_SERVICE_MAP_ITEMS',
 	getServices = 'GET_SERVICES',
 	getUsageData = 'GET_USAGE_DATE',
 	fetchTraces = 'FETCH_TRACES',
 	fetchTraceItem = 'FETCH_TRACE_ITEM',
+	serviceMapLoading = 'UPDATE_SERVICE_MAP_LOADING',
 }
 
-export type Action = GetUsageDataAction | ServicesAction | ServiceMapItemAction;
+export type Action =
+	| GetUsageDataAction
+	| ServicesAction
+	| ServiceMapItemAction
+	| ServiceMapLoading;

frontend/src/store/reducers/serviceMap.ts

@@ -3,6 +3,7 @@ import { Action, ActionTypes, ServiceMapStore } from 'store/actions';
 const initialState: ServiceMapStore = {
 	items: [],
 	services: [],
+	loading: true,
 };
 
 export const ServiceMapReducer = (
@@ -20,6 +21,12 @@ export const ServiceMapReducer = (
 				...state,
 				services: action.payload,
 			};
+		case ActionTypes.serviceMapLoading: {
+			return {
+				...state,
+				loading: action.payload.loading,
+			};
+		}
 		default:
 			return state;
 	}