skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React, {Component} from 'react';
  20 import ReactDOM from 'react-dom';
  21 import SelectOption from 'widgets/form_controls/selectOption.jsx';
  22 import imgAdd from '../../node_modules/open-iconic/svg/plus.svg'
  23 import imgRemove from '../../node_modules/open-iconic/svg/trash.svg'
  24 import TextInput from 'widgets/form_controls/textInput.jsx';
  25 import './instantiateInputParams.scss';
  26
  27 export default class InstantiateInputParams extends Component {
  28   constructor(props) {
  29     super(props);
  30   }
  31   nsConfigHTML = (props) => {
  32     return (
  33       <div className="configure-nsd_section">
  34         <div className="noticeSubText noticeSubText_right">
  35             * required
  36         </div>
  37         <div className="inputControls">
  38             <TextInput label="Instance Name" required={true} type="text" pattern="^[a-zA-Z0-9_]*$" style={{textAlign:'left'}} onChange={props.updateName} value={props.name}/>
  39             <label>Resource Orchestrator
  40               <SelectOption options={constructROOptions(props.resourceOrchestrators)} onChange={props.nsFn.updateSelectedRoAccount} />
  41             </label>
  42           {
  43             (props.selectedResourceOrchestrator.datacenters && props.selectedResourceOrchestrator.datacenters.datacenters) ?
  44                         (
  45                           <label>Datacenter
  46                             <SelectOption options={constructDataCenterOptions(props.selectedResourceOrchestrator.datacenters.datacenters)} onChange={props.nsFn.updateSelectedDataCenter} />
  47                           </label>
  48                         )
  49                       : <span>No datacenters configured</span>
  50           }
  51         </div>
  52       </div>
  53     )
  54   }
  55   vnfCloudAccountsHTML = (props) => {
  56     let nsd = props.nsd;
  57     let dataCenters = props.dataCenters;
  58     return (
  59       <div className="configure-nsd_section">
  60         <h3 className="launchpadCard_title">NS/VNF ACCOUNT PLACEMENTS</h3>
  61         {
  62
  63             //selectedNSDid
  64               nsd['constituent-vnfd'] && nsd['constituent-vnfd'].map(function(v, i) {
  65                 let defaultValue = false;
  66                 if(props.vnfdCloudAccounts && props.vnfdCloudAccounts.hasOwnProperty(v['member-vnf-index'])) {
  67                   defaultValue = props.vnfdCloudAccounts[v['member-vnf-index']]
  68                 }
  69                 return (
  70                     <div className="inputControls" key={i}>
  71                     <h4 className="inputControls-title">VNFD: {v['vnf-name']}</h4>
  72                   {
  73                    (props.selectedResourceOrchestrator.datacenters && props.selectedResourceOrchestrator.datacenters.datacenters) ?
  74                         (
  75                           <label>Datacenter
  76                             <SelectOption options={constructDataCenterOptions(props.selectedResourceOrchestrator.datacenters.datacenters)} onChange={props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index'])}  initial={true} />
  77                           </label>
  78                         )
  79                       : <span>No datacenters configured</span>
  80                   }
  81                       {
  82                         (props.configAgentAccounts && props.configAgentAccounts.length > 0) ?
  83                         <label>Config Agent Account
  84                           <SelectOption options={props.configAgentAccounts && props.configAgentAccounts.map(function(c) {
  85                             return {
  86                               label: c.name,
  87                               value: c.name
  88                             }
  89                           })} initial={true} onChange={props.vnfFn.updateSelectedConfigAgent(v['member-vnf-index'])} defaultValue={false} />
  90                         </label> : null
  91                       }
  92                     </div>
  93                 )
  94               })
  95         }
  96       </div>
  97     )
  98   }
  99   //"vnfd-catalog/vnfd[id=../../../constituent-vnfd[0]/vnfd-id-ref]/version";
 100
 101   inputParametersHTML = (props) => {
 102     let inputParameters = props.inputParameters;
 103     const handleChange = (i, event) => props.updateInputParam(i, event.target.value);
 104     let nsInputParamsHTML = [];
 105     inputParameters && inputParameters.map(function(input, i) {
 106         nsInputParamsHTML.push(
 107           <div className="inputControls" key={i}>
 108             <TextInput label={ input.label || input.xpath }  value={input.value || input['default-value']} type="text" onChange={handleChange.bind(this, i)} />
 109           </div>
 110         );
 111      });
 112     var nsinput = (
 113       <div className="configure-nsd_section" >
 114         <h3 className="launchpadCard_title">NS Input Parameters</h3>
 115         {
 116           nsInputParamsHTML
 117         }
 118      </div>
 119     );
 120     return nsinput;
 121   }
 122   //"vnfd-catalog/vnfd[id=../../../constituent-vnfd[0]/vnfd-id-ref]/version";
 123
 124   vnfInputParametersHTML = (props) => {
 125     let vnfInputParams = props.vnfInputParams;
 126     const handleChange = (vnfIndex, parameterIndex, event) => props.updateVnfInputParam(vnfIndex, parameterIndex, event.target.value);
 127     let vnfInputParamsHTML = [];
 128     vnfInputParams && vnfInputParams.map(function(input, i) {
 129         vnfInputParamsHTML.push(
 130           <div className="configure-nsd_section" key={i}>
 131             <h3 className="launchpadCard_title">{`VNF Input Parameters: ${input['name']}:${input['member-vnf-index-ref']}`}</h3>
 132             {
 133               input['input-parameter'].filter(function(p){
 134                 let regex = /vnfd\[(?:vnfd:)?id\s*=\s*'?"?(\S+?)'?"?\s*\]/
 135                 // if has id, then it belongs in a vnfd section
 136                 if (p.xpath.match(regex)) {
 137                   // look for matching vnfd
 138                   if ((p.xpath.match(regex)[1] == input['vnfd-id-ref'])) {
 139                     return true
 140                   } else {
 141                     return false;
 142                   }
 143                 } else {
 144                   return true;
 145                 }
 146               }).map(function(p, j){
 147                 let param = vnfInputParams[i]['input-parameter'][j];
 148                 return (<div className="inputControls" key={j}>
 149                         <TextInput label={(p.label || p.xpath)} value={param.value || param['default-value']} type="text" onChange={handleChange.bind(this, i, j)} />
 150                     </div>)
 151               })
 152             }
 153          </div>
 154         );
 155     })
 156
 157     return <div>{vnfInputParamsHTML}</div>;
 158   }
 159   nsPlacementGroupsHTML = (props) => {
 160     let nsPlacementGroups = props.nsPlacementGroups;
 161     let displayPlacementGroups = props.displayPlacementGroups;
 162     if (nsPlacementGroups && nsPlacementGroups.length > 0 && displayPlacementGroups) {
 163       return (
 164         <div className="configure-nsd_section">
 165           <h3 className="launchpadCard_title">NS Placement Groups</h3>
 166             {
 167               nsPlacementGroups.map(function(input, i) {
 168                 return (
 169                   <div  key={i} className="configure-nsd_section-info">
 170                     <div className="placementGroup_description">
 171                       <div className="placementGroup_description-name">
 172                         <strong>{input.name}</strong> contains: {
 173                           input['member-vnfd'].map((m,i) => {
 174                             let s = m.name;
 175                             if(i>0) {
 176                               s = ', ' + m.name
 177                             };
 178                             return s;
 179                           })
 180                         }
 181                       </div>
 182                       <div><em>{input.requirement}</em></div>
 183                       <div><strong>Strategy:</strong> {input.strategy}</div>
 184                     </div>
 185                     <label>
 186                       <span> Availability Zone <span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span> </span>
 187                       <div  style={{display:'none'}}>
 188                       <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, 'availability-zone')} />
 189                       <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 190                       </div>
 191                     </label>
 192                     <label>
 193                       <span> Affinity/Anti-affinity Server Group<span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span></span>
 194                       <div style={{display:'none'}}>
 195                         <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, 'server-group')} />
 196                         <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 197                       </div>
 198                     </label>
 199                     <div className="host-aggregate">
 200                       <label>
 201                         <span> Host Aggregates <span onClick={props.nsFn.addHostAggregate.bind(self, i)} className="addInput"  ><img src={imgAdd} />Add</span></span>
 202                       {
 203                         input['host-aggregate'].length > 0 ?
 204                           input['host-aggregate'].map((h,j) => {
 205                             let key = h.key || '';
 206                             let value = h.value || '';
 207                             return (
 208
 209                                   <div className="input_group" key={j}>
 210                                     <TextInput type="text" onChange={props.nsFn.hostAggregateUpdate.bind(self, i, j, 'key')} placeholder="KEY" value={key} />
 211                                     <TextInput type="text" onChange={props.nsFn.hostAggregateUpdate.bind(self, i, j, 'value')} placeholder="VALUE"  value={value} />
 212                                     <span onClick={props.nsFn.removeHostAggregate.bind(self, i, j)} className="removeInput"><img src={imgRemove} />Remove</span>
 213                                   </div>
 214                             )
 215                           }) : ''
 216                       }
 217                       </label>
 218                     </div>
 219                     </div>
 220                 );
 221               })
 222             }
 223        </div>
 224      );
 225     }
 226   }
 227   vnfPlacementGroupsHTML = (props) => {
 228     let vnfPlacementGroups = props.vnfPlacementGroups;
 229     let displayPlacementGroups = props.displayPlacementGroups;
 230     if (vnfPlacementGroups && vnfPlacementGroups.length > 0 && displayPlacementGroups) {
 231       return vnfPlacementGroups.map(function(input, i) {
 232             return (
 233               <div className="configure-nsd_section" key={i}>
 234                 <h3 className="launchpadCard_title">{input['vnf-name']} VNF Placement Group</h3>
 235                   <div className="configure-nsd_section-info">
 236                     <div className="placementGroup_description">
 237                       <div className="placementGroup_description-name">
 238                         <strong>{input.name}</strong> contains: {
 239                           input['member-vdus'].map((m,i) => {
 240                             let s = m['member-vdu-ref'];
 241                             if(i>0) {
 242                               s = ', ' + m['member-vdu-ref']
 243                             };
 244                             return s;
 245                           })
 246                         }
 247                       </div>
 248                       <div><em>{input.requirement}</em></div>
 249                       <div><strong>Strategy</strong>: {input.strategy}</div>
 250                     </div>
 251                     <label>
 252                       <span> Availability Zone <span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span></span>
 253                       <div  style={{display:'none'}}>
 254                         <TextInput type="text" onChange={props.vnfFn.placementGroupUpdate.bind(self, i, 'availability-zone')} />
 255                            <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 256                       </div>
 257                     </label>
 258                     <label>
 259                       <span> Affinity/Anti-affinity Server Group<span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span></span>
 260                       <div  style={{display:'none'}}>
 261                         <TextInput type="text" onChange={props.vnfFn.placementGroupUpdate.bind(self, i, 'server-group')} />
 262                          <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 263                       </div>
 264                     </label>
 265                     <div className="host-aggregate">
 266                     <label>
 267                       <span> Host Aggregates <span onClick={props.vnfFn.addHostAggregate.bind(self, i)} className="addInput"><img src={imgAdd} />Add</span></span>
 268                       {
 269                         input['host-aggregate'].length > 0 ?
 270                           input['host-aggregate'].map((h,j) => {
 271                             let key = h.key || '';
 272                             let value = h.value || '';
 273                             return (
 274
 275                                   <div className="input_group" key={j}>
 276                                     <TextInput type="text" onChange={props.vnfFn.hostAggregateUpdate.bind(self, i, j, 'key')} placeholder="KEY" value={key} />
 277                                     <TextInput type="text" onChange={props.vnfFn.hostAggregateUpdate.bind(self, i, j, 'value')} placeholder="VALUE"  value={value} />
 278                                     <span onClick={props.vnfFn.removeHostAggregate.bind(self, i, j)} className="removeInput"><img src={imgRemove} />Remove</span>
 279                                   </div>
 280
 281                             )
 282                           }) : ''
 283                       }
 284                       </label>
 285                     </div>
 286                     </div>
 287                 </div>
 288             );
 289           });
 290     }
 291   }
 292   vldsHTML = (props) => {
 293     let self = this;
 294     let ipProfileList = props.ipProfileList;
 295     let vlds = props.vlds;
 296     return vlds && (
 297       <div className="configure-nsd_section">
 298         <h3 className="launchpadCard_title">VLDs</h3>
 299             {vlds && vlds.map(function(v, i) {
 300                   let currentType = v.type;
 301                   let isVIM = (currentType == 'vim-network-name');
 302                   let isUnknown = (currentType == 'none') || ((currentType != 'vim-network-name') && (currentType != 'ip-profile-ref'));
 303                   return (
 304                     <div key={self.props.nsd.id + '-' + i} className="inputControls">
 305                         <h4 className="inputControls-title">VLD: {v['short-name'] ? v['short-name'] : v['name']}</h4>
 306                         <label><span>Specify VLD Parameters</span></label>
 307                         <div  className="inputControls-radioGroup">
 308                           <label className="inputControls-radio" style={{display: ipProfileList ? 'flex' : 'none'}}>
 309                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={!isVIM && !isUnknown} value='ip-profile-ref' />
 310                             IP Profile
 311                           </label>
 312                           <label className="inputControls-radio">
 313                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isVIM && !isUnknown} value='vim-network-name' />
 314                             VIM Network Name
 315                           </label>
 316                           <label className="inputControls-radio">
 317                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isUnknown} value='none' />
 318                             None
 319                           </label>
 320                         </div>
 321                           {
 322                             isUnknown ? null : isVIM ?
 323                               <div>
 324                                 <TextInput label="Network Name" onChange={self.props.vldFn.updateValue(i, currentType)} value={v[currentType]} />
 325                                 {
 326                                   v['mgmt-network'].toUpperCase() == "TRUE" ?
 327                                     <TextInput label="IPV4 NAT POOL NAME" placeholder={self.props.dataCenterID} onChange={self.props.vldFn.updateValue(i, 'ipv4-nat-pool-name')} value={v['ipv4-nat-pool-name']} />
 328                                     : null
 329                                 }
 330                               </div>
 331                             : <div>
 332                               <SelectOption
 333                               label="IP PROFILE NAME"
 334                                 options={ipProfileList && ipProfileList.map(function(ip) {
 335                                   return {
 336                                     label: ip.name,
 337                                     value: ip.name
 338                                   }
 339                                 })}
 340                                 initial={
 341                                   v['ip-profile-ref'] ? false : true
 342                                 }
 343                                 defaultValue={v['ip-profile-ref']}
 344                                 onChange={self.props.vldFn.updateValue(i, currentType)}>
 345                               </SelectOption>
 346
 347                             </div>
 348                           }
 349                     </div>
 350                   )
 351                 })}
 352       </div>
 353     );
 354   }
 355   ipProfilesHTML = (props) => {
 356     let vldHasIPprofile = false;
 357     props.vlds && props.vlds.map(function(v){
 358       if(v.type == 'ip-profile-ref') {
 359         vldHasIPprofile = true;
 360       }
 361     })
 362     let ipProfileList = props.ipProfileList;
 363     return ipProfileList && vldHasIPprofile &&
 364       (
 365       <div className="configure-nsd_section">
 366         <h3 className="launchpadCard_title">IP Profiles</h3>
 367         {
 368           //IP Config
 369           ipProfileList && ipProfileList.map(function(ip, j) {
 370             let ipl = ip['ip-profile-params'];
 371               return (
 372                 <div className="inputControls" key={j}>
 373                   <div className="inputControls-title" >
 374                     {ip.name}
 375                   </div>
 376                   <div  className="inputControls-radioGroup">
 377                     <label className="inputControls-radio">
 378                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'ipv4'} value='ipv4' />
 379                       ipv4
 380                     </label>
 381                     <label className="inputControls-radio">
 382                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'ipv6'} value='ipv6' />
 383                       ipv6
 384                     </label>
 385                     <label className="inputControls-radio">
 386                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'unknown'} value='unknown' />
 387                       unknown
 388                     </label>
 389                   </div>
 390                   <TextInput
 391                     label="subnet address"
 392                     onChange={props.ipProfileFn.updateProfile(j, 'subnet-address')}
 393                     value={ipl['subnet-address']}
 394                     />
 395                   <TextInput
 396                     label="gateway address"
 397                     onChange={props.ipProfileFn.updateProfile(j, 'gateway-address')}
 398                     value={ipl['gateway-address']}
 399                     />
 400                   <TextInput
 401                     label="security group"
 402                     onChange={props.ipProfileFn.updateProfile(j, 'security-group')}
 403                     value={ipl['security-group']}
 404                     />
 405                   <TextInput
 406                     label="subnet prefix pool"
 407                     onChange={props.ipProfileFn.updateProfile(j, 'subnet-prefix-pool')}
 408                     value={ipl['subnet-prefix-pool']}
 409                     />
 410                     <label>
 411                       <div style={{display:'flex'}}>
 412                         DNS SERVERS <span onClick={props.dnsFn.addDNS(j)} className="addInput"><img src={imgAdd} />Add</span>
 413                       </div>
 414                       {
 415                         ipl['dns-server'] && ipl['dns-server'].map(function(dns, k) {
 416                           return (
 417                             <div key={k} style={{display:'flex'}}>
 418                               <TextInput
 419                                   onChange={props.dnsFn.updateDNS(j,k)}
 420                                   value={ipl['dns-server'][k].address}
 421                                   />
 422                               <span onClick={props.dnsFn.removeDNS(j,k)} className="removeInput">
 423                                 <img src={imgRemove} />Remove</span>
 424                             </div>
 425                           )
 426                         })
 427                       }
 428                     </label>
 429                   <div  className="inputControls-radioGroup">
 430                     <label className="inputControls-radio">
 431                     DHCP ENABLED
 432                       <input type="radio"
 433                         name={'ip-profile-dhcp' + j }
 434                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 435                         checked={ipl.hasOwnProperty('dhcp-params') && ipl['dhcp-params'].enabled}
 436                         value={true} />
 437                       YES
 438                     </label>
 439                     <label className="inputControls-radio">
 440                       <input type="radio"
 441                         name={'ip-profile-dhcp' + j }
 442                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 443                         checked={!ipl.hasOwnProperty('dhcp-params') || !ipl['dhcp-params'].enabled}
 444                         value={false} />
 445                       NO
 446                     </label>
 447                   </div>
 448                   {
 449                     (ipl['dhcp-params'] && ipl['dhcp-params'].enabled) ? dhcpHTML(props, ipl, j) : null
 450                   }
 451                 </div>
 452               )
 453           })
 454         }
 455         </div>);
 456     function dhcpHTML(props, ipl, j){
 457       return (<div>
 458                   <TextInput
 459                     label="DHCP Start Address"
 460                     onChange={props.ipProfileFn.updateDHCP(j, 'start-address')}
 461                     value={ipl['dhcp-params'] && ipl['dhcp-params']['start-address']}
 462                     />
 463                   <TextInput
 464                     label="DHCP Count"
 465                     onChange={props.ipProfileFn.updateDHCP(j, 'count')}
 466                     value={ipl['dhcp-params'] && ipl['dhcp-params']['count']}
 467                     />
 468                 </div>
 469                 );
 470     }
 471   }
 472   sshKeysHTML = (props) => {
 473     let sshKeysList = props.sshKeysList;
 474     let sshKeysRef = props.sshKeysRef;
 475     if(sshKeysList && sshKeysList.length > 0) {
 476       return (
 477         <div className="configure-nsd_section">
 478           <h3 className="launchpadCard_title">SSH Authorized Keys</h3>
 479
 480             {
 481               sshKeysRef.map(function(ref, i) {
 482                 let keyref = JSON.stringify(ref)
 483                 return (
 484                   <div key={keyref.name + '-' + i} className="inputControls inputControls-sshkeys">
 485                     <label>
 486                       <div>
 487                       <SelectOption
 488                         label="Key Pair"
 489                         options={sshKeysList && sshKeysList.map(function(k) {
 490                           return {
 491                             label: k.name,
 492                             value: k
 493                           }
 494                         })}
 495                         ref="keyPairSelection"
 496                         initial={false}
 497                         defaultValue={keyref.name || sshKeysList[0].name}
 498                         onChange={props.sshFn.updateKeyRef(i)}>
 499                       </SelectOption>
 500                       </div>
 501                     </label>
 502                     <label>
 503                       <span onClick={props.sshFn.updateKeyRef(i, true)} className="removeInput">
 504                         <img src={imgRemove} />
 505                         Remove
 506                       </span>
 507                     </label>
 508                   </div>
 509                 )
 510               })
 511             }
 512             <div className="inputControls inputControls-sshkeys ">
 513               <label style={{display: 'flex', 'flexDirection': 'row'}}>
 514               SSH KEY PAIR
 515                 <span onClick={props.sshFn.updateKeyRef().bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 516                   <img src={imgAdd} />
 517                   ADD
 518                 </span>
 519               </label>
 520             </div>
 521         </div>
 522       );
 523     }
 524   }
 525   usersHTML = (props) => {
 526     let usersFn = props.usersFn;
 527     let sshKeysList = props.sshKeysList;
 528     let usersList = props.usersList && props.usersList.map(function(u, i) {
 529       let sshKeysRef = u['ssh-authorized-key'];
 530       return (
 531         <div className="input_group input_group-users" key={i}>
 532           <div className="inputControls">
 533           <div style={{fontWeight: 'bold', display: 'flex'}}>USER <span onClick={usersFn.remove(i)} className="removeInput"><img src={imgRemove} />Remove</span></div>
 534
 535             <TextInput onChange={usersFn.update(i, 'name')} label="USERNAME" value={i.name} />
 536             <TextInput onChange={usersFn.update(i, 'user-info')} label="REAL NAME" value={i.gecos} />
 537             {
 538               sshKeysRef.map(function(ref, j) {
 539                 let keyref = JSON.stringify(ref)
 540                 return (
 541                   <div key={keyref.name + '-' + i + '-' + j} className="inputControls inputControls-sshkeys">
 542                     <label>
 543                       <div>
 544                       <SelectOption
 545                         label="Key Pair"
 546                         options={sshKeysList && sshKeysList.map(function(k) {
 547                           return {
 548                             label: k.name,
 549                             value: k
 550                           }
 551                         })}
 552                         ref="keyPairSelection"
 553                         initial={false}
 554                         defaultValue={ref}
 555                         onChange={usersFn.updateSSHkeyRef(i, j)}>
 556                       </SelectOption>
 557                       </div>
 558                     </label>
 559                     {
 560                       sshKeysRef.length > 0 ?
 561                         <label>
 562                           <span onClick={usersFn.updateSSHkeyRef(i, j, true)} className="removeInput">
 563                             <img src={imgRemove} />
 564                             Remove
 565                           </span>
 566                         </label>
 567                       : null
 568                     }
 569
 570                   </div>
 571                 )
 572               })
 573             }
 574               <div className="inputControls inputControls-sshkeys ">
 575                 <label style={{display: 'flex', 'flexDirection': 'row', 'alignItems': 'center'}}>
 576                 SSH KEY PAIR
 577                   <span onClick={usersFn.updateSSHkeyRef(i).bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 578                     <img src={imgAdd} />
 579                     ADD
 580                   </span>
 581                 </label>
 582               </div>
 583           </div>
 584         </div>
 585       )
 586     });
 587     return (
 588       <div className="configure-nsd_section">
 589         <h3 className="launchpadCard_title">USERS</h3>
 590         {usersList}
 591         <div className="inputControls inputControls-sshkeys inputControls-addUser ">
 592             <span onClick={usersFn.add(sshKeysList)} className="addInput">
 593               <img src={imgAdd} />
 594               ADD USER
 595             </span>
 596         </div>
 597       </div>
 598     )
 599   }
 600
 601   render() {
 602     const props = this.props;
 603     let html;
 604     let self = this;
 605
 606     html = (
 607         <div className="instantiateInputParams">
 608           {
 609             //NS NAMEA AND CLOUD
 610             this.nsConfigHTML(props)
 611           }
 612           {
 613             //VNF VIM ACCOUNTS
 614             this.vnfCloudAccountsHTML(props)
 615           }
 616           {
 617             //INPUT PARAMETERS
 618             this.inputParametersHTML(props)
 619           }
 620           {
 621             //VNF INPUT PARAMETERS
 622             this.vnfInputParametersHTML(props)
 623           }
 624           {
 625             true ?
 626             // self.props.selectedResourceOrchestrator['ro-account-type'] == 'rift-ro' ?
 627             //NS PLACEMENTGROUPS
 628             this.nsPlacementGroupsHTML(props) : null
 629           }
 630           {
 631             true ?
 632             // self.props.selectedResourceOrchestrator['ro-account-type'] == 'rift-ro' ?
 633             //VNF PLACEMENTGROUPS
 634             this.vnfPlacementGroupsHTML(props) : null
 635           }
 636           {
 637             //VLD CONFIGURATION
 638             this.vldsHTML(props)
 639           }
 640           {
 641             //IP PROFILE CONFIGURATION
 642             this.ipProfilesHTML(props)
 643           }
 644           {
 645             //SSH KEY ASSIGNMENTS
 646             this.sshKeysHTML(props)
 647           }
 648           {
 649             //USER MANAGEMENT
 650             this.usersHTML(props)
 651           }
 652         </div>
 653     )
 654     return html;
 655   }
 656 }
 657 function showInput(e){
 658   let target = e.target;
 659   if(target.parentElement.classList.contains("addInput")) {
 660     target = target.parentElement;
 661   }
 662   target.style.display = 'none';
 663   target.parentElement.nextElementSibling.style.display = 'flex';
 664   // e.target.parentElement.nextElementSibling.children[1].style.display = 'initial';
 665 }
 666 function hideInput(e){
 667   let target = e.target;
 668   if(target.parentElement.classList.contains("removeInput")) {
 669     target = target.parentElement;
 670   }
 671   target.parentElement.style.display = 'none';
 672   target.parentElement.previousElementSibling.children[1].style.display = 'inline';
 673   target.previousSibling.value = '';
 674 }
 675 function addDNS(){}
 676 function removeDNS(){}
 677 function constructROOptions(resourceOrchestrators){
 678   let ROOptions = resourceOrchestrators && resourceOrchestrators.map(function(ro, index) {
 679     return {
 680       label: ro.name,
 681       value: ro
 682     }
 683   });
 684   return ROOptions;
 685 }
 686 function constructCloudAccountOptions(cloudAccounts){
 687   let CloudAccountOptions = cloudAccounts && cloudAccounts.map(function(ca, index) {
 688     return {
 689       label: ca.name,
 690       value: ca
 691     }
 692   });
 693   return CloudAccountOptions;
 694 }
 695 function constructDataCenterOptions(dataCenters){
 696   let DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) {
 697     return {
 698       label: dc.name,
 699       value: dc.name
 700     }
 701   });
 702   return DataCenterOptions;
 703 }
 704 function dataCentersHTML(dataCenters, onChange, initial) {
 705   //Build DataCenter options
 706   //Relook at this, why is it an object?
 707   let DataCenterOptions = [];
 708   DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) {
 709     return {
 710       label: dc.name,
 711       value: dc.uuid
 712     }
 713   });
 714   if (dataCenters && dataCenters.length > 0) {
 715     return (
 716       <label>Data Center
 717         <SelectOption initial={!!initial} options={DataCenterOptions} onChange={onChange} />
 718       </label>
 719     )
 720   }
 721 }
 722 function updateNewSshKeyRefSelection(e) {
 723   this.setState({
 724     newRefSelection: e.target.value
 725   })
 726 }
 727 function resetRef() {
 728     this.setState({
 729     newRefSelection: null
 730   })
 731 }
 732 InstantiateInputParams.defaultProps = {
 733   data: [],
 734   sshKeysList: [],
 735   sshKeysRef: [],
 736   users: {}
 737 }