From d4024d1af904d54bb6a88d34e194c215c6d15cb9 Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Wed, 2 Aug 2023 19:23:36 +0530 Subject: [PATCH] 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 Co-authored-by: Palash Gupta Co-authored-by: Srikanth Chekuri --- .../src/components/TableRenderer/utils.ts | 22 +++++ .../Columns/BaseColumnOptions.ts | 36 +++++++ .../Columns/ServiceColumn.ts | 96 ++++++++++--------- 3 files changed, 108 insertions(+), 46 deletions(-) create mode 100644 frontend/src/components/TableRenderer/utils.ts create mode 100644 frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts diff --git a/frontend/src/components/TableRenderer/utils.ts b/frontend/src/components/TableRenderer/utils.ts new file mode 100644 index 0000000000..1e3ccc3cd2 --- /dev/null +++ b/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 = ({ + baseColumnOptions, + dynamicColumnOption, +}: GeneratorResizeTableColumnsProp): ColumnsType => + baseColumnOptions.map((config: ColumnType) => { + const { key } = config; + const extraConfig = dynamicColumnOption.find( + (dynamicConfigItem) => dynamicConfigItem.key === key, + ); + return { + ...config, + ...extraConfig?.columnOption, + }; + }); + +interface GeneratorResizeTableColumnsProp { + baseColumnOptions: ColumnsType; + dynamicColumnOption: { key: string; columnOption: ColumnType }[]; +} diff --git a/frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts b/frontend/src/container/ServiceApplication/Columns/BaseColumnOptions.ts new file mode 100644 index 0000000000..7978073bab --- /dev/null +++ b/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 = [ + { + 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, + }, +]; diff --git a/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts b/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts index b290e8409c..b0487b8915 100644 --- a/frontend/src/container/ServiceApplication/Columns/ServiceColumn.ts +++ b/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 { - ColumnKey, - ColumnTitle, - ColumnWidth, - SORTING_ORDER, -} from './ColumnContants'; +import { baseColumnOptions } from './BaseColumnOptions'; +import { ColumnKey, ColumnTitle } from './ColumnContants'; import { getColumnSearchProps } from './GetColumnSearchProps'; export const getColumns = ( search: string, isMetricData: boolean, -): ColumnsType => [ - { - title: ColumnTitle[ColumnKey.Application], - dataIndex: ColumnKey.Application, - width: ColumnWidth.Application, - key: ColumnKey.Application, - ...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); +): ColumnsType => { + const dynamicColumnOption: { + key: string; + columnOption: ColumnType; + }[] = [ + { + key: ColumnKey.Application, + columnOption: { + ...getColumnSearchProps('serviceName', search), + }, }, - }, - { - title: ColumnTitle[ColumnKey.ErrorRate], - dataIndex: ColumnKey.ErrorRate, - key: ColumnKey.ErrorRate, - width: 150, - sorter: (a: ServicesList, b: ServicesList): number => - a.errorRate - b.errorRate, - render: (value: number): string => value.toFixed(2), - }, - { - title: ColumnTitle[ColumnKey.Operations], - dataIndex: ColumnKey.Operations, - key: ColumnKey.Operations, - width: ColumnWidth.Operations, - sorter: (a: ServicesList, b: ServicesList): number => a.callRate - b.callRate, - render: (value: number): string => value.toFixed(2), - }, -]; + { + key: ColumnKey.P99, + columnOption: { + title: `${ColumnTitle[ColumnKey.P99]}${ + isMetricData ? ' (in ns)' : ' (in ms)' + }`, + 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.ErrorRate, + columnOption: { + 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({ + baseColumnOptions, + dynamicColumnOption, + }); +};