From f779c489fc1655f805df308b53b915924888f08c Mon Sep 17 00:00:00 2001 From: Keita Nonaka Date: Wed, 16 Oct 2024 11:31:47 -0700 Subject: [PATCH] fix: support multi-type in flat run table --- webui/react/package-lock.json | 8 +++---- webui/react/package.json | 2 +- webui/react/src/pages/FlatRuns/FlatRuns.tsx | 26 ++++++++++++++------- webui/react/src/utils/flatRun.ts | 8 +++++++ 4 files changed, 31 insertions(+), 13 deletions(-) diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json index e772439ec2d0..e8bfe4d1eaee 100644 --- a/webui/react/package-lock.json +++ b/webui/react/package-lock.json @@ -18,7 +18,7 @@ "fp-ts": "^2.16.5", "fuse.js": "^7.0.0", "hermes-parallel-coordinates": "^0.6.17", - "hew": "npm:@hpe.com/hew@^0.6.50", + "hew": "npm:@hpe.com/hew@^0.6.51", "humanize-duration": "^3.28.0", "immutable": "^4.3.0", "io-ts": "^2.2.21", @@ -7796,9 +7796,9 @@ }, "node_modules/hew": { "name": "@hpe.com/hew", - "version": "0.6.50", - "resolved": "https://registry.npmjs.org/@hpe.com/hew/-/hew-0.6.50.tgz", - "integrity": "sha512-Dfg9V+pOL2V3g1jQqkXl60B0zflJQ/bfIWUBTnsXBM4vm7XL5SNwQMFvw5Pc8GHVJLER50XkHBaVsDjpEiZAlw==", + "version": "0.6.51", + "resolved": "https://registry.npmjs.org/@hpe.com/hew/-/hew-0.6.51.tgz", + "integrity": "sha512-LTJVCVMDAzQIHS3pFOXDIXQsuRk6KrhJsbKv7gwz0324rvMrna976KH2zwb1QeGhjfHMwD8WFKgiYGh08DSMOQ==", "dependencies": { "@ant-design/icons": "^5.0.1", "@codemirror/lang-json": "^6.0.1", diff --git a/webui/react/package.json b/webui/react/package.json index e190e2c6f712..09fbedbb947d 100644 --- a/webui/react/package.json +++ b/webui/react/package.json @@ -42,7 +42,7 @@ "fp-ts": "^2.16.5", "fuse.js": "^7.0.0", "hermes-parallel-coordinates": "^0.6.17", - "hew": "npm:@hpe.com/hew@^0.6.50", + "hew": "npm:@hpe.com/hew@^0.6.51", "humanize-duration": "^3.28.0", "immutable": "^4.3.0", "io-ts": "^2.2.21", diff --git a/webui/react/src/pages/FlatRuns/FlatRuns.tsx b/webui/react/src/pages/FlatRuns/FlatRuns.tsx index 361ee1c8cece..848dc940ef9d 100644 --- a/webui/react/src/pages/FlatRuns/FlatRuns.tsx +++ b/webui/react/src/pages/FlatRuns/FlatRuns.tsx @@ -84,6 +84,7 @@ import { SelectionType as SelectionState, } from 'types'; import handleError from 'utils/error'; +import { COLUMN_SEPARATOR } from 'utils/flatRun'; import { eagerSubscribe } from 'utils/observable'; import { pluralizer } from 'utils/string'; @@ -320,7 +321,14 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { const projectColumnsMap: Loadable> = Loadable.map( projectColumns, (columns) => { - return columns.reduce((acc, col) => ({ ...acc, [col.column]: col }), {}); + return columns.reduce( + (acc, col) => ({ + ...acc, + [`${col.type}${COLUMN_SEPARATOR}${col.column}`]: col, + [col.column]: col, + }), + {}, + ); }, ); const columnDefs = getColumnDefs({ @@ -388,6 +396,8 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { default: break; } + + const columnKey = `${currentColumn.type}${COLUMN_SEPARATOR}${currentColumn.column}`; switch (currentColumn.type) { case V1ColumnType.NUMBER: { const heatmap = projectHeatmap @@ -398,7 +408,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column) ) { - columnDefs[currentColumn.column] = defaultNumberColumn( + columnDefs[columnKey] = defaultNumberColumn( currentColumn.column, currentColumn.displayName || currentColumn.column, settings.columnWidths[currentColumn.column] ?? @@ -411,7 +421,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { }, ); } else { - columnDefs[currentColumn.column] = defaultNumberColumn( + columnDefs[columnKey] = defaultNumberColumn( currentColumn.column, currentColumn.displayName || currentColumn.column, settings.columnWidths[currentColumn.column] ?? @@ -423,7 +433,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { break; } case V1ColumnType.DATE: - columnDefs[currentColumn.column] = defaultDateColumn( + columnDefs[columnKey] = defaultDateColumn( currentColumn.column, currentColumn.displayName || currentColumn.column, settings.columnWidths[currentColumn.column] ?? @@ -433,7 +443,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { ); break; case V1ColumnType.ARRAY: - columnDefs[currentColumn.column] = defaultArrayColumn( + columnDefs[columnKey] = defaultArrayColumn( currentColumn.column, currentColumn.displayName || currentColumn.column, settings.columnWidths[currentColumn.column] ?? @@ -445,7 +455,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { case V1ColumnType.TEXT: case V1ColumnType.UNSPECIFIED: default: - columnDefs[currentColumn.column] = defaultTextColumn( + columnDefs[columnKey] = defaultTextColumn( currentColumn.column, currentColumn.displayName || currentColumn.column, settings.columnWidths[currentColumn.column] ?? @@ -459,7 +469,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { .getOrElse([]) .find((h) => h.metricsName === currentColumn.column); - columnDefs[currentColumn.column] = searcherMetricsValColumn( + columnDefs[columnKey] = searcherMetricsValColumn( settings.columnWidths[currentColumn.column], heatmap && settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column) ? { @@ -469,7 +479,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { : undefined, ); } - return columnDefs[currentColumn.column]; + return columnDefs[columnKey]; }) .flatMap((col) => (col ? [col] : [])); return gridColumns; diff --git a/webui/react/src/utils/flatRun.ts b/webui/react/src/utils/flatRun.ts index d16feb8e1fcb..bf2d5bd37227 100644 --- a/webui/react/src/utils/flatRun.ts +++ b/webui/react/src/utils/flatRun.ts @@ -6,6 +6,7 @@ import { terminalRunStates, } from 'constants/states'; import { PermissionsHook } from 'hooks/usePermissions'; +import { V1ColumnType } from 'services/api-ts-sdk'; import { FlatRun, FlatRunAction, RunState, SelectionType } from 'types'; import { combine } from './filterFormSet'; @@ -116,3 +117,10 @@ export const getIdsFilter = ( filterGroup, }; }; + +export const removeColumnTypePrefix = (columnName: V1ColumnType): string => { + return columnName.replace('COLUMN_TYPE_', ''); +}; + +/// wanna know why this separator is used? see https://hpe-aiatscale.atlassian.net/browse/ET-785 +export const COLUMN_SEPARATOR = '␟';