gerrit.onap Code Review - sdc.git/blob

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