Refactor: Created utility for generating columns for ResizeTable (#3250)

* refactor: remove the dependency of services using redux

* refactor: seperated columns and unit test case

* refactor: move the constant to other file

* refactor: updated test case

* refactor: removed the duplicate enum

* fix: removed the inline function

* fix: removed the inline function

* refactor: removed the magic string

* fix: change the name from matrics to metrics

* fix: one on one mapping of props

* refactor: created a hook to getting services through api call

* fix: linter error

* refactor: renamed the file according to functionality

* refactor: renamed more file according to functionality

* refactor: generic querybuilderWithFormula

* refactor: added generic datasource

* refactor: dynamic disabled in getQueryBuilderQueriesWithFormula

* refactor: generic legend for building query with formulas

* feat: added new TopOperationMetrics component for key operation

* refactor: added feature flag for key operation

* refactor: shifted types and fixed typos

* refactor: separated types and renamed file

* refactor: one on one mapping

* refactor: removed unwanted interfaces and renamed files

* refactor: separated types

* chore: done with basic struction and moving up the files

* chore: moved some files to proper places

* feat: added the support for metrics in service layer

* refactor: shifted SkipOnBoardingModal logic to parent

* refactor: created object to send as an augument for getQueryRangeRequestData

* refactor: changes from columns to getColumns

* refactor: updated the utils function getServiceListFromQuery

* refactor: added memo to getQueryRangeRequestData in serive metrics application

* refactor: separated constants from ServiceMetricsQuery.ts

* refactor: separated mock data and updated test case

* refactor: added useMemo on getColumns

* refactor: made the use of useErrorNotification for show error

* refactor: handled the error case

* refactor: one on one mapping

* chore: useGetQueriesRange hooks type is updated

* refactor: review changes

* chore: update type for columnconstants

* chore: reverted back the changes lost in merge conflicts

* refactor: created a separate utils generateResizeTableColumns

* refactor: separated base config and dynamic config for table columns

* chore: fix names of variable

* refactor: separated base config to different file

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

frontend/src/components/TableRenderer/utils.ts

@@ -0,0 +1,22 @@
+import { ColumnType } from 'antd/es/table';
+import { ColumnsType } from 'antd/lib/table';
+
+export const generatorResizeTableColumns = <T>({
+	baseColumnOptions,
+	dynamicColumnOption,
+}: GeneratorResizeTableColumnsProp<T>): ColumnsType<T> =>
+	baseColumnOptions.map((config: ColumnType<T>) => {
+		const { key } = config;
+		const extraConfig = dynamicColumnOption.find(
+			(dynamicConfigItem) => dynamicConfigItem.key === key,
+		);
+		return {
+			...config,
+			...extraConfig?.columnOption,
+		};
+	});
+
+interface GeneratorResizeTableColumnsProp<T> {
+	baseColumnOptions: ColumnsType<T>;
+	dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];
+}

frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts

@@ -0,0 +1,36 @@
+import { ColumnsType } from 'antd/es/table';
+import { ServicesList } from 'types/api/metrics/getService';
+
+import {
+	ColumnKey,
+	ColumnTitle,
+	ColumnWidth,
+	SORTING_ORDER,
+} from './ColumnContants';
+
+export const baseColumnOptions: ColumnsType<ServicesList> = [
+	{
+		title: ColumnTitle[ColumnKey.Application],
+		dataIndex: ColumnKey.Application,
+		width: ColumnWidth.Application,
+		key: ColumnKey.Application,
+	},
+	{
+		dataIndex: ColumnKey.P99,
+		key: ColumnKey.P99,
+		width: ColumnWidth.P99,
+		defaultSortOrder: SORTING_ORDER,
+	},
+	{
+		title: ColumnTitle[ColumnKey.ErrorRate],
+		dataIndex: ColumnKey.ErrorRate,
+		key: ColumnKey.ErrorRate,
+		width: 150,
+	},
+	{
+		title: ColumnTitle[ColumnKey.Operations],
+		dataIndex: ColumnKey.Operations,
+		key: ColumnKey.Operations,
+		width: ColumnWidth.Operations,
+	},
+];

frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts

@@ -1,54 +1,58 @@
-import type { ColumnsType } from 'antd/es/table';
+import type { ColumnsType, ColumnType } from 'antd/es/table';
+import { generatorResizeTableColumns } from 'components/TableRenderer/utils';
 import { ServicesList } from 'types/api/metrics/getService';
 
-import {
+import { baseColumnOptions } from './BaseColumnOptions';
-	ColumnKey,
+import { ColumnKey, ColumnTitle } from './ColumnContants';
-	ColumnTitle,
-	ColumnWidth,
-	SORTING_ORDER,
-} from './ColumnContants';
 import { getColumnSearchProps } from './GetColumnSearchProps';
 
 export const getColumns = (
 	search: string,
 	isMetricData: boolean,
-): ColumnsType<ServicesList> => [
+): ColumnsType<ServicesList> => {
-	{
+	const dynamicColumnOption: {
-		title: ColumnTitle[ColumnKey.Application],
+		key: string;
-		dataIndex: ColumnKey.Application,
+		columnOption: ColumnType<ServicesList>;
-		width: ColumnWidth.Application,
+	}[] = [
-		key: ColumnKey.Application,
+		{
-		...getColumnSearchProps('serviceName', search),
+			key: ColumnKey.Application,
-	},
+			columnOption: {
-	{
+				...getColumnSearchProps('serviceName', search),
-		title: `${ColumnTitle[ColumnKey.P99]}${
+			},
-			isMetricData ? ' (in ns)' : ' (in ms)'
-		}`,
-		dataIndex: ColumnKey.P99,
-		key: ColumnKey.P99,
-		width: ColumnWidth.P99,
-		defaultSortOrder: SORTING_ORDER,
-		sorter: (a: ServicesList, b: ServicesList): number => a.p99 - b.p99,
-		render: (value: number): string => {
-			if (Number.isNaN(value)) return '0.00';
-			return isMetricData ? value.toFixed(2) : (value / 1000000).toFixed(2);
 		},
-	},
+		{
-	{
+			key: ColumnKey.P99,
-		title: ColumnTitle[ColumnKey.ErrorRate],
+			columnOption: {
-		dataIndex: ColumnKey.ErrorRate,
+				title: `${ColumnTitle[ColumnKey.P99]}${
-		key: ColumnKey.ErrorRate,
+					isMetricData ? ' (in ns)' : ' (in ms)'
-		width: 150,
+				}`,
-		sorter: (a: ServicesList, b: ServicesList): number =>
+				sorter: (a: ServicesList, b: ServicesList): number => a.p99 - b.p99,
-			a.errorRate - b.errorRate,
+				render: (value: number): string => {
-		render: (value: number): string => value.toFixed(2),
+					if (Number.isNaN(value)) return '0.00';
-	},
+					return isMetricData ? value.toFixed(2) : (value / 1000000).toFixed(2);
-	{
+				},
-		title: ColumnTitle[ColumnKey.Operations],
+			},
-		dataIndex: ColumnKey.Operations,
+		},
-		key: ColumnKey.Operations,
+		{
-		width: ColumnWidth.Operations,
+			key: ColumnKey.ErrorRate,
-		sorter: (a: ServicesList, b: ServicesList): number => a.callRate - b.callRate,
+			columnOption: {
-		render: (value: number): string => value.toFixed(2),
+				sorter: (a: ServicesList, b: ServicesList): number =>
-	},
+					a.errorRate - b.errorRate,
-];
+				render: (value: number): string => value.toFixed(2),
+			},
+		},
+		{
+			key: ColumnKey.Operations,
+			columnOption: {
+				sorter: (a: ServicesList, b: ServicesList): number =>
+					a.callRate - b.callRate,
+				render: (value: number): string => value.toFixed(2),
+			},
+		},
+	];
+
+	return generatorResizeTableColumns<ServicesList>({
+		baseColumnOptions,
+		dynamicColumnOption,
+	});
+};