feat: error rate is added (#2638)

* feat: error rate is added

* fix: build is fixed

* chore: added the percentage sign

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -39,7 +39,7 @@ function TopOperationsTable(props: TopOperationsTableProps): JSX.Element {
 		);
 	};
 
-	const columns: ColumnsType<DataProps> = [
+	const columns: ColumnsType<TopOperationList> = [
 		{
 			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;

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[];

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[];

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[];