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

   1 import React from 'react';
   2
   3 import i18n from 'nfvo-utils/i18n/i18n.js';
   4
   5 import ValidationForm from 'nfvo-components/input/validation/ValidationForm.jsx';
   6 import ValidationInput from 'nfvo-components/input/validation/ValidationInput.jsx';
   7
   8 class SoftwareProductComponentsNetworkEditorView extends React.Component {
   9
  10         render() {
  11                 let {onCancel, isReadOnlyMode} = this.props;
  12                 return (
  13                         <ValidationForm
  14                                 ref='validationForm'
  15                                 hasButtons={true}
  16                                 onSubmit={ () => this.submit() }
  17                                 onReset={ () => onCancel() }
  18                                 labledButtons={true}
  19                                 isReadOnlyMode={isReadOnlyMode}
  20                                 className='vsp-components-network-editor'>
  21                                 {this.renderEditorFields()}
  22                         </ValidationForm>
  23                 );
  24         }
  25
  26         renderEditorFields() {
  27                 let {data = {}, qdata = {}, qschema = {}, onQDataChanged, onDataChanged, isReadOnlyMode} = this.props;
  28                 let {name, description, networkName} = data;
  29                 let netWorkValues = [{
  30                         enum: networkName,
  31                         title: networkName
  32                 }];
  33                 return(
  34                         <div className='editor-data'>
  35                                 <div className='row'>
  36                                         <div className='col-md-6'>
  37                                                 <ValidationInput
  38                                                         label={i18n('Name')}
  39                                                         value={name}
  40                                                         disabled={true}
  41                                                         type='text'/>
  42                                         </div>
  43                                         <div className='col-md-6'>
  44                                                 <ValidationInput
  45                                                         label={i18n('Purpose of NIC')}
  46                                                         value={description}
  47                                                         onChange={description => onDataChanged({description})}
  48                                                         disabled={isReadOnlyMode}
  49                                                         type='textarea'/>
  50                                         </div>
  51                                 </div>
  52                                 <ValidationForm
  53                                         onDataChanged={onQDataChanged}
  54                                         data={qdata}
  55                                         schema={qschema}
  56                                         isReadOnlyMode={isReadOnlyMode}
  57                                         hasButtons={false}>
  58                                         <div className='row'>
  59                                                 <div className='part-title'>{i18n('Protocols')}</div>
  60                                                 <div className='col-md-6'>
  61                                                         <ValidationInput
  62                                                                 label={i18n('Protocols')}
  63                                                                 type='select'
  64                                                                 pointer='/protocols/protocols'/>
  65                                                 </div>
  66                                                 <div className='col-md-6'>
  67                                                         <ValidationInput
  68                                                                 label={i18n('Protocol with Highest Traffic Profile')}
  69                                                                 type='select'
  70                                                                 pointer='/protocols/protocolWithHighestTrafficProfile'/>
  71                                                 </div>
  72                                         </div>
  73                                         <div className='row'>
  74                                                 <div className='part-title'>{i18n('IP Configuration')}</div>
  75                                                 <div className='col-md-3'>
  76                                                         <ValidationInput
  77                                                                 label={i18n('IPv4 Required')}
  78                                                                 type='checkbox'
  79                                                                 pointer='/ipConfiguration/ipv4Required'/>
  80                                                 </div>
  81                                                 <div className='col-md-9'>
  82                                                         <ValidationInput
  83                                                                 label={i18n('IPv6 Required')}
  84                                                                 type='checkbox'
  85                                                                 pointer='/ipConfiguration/ipv6Required'/>
  86                                                 </div>
  87                                         </div>
  88                                 </ValidationForm>
  89                                 <div className='row'>
  90                                         <div className='part-title'>{i18n('Network')}</div>
  91                                         <div className='col-md-2'>
  92                                                 <ValidationInput
  93                                                         label={i18n('Internal')}
  94                                                         disabled
  95                                                         checked={true}
  96                                                         className='network-radio disabled'
  97                                                         type='radio'/>
  98                                         </div>
  99                                         <div className='col-md-4'>
 100                                                 <ValidationInput
 101                                                         label={i18n('External')}
 102                                                         disabled
 103                                                         checked={false}
 104                                                         className='network-radio disabled'
 105                                                         type='radio'/>
 106                                         </div>
 107                                         <div className='col-md-6'>
 108                                                 <ValidationInput
 109                                                         label={i18n('Network')}
 110                                                         type='select'
 111                                                         disabled={true}
 112                                                         values={netWorkValues}/>
 113                                         </div>
 114                                 </div>
 115                                 <ValidationForm
 116                                         onDataChanged={onQDataChanged}
 117                                         data={qdata}
 118                                         schema={qschema}
 119                                         isReadOnlyMode={isReadOnlyMode}
 120                                         hasButtons={false}>
 121                                         <div className='row'>
 122                                                 <div className='part-title'>{i18n('Sizing')}</div>
 123                                                 <div className='col-md-12'>
 124                                                         <ValidationInput
 125                                                                 label={i18n('Describe Quality of Service')}
 126                                                                 type='textarea'
 127                                                                 pointer='/sizing/describeQualityOfService'/>
 128                                                 </div>
 129                                         </div>
 130
 131                                         <div className='row'>
 132                                                 <div className='part-title'>{i18n('Inflow Traffic per second')}</div>
 133                                         </div>
 134
 135                                         <div className='row'>
 136                                                 <div className='col-md-6'>
 137                                                         <div className='row'>
 138                                                                 <div className='part-title-small'>{i18n('Packets')}</div>
 139                                                         </div>
 140                                                         <div className='row'>
 141                                                                 <div className='col-md-6'>
 142                                                                         <ValidationInput
 143                                                                                 label={i18n('Peak')}
 144                                                                                 type='text'
 145                                                                                 pointer='/sizing/inflowTrafficPerSecond/packets/peak'/>
 146                                                                 </div>
 147                                                                 <div className='col-md-6'>
 148                                                                         <ValidationInput
 149                                                                                 label={i18n('Avg')}
 150                                                                                 type='text'
 151                                                                                 pointer='/sizing/inflowTrafficPerSecond/packets/avg'/>
 152                                                                 </div>
 153                                                         </div>
 154                                                 </div>
 155                                                 <div className='col-md-6'>
 156                                                         <div className='row'>
 157                                                                 <div className='part-title-small'>{i18n('Bytes')}</div>
 158                                                         </div>
 159                                                         <div className='row'>
 160                                                                 <div className='col-md-6'>
 161                                                                         <ValidationInput
 162                                                                                 label={i18n('Peak')}
 163                                                                                 type='text'
 164                                                                                 pointer='/sizing/inflowTrafficPerSecond/bytes/peak'/>
 165
 166                                                                 </div>
 167                                                                 <div className='col-md-6'>
 168                                                                         <ValidationInput
 169                                                                                 label={i18n('Avg')}
 170                                                                                 type='text'
 171                                                                                 pointer='/sizing/inflowTrafficPerSecond/bytes/avg'/>
 172                                                                 </div>
 173                                                         </div>
 174                                                 </div>
 175                                         </div>
 176
 177                                         <div className='row'>
 178                                                 <div className='part-title'>{i18n('Outflow Traffic per second')}</div>
 179                                         </div>
 180
 181                                         <div className='row'>
 182                                                 <div className='col-md-6'>
 183                                                         <div className='row'>
 184                                                                 <div className='part-title-small'>{i18n('Packets')}</div>
 185                                                         </div>
 186                                                         <div className='row'>
 187                                                                 <div className='col-md-6'>
 188                                                                         <ValidationInput
 189                                                                                 label={i18n('Peak')}
 190                                                                                 type='text'
 191                                                                                 pointer='/sizing/outflowTrafficPerSecond/packets/peak'/>
 192                                                                 </div>
 193                                                                 <div className='col-md-6'>
 194                                                                         <ValidationInput
 195                                                                                 label={i18n('Avg')}
 196                                                                                 type='text'
 197                                                                                 pointer='/sizing/outflowTrafficPerSecond/packets/avg'/>
 198
 199                                                                 </div>
 200                                                         </div>
 201                                                 </div>
 202                                                 <div className='col-md-6'>
 203                                                         <div className='row'>
 204                                                                 <div className='part-title-small'>{i18n('Bytes')}</div>
 205                                                         </div>
 206                                                         <div className='row'>
 207                                                                 <div className='col-md-6'>
 208                                                                         <ValidationInput
 209                                                                                 label={i18n('Peak')}
 210                                                                                 type='text'
 211                                                                                 pointer='/sizing/outflowTrafficPerSecond/bytes/peak'/>
 212
 213                                                                 </div>
 214                                                                 <div className='col-md-6'>
 215                                                                         <ValidationInput
 216                                                                                 label={i18n('Avg')}
 217                                                                                 type='text'
 218                                                                                 pointer='/sizing/outflowTrafficPerSecond/bytes/avg'/>
 219
 220                                                                 </div>
 221                                                         </div>
 222                                                 </div>
 223                                         </div>
 224
 225                                         <div className='row'>
 226                                                 <div className='part-title'>{i18n('Flow Length')}</div>
 227                                         </div>
 228
 229                                         <div className='row'>
 230                                                 <div className='col-md-6'>
 231                                                         <div className='row'>
 232                                                                 <div className='part-title-small'>{i18n('Packets')}</div>
 233                                                         </div>
 234                                                         <div className='row'>
 235                                                                 <div className='col-md-6'>
 236                                                                         <ValidationInput
 237                                                                                 label={i18n('Peak')}
 238                                                                                 type='text'
 239                                                                                 pointer='/sizing/flowLength/packets/peak'/>
 240                                                                 </div>
 241                                                                 <div className='col-md-6'>
 242                                                                         <ValidationInput
 243                                                                                 label={i18n('Avg')}
 244                                                                                 type='text'
 245                                                                                 pointer='/sizing/flowLength/packets/avg'/>
 246                                                                 </div>
 247                                                         </div>
 248                                                 </div>
 249                                                 <div className='col-md-6'>
 250                                                         <div className='row'>
 251                                                                 <div className='part-title-small'>{i18n('Bytes')}</div>
 252                                                         </div>
 253                                                         <div className='row'>
 254                                                                 <div className='col-md-6'>
 255                                                                         <ValidationInput
 256                                                                                 label={i18n('Peak')}
 257                                                                                 type='text'
 258                                                                                 pointer='/sizing/flowLength/bytes/peak'/>
 259
 260                                                                 </div>
 261                                                                 <div className='col-md-6'>
 262                                                                         <ValidationInput
 263                                                                                 label={i18n('Avg')}
 264                                                                                 type='text'
 265                                                                                 pointer='/sizing/flowLength/bytes/avg'/>
 266                                                                 </div>
 267                                                         </div>
 268                                                 </div>
 269                                         </div>
 270
 271                                         <div className='row'>
 272                                                 <div className='col-md-9'>
 273                                                         <div className='row'>
 274                                                                 <div className='part-title-small'>{i18n('Acceptable Jitter')}</div>
 275                                                         </div>
 276                                                         <div className='row'>
 277                                                                 <div className='col-md-4'>
 278                                                                         <ValidationInput
 279                                                                                 label={i18n('Min')}
 280                                                                                 type='text'
 281                                                                                 pointer='/sizing/acceptableJitter/mean'/>
 282                                                                 </div>
 283                                                                 <div className='col-md-4'>
 284                                                                         <ValidationInput
 285                                                                                 label={i18n('Max')}
 286                                                                                 type='text'
 287                                                                                 pointer='/sizing/acceptableJitter/max'/>
 288                                                                 </div>
 289                                                                 <div className='col-md-4'>
 290                                                                         <ValidationInput
 291                                                                                 label={i18n('Var')}
 292                                                                                 type='text'
 293                                                                                 pointer='/sizing/acceptableJitter/variable'/>
 294                                                                 </div>
 295                                                         </div>
 296                                                 </div>
 297                                                 <div className='col-md-3'>
 298                                                         <div className='row'>
 299                                                                 <div className='part-title-small'>{i18n('Acceptable Packet Loss %')}</div>
 300                                                         </div>
 301                                                         <div className='row'>
 302                                                                 <div className='col-md-12'>
 303                                                                         <ValidationInput
 304                                                                                 label={i18n('In Percent')}
 305                                                                                 type='text'
 306                                                                                 pointer='/sizing/acceptablePacketLoss'/>
 307                                                                 </div>
 308                                                         </div>
 309                                                 </div>
 310                                         </div>
 311                                 </ValidationForm>
 312                         </div>
 313
 314                 );
 315         }
 316         submit() {
 317                 let {data, qdata, onSubmit} = this.props;
 318                 onSubmit({data, qdata});
 319         }
 320 }
 321
 322 export default SoftwareProductComponentsNetworkEditorView;