From 0dcb99833350c6515b53a981224a0534f0b79607 Mon Sep 17 00:00:00 2001 From: Vladimir Chernitsyn Date: Thu, 19 Sep 2024 15:59:25 +0200 Subject: [PATCH] feat(OperationJobsTable): add TaskName column in table [#828] --- .../ElementsTable/ElementsTableHeader.tsx | 17 +++++++++------ .../ElementsTable/ElementsTableRow.js | 8 +++++++ .../OperationJobsTable/OperationJobsTable.js | 21 ++++++++++++++++++- .../OperationJobsTable.scss | 4 ++++ 4 files changed, 43 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/ui/components/ElementsTable/ElementsTableHeader.tsx b/packages/ui/src/ui/components/ElementsTable/ElementsTableHeader.tsx index 5e302e4568..2637106fbf 100644 --- a/packages/ui/src/ui/components/ElementsTable/ElementsTableHeader.tsx +++ b/packages/ui/src/ui/components/ElementsTable/ElementsTableHeader.tsx @@ -56,6 +56,7 @@ interface ColumnsItem { items: Array<{ sort?: boolean; sortWithUndefined?: boolean; + hidden?: boolean; }>; sets: unknown; mode: string; @@ -78,6 +79,7 @@ interface ColumnGroupInfo { tooltipProps?: undefined; sort?: undefined; + hidden?: boolean; renderHeader?: undefined; sortWithUndefined?: undefined; allowedOrderTypes?: undefined; @@ -93,6 +95,7 @@ export interface ColumnInfo { className?: string; }; sort?: boolean; + hidden?: boolean; sortWithUndefined?: boolean; allowedOrderTypes?: Array; @@ -328,12 +331,14 @@ export default class ElementsTableHeader extends Component - {columnSet.items.map((columnName, index) => - this.renderHeaderCell( - columnName, - getColumnEdgePosition(columnSet, columnItems, index)!, - ), - )} + {columnSet.items + .filter((cn) => !columnItems[cn].hidden) + .map((columnName, index) => + this.renderHeaderCell( + columnName, + getColumnEdgePosition(columnSet, columnItems, index)!, + ), + )} ); } diff --git a/packages/ui/src/ui/components/ElementsTable/ElementsTableRow.js b/packages/ui/src/ui/components/ElementsTable/ElementsTableRow.js index 80fe049c57..a1944b3b29 100644 --- a/packages/ui/src/ui/components/ElementsTable/ElementsTableRow.js +++ b/packages/ui/src/ui/components/ElementsTable/ElementsTableRow.js @@ -85,6 +85,7 @@ export default class ElementsTableRow extends React.PureComponent { columnSet, item, itemHeight, + columnItems, index, selected, onItemHover, @@ -107,6 +108,13 @@ export default class ElementsTableRow extends React.PureComponent { const cells = []; for (let i = 0; i < columnSet.items.length; ) { const columnName = columnSet.items[i]; + const columnItem = columnItems[columnName]; + + if (columnItem.hidden) { + i += 1; + continue; + } + const {node, colSpanValue} = this.renderCell(item, columnName, index, i); cells.push(node); i += colSpanValue > 0 ? colSpanValue : 1; diff --git a/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.js b/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.js index c8c827ed2e..9a24913497 100644 --- a/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.js +++ b/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.js @@ -36,7 +36,10 @@ import {LOADING_STATUS} from '../../../../../../constants/index'; import {PLEASE_PROCEED_TEXT} from '../../../../../../utils/actions'; import {getShowCompetitiveJobs} from '../../../../../../pages/operations/selectors'; import {getJobsOperationId} from '../../../../../../store/selectors/operations/jobs'; -import {getOperationId} from '../../../../../../store/selectors/operations/operation'; +import { + getOperationId, + getOperationTasksNames, +} from '../../../../../../store/selectors/operations/operation'; import UIFactory from '../../../../../../UIFactory'; import {StaleJobIcon} from '../StaleJobIcon'; @@ -74,6 +77,7 @@ class OperationJobsTable extends React.Component { promptAction: PropTypes.func.isRequired, getJobs: PropTypes.func.isRequired, getCompetitiveJobs: PropTypes.func.isRequired, + taskNamesNumber: PropTypes.number, }; actions = [ @@ -286,6 +290,13 @@ class OperationJobsTable extends React.Component { caption: 'Id / Address', sort: false, }, + task_name: { + name: 'task_name', + align: 'left', + caption: 'Task name', + sort: true, + hidden: this.props.taskNamesNumber <= 1, + }, start_time: { name: 'start_time', align: 'left', @@ -336,6 +347,7 @@ class OperationJobsTable extends React.Component { 'type', 'progress', 'error', + 'task_name', 'start_time', 'finish_time', 'duration', @@ -354,9 +366,14 @@ class OperationJobsTable extends React.Component { finish_time: this.renderFinishTime, duration: this.renderDuration, actions: this.renderActions, + task_name: this.renderTaskName, }, }; + renderTaskName(item) { + return
{item.task_name}
; + } + renderProgress(item) { const {state, progress, brief_statistics: statistics} = item; @@ -492,6 +509,7 @@ function mapStateToProps(state, props) { const {operations, global} = state; const {cluster, login} = global; const showCompetitiveJobs = getShowCompetitiveJobs(state); + const taskNamesNumber = getOperationTasksNames(state)?.length; const jobsOperationId = getJobsOperationId(state); const operationId = getOperationId(state); const {jobs, job, competitiveJobs, inputPaths} = operations.jobs; @@ -505,6 +523,7 @@ function mapStateToProps(state, props) { login, collapsibleSize: UI_COLLAPSIBLE_SIZE, isLoading: props.isLoading || operationId !== jobsOperationId, + taskNamesNumber, }; } diff --git a/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.scss b/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.scss index 0f5ee2cdd9..e67435ac2c 100644 --- a/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.scss +++ b/packages/ui/src/ui/pages/operations/OperationDetail/tabs/Jobs/OperationJobsTable/OperationJobsTable.scss @@ -24,6 +24,10 @@ width: 200px; } + &_task-name { + width: 200px; + } + &_start-time, &_finish-time { width: 160px;