From 93220ba6c253656a58f77e03f81e28aac5974deb Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Thu, 27 Apr 2023 17:17:15 +0530 Subject: [PATCH] feat: error rate is added (#2638) * feat: error rate is added * fix: build is fixed * chore: added the percentage sign --- .../MetricsApplication/TopOperationsTable.tsx | 27 ++++++++++++------- frontend/src/types/actions/metrics.ts | 4 +-- .../src/types/api/metrics/getTopOperations.ts | 11 ++------ frontend/src/types/reducer/metrics.ts | 4 +-- 4 files changed, 24 insertions(+), 22 deletions(-) diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx index d47bc30c94..3fdfdc84d2 100644 --- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx +++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx @@ -39,7 +39,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { ); }; - const columns: ColumnsType = [ + const columns: ColumnsType = [ { title: 'Name', dataIndex: 'name', @@ -58,7 +58,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { dataIndex: 'p50', key: 'p50', width: 50, - sorter: (a: DataProps, b: DataProps): number => a.p50 - b.p50, + sorter: (a: TopOperationList, b: TopOperationList): number => a.p50 - b.p50, render: (value: number): string => (value / 1000000).toFixed(2), }, { @@ -66,7 +66,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { dataIndex: 'p95', key: 'p95', width: 50, - sorter: (a: DataProps, b: DataProps): number => a.p95 - b.p95, + sorter: (a: TopOperationList, b: TopOperationList): number => a.p95 - b.p95, render: (value: number): string => (value / 1000000).toFixed(2), }, { @@ -74,7 +74,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { dataIndex: 'p99', key: 'p99', width: 50, - sorter: (a: DataProps, b: DataProps): number => a.p99 - b.p99, + sorter: (a: TopOperationList, b: TopOperationList): number => a.p99 - b.p99, render: (value: number): string => (value / 1000000).toFixed(2), }, { @@ -82,9 +82,19 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { dataIndex: 'numCalls', key: 'numCalls', width: 50, - sorter: (a: TopOperationListItem, b: TopOperationListItem): number => + sorter: (a: TopOperationList, b: TopOperationList): number => a.numCalls - b.numCalls, }, + { + title: 'Error Rate', + dataIndex: 'errorCount', + key: 'errorCount', + width: 50, + sorter: (a: TopOperationList, b: TopOperationList): number => + a.errorCount - b.errorCount, + render: (value: number, record: TopOperationList): string => + `${((value / record.numCalls) * 100).toFixed(2)} %`, + }, ]; return ( @@ -99,18 +109,17 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element { ); } -interface TopOperationListItem { +export interface TopOperationList { p50: number; p95: number; p99: number; numCalls: number; name: string; + errorCount: number; } -type DataProps = TopOperationListItem; - interface TopOperationsTableProps { - data: TopOperationListItem[]; + data: TopOperationList[]; } export default TopOperationsTable; diff --git a/frontend/src/types/actions/metrics.ts b/frontend/src/types/actions/metrics.ts index c350e0e265..5cf2a54f41 100644 --- a/frontend/src/types/actions/metrics.ts +++ b/frontend/src/types/actions/metrics.ts @@ -1,6 +1,6 @@ +import { TopOperationList } from 'container/MetricsApplication/TopOperationsTable'; import { ServicesList } from 'types/api/metrics/getService'; import { ServiceOverview } from 'types/api/metrics/getServiceOverview'; -import { TopOperations } from 'types/api/metrics/getTopOperations'; export const GET_SERVICE_LIST_SUCCESS = 'GET_SERVICE_LIST_SUCCESS'; export const GET_SERVICE_LIST_LOADING_START = 'GET_SERVICE_LIST_LOADING_START'; @@ -32,7 +32,7 @@ export interface GetServiceListError { export interface GetInitialApplicationData { type: typeof GET_INTIAL_APPLICATION_DATA; payload: { - topOperations: TopOperations[]; + topOperations: TopOperationList[]; // dbOverView: DBOverView[]; // externalService: ExternalService[]; // externalAverageDuration: ExternalAverageDuration[]; diff --git a/frontend/src/types/api/metrics/getTopOperations.ts b/frontend/src/types/api/metrics/getTopOperations.ts index f30c01251f..050a2e7399 100644 --- a/frontend/src/types/api/metrics/getTopOperations.ts +++ b/frontend/src/types/api/metrics/getTopOperations.ts @@ -1,13 +1,6 @@ +import { TopOperationList } from 'container/MetricsApplication/TopOperationsTable'; import { Tags } from 'types/reducer/trace'; -export interface TopOperations { - name: string; - numCalls: number; - p50: number; - p95: number; - p99: number; -} - export interface Props { service: string; start: number; @@ -15,4 +8,4 @@ export interface Props { selectedTags: Tags[]; } -export type PayloadProps = TopOperations[]; +export type PayloadProps = TopOperationList[]; diff --git a/frontend/src/types/reducer/metrics.ts b/frontend/src/types/reducer/metrics.ts index 5a7554a725..342db0ffb9 100644 --- a/frontend/src/types/reducer/metrics.ts +++ b/frontend/src/types/reducer/metrics.ts @@ -1,10 +1,10 @@ +import { TopOperationList } from 'container/MetricsApplication/TopOperationsTable'; import { DBOverView } from 'types/api/metrics/getDBOverview'; import { ExternalAverageDuration } from 'types/api/metrics/getExternalAverageDuration'; import { ExternalError } from 'types/api/metrics/getExternalError'; import { ExternalService } from 'types/api/metrics/getExternalService'; import { ServicesList } from 'types/api/metrics/getService'; import { ServiceOverview } from 'types/api/metrics/getServiceOverview'; -import { TopOperations } from 'types/api/metrics/getTopOperations'; interface MetricReducer { services: ServicesList[]; @@ -14,7 +14,7 @@ interface MetricReducer { errorMessage: string; dbOverView: DBOverView[]; externalService: ExternalService[]; - topOperations: TopOperations[]; + topOperations: TopOperationList[]; externalAverageDuration: ExternalAverageDuration[]; externalError: ExternalError[]; serviceOverview: ServiceOverview[];