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="inputControls">
  35             <TextInput label="Instance Name" type="text" pattern="^[a-zA-Z0-9_]*$" style={{textAlign:'left'}} onChange={props.updateName} value={props.name}/>
  36           {
  37             !isOpenMano(props.ro) ?
  38               (
  39                 <label>Select VIM Account
  40                   <SelectOption options={constructCloudAccountOptions(props.cloudAccounts)} onChange={props.nsFn.updateSelectedCloudAccount} />
  41                 </label>
  42               )
  43             : null
  44           }
  45           {
  46             isOpenMano(props.ro) ?
  47               dataCentersHTML(props.dataCenters[props.ro.name],
  48                               props.nsFn.updateSelectedDataCenter)
  49               : null
  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.name}</h4>
  72                   {
  73                     !isOpenMano(props.ro) ?
  74                       (
  75                         <label>Select VIM Account
  76                           <SelectOption options={constructCloudAccountOptions(props.cloudAccounts)} initial={true} onChange={props.vnfFn.updateSelectedCloudAccount.bind(null, v['member-vnf-index'])} defaultValue={defaultValue} />
  77                         </label>
  78                       )
  79                     : null
  80                   }
  81                       {
  82                         isOpenMano(props.ro) ?
  83                           dataCentersHTML(
  84                                           props.dataCenters[props.ro.name],
  85                                           props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index']), true)
  86                           : null
  87                       }
  88                       {
  89                         (props.configAgentAccounts && props.configAgentAccounts.length > 0) ?
  90                         <label>Select Config Agent Account
  91                           <SelectOption options={props.configAgentAccounts && props.configAgentAccounts.map(function(c) {
  92                             return {
  93                               label: c.name,
  94                               value: c.name
  95                             }
  96                           })} initial={true} onChange={props.vnfFn.updateSelectedConfigAgent(v['member-vnf-index'])} defaultValue={false} />
  97                         </label> : null
  98                       }
  99                     </div>
 100                 )
 101               })
 102         }
 103       </div>
 104     )
 105   }
 106   inputParametersHTML = (props) => {
 107     let inputParameters = props.inputParameters;
 108     return inputParameters && inputParameters.map(function(input, i) {
 109         return (
 110                 <div className="configure-nsd_section" key={i}>
 111                   <h3 className="launchpadCard_title">Input Parameters</h3>
 112                   <div className="inputControls">
 113                       <TextInput label={ input.label || input.xpath } type="text" onChange={props.updateInputParam.bind(self, i)} />
 114                   </div>
 115                 </div>
 116         )
 117       })
 118   }
 119   nsPlacementGroupsHTML = (props) => {
 120     let nsPlacementGroups = props.nsPlacementGroups;
 121     let displayPlacementGroups = props.displayPlacementGroups;
 122     if (nsPlacementGroups && nsPlacementGroups.length > 0 && displayPlacementGroups) {
 123       return (
 124         <div className="configure-nsd_section">
 125           <h3 className="launchpadCard_title">NS Placement Groups</h3>
 126             {
 127               nsPlacementGroups.map(function(input, i) {
 128                 return (
 129                   <div  key={i} className="configure-nsd_section-info">
 130                     <div className="placementGroup_description">
 131                       <div className="placementGroup_description-name">
 132                         <strong>{input.name}</strong> contains: {
 133                           input['member-vnfd'].map((m,i) => {
 134                             let s = m.name;
 135                             if(i>0) {
 136                               s = ', ' + m.name
 137                             };
 138                             return s;
 139                           })
 140                         }
 141                       </div>
 142                       <div><em>{input.requirement}</em></div>
 143                       <div><strong>Strategy:</strong> {input.strategy}</div>
 144                     </div>
 145                     <label>
 146                       <span> Availability Zone <span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span> </span>
 147                       <div  style={{display:'none'}}>
 148                       <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, 'availability-zone')} />
 149                       <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 150                       </div>
 151                     </label>
 152                     <label>
 153                       <span> Affinity/Anti-affinity Server Group<span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span></span>
 154                       <div style={{display:'none'}}>
 155                         <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, 'server-group')} />
 156                         <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 157                       </div>
 158                     </label>
 159                     <div className="host-aggregate">
 160                       <label>
 161                         <span> Host Aggregates <span onClick={props.nsFn.addHostAggregate.bind(self, i)} className="addInput"  ><img src={imgAdd} />Add</span></span>
 162                       {
 163                         input['host-aggregate'].length > 0 ?
 164                           input['host-aggregate'].map((h,j) => {
 165                             let key = h.key || '';
 166                             let value = h.value || '';
 167                             return (
 168
 169                                   <div className="input_group" key={j}>
 170                                     <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, j, 'key')} placeholder="KEY" value={key} />
 171                                     <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, j, 'value')} placeholder="VALUE"  value={value} />
 172                                     <span onClick={props.nsFn.removeHostAggregate.bind(self, i, j)} className="removeInput"><img src={imgRemove} />Remove</span>
 173                                   </div>
 174                             )
 175                           }) : ''
 176                       }
 177                       </label>
 178                     </div>
 179                     </div>
 180                 );
 181               })
 182             }
 183        </div>
 184      );
 185     }
 186   }
 187   vnfPlacementGroupsHTML = (props) => {
 188     let vnfPlacementGroups = props.vnfPlacementGroups;
 189     let displayPlacementGroups = props.displayPlacementGroups;
 190     if (vnfPlacementGroups && vnfPlacementGroups.length > 0 && displayPlacementGroups) {
 191       return vnfPlacementGroups.map(function(input, i) {
 192             return (
 193               <div className="configure-nsd_section" key={i}>
 194                 <h3 className="launchpadCard_title">{input['vnf-name']} VNF Placement Group</h3>
 195                   <div className="configure-nsd_section-info">
 196                     <div className="placementGroup_description">
 197                       <div className="placementGroup_description-name">
 198                         <strong>{input.name}</strong> contains: {
 199                           input['member-vdus'].map((m,i) => {
 200                             let s = m['member-vdu-ref'];
 201                             if(i>0) {
 202                               s = ', ' + m['member-vdu-ref']
 203                             };
 204                             return s;
 205                           })
 206                         }
 207                       </div>
 208                       <div><em>{input.requirement}</em></div>
 209                       <div><strong>Strategy</strong>: {input.strategy}</div>
 210                     </div>
 211                     <label>
 212                       <span> Availability Zone <span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span></span>
 213                       <div  style={{display:'none'}}>
 214                         <TextInput type="text" onChange={props.vnfFn.placementGroupUpdate.bind(self, i, 'availability-zone')} />
 215                            <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 216                       </div>
 217                     </label>
 218                     <label>
 219                       <span> Affinity/Anti-affinity Server Group<span onClick={showInput} className="addInput"><img src={imgAdd} />Add</span></span>
 220                       <div  style={{display:'none'}}>
 221                         <TextInput type="text" onChange={props.vnfFn.placementGroupUpdate.bind(self, i, 'server-group')} />
 222                          <span onClick={hideInput} className="removeInput"><img src={imgRemove} />Remove</span>
 223                       </div>
 224                     </label>
 225                     <div className="host-aggregate">
 226                     <label>
 227                       <span> Host Aggregates <span onClick={props.vnfFn.addHostAggregate.bind(self, i)} className="addInput"><img src={imgAdd} />Add</span></span>
 228                       {
 229                         input['host-aggregate'].length > 0 ?
 230                           input['host-aggregate'].map((h,j) => {
 231                             let key = h.key || '';
 232                             let value = h.value || '';
 233                             return (
 234
 235                                   <div className="input_group" key={j}>
 236                                     <TextInput type="text" onChange={props.vnfFn.hostAggregateUpdate.bind(self, i, j, 'key')} placeholder="KEY" value={key} />
 237                                     <TextInput type="text" onChange={props.vnfFn.hostAggregateUpdate.bind(self, i, j, 'value')} placeholder="VALUE"  value={value} />
 238                                     <span onClick={props.vnfFn.removeHostAggregate.bind(self, i, j)} className="removeInput"><img src={imgRemove} />Remove</span>
 239                                   </div>
 240
 241                             )
 242                           }) : ''
 243                       }
 244                       </label>
 245                     </div>
 246                     </div>
 247                 </div>
 248             );
 249           });
 250     }
 251   }
 252   vldsHTML = (props) => {
 253     let self = this;
 254     let ipProfileList = props.ipProfileList;
 255     let vlds = props.vlds;
 256     return vlds && (
 257       <div className="configure-nsd_section">
 258         <h3 className="launchpadCard_title">VLDs</h3>
 259             {vlds && vlds.map(function(v, i) {
 260                   let currentType = v.type;
 261                   let isVIM = (currentType == 'vim-network-name');
 262                   let isUnknown = (currentType == 'none') || ((currentType != 'vim-network-name') && (currentType != 'ip-profile-ref'));
 263                   return (
 264                     <div key={self.props.nsd.id + '-' + i} className="inputControls">
 265                         <h4 className="inputControls-title">VLD: {v['short-name'] ? v['short-name'] : v['name']}</h4>
 266                         <label><span>Specify VLD Parameters</span></label>
 267                         <div  className="inputControls-radioGroup">
 268                           <label className="inputControls-radio" style={{display: ipProfileList ? 'flex' : 'none'}}>
 269                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={!isVIM && !isUnknown} value='ip-profile-ref' />
 270                             IP Profile
 271                           </label>
 272                           <label className="inputControls-radio">
 273                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isVIM && !isUnknown} value='vim-network-name' />
 274                             VIM Network Name
 275                           </label>
 276                           <label className="inputControls-radio">
 277                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isUnknown} value='none' />
 278                             None
 279                           </label>
 280                         </div>
 281                           {
 282                             isUnknown ? null : isVIM ?
 283                             <TextInput label="Network Name" onChange={self.props.vldFn.updateValue(i, currentType)} value={v[currentType]} /> :
 284                             <div>
 285                               <SelectOption
 286                               label="IP PROFILE NAME"
 287                                 options={ipProfileList && ipProfileList.map(function(ip) {
 288                                   return {
 289                                     label: ip.name,
 290                                     value: ip.name
 291                                   }
 292                                 })}
 293                                 initial={
 294                                   v['ip-profile-ref'] ? false : true
 295                                 }
 296                                 defaultValue={v['ip-profile-ref']}
 297                                 onChange={self.props.vldFn.updateValue(i, currentType)}>
 298                               </SelectOption>
 299
 300                             </div>
 301                           }
 302                     </div>
 303                   )
 304                 })}
 305       </div>
 306     );
 307   }
 308   ipProfilesHTML = (props) => {
 309     let vldHasIPprofile = false;
 310     props.vlds && props.vlds.map(function(v){
 311       if(v.type == 'ip-profile-ref') {
 312         vldHasIPprofile = true;
 313       }
 314     })
 315     let ipProfileList = props.ipProfileList;
 316     return ipProfileList && vldHasIPprofile &&
 317       (
 318       <div className="configure-nsd_section">
 319         <h3 className="launchpadCard_title">IP Profiles</h3>
 320         {
 321           //IP Config
 322           ipProfileList && ipProfileList.map(function(ip, j) {
 323             let ipl = ip['ip-profile-params'];
 324               return (
 325                 <div className="inputControls" key={j}>
 326                   <div className="inputControls-title" >
 327                     {ip.name}
 328                   </div>
 329                   <div  className="inputControls-radioGroup">
 330                     <label className="inputControls-radio">
 331                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'ipv4'} value='ipv4' />
 332                       ipv4
 333                     </label>
 334                     <label className="inputControls-radio">
 335                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'ipv6'} value='ipv6' />
 336                       ipv6
 337                     </label>
 338                     <label className="inputControls-radio">
 339                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'unknown'} value='unknown' />
 340                       unknown
 341                     </label>
 342                   </div>
 343                   <TextInput
 344                     label="subnet address"
 345                     onChange={props.ipProfileFn.updateProfile(j, 'subnet-address')}
 346                     value={ipl['subnet-address']}
 347                     />
 348                   <TextInput
 349                     label="gateway address"
 350                     onChange={props.ipProfileFn.updateProfile(j, 'gateway-address')}
 351                     value={ipl['gateway-address']}
 352                     />
 353                   <TextInput
 354                     label="security group"
 355                     onChange={props.ipProfileFn.updateProfile(j, 'security-group')}
 356                     value={ipl['security-group']}
 357                     />
 358                   <TextInput
 359                     label="subnet prefix pool"
 360                     onChange={props.ipProfileFn.updateProfile(j, 'subnet-prefix-pool')}
 361                     value={ipl['subnet-prefix-pool']}
 362                     />
 363                     <label>
 364                       <div style={{display:'flex'}}>
 365                         DNS SERVERS <span onClick={props.dnsFn.addDNS(j)} className="addInput"><img src={imgAdd} />Add</span>
 366                       </div>
 367                       {
 368                         ipl['dns-server'] && ipl['dns-server'].map(function(dns, k) {
 369                           return (
 370                             <div key={k} style={{display:'flex'}}>
 371                               <TextInput
 372                                   onChange={props.dnsFn.updateDNS(j,k)}
 373                                   value={ipl['dns-server'][k].address}
 374                                   />
 375                               <span onClick={props.dnsFn.removeDNS(j,k)} className="removeInput">
 376                                 <img src={imgRemove} />Remove</span>
 377                             </div>
 378                           )
 379                         })
 380                       }
 381                     </label>
 382                   <div  className="inputControls-radioGroup">
 383                     <label className="inputControls-radio">
 384                     DHCP ENABLED
 385                       <input type="radio"
 386                         name={'ip-profile-dhcp' + j }
 387                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 388                         checked={ipl.hasOwnProperty('dhcp-params') && ipl['dhcp-params'].enabled}
 389                         value={true} />
 390                       YES
 391                     </label>
 392                     <label className="inputControls-radio">
 393                       <input type="radio"
 394                         name={'ip-profile-dhcp' + j }
 395                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 396                         checked={!ipl.hasOwnProperty('dhcp-params') || !ipl['dhcp-params'].enabled}
 397                         value={false} />
 398                       NO
 399                     </label>
 400                   </div>
 401                   {
 402                     (ipl['dhcp-params'] && ipl['dhcp-params'].enabled) ? dhcpHTML(props, ipl, j) : null
 403                   }
 404                 </div>
 405               )
 406           })
 407         }
 408         </div>);
 409     function dhcpHTML(props, ipl, j){
 410       return (<div>
 411                   <TextInput
 412                     label="DHCP Start Address"
 413                     onChange={props.ipProfileFn.updateDHCP(j, 'start-address')}
 414                     value={ipl['dhcp-params'] && ipl['dhcp-params']['start-address']}
 415                     />
 416                   <TextInput
 417                     label="DHCP Count"
 418                     onChange={props.ipProfileFn.updateDHCP(j, 'count')}
 419                     value={ipl['dhcp-params'] && ipl['dhcp-params']['count']}
 420                     />
 421                 </div>
 422                 );
 423     }
 424   }
 425   sshKeysHTML = (props) => {
 426     let sshKeysList = props.sshKeysList;
 427     let sshKeysRef = props.sshKeysRef;
 428     if(sshKeysList && sshKeysList.length > 0) {
 429       return (
 430         <div className="configure-nsd_section">
 431           <h3 className="launchpadCard_title">SSH Authorized Keys</h3>
 432
 433             {
 434               sshKeysRef.map(function(ref, i) {
 435                 let keyref = JSON.stringify(ref)
 436                 return (
 437                   <div key={keyref.name + '-' + i} className="inputControls inputControls-sshkeys">
 438                     <label>
 439                       <div>
 440                       <SelectOption
 441                         label="Key Pair"
 442                         options={sshKeysList && sshKeysList.map(function(k) {
 443                           return {
 444                             label: k.name,
 445                             value: k
 446                           }
 447                         })}
 448                         ref="keyPairSelection"
 449                         initial={false}
 450                         defaultValue={keyref.name || sshKeysList[0].name}
 451                         onChange={props.sshFn.updateKeyRef(i)}>
 452                       </SelectOption>
 453                       </div>
 454                     </label>
 455                     <label>
 456                       <span onClick={props.sshFn.updateKeyRef(i, true)} className="removeInput">
 457                         <img src={imgRemove} />
 458                         Remove
 459                       </span>
 460                     </label>
 461                   </div>
 462                 )
 463               })
 464             }
 465             <div className="inputControls inputControls-sshkeys ">
 466               <label style={{display: 'flex', 'flexDirection': 'row'}}>
 467               SSH KEY PAIR
 468                 <span onClick={props.sshFn.updateKeyRef().bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 469                   <img src={imgAdd} />
 470                   ADD
 471                 </span>
 472               </label>
 473             </div>
 474         </div>
 475       );
 476     }
 477   }
 478   usersHTML = (props) => {
 479     let usersFn = props.usersFn;
 480     let sshKeysList = props.sshKeysList;
 481     let usersList = props.usersList && props.usersList.map(function(u, i) {
 482       let sshKeysRef = u['ssh-authorized-key'];
 483       return (
 484         <div className="input_group input_group-users" key={i}>
 485           <div className="inputControls">
 486           <div style={{fontWeight: 'bold', display: 'flex'}}>USER <span onClick={usersFn.remove(i)} className="removeInput"><img src={imgRemove} />Remove</span></div>
 487             <TextInput onChange={usersFn.update(i, 'name')} label="USERNAME" value={i.name} />
 488             <TextInput onChange={usersFn.update(i, 'user-info')} label="REAL NAME" value={i.gecos} />
 489             {
 490               sshKeysRef.map(function(ref, j) {
 491                 let keyref = JSON.stringify(ref)
 492                 return (
 493                   <div key={keyref.name + '-' + i + '-' + j} className="inputControls inputControls-sshkeys">
 494                     <label>
 495                       <div>
 496                       <SelectOption
 497                         label="Key Pair"
 498                         options={sshKeysList && sshKeysList.map(function(k) {
 499                           return {
 500                             label: k.name,
 501                             value: k
 502                           }
 503                         })}
 504                         ref="keyPairSelection"
 505                         initial={false}
 506                         defaultValue={ref}
 507                         onChange={usersFn.updateSSHkeyRef(i, j)}>
 508                       </SelectOption>
 509                       </div>
 510                     </label>
 511                     {
 512                       sshKeysRef.length > 0 ?
 513                         <label>
 514                           <span onClick={usersFn.updateSSHkeyRef(i, j, true)} className="removeInput">
 515                             <img src={imgRemove} />
 516                             Remove
 517                           </span>
 518                         </label>
 519                       : null
 520                     }
 521
 522                   </div>
 523                 )
 524               })
 525             }
 526               <div className="inputControls inputControls-sshkeys ">
 527                 <label style={{display: 'flex', 'flexDirection': 'row', 'alignItems': 'center'}}>
 528                 SSH KEY PAIR
 529                   <span onClick={usersFn.updateSSHkeyRef(i).bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 530                     <img src={imgAdd} />
 531                     ADD
 532                   </span>
 533                 </label>
 534               </div>
 535           </div>
 536         </div>
 537       )
 538     });
 539     return (
 540       <div className="configure-nsd_section">
 541         <h3 className="launchpadCard_title">USERS</h3>
 542         {usersList}
 543         <div className="inputControls inputControls-sshkeys inputControls-addUser ">
 544             <span onClick={usersFn.add(sshKeysList)} className="addInput">
 545               <img src={imgAdd} />
 546               ADD USER
 547             </span>
 548         </div>
 549       </div>
 550     )
 551   }
 552
 553   render() {
 554     const props = this.props;
 555     let html;
 556     let self = this;
 557
 558     html = (
 559         <div className="instantiateInputParams">
 560           {
 561             //NS NAMEA AND CLOUD
 562             this.nsConfigHTML(props)
 563           }
 564           {
 565             //VNF VIM ACCOUNTS
 566             this.vnfCloudAccountsHTML(props)
 567           }
 568           {
 569             //INPUT PARAMETERS
 570             this.inputParametersHTML(props)
 571           }
 572           {
 573             //NS PLACEMENTGROUPS
 574             this.nsPlacementGroupsHTML(props)
 575           }
 576           {
 577             //VNF PLACEMENTGROUPS
 578             this.vnfPlacementGroupsHTML(props)
 579           }
 580           {
 581             //VLD CONFIGURATION
 582             this.vldsHTML(props)
 583           }
 584           {
 585             //IP PROFILE CONFIGURATION
 586             this.ipProfilesHTML(props)
 587           }
 588           {
 589             //SSH KEY ASSIGNMENTS
 590             this.sshKeysHTML(props)
 591           }
 592           {
 593             //USER MANAGEMENT
 594             this.usersHTML(props)
 595           }
 596         </div>
 597     )
 598     return html;
 599   }
 600 }
 601 function showInput(e){
 602   let target = e.target;
 603   if(target.parentElement.classList.contains("addInput")) {
 604     target = target.parentElement;
 605   }
 606   target.style.display = 'none';
 607   target.parentElement.nextElementSibling.style.display = 'flex';
 608   // e.target.parentElement.nextElementSibling.children[1].style.display = 'initial';
 609 }
 610 function hideInput(e){
 611   let target = e.target;
 612   if(target.parentElement.classList.contains("removeInput")) {
 613     target = target.parentElement;
 614   }
 615   target.parentElement.style.display = 'none';
 616   target.parentElement.previousElementSibling.children[1].style.display = 'inline';
 617   target.previousSibling.value = '';
 618 }
 619 function addDNS(){}
 620 function removeDNS(){}
 621 function constructCloudAccountOptions(cloudAccounts){
 622   let CloudAccountOptions = cloudAccounts && cloudAccounts.map(function(ca, index) {
 623     return {
 624       label: ca.name,
 625       value: ca
 626     }
 627   });
 628   return CloudAccountOptions;
 629 }
 630 function dataCentersHTML(dataCenters, onChange, initial) {
 631   //Build DataCenter options
 632   //Relook at this, why is it an object?
 633   let DataCenterOptions = [];
 634   DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) {
 635     return {
 636       label: dc.name,
 637       value: dc.uuid
 638     }
 639   });
 640   if (dataCenters && dataCenters.length > 0) {
 641     return (
 642       <label>Select Data Center
 643         <SelectOption initial={!!initial} options={DataCenterOptions} onChange={onChange} />
 644       </label>
 645     )
 646   }
 647 }
 648 function isOpenMano(account) {
 649   if (account) {
 650     let a = account;
 651     if (a.constructor.name == 'String') {
 652       a = JSON.parse(a);
 653     }
 654     return a['account-type'] == 'openmano';
 655   } else {
 656     return false;
 657   }
 658 }
 659 function updateNewSshKeyRefSelection(e) {
 660   this.setState({
 661     newRefSelection: e.target.value
 662   })
 663 }
 664 function resetRef() {
 665     this.setState({
 666     newRefSelection: null
 667   })
 668 }
 669 InstantiateInputParams.defaultProps = {
 670   data: [],
 671   sshKeysList: [],
 672   sshKeysRef: [],
 673   users: {}
 674 }