Fix(FE):trace page (#356)

* chore: Router provider is removed

* update: localstorage set get is added

* update: AppLayout is updated

* fix: adapter type is fixed

* fix: Metric and metric application is now fixed

* fix: Metrics page application is updated

* fix: Tracepage is made fix

* fix: app layout is updated

* fix: global Time reducer is updated

* refactor: getService api is added

* update: metrics reducer is added

* update: service list is fixed

* fix: Metrics page is updated

* fix: api for the metrics application are done

* fix: metrics reducer is updated

* fix: metrics application is updated

* fix: content layout shift is removed

* fix: Metric application is updated

* fix: metrics application is updated

* fix: Metrics application is updated

* fix: Application tab is updated

* chore: graph is updated

* chore: Metrics application is updated

* fix: chart x-axis is label is now fixed

* fix: application tab is updated

* fix: Top end points is added and re-redering in stopped

* fix: fixed the edge case when user changes the global time then updated data is fetched

* fix: Settings page is updated

* chore: AppLayout is updated

* chore: AppLayout is updated

* chore: applayout is updated

* chore: changed default loading is true in the global time reducer

* chore: Global Time option is fixed

* chore: Signup and Applayout is updated

* chore: Button text is updated

* chore: Button in the metrics application is updated

* chore: dashboard menu item position in the side nav is updated

* fix: Logo is now redirecting to the Application page

* fix: Application page is updated

* fix: AppLayout is updated

* fix: starting and ending time is fixed

* fix: Metrics Application is updated to the previous chart data

* update: getDateArrayFromStartAndEnd function is added

* update: Empty graph data is added

* fix: External Call and DB Call Tabs graph are updated when there is no data a empty data is rendered

* fix: onboarding modal condition is fixed and new calling api every 50000 ms to fetch the data

* fix: onBoarding condition modal is updated

* fix: onBoarding condition modal is updated

* fix: onBoarding condition modal is updated

* fix: Application chart re rendering issue is fixed

* fix: Application page is changed when we change the global time

* chore: step size is increased from 30 to 60

* chore: build is now fixed

* chore: metrics application page is updated

* fix: empty graph is now fixed

* fix: application metrics graph is now fixed

* update: seperate api for trace page are made

* fix: /trace page is updated

* chore: Filter of the Trace page is updated

* chore: initial trace page is updated

* fix: changing the filters,fetches the updated values from the backend

* chore: Trace page is updated

* update: trace page is updated

* fix: trace page is updated

* Refresh Text is updated

* update: Trace page is updated

* update:header is updated

* update: Trace page is updated

* update: Trace page is updated

* update: Trace page is updated

* update: Trace page is updated

* update: why did you re render is added

* update: trace page is updated

* update: trace page is updated

* update: Loading is updated

* update: start and end time is updated

* fix: metrics and metrics page redudant calls is reduced

* fix: Metrics Application page reducer is reset on the unmount

* fix: Trace page reducer is reset when the page is unmounted

* fix: Custom Visualizations is now fetching only one api to get the details

* fix: Trace page is updated

* fix: composeEnhancers is updated

* fix: metrics application is updated

* chore: webpack eslint fixes are updated

* chore: some of the type definition is added

* fix(UI): Trace page bug is resolved

* chore(UI): if length of the selected tags is zero updated the value over the form

* chore(UI): check for the no spans filter is updated

frontend/package.json

@@ -145,6 +145,7 @@
 		"@types/webpack-dev-server": "^4.3.0",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
 		"@typescript-eslint/parser": "^4.28.2",
+		"@welldone-software/why-did-you-render": "^6.2.1",
 		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "^9.0.0",

frontend/src/AppRoutes/pageComponents.ts

@@ -25,6 +25,10 @@ export const TraceDetailPage = Loadable(
 		),
 );
 
