openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetupView.jsx

   1 /**
   2  * Copyright (c) 2019 Vodafone Group
   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 import React, { Component } from 'react';
  17 import PropTypes from 'prop-types';
  18
  19 import i18n from 'nfvo-utils/i18n/i18n.js';
  20 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  21 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  22 import CheckboxTree from 'react-checkbox-tree';
  23
  24 const icons = {
  25     check: <span className="glyphicon glyphicon-check" />,
  26     uncheck: <span className="glyphicon glyphicon-unchecked" />,
  27     halfCheck: <span className="glyphicon glyphicon-stop" />,
  28     expandClose: <span className="glyphicon glyphicon-plus" />,
  29     expandOpen: <span className="glyphicon glyphicon-minus" />,
  30     expandAll: <span className="glyphicon glyphicon-collapse-down" />,
  31     collapseAll: <span className="glyphicon glyphicon-collapse-up" />,
  32     parentClose: <span className="glyphicon glyphicon-folder-close" />,
  33     parentOpen: <span className="glyphicon glyphicon-folder-open" />,
  34     leaf: <span className="glyphicon glyphicon-bookmark" />
  35 };
  36
  37 class CertificationQuery extends React.Component {
  38     constructor(props) {
  39         super(props);
  40         let { certificationChecked, certificationNodes } = this.props;
  41         this.state = {
  42             checked:
  43                 certificationChecked === undefined ? [] : certificationChecked,
  44             expanded: certificationNodes[0] ? [certificationNodes[0].value] : []
  45         };
  46     }
  47
  48     expandFirstNode() {
  49         let { certificationNodes } = this.props;
  50         this.setState({
  51             expanded: certificationNodes[0] ? [certificationNodes[0].value] : []
  52         });
  53     }
  54
  55     componentDidMount() {
  56         this.expandFirstNode();
  57     }
  58
  59     shouldComponentUpdate() {
  60         return true;
  61     }
  62
  63     componentWillReceiveProps(nextProps) {
  64         if (
  65             nextProps.certificationChecked !== this.props.certificationChecked
  66         ) {
  67             let expand = this.state.expanded;
  68             this.setState({
  69                 checked: nextProps.certificationChecked || [],
  70                 expanded: expand
  71             });
  72         }
  73     }
  74
  75     populateOptions(checkedCertificationQuery) {
  76         let { flatTestsMap } = this.props;
  77         return (
  78             <option>
  79                 {flatTestsMap[checkedCertificationQuery].title +
  80                     ' (' +
  81                     checkedCertificationQuery +
  82                     ')'}
  83             </option>
  84         );
  85     }
  86
  87     render() {
  88         let { certificationNodes, setCertificationChecked } = this.props;
  89         return (
  90             <div className="validation-setup-checkbox-tree-section">
  91                 <GridSection title={i18n('Certifications Query')}>
  92                     <GridItem colSpan={2}>
  93                         <div className="validation-view-title">
  94                             {certificationNodes[0]
  95                                 ? certificationNodes[0].value
  96                                 : ''}
  97                         </div>
  98                         <div
  99                             className="validation-setup-available-tests-section"
 100                             data-test-id={
 101                                 'vsp-validation-certifications-query-checkbox-tree'
 102                             }>
 103                             {certificationNodes.length > 0 && (
 104                                 <CheckboxTree
 105                                     nodes={certificationNodes}
 106                                     checked={this.state.checked}
 107                                     expanded={this.state.expanded}
 108                                     onCheck={checked => {
 109                                         this.setState(
 110                                             { checked },
 111                                             setCertificationChecked({
 112                                                 checked
 113                                             })
 114                                         );
 115                                     }}
 116                                     onExpand={expanded =>
 117                                         this.setState({ expanded })
 118                                     }
 119                                     icons={icons}
 120                                     className="field-section"
 121                                 />
 122                             )}
 123                             {certificationNodes.length === 0 && (
 124                                 <div>
 125                                     {i18n(
 126                                         'No Certifications Query are Available'
 127                                     )}
 128                                 </div>
 129                             )}
 130                         </div>
 131                     </GridItem>
 132                     <GridItem colSpan={2}>
 133                         {certificationNodes.length > 0 && (
 134                             <div>
 135                                 <div className="validation-view-title">
 136                                     {i18n('Selected Certifications Query')}
 137                                 </div>
 138                                 <div>
 139                                     <select
 140                                         className="validation-setup-selected-tests"
 141                                         multiple>
 142                                         {this.state.checked.map(row =>
 143                                             this.populateOptions(row)
 144                                         )}
 145                                     </select>
 146                                 </div>
 147                             </div>
 148                         )}
 149                     </GridItem>
 150                 </GridSection>
 151             </div>
 152         );
 153     }
 154 }
 155
 156 class ComplianceTests extends React.Component {
 157     constructor(props) {
 158         super(props);
 159         let { complianceChecked, complianceNodes } = this.props;
 160         this.state = {
 161             checked: complianceChecked === undefined ? [] : complianceChecked,
 162             expanded: complianceNodes[0] ? [complianceNodes[0].value] : []
 163         };
 164     }
 165
 166     shouldComponentUpdate() {
 167         return true;
 168     }
 169
 170     expandFirstNode() {
 171         let { complianceNodes } = this.props;
 172         this.setState({
 173             expanded: complianceNodes[0] ? [complianceNodes[0].value] : []
 174         });
 175     }
 176
 177     componentDidMount() {
 178         this.expandFirstNode();
 179     }
 180
 181     componentWillUnmount() {}
 182
 183     componentWillReceiveProps(nextProps) {
 184         let expand = this.state.expanded;
 185
 186         if (nextProps.complianceChecked !== this.props.complianceChecked) {
 187             this.setState({
 188                 checked: nextProps.complianceChecked || [],
 189                 expanded: expand
 190             });
 191         }
 192     }
 193
 194     populateOptions(checkedComplianceTests) {
 195         let { flatTestsMap } = this.props;
 196         return (
 197             <option>
 198                 {flatTestsMap[checkedComplianceTests].title +
 199                     ' (' +
 200                     checkedComplianceTests +
 201                     ')'}
 202             </option>
 203         );
 204     }
 205     render() {
 206         let { complianceNodes, setComplianceChecked } = this.props;
 207         return (
 208             <div className="validation-setup-checkbox-tree-section">
 209                 <GridSection title={i18n('Available Tests')}>
 210                     <GridItem colSpan={2}>
 211                         <div className="validation-view-title">
 212                             {complianceNodes[0] && complianceNodes[0].value ? (
 213                                 complianceNodes[0].value
 214                             ) : (
 215                                 <br />
 216                             )}
 217                         </div>
 218                         <div
 219                             className="validation-setup-available-tests-section"
 220                             data-test-id={
 221                                 'vsp-validation-compliance-checks-checkbox-tree'
 222                             }>
 223                             {complianceNodes.length > 0 && (
 224                                 <CheckboxTree
 225                                     nodes={complianceNodes}
 226                                     checked={this.state.checked}
 227                                     expanded={this.state.expanded}
 228                                     onCheck={checked => {
 229                                         this.setState(
 230                                             { checked },
 231                                             setComplianceChecked({
 232                                                 checked
 233                                             })
 234                                         );
 235                                     }}
 236                                     onExpand={expanded =>
 237                                         this.setState({ expanded })
 238                                     }
 239                                     icons={icons}
 240                                     className="field-section"
 241                                 />
 242                             )}
 243                             {complianceNodes.length === 0 && (
 244                                 <div>{i18n('No Tests are Available')}</div>
 245                             )}
 246                         </div>
 247                     </GridItem>
 248                     <GridItem colSpan={2}>
 249                         {complianceNodes.length > 0 && (
 250                             <div>
 251                                 <div className="validation-view-title">
 252                                     {i18n('Selected Tests')}
 253                                 </div>
 254                                 <div>
 255                                     <select
 256                                         className="validation-setup-selected-tests"
 257                                         multiple>
 258                                         {this.state.checked.map(row =>
 259                                             this.populateOptions(row)
 260                                         )}
 261                                     </select>
 262                                 </div>
 263                             </div>
 264                         )}
 265                     </GridItem>
 266                 </GridSection>
 267             </div>
 268         );
 269     }
 270 }
 271
 272 class VspValidationSetup extends Component {
 273     static propTypes = {
 274         softwareProductValidation: PropTypes.object,
 275         setComplianceChecked: PropTypes.func,
 276         setCertificationChecked: PropTypes.func
 277     };
 278
 279     constructor(props) {
 280         super(props);
 281         this.state = {
 282             complianceCheckList: [],
 283             certificationCheckList: []
 284         };
 285     }
 286
 287     shouldComponentUpdate() {
 288         return true;
 289     }
 290
 291     render() {
 292         let {
 293             softwareProductValidation,
 294             setComplianceChecked,
 295             setCertificationChecked,
 296             complianceCheckList,
 297             certificationCheckList
 298         } = this.props;
 299         return (
 300             <div className="vsp-validation-view">
 301                 <CertificationQuery
 302                     certificationNodes={certificationCheckList}
 303                     flatTestsMap={softwareProductValidation.vspTestsMap}
 304                     setCertificationChecked={setCertificationChecked}
 305                     certificationChecked={
 306                         softwareProductValidation.certificationChecked
 307                     }
 308                 />
 309                 <ComplianceTests
 310                     complianceNodes={complianceCheckList}
 311                     flatTestsMap={softwareProductValidation.vspTestsMap}
 312                     setComplianceChecked={setComplianceChecked}
 313                     complianceChecked={
 314                         softwareProductValidation.complianceChecked
 315                     }
 316                 />
 317             </div>
 318         );
 319     }
 320 }
 321
 322 export default VspValidationSetup;