Allow hiding columns of the active tasks table (#1426)

apache · Jan 24, 2024 · a9f6cdb · a9f6cdb
1 parent 367c1c9
commit a9f6cdb
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 34 deletions.
diff --git a/app/addons/activetasks/__tests__/components.test.js b/app/addons/activetasks/__tests__/components.test.js
@@ -80,6 +80,36 @@ describe('Active Tasks -- Components', () => {
  expect(spy.calledOnce).toBeTruthy();
  });
  });
+
+ it('should not show hidden columns ', () => {
+ const allColumns = mount(
+ <table>
+ <TableHeader
+ onTableHeaderClick={() => {}}
+ headerIsAscending={true}
+ sortByHeader={"All Tasks"}
+ hiddenColumns={[]}
+ />
+ </table>
+ );
+ expect(allColumns.find('th').length).toBe(7);
+
+
+ const withHiddenColumns = mount(
+ <table>
+ <TableHeader
+ onTableHeaderClick={() => {}}
+ headerIsAscending={true}
+ sortByHeader={"All Tasks"}
+ hiddenColumns={['node', 'pid']}
+ />
+ </table>
+ );
+ expect(withHiddenColumns.find('th').length).toBe(5);
+ expect(withHiddenColumns.find('th.header-database').exists()).toBeTruthy();
+ expect(withHiddenColumns.find('th.header-node').exists()).toBeFalsy();
+ expect(withHiddenColumns.find('th.header-pid').exists()).toBeFalsy();
+ });
  });
  });
 });
diff --git a/app/addons/activetasks/actiontypes.js b/app/addons/activetasks/actiontypes.js
@@ -16,5 +16,6 @@ export default {
  ACTIVE_TASKS_SORT_BY_COLUMN_HEADER: 'ACTIVE_TASKS_SORT_BY_COLUMN_HEADER',
  ACTIVE_TASKS_FETCH_AND_SET: 'ACTIVE_TASKS_FETCH_AND_SET',
  ACTIVE_TASKS_SET_IS_LOADING: 'ACTIVE_TASKS_SET_IS_LOADING',
- ACTIVE_TASKS_POLLING_COLLECTION: 'ACTIVE_TASKS_POLLING_COLLECTION'
+ ACTIVE_TASKS_POLLING_COLLECTION: 'ACTIVE_TASKS_POLLING_COLLECTION',
+ ACTIVE_TASKS_SET_HIDDEN_COLUMNS: 'ACTIVE_TASKS_SET_HIDDEN_COLUMNS'
 };
diff --git a/app/addons/activetasks/assets/scss/activetasks.scss b/app/addons/activetasks/assets/scss/activetasks.scss
@@ -34,7 +34,7 @@
  width: 25%;
  }
 
- &.header-tarted-on {
+ &.header-started-on {
  width: 10%;
  }
 
@@ -90,4 +90,4 @@
  margin-left:8px;
  }
  }
