workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx

   1 /*
   2 * Copyright © 2018 European Support Limited
   3 *
   4 * Licensed under the Apache License, Version 2.0 (the "License");
   5 * you may not use this file except in compliance with the License.
   6 * You may obtain a copy of the License at
   7 *
   8 *      http://www.apache.org/licenses/LICENSE-2.0
   9 *
  10 * Unless required by applicable law or agreed to in writing, software
  11 * distributed under the License is distributed on an "AS IS" BASIS,
  12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 * See the License for the specific language governing permissions and
  14 * limitations under the License.
  15 */
  16
  17 import React, { Component } from 'react';
  18 import PropTypes from 'prop-types';
  19
  20 import WorkflowDetails from 'features/workflow/overview/views/WorkflowDetails';
  21 import WorkflowVersions from 'features/workflow/overview/views/WorkflowVersions';
  22 import WorkflowHeader from 'features/workflow/overview/views/WorkflowHeader';
  23
  24 class OverviewView extends Component {
  25     static propTypes = {
  26         getOverview: PropTypes.func,
  27         versions: PropTypes.array,
  28         onCreateVersion: PropTypes.func,
  29         selectedVersion: PropTypes.string,
  30         workflow: PropTypes.object,
  31         history: PropTypes.object,
  32         showNewVersionModal: PropTypes.func,
  33         isVersionsCertifies: PropTypes.bool,
  34         location: PropTypes.object,
  35         match: PropTypes.object,
  36         updateWorkflow: PropTypes.func,
  37         workflowInputChange: PropTypes.func
  38     };
  39
  40     constructor(props) {
  41         super(props);
  42     }
  43
  44     getOverviewFromRouter = () => {
  45         const { match } = this.props;
  46         const workflowId = match.params.workflowId;
  47         this.props.getOverview(workflowId);
  48     };
  49
  50     componentDidMount() {
  51         this.getOverviewFromRouter();
  52     }
  53
  54     onSelectVersionFromTable = data => {
  55         const { history, workflow } = this.props;
  56         history.push('/workflow/' + workflow.id + '/version/' + data.id);
  57     };
  58
  59     onCreateNewVersionFromTable = () => {
  60         const { showNewVersionModal } = this.props;
  61         showNewVersionModal();
  62     };
  63
  64     onUpdateWorkflow = payload => {
  65         const { updateWorkflow, workflow } = this.props;
  66         updateWorkflow({ ...workflow, ...payload });
  67     };
  68
  69     workflowDetailsChanged = payload => {
  70         const { workflowInputChange } = this.props;
  71         workflowInputChange({ ...payload });
  72     };
  73
  74     render() {
  75         const {
  76             versions,
  77             selectedVersion,
  78             workflow,
  79             isVersionsCertifies,
  80             history
  81         } = this.props;
  82         const nodeVersions = versions.map(version => ({
  83             id: version.id,
  84             name: version.name,
  85             parent: version.baseId || ''
  86         }));
  87
  88         return (
  89             <div className="overview-page">
  90                 <WorkflowHeader history={history} name={workflow.name} />
  91                 <div className="overview-content">
  92                     <WorkflowDetails
  93                         name={workflow.name}
  94                         description={workflow.description}
  95                         modified={workflow.modified}
  96                         created={workflow.created}
  97                         workflowId={workflow.id}
  98                         versionId={selectedVersion}
  99                         workflowDetailsChanged={this.workflowDetailsChanged}
 100                         updateWorkflow={this.onUpdateWorkflow}
 101                     />
 102
 103                     <div className={'separator overview-separator'} />
 104                     <WorkflowVersions
 105                         nodeVersions={nodeVersions}
 106                         versions={versions}
 107                         onCreateVersion={this.onCreateNewVersionFromTable}
 108                         onSelectVersion={this.onSelectVersionFromTable}
 109                         selectedVersion={selectedVersion}
 110                         isVersionsCertifies={isVersionsCertifies}
 111                     />
 112                 </div>
 113             </div>
 114         );
 115     }
 116 }
 117
 118 OverviewView.defaultProps = {
 119     versions: [],
 120     getOverview: () => {},
 121     selectedVersion: ''
 122 };
 123
 124 export default OverviewView;