nf-workflow-ui-5/src/components/workflow/executions/WorkflowList.js

Workflow User Interface

/* eslint-disable no-restricted-globals */

import React, { Component } from 'react';
import PropTypes from "prop-types";
import { connect } from 'react-redux';
import { createSelector } from 'reselect'
import {changeSearch, fetchSearchResults} from '../../../actions/search';
import { performBulkOperation } from '../../../actions/bulk';
import WorkflowSearch from "./WorkflowSearch";
import WorkflowTable from './WorkflowTable';

import difference from 'lodash/difference';
import filter from "lodash/filter";
import get from "lodash/get";
import includes from "lodash/includes";
import intersection from 'lodash/intersection';
import isEmpty from "lodash/isEmpty";
import map from 'lodash/map';
import size from "lodash/size";
import uniq from 'lodash/uniq';
import without from 'lodash/without';
import WorkflowBulkAction from './WorkflowBulkAction';


class Workflow extends Component {
  constructor(props) {
    super(props);

    this.nextPage = this.nextPage.bind(this);
    this.prevPage = this.prevPage.bind(this);

    this.bulkProcess = this.bulkProcess.bind(this);
    this.onChangeBulkProcessSelection = this.onChangeBulkProcessSelection.bind(this);

    this.handleSelect = this.handleSelect.bind(this);
    this.handleSelectAll = this.handleSelectAll.bind(this);

    this.state = {
      selected: [],
      bulkProcessOperation: "pause",
      bulkValidationMessage: ""
    };
  }

  componentDidUpdate(prevProps) {
    const {search} = this.props;
    const {selected} = this.state;

    // remove from selection after updating filters
    if (prevProps.search.results !== search.results) {
      this.setState({
        selected: intersection(map(search.results, 'workflowId'), selected),
        bulkValidationMessage: ""
      });
    }
  }

  componentWillReceiveProps({bulk: {successfulResults}}) {
    // remove successful bulk workflows from selection
    const remaining = difference(this.state.selected, successfulResults);

    if (size(remaining) !== size(this.state.selected)) {
      this.setState({selected: remaining});
    }
  }

  nextPage() {
    const {changeSearch, fetchSearchResults, search} = this.props;
    const {start} = search;

    changeSearch({...search, start: start + 100});
    fetchSearchResults();
  }

  prevPage() {
    const {changeSearch, fetchSearchResults, search} = this.props;
    const {start} = search;

    changeSearch({...search, start: start - 100});
    fetchSearchResults();
  }

  onChangeBulkProcessSelection({target: {value}}) {
    this.setState({bulkProcessOperation: value, bulkValidationMessage: ""})
  }

  bulkProcess() {
    const {selected, bulkProcessOperation} = this.state;
    const {performBulkOperation}  = this.props;

    if (size(selected) === 0) {
      this.setState({bulkValidationMessage: "Error: No workflows selected"});

      return;
    }

    performBulkOperation(bulkProcessOperation, selected);
  }

  handleSelect({workflowId, id}, isSelected) {
    const {selected} = this.state;

    if (isSelected){
      this.setState({
        selected: uniq([...selected, workflowId]),
        bulkValidationMessage: ""
      });
    } else {
      this.setState({
        selected: without(selected, workflowId),
        bulkValidationMessage: ""
      });
    }

    return false;
  }

  handleSelectAll(isSelected, rows) {
    if (isSelected){
      this.setState({selected: map(rows, 'workflowId'), bulkValidationMessage: ""});
    } else {
      this.setState({selected: [], bulkValidationMessage: ""});
    }

    return false;
  }

 render() {
    const {location, history, bulk, metadata, search} = this.props;
    const {workflows} = metadata;
    const {bulkProcessOperation, bulkValidationMessage, selected} = this.state;


    return (
      <div className="ui-content">
        <WorkflowSearch search={search} workflows={workflows} location={location} history={history}/>

        <WorkflowBulkAction isFetching={bulk.isFetching} selectedCount={size(selected)}
                            validationMessage={bulkValidationMessage}
                            successfulResults={bulk.successfulResults}
                            errorResults={bulk.errorResults}
                            bulkProcess={this.bulkProcess}
                            onChangeBulkProcessSelection={this.onChangeBulkProcessSelection}
                            bulkProcessOperation={bulkProcessOperation}/>

        <WorkflowTable results={search.results} selected={selected}
                       isFetching={search.isFetching}
                       totalHits={search.totalHits}
                       start={search.start}
                       handleSelect={this.handleSelect}
                       handleSelectAll={this.handleSelectAll}
                       nextPage={this.nextPage}
                       prevPage={this.prevPage}
        />

        <br />
        <br />
      </div>
    )
  }
}

Workflow.propTypes = {
  changeSearch: PropTypes.func.isRequired,
  fetchSearchResults: PropTypes.func.isRequired,
  performBulkOperation: PropTypes.func.isRequired,
  search: PropTypes.shape({
    isFetching: PropTypes.bool.isRequired,
    start: PropTypes.number.isRequired,
    types: PropTypes.array.isRequired,
    results: PropTypes.array.isRequired,
    totalHits: PropTypes.number.isRequired
  }),
  metadata: PropTypes.shape({
    workflows: PropTypes.array.isRequired
  }),
  bulk: PropTypes.shape({
    isFetching: PropTypes.bool.isRequired,
    error: PropTypes.string,
    successfulResults: PropTypes.arrayOf(PropTypes.string).isRequired,
    errorResults: PropTypes.objectOf(PropTypes.string).isRequired
  })
};

const getFilteredWorkflows = (results, states) => {
  if (isEmpty(states)) {
    return results;
  } else {
    return filter(results, r => includes(states, get(r, 'status')));
  }
};

const getStates = state => state.states;
const getResults = state => state.results;

const getFilteredWorkflowSelector = createSelector([getResults, getStates], getFilteredWorkflows);

function mapStateToProps({bulk, metadata, search}) {
  return {
    search: {...search,
      results: getFilteredWorkflowSelector(search)
    }, metadata, bulk
  };
}

const mapDispatchToProps = {changeSearch, fetchSearchResults, performBulkOperation};

export default connect(mapStateToProps, mapDispatchToProps)(Workflow);