-}
+}
diff --git a/app/addons/activetasks/components/controller.js b/app/addons/activetasks/components/controller.js
@@ -10,7 +10,7 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 import React from 'react';
-import {ActiveTasksFilterTabs, ActiveTasksFilter} from './filtertabs';
+import { ActiveTasksFilterTabs, ActiveTasksFilter } from './filtertabs';
 import ActiveTaskTable from './table';
 
 export default class ActiveTasksController extends React.Component {
@@ -22,7 +22,8 @@ export default class ActiveTasksController extends React.Component {
  this.props.setSearchTerm(searchTerm);
  };
 
- switchTab = (newRadioButton) => { //tabs buttons
+ switchTab = (newRadioButton) => {
+ //tabs buttons
  this.props.switchTab(newRadioButton);
  };
 
@@ -31,7 +32,15 @@ export default class ActiveTasksController extends React.Component {
  };
 
  render() {
- const {isLoading, tasks, searchTerm, selectedRadio, sortByHeader, headerIsAscending} = this.props;
+ const {
+ isLoading,
+ tasks,
+ searchTerm,
+ selectedRadio,
+ sortByHeader,
+ headerIsAscending,
+ hiddenColumns,
+ } = this.props;
 
  const setSearchTerm = this.setNewSearchTerm;
  const onTableHeaderClick = this.tableHeaderOnClick;
@@ -42,13 +51,12 @@ export default class ActiveTasksController extends React.Component {
  <ActiveTasksFilterTabs
  searchTerm={searchTerm}
  selectedRadio={selectedRadio}
- onRadioClick={this.switchTab}/>
+ onRadioClick={this.switchTab}
+ />
 
  <div className="row">
  <div id="active-tasks-search" className="col-12 col-md-6">
- <ActiveTasksFilter
- onSearch={setSearchTerm}
- />
+ <ActiveTasksFilter onSearch={setSearchTerm} />
  </div>
  </div>
 
@@ -59,7 +67,9 @@ export default class ActiveTasksController extends React.Component {
  selectedRadio={selectedRadio}
  onTableHeaderClick={onTableHeaderClick}
  sortByHeader={sortByHeader}
- headerIsAscending={headerIsAscending} />
+ headerIsAscending={headerIsAscending}
+ hiddenColumns={hiddenColumns}
+ />
  </div>
  </div>
  );

diff --git a/app/addons/activetasks/components/table.js b/app/addons/activetasks/components/table.js
@@ -23,7 +23,8 @@ export default class ActiveTaskTable extends React.Component {
  sortByHeader,
  onTableHeaderClick,
  headerIsAscending,
- isLoading
+ isLoading,
+ hiddenColumns,
  } = this.props;
 
  return (
@@ -32,12 +33,14 @@ export default class ActiveTaskTable extends React.Component {
  <ActiveTasksTableHeader
  onTableHeaderClick={onTableHeaderClick}
  sortByHeader={sortByHeader}
- headerIsAscending={headerIsAscending}/>
+ headerIsAscending={headerIsAscending}
+ hiddenColumns={hiddenColumns}/>
  <ActiveTasksTableBody
  tasks={tasks}
  selectedRadio={selectedRadio}
  isLoading={isLoading}
- searchTerm={searchTerm}/>
+ searchTerm={searchTerm}
+ hiddenColumns={hiddenColumns}/>
  </Table>
  </div>
  );

diff --git a/app/addons/activetasks/components/tablebody.js b/app/addons/activetasks/components/tablebody.js
@@ -22,7 +22,7 @@ export default class ActiveTasksTableBody extends React.Component {
  }
 
  return this.props.tasks.map((item, key) => {
- return <ActiveTaskTableBodyContents key={key} item={item} />;
+ return <ActiveTaskTableBodyContents key={key} item={item} hiddenColumns={this.props.hiddenColumns}/>;
  });
  };
 
@@ -37,10 +37,11 @@ export default class ActiveTasksTableBody extends React.Component {
 
  noActiveTasks = () => {
  const type = this.getType();
- let msg = <td colSpan="6">No active {type} tasks.</td>;
+ const colSpan = 7 - this.props.hiddenColumns.length;
+ let msg = <td colSpan={colSpan}>No active {type} tasks.</td>;
 
  if (this.props.isLoading) {
- msg = <td colSpan="6">Loading tasks.</td>;
+ msg = <td colSpan={colSpan}>Loading tasks.</td>;
  }
 
  return (

diff --git a/app/addons/activetasks/components/tablebodycontents.js b/app/addons/activetasks/components/tablebodycontents.js
@@ -73,6 +73,10 @@ const activeTasksHelpers = {
 };
 
 export default class ActiveTaskTableBodyContents extends React.Component {
+ static defaultProps = {
+ hiddenColumns: [],
+ };
+
  getInfo = (item) => {
  return {
  type : item.type,
@@ -98,21 +102,24 @@ export default class ActiveTaskTableBodyContents extends React.Component {
  };
 
  render() {
- var rowData = this.getInfo(this.props.item);
- var objectFieldMsg = this.multilineMessage(rowData.objectField, 'to-from-database');
- var startedOnMsg = this.multilineMessage(rowData.started_on, 'time');
- var updatedOnMsg = this.multilineMessage(rowData.updated_on, 'time');
- var progressMsg = this.multilineMessage(rowData.progress);
+ const rowData = this.getInfo(this.props.item);
+ const typeCell = <td>{rowData.type}</td>;
+ const objectCell = <td>{this.multilineMessage(rowData.objectField, 'to-from-database')}</td>;
+ const startedOnCell = <td>{this.multilineMessage(rowData.started_on, 'time')}</td>;
+ const updatedOnCell = <td>{this.multilineMessage(rowData.updated_on, 'time')}</td>;
+ const nodeCell = <td>{rowData.node}</td>;
+ const pidCell = <td>{rowData.pid}</td>;
+ const progressCell = <td>{this.multilineMessage(rowData.progress)}</td>;
 
  return (
  <tr>
- <td>{rowData.type}</td>
- <td>{objectFieldMsg}</td>
- <td>{startedOnMsg}</td>
- <td>{updatedOnMsg}</td>
- <td>{rowData.node}</td>
- <td>{rowData.pid}</td>
- <td>{progressMsg}</td>
+ {this.props.hiddenColumns.includes('type') ? null : typeCell}
+ {this.props.hiddenColumns.includes('database') ? null : objectCell}
+ {this.props.hiddenColumns.includes('started-on') ? null : startedOnCell}
+ {this.props.hiddenColumns.includes('updated-on') ? null : updatedOnCell}
+ {this.props.hiddenColumns.includes('node') ? null : nodeCell}
+ {this.props.hiddenColumns.includes('pid') ? null : pidCell}
+ {this.props.hiddenColumns.includes('progress') ? null : progressCell}
  </tr>
  );
  }

diff --git a/app/addons/activetasks/components/tableheader.js b/app/addons/activetasks/components/tableheader.js
@@ -54,7 +54,8 @@ export default class ActiveTasksTableHeader extends React.Component {
  ['node', 'Node'],
  ['pid', 'PID'],
  ['progress', 'Status']
- ]
+ ],
+ hiddenColumns: [],
  };
 
  createTableHeadingFields = () => {
@@ -64,7 +65,9 @@ export default class ActiveTasksTableHeader extends React.Component {
  headerIsAscending
  } = this.props;
 
- return this.props.headerNames.map(function (header) {
+ return this.props.headerNames.filter(header => {
+ return !this.props.hiddenColumns.includes(header[0]);
+ }).map(header => {
  return <TableHeader
  headerName={header[0]}
  displayName={header[1]}

diff --git a/app/addons/activetasks/container.js b/app/addons/activetasks/container.js
@@ -25,7 +25,8 @@ import {
  getSelectedRadio,
  getSortByHeader,
  getSearchTerm,
- getIsLoading
+ getIsLoading,
+ getHiddenColumns
 } from './reducers';
 
 const mapStateToProps = ({activetasks}) => {
@@ -35,7 +36,8 @@ const mapStateToProps = ({activetasks}) => {
  selectedRadio: getSelectedRadio(activetasks),
  sortByHeader: getSortByHeader(activetasks),
  searchTerm: getSearchTerm(activetasks),
- isLoading: getIsLoading(activetasks)
+ isLoading: getIsLoading(activetasks),
+ hiddenColumns: getHiddenColumns(activetasks),
  };
 };
 

diff --git a/app/addons/activetasks/reducers.js b/app/addons/activetasks/reducers.js
@@ -19,7 +19,8 @@ const initialState = {
  selectedRadio: 'All Tasks',
  searchTerm: '',
  tasks: [],
- filteredTasks: []
+ filteredTasks: [],
+ hiddenColumns: [],
 };
 
 const sortTasksByColumnHeader = (colName, tasks, headerIsAscending) => {
@@ -112,6 +113,12 @@ export default (state = initialState, {type, options}) => {
  case ActionTypes.ACTIVE_TASKS_SET_SEARCH_TERM:
  return setSearchTerm(state, options);
 
+ case ActionTypes.ACTIVE_TASKS_SET_HIDDEN_COLUMNS:
+ return {
+ ...state,
+ hiddenColumns: options
+ };
+
  case ActionTypes.ACTIVE_TASKS_SORT_BY_COLUMN_HEADER:
  const prevSortbyHeader = state.sortByHeader;
  const sortByHeader = options;
@@ -139,3 +146,4 @@ export const getIsLoading = (state) => state.isLoading;
 export const getSelectedRadio = (state) => state.selectedRadio;
 export const getSortByHeader = (state) => state.sortByHeader;
 export const getSearchTerm = (state) => state.searchTerm;
+export const getHiddenColumns = (state) => state.hiddenColumns;