GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-13 20:05:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

BUG(FE): Fix application metrics (#379)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/container/MetricsApplication/Tabs/Application.tsx
View File

@ -3,6 +3,7 @@ import Graph from 'components/Graph';
import { METRICS_PAGE_QUERY_PARAM } from 'constants/query'; import { METRICS_PAGE_QUERY_PARAM } from 'constants/query';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import FullView from 'container/GridGraphLayout/Graph/FullView'; import FullView from 'container/GridGraphLayout/Graph/FullView';
import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
import { colors } from 'lib/getRandomColor'; import { colors } from 'lib/getRandomColor';
import history from 'lib/history'; import history from 'lib/history';
import React, { useRef } from 'react'; import React, { useRef } from 'react';
@ -117,7 +118,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
data={{ data={{
datasets: [ datasets: [
{ {
data: serviceOverview.map((e) => e.p99), data: serviceOverview.map((e) =>
parseFloat(convertToNanoSecondsToSecond(e.p99)),
),
borderColor: colors[0], borderColor: colors[0],
label: 'p99 Latency', label: 'p99 Latency',
showLine: true, showLine: true,
@ -126,7 +129,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
pointRadius: 1.5, pointRadius: 1.5,
}, },
{ {
data: serviceOverview.map((e) => e.p95), data: serviceOverview.map((e) =>
parseFloat(convertToNanoSecondsToSecond(e.p95)),
),
borderColor: colors[1], borderColor: colors[1],
label: 'p95 Latency', label: 'p95 Latency',
showLine: true, showLine: true,
@ -135,7 +140,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
pointRadius: 1.5, pointRadius: 1.5,
}, },
{ {
data: serviceOverview.map((e) => e.p50), data: serviceOverview.map((e) =>
parseFloat(convertToNanoSecondsToSecond(e.p50)),
),
borderColor: colors[2], borderColor: colors[2],
label: 'p50 Latency', label: 'p50 Latency',
showLine: true, showLine: true,
@ -145,7 +152,9 @@ const Application = ({ getWidget }: DashboardProps): JSX.Element => {
}, },
], ],
labels: serviceOverview.map((e) => { labels: serviceOverview.map((e) => {
return new Date(e.timestamp / 1000000); return new Date(
parseFloat(convertToNanoSecondsToSecond(e.timestamp)),
);
}), }),
}} }}
/> />

13
frontend/src/container/TraceCustomVisualization/TraceCustomGraph.tsx
View File

@ -1,6 +1,9 @@
import Graph from 'components/Graph'; import Graph from 'components/Graph';
import convertToNanoSecondsToSecond from 'lib/convertToNanoSecondsToSecond';
import { colors } from 'lib/getRandomColor'; import { colors } from 'lib/getRandomColor';
import React, { memo } from 'react'; import React, { memo } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { TraceReducer } from 'types/reducer/trace'; import { TraceReducer } from 'types/reducer/trace';
import { CustomGraphContainer } from './styles'; import { CustomGraphContainer } from './styles';
@ -8,6 +11,10 @@ import { CustomGraphContainer } from './styles';
const TraceCustomGraph = ({ const TraceCustomGraph = ({
spansAggregate, spansAggregate,
}: TraceCustomGraphProps): JSX.Element => { }: TraceCustomGraphProps): JSX.Element => {
const { selectedEntity } = useSelector<AppState, TraceReducer>(
(state) => state.trace,
);
return ( return (
<CustomGraphContainer> <CustomGraphContainer>
<Graph <Graph
@ -16,7 +23,11 @@ const TraceCustomGraph = ({
labels: spansAggregate.map((s) => new Date(s.timestamp / 1000000)), labels: spansAggregate.map((s) => new Date(s.timestamp / 1000000)),
datasets: [ datasets: [
{ {
data: spansAggregate.map((e) => e.value), data: spansAggregate.map((e) =>
selectedEntity === 'duration'
? parseFloat(convertToNanoSecondsToSecond(e.value))
: e.value,
),
borderColor: colors[0], borderColor: colors[0],
}, },
], ],