+export const TraceDetailPages = Loadable(
+	() => import(/* webpackChunkName: "TraceDetailPage" */ 'pages/TraceDetails'),
+);
+
 export const TraceGraphPage = Loadable(
 	() =>
 		import(

frontend/src/AppRoutes/routes.ts

@@ -12,6 +12,7 @@ import {
 	SettingsPage,
 	SignupPage,
 	TraceDetailPage,
+	TraceDetailPages,
 	TraceGraphPage,
 	UsageExplorerPage,
 } from './pageComponents';
@@ -77,6 +78,11 @@ const routes: AppRoutes[] = [
 		exact: true,
 		component: DashboardWidget,
 	},
+	{
+		path: ROUTES.TRACE,
+		exact: true,
+		component: TraceDetailPages,
+	},
 ];
 
 interface AppRoutes {

frontend/src/api/trace/getServiceList.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps } from 'types/api/trace/getServiceList';
+
+const getServiceList = async (): Promise<
+	SuccessResponse<PayloadProps> | ErrorResponse
+> => {
+	try {
+		const response = await axios.get('/services/list');
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getServiceList;

frontend/src/api/trace/getServiceOperation.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getServiceOperation';
+
+const getServiceOperation = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`/service/${props.service}/operations`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getServiceOperation;

frontend/src/api/trace/getSpan.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getSpans';
+
+const getSpans = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/spans?&start=${props.start}&end=${props.end}&kind=${props.kind}&lookback=${props.lookback}&maxDuration=${props.maxDuration}&minDuration=${props.minDuration}&operation=${props.operation}&service=${props.service}&limit=${props.limit}&tags=${props.tags}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getSpans;

frontend/src/api/trace/getSpanAggregate.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getSpanAggregate';
+
+const getSpansAggregate = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/spans/aggregates?start=${props.start}&end=${props.end}&aggregation_option=${props.aggregation_option}&dimension=${props.dimension}&kind=${props.kind}&maxDuration=${props.maxDuration}&minDuration=${props.minDuration}&operation=${props.operation}&service=${props.service}&step=${props.step}&tags=${props.tags}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getSpansAggregate;

frontend/src/api/trace/getTags.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getTags';
+
+const getTags = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`/tags?service=${props.service}`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTags;

frontend/src/constants/query.ts

@@ -6,4 +6,9 @@ export enum METRICS_PAGE_QUERY_PARAM {
 	error = 'error',
 	operation = 'operation',
 	kind = 'kind',
+	latencyMax = 'latencyMax',
+	latencyMin = 'latencyMin',
+	selectedTags = 'selectedTags',
+	aggregationOption = 'aggregationOption',
+	entity = 'entity',
 }

frontend/src/constants/routes.ts

@@ -3,6 +3,7 @@ const ROUTES = {
 	SERVICE_METRICS: '/application/:servicename',
 	SERVICE_MAP: '/service-map',
 	TRACES: '/traces',
+	TRACE: '/trace',
 	TRACE_GRAPH: '/traces/:id',
 	SETTINGS: '/settings',
 	INSTRUMENTATION: '/add-instrumentation',

frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx

@@ -13,7 +13,7 @@ import {
 import getChartData from 'lib/getChartData';
 import GetMaxMinTime from 'lib/getMaxMinTime';
 import getStartAndEndTime from 'lib/getStartAndEndTime';
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalTime } from 'types/actions/globalTime';
@@ -219,15 +219,4 @@ interface FullViewProps {
 	noDataGraph?: boolean;
 }
 
-export default memo(FullView, (prev, next) => {
-	if (
-		next.widget.query.length !== prev.widget.query.length &&
-		next.widget.query.every((value, index) => {
-			return value === prev.widget.query[index];
-		})
-	) {
-		return false;
-	}
-
-	return true;
-});
+export default FullView;

frontend/src/container/Header/DateTimeSelection/Refresh.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+
+import { RefreshTextContainer, Typography } from './styles';
+
+const RefreshText = ({
+	onLastRefreshHandler,
+}: RefreshTextProps): JSX.Element => {
+	const [refreshText, setRefreshText] = useState<string>('');
+
+	// this is to update the refresh text
+	useEffect(() => {
+		const interval = setInterval(() => {
+			const text = onLastRefreshHandler();
+			if (refreshText !== text) {
+				setRefreshText(text);
+			}
+		}, 2000);
+		return (): void => {
+			clearInterval(interval);
+		};
+	}, [onLastRefreshHandler, refreshText]);
+
+	return (
+		<RefreshTextContainer>
+			<Typography>{refreshText}</Typography>
+		</RefreshTextContainer>
+	);
+};
+
+interface RefreshTextProps {
+	onLastRefreshHandler: () => string;
+}
+
+export default RefreshText;