openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/network/SoftwareProductComponentsNetworkListView.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   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
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16 import React from 'react';
  17 import i18n from 'nfvo-utils/i18n/i18n.js';
  18 import Form from 'nfvo-components/input/validation/Form.jsx';
  19
  20 import ListEditorView from 'nfvo-components/listEditor/ListEditorView.jsx';
  21 import ListEditorItemView from 'nfvo-components/listEditor/ListEditorItemView.jsx';
  22 import ListEditorItemViewField from 'nfvo-components/listEditor/ListEditorItemViewField.jsx';
  23 import Input from 'nfvo-components/input/validation/Input.jsx';
  24
  25 class SoftwareProductComponentsNetworkView extends React.Component {
  26     state = {
  27         localFilter: ''
  28     };
  29
  30     render() {
  31         let {
  32             dataMap,
  33             qgenericFieldInfo,
  34             onQDataChanged,
  35             isReadOnlyMode
  36         } = this.props;
  37
  38         return (
  39             <div className="vsp-components-network">
  40                 <div className="network-data">
  41                     <div>
  42                         {qgenericFieldInfo && (
  43                             <Form
  44                                 formReady={null}
  45                                 isValid={true}
  46                                 onSubmit={() => this.save()}
  47                                 isReadOnlyMode={isReadOnlyMode}
  48                                 hasButtons={false}>
  49                                 <h3 className="section-title">
  50                                     {i18n('Network Capacity')}
  51                                 </h3>
  52                                 <div className="rows-section">
  53                                     <div className="row-flex-components">
  54                                         <div className="single-col">
  55                                             <Input
  56                                                 data-test-id="protocolWithHighestTrafficProfileAcrossAllNICs"
  57                                                 label={i18n(
  58                                                     'Protocol with Highest Traffic Profile across all NICs'
  59                                                 )}
  60                                                 type="select"
  61                                                 groupClassName="bootstrap-input-options"
  62                                                 className="input-options-select"
  63                                                 isValid={
  64                                                     qgenericFieldInfo[
  65                                                         'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
  66                                                     ].isValid
  67                                                 }
  68                                                 errorText={
  69                                                     qgenericFieldInfo[
  70                                                         'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
  71                                                     ].errorText
  72                                                 }
  73                                                 value={
  74                                                     dataMap[
  75                                                         'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
  76                                                     ]
  77                                                 }
  78                                                 onChange={e => {
  79                                                     const selectedIndex =
  80                                                         e.target.selectedIndex;
  81                                                     const val =
  82                                                         e.target.options[
  83                                                             selectedIndex
  84                                                         ].value;
  85                                                     onQDataChanged({
  86                                                         'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs': val
  87                                                     });
  88                                                 }}>
  89                                                 <option
  90                                                     key="placeholder"
  91                                                     value="">
  92                                                     {i18n('Select...')}
  93                                                 </option>
  94                                                 {qgenericFieldInfo[
  95                                                     'network/networkCapacity/protocolWithHighestTrafficProfileAcrossAllNICs'
  96                                                 ].enum.map(proto => (
  97                                                     <option
  98                                                         value={proto.enum}
  99                                                         key={proto.enum}>
 100                                                         {proto.title}
 101                                                     </option>
 102                                                 ))}
 103                                             </Input>
 104                                         </div>
 105                                         <div className="single-col add-line-break">
 106                                             <Input
 107                                                 data-test-id="networkTransactionsPerSecond"
 108                                                 label={i18n(
 109                                                     'Network Transactions per Second'
 110                                                 )}
 111                                                 type="number"
 112                                                 onChange={ntps =>
 113                                                     onQDataChanged({
 114                                                         'network/networkCapacity/networkTransactionsPerSecond': ntps
 115                                                     })
 116                                                 }
 117                                                 isValid={
 118                                                     qgenericFieldInfo[
 119                                                         'network/networkCapacity/networkTransactionsPerSecond'
 120                                                     ].isValid
 121                                                 }
 122                                                 errorText={
 123                                                     qgenericFieldInfo[
 124                                                         'network/networkCapacity/networkTransactionsPerSecond'
 125                                                     ].errorText
 126                                                 }
 127                                                 value={
 128                                                     dataMap[
 129                                                         'network/networkCapacity/networkTransactionsPerSecond'
 130                                                     ]
 131                                                 }
 132                                             />
 133                                         </div>
 134                                         <div className="empty-two-col" />
 135                                     </div>
 136                                 </div>
 137                             </Form>
 138                         )}
 139                     </div>
 140                     {this.renderNicList()}
 141                 </div>
 142             </div>
 143         );
 144     }
 145
 146     renderNicList() {
 147         const { localFilter } = this.state;
 148         let { isReadOnlyMode, onAddNic, isManual } = this.props;
 149         return (
 150             <ListEditorView
 151                 title={i18n('Interfaces')}
 152                 filterValue={localFilter}
 153                 placeholder={i18n('Filter NICs by Name')}
 154                 isReadOnlyMode={isReadOnlyMode}
 155                 onFilter={value => this.setState({ localFilter: value })}
 156                 onAdd={isManual ? onAddNic : null}
 157                 plusButtonTitle={i18n('Add NIC')}
 158                 twoColumns>
 159                 {this.filterList().map(nic =>
 160                     this.renderNicListItem(nic, isReadOnlyMode)
 161                 )}
 162             </ListEditorView>
 163         );
 164     }
 165
 166     renderNicListItem(nic, isReadOnlyMode) {
 167         let { id, name, description, networkName = '' } = nic;
 168         let { onEditNicClick, version, isManual, onDeleteNic } = this.props;
 169         return (
 170             <ListEditorItemView
 171                 key={id}
 172                 isReadOnlyMode={isReadOnlyMode}
 173                 onSelect={() => onEditNicClick(nic, version, isReadOnlyMode)}
 174                 onDelete={isManual ? () => onDeleteNic(nic, version) : null}>
 175                 <ListEditorItemViewField>
 176                     <div className="name">{name}</div>
 177                 </ListEditorItemViewField>
 178                 <ListEditorItemViewField>
 179                     <div className={isManual ? 'details-col' : 'details'}>
 180                         <div className={isManual ? 'manual-title' : 'title'}>
 181                             {i18n('Purpose of NIC')}
 182                         </div>
 183                         {description && (
 184                             <div className={isManual ? 'description' : ''}>
 185                                 {description}
 186                             </div>
 187                         )}
 188                     </div>
 189                     {!isManual && (
 190                         <div className="details">
 191                             <div className="title">{i18n('Network')}</div>
 192                             <div className="artifact-name">{networkName}</div>
 193                         </div>
 194                     )}
 195                 </ListEditorItemViewField>
 196             </ListEditorItemView>
 197         );
 198     }
 199
 200     filterList() {
 201         let { nicList } = this.props;
 202         let { localFilter } = this.state;
 203         if (localFilter.trim()) {
 204             const filter = new RegExp(escape(localFilter), 'i');
 205             return nicList.filter(({ name = '', description = '' }) => {
 206                 return (
 207                     escape(name).match(filter) ||
 208                     escape(description).match(filter)
 209                 );
 210             });
 211         } else {
 212             return nicList;
 213         }
 214     }
 215
 216     save() {
 217         let { onSubmit, qdata, version } = this.props;
 218         return onSubmit({ qdata, version });
 219     }
 220 }
 221
 222 export default SoftwareProductComponentsNetworkView;