openecomp-ui/src/sdc-app/onboarding/softwareProduct/deployment/editor/SoftwareProductDeploymentEditorView.jsx

   1 /*
   2  * Copyright © 2016-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 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import Input from 'nfvo-components/input/validation/Input.jsx';
  19 import Form from 'nfvo-components/input/validation/Form.jsx';
  20 import GridSection from 'nfvo-components/grid/GridSection.jsx';
  21 import GridItem from 'nfvo-components/grid/GridItem.jsx';
  22 import SelectInput from 'nfvo-components/input/SelectInput.jsx';
  23 import SelectActionTable from 'nfvo-components/table/SelectActionTable.jsx';
  24 import SelectActionTableRow from 'nfvo-components/table/SelectActionTableRow.jsx';
  25 import SelectActionTableCell from 'nfvo-components/table/SelectActionTableCell.jsx';
  26 import Validator from 'nfvo-utils/Validator.js';
  27
  28 export default class SoftwareProductDeploymentEditorView extends React.Component {
  29     render() {
  30         let {
  31             data,
  32             isEdit,
  33             onClose,
  34             onDataChanged,
  35             isReadOnlyMode,
  36             selectedFeatureGroupsList,
  37             componentsList,
  38             computesList,
  39             genericFieldInfo
  40         } = this.props;
  41         let {
  42             model,
  43             description,
  44             featureGroupId,
  45             componentComputeAssociations = []
  46         } = data;
  47         let featureGroupsExist = selectedFeatureGroupsList.length > 0;
  48         return (
  49             <div>
  50                 {genericFieldInfo && (
  51                     <Form
  52                         ref="validationForm"
  53                         hasButtons={true}
  54                         labledButtons={true}
  55                         isReadOnlyMode={isReadOnlyMode}
  56                         onSubmit={() => this.submit()}
  57                         submitButtonText={
  58                             isEdit ? i18n('Save') : i18n('Create')
  59                         }
  60                         onReset={() => onClose()}
  61                         onValidateForm={() => this.validate()}
  62                         isValid={this.props.isFormValid}
  63                         formReady={this.props.formReady}
  64                         className="vsp-deployment-editor"
  65                         btnClassName="sdc-modal__footer">
  66                         <GridSection hasLastColSet>
  67                             <GridItem colSpan={1}>
  68                                 <Input
  69                                     onChange={model =>
  70                                         onDataChanged(
  71                                             { model },
  72                                             {
  73                                                 model: model =>
  74                                                     this.validateName(model)
  75                                             }
  76                                         )
  77                                     }
  78                                     label={i18n('Model')}
  79                                     value={model}
  80                                     data-test-id="deployment-model"
  81                                     isValid={genericFieldInfo.model.isValid}
  82                                     errorText={genericFieldInfo.model.errorText}
  83                                     isRequired={true}
  84                                     type="text"
  85                                 />
  86                             </GridItem>
  87                             <GridItem colSpan={3} lastColInRow>
  88                                 <Input
  89                                     onChange={description =>
  90                                         onDataChanged({ description })
  91                                     }
  92                                     label={i18n('Description')}
  93                                     value={description}
  94                                     data-test-id="deployment-description"
  95                                     isValid={
  96                                         genericFieldInfo.description.isValid
  97                                     }
  98                                     errorText={
  99                                         genericFieldInfo.description.errorText
 100                                     }
 101                                     type="text"
 102                                 />
 103                             </GridItem>
 104                         </GridSection>
 105                         <GridSection
 106                             className={`deployment-feature-groups-section${
 107                                 !featureGroupsExist ? ' no-feature-groups' : ''
 108                             }`}
 109                             title={i18n('License Details')}
 110                             hasLastColSet>
 111                             <GridItem colSpan={1}>
 112                                 <SelectInput
 113                                     data-test-id="deployment-feature-groups"
 114                                     label={i18n('Feature Group')}
 115                                     value={featureGroupId}
 116                                     onChange={featureGroup =>
 117                                         onDataChanged({
 118                                             featureGroupId: featureGroup
 119                                                 ? featureGroup.value
 120                                                 : null
 121                                         })
 122                                     }
 123                                     type="select"
 124                                     clearable={true}
 125                                     disabled={
 126                                         isReadOnlyMode || !featureGroupsExist
 127                                     }
 128                                     className="field-section"
 129                                     options={selectedFeatureGroupsList}
 130                                 />
 131                             </GridItem>
 132                         </GridSection>
 133                         {!featureGroupsExist && (
 134                             <GridSection className="deployment-feature-group-warning-section">
 135                                 <GridItem colSpan={3}>
 136                                     <span>
 137                                         {i18n(
 138                                             'Please assign Feature Groups in VSP General'
 139                                         )}
 140                                     </span>
 141                                 </GridItem>
 142                             </GridSection>
 143                         )}
 144                         <GridSection
 145                             title={i18n('Assign VFCs and Compute Flavors')}
 146                             className="vfc-table"
 147                             hasLastColSet>
 148                             <GridItem colSpan={4} lastColInRow>
 149                                 <SelectActionTable
 150                                     columns={[
 151                                         'Virtual Function Components',
 152                                         'Compute Flavors'
 153                                     ]}
 154                                     numOfIcons={0}>
 155                                     {componentComputeAssociations.map(
 156                                         (association, index) => (
 157                                             <SelectActionTableRow
 158                                                 key={association.componentId}>
 159                                                 <SelectActionTableCell
 160                                                     options={componentsList.map(
 161                                                         component => ({
 162                                                             value: component.id,
 163                                                             label:
 164                                                                 component.displayName
 165                                                         })
 166                                                     )}
 167                                                     selected={
 168                                                         association.componentId
 169                                                     }
 170                                                     onChange={componentId => {
 171                                                         let newAssociations = [
 172                                                             ...componentComputeAssociations
 173                                                         ];
 174                                                         newAssociations[
 175                                                             index
 176                                                         ] = {
 177                                                             ...newAssociations[
 178                                                                 index
 179                                                             ],
 180                                                             componentId
 181                                                         };
 182                                                         onDataChanged({
 183                                                             componentComputeAssociations: newAssociations
 184                                                         });
 185                                                     }}
 186                                                     disabled={true}
 187                                                 />
 188                                                 <SelectActionTableCell
 189                                                     options={computesList
 190                                                         .filter(
 191                                                             compute =>
 192                                                                 compute.componentId ===
 193                                                                 association.componentId
 194                                                         )
 195                                                         .map(compute => ({
 196                                                             value:
 197                                                                 compute.computeFlavorId,
 198                                                             label: compute.name
 199                                                         }))}
 200                                                     selected={
 201                                                         association.computeFlavorId
 202                                                     }
 203                                                     onChange={computeFlavorId => {
 204                                                         let newAssociations = [
 205                                                             ...componentComputeAssociations
 206                                                         ];
 207                                                         newAssociations[
 208                                                             index
 209                                                         ] = {
 210                                                             ...newAssociations[
 211                                                                 index
 212                                                             ],
 213                                                             computeFlavorId
 214                                                         };
 215                                                         onDataChanged({
 216                                                             componentComputeAssociations: newAssociations
 217                                                         });
 218                                                     }}
 219                                                     disabled={isReadOnlyMode}
 220                                                 />
 221                                             </SelectActionTableRow>
 222                                         )
 223                                     )}
 224                                 </SelectActionTable>
 225                             </GridItem>
 226                         </GridSection>
 227                     </Form>
 228                 )}
 229             </div>
 230         );
 231     }
 232
 233     validateName(value) {
 234         const { data: { id = '' }, DFNames } = this.props;
 235         const isExists = Validator.isItemNameAlreadyExistsInList({
 236             itemId: id,
 237             itemName: value,
 238             list: DFNames
 239         });
 240
 241         return !isExists
 242             ? { isValid: true, errorText: '' }
 243             : {
 244                   isValid: false,
 245                   errorText: i18n(
 246                       "Deployment flavor by the name '" +
 247                           value +
 248                           "' already exists. Deployment flavor name must be unique"
 249                   )
 250               };
 251     }
 252
 253     submit() {
 254         let { isEdit, onCreate, onEdit, onClose, data } = this.props;
 255         if (isEdit) {
 256             onEdit(data);
 257         } else {
 258             onCreate(data);
 259         }
 260         onClose();
 261     }
 262
 263     validate() {
 264         this.props.onValidateForm();
 265     }
 266 }