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
This commit is contained in:
pal-sig 2021-11-17 16:32:43 +05:30 committed by GitHub
parent f934f96dd8
commit 36e95332bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 5 deletions

View File

@ -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)),
);
}),
}}
/>

View File

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