Merge branch 'issue-92' into issue-103-

frontend/src/modules/Nav/TopNav/DateTimeSelector.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Select, Button, Space, Form } from "antd";
+import { Select as DefaultSelect, Button, Space, Form } from "antd";
 import styled from "styled-components";
 import { withRouter } from "react-router";
 import { RouteComponentProps, useLocation } from "react-router-dom";
@@ -10,18 +10,24 @@ import CustomDateTimeModal from "./CustomDateTimeModal";
 import { GlobalTime, updateTimeInterval } from "../../../store/actions";
 import { StoreState } from "../../../store/reducers";
 import FormItem from "antd/lib/form/FormItem";
-import { DefaultOptions, ServiceMapOptions } from "./config";
+import {
+	Options,
+	ServiceMapOptions,
+	DefaultOptionsBasedOnRoute,
+} from "./config";
 import { DateTimeRangeType } from "../../../store/actions";
 import { METRICS_PAGE_QUERY_PARAM } from "Src/constants/query";
 import { LOCAL_STORAGE } from "Src/constants/localStorage";
 import moment from "moment";
-const { Option } = Select;
+const { Option } = DefaultSelect;
 
 const DateTimeWrapper = styled.div`
 	margin-top: 20px;
 	justify-content: flex-end !important;
 `;
-
+const Select = styled(DefaultSelect)`
+	width: 150px;
+`;
 interface DateTimeSelectorProps extends RouteComponentProps<any> {
 	currentpath?: string;
 	updateTimeInterval: Function;
@@ -34,8 +40,12 @@ This components is mounted all the time. Use event listener to track changes.
 const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 	const location = useLocation();
 	const options =
-		location.pathname === ROUTES.SERVICE_MAP ? ServiceMapOptions : DefaultOptions;
+		location.pathname === ROUTES.SERVICE_MAP ? ServiceMapOptions : Options;
-	const defaultTime = options[0].value;
+	const defaultTime =
+		location.pathname === ROUTES.SERVICE_MAP ||
+		location.pathname === ROUTES.APPLICATION
+			? DefaultOptionsBasedOnRoute[location.pathname]
+			: DefaultOptionsBasedOnRoute.default;
 
 	const [customDTPickerVisible, setCustomDTPickerVisible] = useState(false);
 	const [timeInterval, setTimeInterval] = useState(defaultTime);
@@ -82,7 +92,7 @@ const _DateTimeSelector = (props: DateTimeSelectorProps) => {
 	useEffect(() => {
 		updateTimeOnQueryParamChange();
 		if (findIndex(options, (option) => option.value === timeInterval) === -1) {
-			setTimeInterval(options[0].value);
+			setTimeInterval(defaultTime);
 		}
 	}, [location]);
 

frontend/src/modules/Nav/TopNav/config.ts

@@ -1,14 +1,23 @@
-export const DefaultOptions = [
+import ROUTES from "Src/constants/routes";
-	{ value: "custom", label: "Custom" },
+
+export const Options = [
+	{ value: "5min", label: "Last 5 min" },
 	{ value: "15min", label: "Last 15 min" },
 	{ value: "30min", label: "Last 30 min" },
 	{ value: "1hr", label: "Last 1 hour" },
 	{ value: "6hr", label: "Last 6 hour" },
 	{ value: "1day", label: "Last 1 day" },
 	{ value: "1week", label: "Last 1 week" },
+	{ value: "custom", label: "Custom" },
 ];
 
 export const ServiceMapOptions = [
 	{ value: "1min", label: "Last 1 min" },
 	{ value: "5min", label: "Last 5 min" },
 ];
+
+export const DefaultOptionsBasedOnRoute = {
+	[ROUTES.SERVICE_MAP]: ServiceMapOptions[0].value,
+	[ROUTES.APPLICATION]: Options[0].value,
+	default: Options[2].value,
+};

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -11,6 +11,7 @@ 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";
 
@@ -90,7 +91,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 					fgRef.current.zoomToFit(100, 120);
 				}}
 				graphData={graphData}
-				nodeLabel="id"
+				nodeLabel={getTooltip}
 				linkAutoColorBy={(d) => d.target}
 				linkDirectionalParticles="value"
 				linkDirectionalParticleSpeed={(d) => d.value}
@@ -112,21 +113,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 				onNodeClick={(node) => {
 					const tooltip = document.querySelector(".graph-tooltip");
 					if (tooltip && node) {
-						tooltip.innerHTML = `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
+						tooltip.innerHTML = getTooltip(node);
-								<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
-								<div class="keyval">
-									<div class="key">P99 latency:</div>
-									<div class="val">${node.p99 / 1000000}ms</div>
-								</div>
-								<div class="keyval">
-									<div class="key">Request:</div>
-									<div class="val">${node.callRate}/sec</div>
-								</div>
-								<div class="keyval">
-									<div class="key">Error Rate:</div>
-									<div class="val">${node.errorRate}%</div>
-								</div>
-							</div>`;
 					}
 				}}
 				nodePointerAreaPaint={(node, color, ctx) => {

frontend/src/modules/Servicemap/utils.ts

@@ -83,4 +83,27 @@ export const getZoomPx = (): number => {
 	} else if (width > 2500) {
 		return 360;
 	}
+
+export const getTooltip = (node: {
+	p99: number;
+	errorRate: number;
+	callRate: number;
+	id: string;
+}) => {
+	return `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
+								<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
+								<div class="keyval">
+									<div class="key">P99 latency:</div>
+									<div class="val">${node.p99 / 1000000}ms</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Request:</div>
+									<div class="val">${node.callRate}/sec</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Error Rate:</div>
+									<div class="val">${node.errorRate}%</div>
+								</div>
+							</div>`;
+
 };