From 36e95332bcfa48890f68e36ca6cb8ea41e909cce Mon Sep 17 00:00:00 2001
From: pal-sig <88981777+pal-sig@users.noreply.github.com>
Date: Wed, 17 Nov 2021 16:32:43 +0530
Subject: [PATCH] BUG(FE): Fix application metrics (#379)

* bug(UI): now correct label is shown to the user over  application metrics

* bug(UI): nano sec is converted when user select duration in trace custom filter
---
 .../MetricsApplication/Tabs/Application.tsx     | 17 +++++++++++++----
 .../TraceCustomGraph.tsx                        | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/container/MetricsApplication/Tabs/Application.tsx b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
index 054e866397..d31a12a8a7 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Application.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Application.tsx
@@ -3,6 +3,7 @@ import Graph from 'components/Graph';
 import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
 import ROUTES from 'constants/routes';
 import FullView from 'container/GridGraphLayout/Graph/FullView';
+import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
 import { colors } from 'lib/getRandomColor';
 import history from 'lib/history';
 import React, { useRef } from 'react';
@@ -117,7 +118,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 								data={{
 									datasets: [
 										{
-											data: serviceOverview.map((e) => e.p99),
+											data: serviceOverview.map((e) =>
+												parseFloat(convertToNanoSecondsToSecond(e.p99)),
+											),
 											borderColor: colors[0],
 											label: 'p99 Latency',
 											showLine: true,
@@ -126,7 +129,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 											pointRadius: 1.5,
 										},
 										{
-											data: serviceOverview.map((e) => e.p95),
+											data: serviceOverview.map((e) =>
+												parseFloat(convertToNanoSecondsToSecond(e.p95)),
+											),
 											borderColor: colors[1],
 											label: 'p95 Latency',
 											showLine: true,
@@ -135,7 +140,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 											pointRadius: 1.5,
 										},
 										{
-											data: serviceOverview.map((e) => e.p50),
+											data: serviceOverview.map((e) =>
+												parseFloat(convertToNanoSecondsToSecond(e.p50)),
+											),
 											borderColor: colors[2],
 											label: 'p50 Latency',
 											showLine: true,
@@ -145,7 +152,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
 										},
 									],
 									labels: serviceOverview.map((e) => {
-										return new Date(e.timestamp / 1000000);
+										return new Date(
+											parseFloat(convertToNanoSecondsToSecond(e.timestamp)),
+										);
 									}),
 								}}
 							/>
diff --git a/frontend/src/container/TraceCustomVisualization/TraceCustomGraph.tsx b/frontend/src/container/TraceCustomVisualization/TraceCustomGraph.tsx
index a651bd6cec..9f9fd79746 100644
--- a/frontend/src/container/TraceCustomVisualization/TraceCustomGraph.tsx
+++ b/frontend/src/container/TraceCustomVisualization/TraceCustomGraph.tsx
@@ -1,6 +1,9 @@
 import Graph from 'components/Graph';
+import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
 import { colors } from 'lib/getRandomColor';
 import React, { memo } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { TraceReducer } from 'types/reducer/trace';
 
 import { CustomGraphContainer } from './styles';
@@ -8,6 +11,10 @@ import { CustomGraphContainer } from './styles';
 const TraceCustomGraph = ({
 	spansAggregate,
 }: TraceCustomGraphProps): JSX.Element => {
+	const { selectedEntity } = useSelector<AppState, TraceReducer>(
+		(state) => state.trace,
+	);
+
 	return (
 		<CustomGraphContainer>
 			<Graph
@@ -16,7 +23,11 @@ const TraceCustomGraph = ({
 					labels: spansAggregate.map((s) => new Date(s.timestamp / 1000000)),
 					datasets: [
 						{
-							data: spansAggregate.map((e) => e.value),
+							data: spansAggregate.map((e) =>
+								selectedEntity === 'duration'
+									? parseFloat(convertToNanoSecondsToSecond(e.value))
+									: e.value,
+							),
 							borderColor: colors[0],
 						},
 					],