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 == 'unknown') || ((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                         <div  className="inputControls-radioGroup">
 267                           <label className="inputControls-radio" style={{display: ipProfileList ? 'flex' : 'none'}}>
 268                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={!isVIM && !isUnknown} value='ip-profile-ref' />
 269                             IP Profile
 270                           </label>
 271                           <label className="inputControls-radio">
 272                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isVIM && !isUnknown} value='vim-network-name' />
 273                             VIM Network Name
 274                           </label>
 275                           <label className="inputControls-radio">
 276                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isUnknown} value='unknown' />
 277                             Unknown
 278                           </label>
 279                         </div>
 280                           {
 281                             isUnknown ? null : isVIM ?
 282                             <TextInput label="Network Name" onChange={self.props.vldFn.updateValue(i, currentType)} value={v[currentType]} /> :
 283                             <div>
 284                               <SelectOption
 285                               label="IP PROFILE NAME"
 286                                 options={ipProfileList && ipProfileList.map(function(ip) {
 287                                   return {
 288                                     label: ip.name,
 289                                     value: ip.name
 290                                   }
 291                                 })}
 292                                 initial={
 293                                   v['ip-profile-ref'] ? false : true
 294                                 }
 295                                 defaultValue={v['ip-profile-ref']}
 296                                 onChange={self.props.vldFn.updateValue(i, currentType)}>
 297                               </SelectOption>
 298
 299                             </div>
 300                           }
 301                     </div>
 302                   )
 303                 })}
 304       </div>
 305     );
 306   }
 307   ipProfilesHTML = (props) => {
 308     let vldHasIPprofile = false;
 309     props.vlds && props.vlds.map(function(v){
 310       if(v.type == 'ip-profile-ref') {
 311         vldHasIPprofile = true;
 312       }
 313     })
 314     let ipProfileList = props.ipProfileList;
 315     return ipProfileList && vldHasIPprofile &&
 316       (
 317       <div className="configure-nsd_section">
 318         <h3 className="launchpadCard_title">IP Profiles</h3>
 319         {
 320           //IP Config
 321           ipProfileList && ipProfileList.map(function(ip, j) {
 322             let ipl = ip['ip-profile-params'];
 323               return (
 324                 <div className="inputControls" key={j}>
 325                   <div className="inputControls-title" >
 326                     {ip.name}
 327                   </div>
 328                   <div  className="inputControls-radioGroup">
 329                     <label className="inputControls-radio">
 330                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'ipv4'} value='ipv4' />
 331                       ipv4
 332                     </label>
 333                     <label className="inputControls-radio">
 334                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'ipv6'} value='ipv6' />
 335                       ipv6
 336                     </label>
 337                     <label className="inputControls-radio">
 338                       <input type="radio" name={'ip-profile-' + j } onChange={props.ipProfileFn.updateVersion(j)} checked={ipl['ip-version'] == 'unknown'} value='unknown' />
 339                       unknown
 340                     </label>
 341                   </div>
 342                   <TextInput
 343                     label="subnet address"
 344                     onChange={props.ipProfileFn.updateProfile(j, 'subnet-address')}
 345                     value={ipl['subnet-address']}
 346                     />
 347                   <TextInput
 348                     label="gateway address"
 349                     onChange={props.ipProfileFn.updateProfile(j, 'gateway-address')}
 350                     value={ipl['gateway-address']}
 351                     />
 352                   <TextInput
 353                     label="security group"
 354                     onChange={props.ipProfileFn.updateProfile(j, 'security-group')}
 355                     value={ipl['security-group']}
 356                     />
 357                   <TextInput
 358                     label="subnet prefix pool"
 359                     onChange={props.ipProfileFn.updateProfile(j, 'subnet-prefix-pool')}
 360                     value={ipl['subnet-prefix-pool']}
 361                     />
 362                     <label>
 363                       <div style={{display:'flex'}}>
 364                         DNS SERVERS <span onClick={props.dnsFn.addDNS(j)} className="addInput"><img src={imgAdd} />Add</span>
 365                       </div>
 366                       {
 367                         ipl['dns-server'] && ipl['dns-server'].map(function(dns, k) {
 368                           return (
 369                             <div key={k} style={{display:'flex'}}>
 370                               <TextInput
 371                                   onChange={props.ipProfileFn.updateProfile(j,k)}
 372                                   value={ipl['dns-server'][k]}
 373                                   />
 374                               <span onClick={props.dnsFn.removeDNS(j,k)} className="removeInput">
 375                                 <img src={imgRemove} />Remove</span>
 376                             </div>
 377                           )
 378                         })
 379                       }
 380                     </label>
 381                   <div  className="inputControls-radioGroup">
 382                     <label className="inputControls-radio">
 383                     DHCP ENABLED
 384                       <input type="radio"
 385                         name={'ip-profile-dhcp' + j }
 386                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 387                         checked={ipl.hasOwnProperty('dhcp-params') && ipl['dhcp-params'].enabled}
 388                         value={true} />
 389                       YES
 390                     </label>
 391                     <label className="inputControls-radio">
 392                       <input type="radio"
 393                         name={'ip-profile-dhcp' + j }
 394                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 395                         checked={!ipl.hasOwnProperty('dhcp-params') || !ipl['dhcp-params'].enabled}
 396                         value={false} />
 397                       NO
 398                     </label>
 399                   </div>
 400                   {
 401                     (ipl['dhcp-params'] && ipl['dhcp-params'].enabled) ? dhcpHTML(props, ipl, j) : null
 402                   }
 403                 </div>
 404               )
 405           })
 406         }
 407         </div>);
 408     function dhcpHTML(props, ipl, j){
 409       return (<div>
 410                   <TextInput
 411                     label="DCHP Start Address"
 412                     onChange={props.ipProfileFn.updateDHCP(j, 'start-address')}
 413                     value={ipl['dhcp-params'] && ipl['dhcp-params']['start-address']}
 414                     />
 415                   <TextInput
 416                     label="DCHP Count"
 417                     onChange={props.ipProfileFn.updateDHCP(j, 'count')}
 418                     value={ipl['dhcp-params'] && ipl['dhcp-params']['count']}
 419                     />
 420                 </div>
 421                 );
 422     }
 423   }
 424   sshKeysHTML = (props) => {
 425     let sshKeysList = props.sshKeysList;
 426     let sshKeysRef = props.sshKeysRef;
 427     if(sshKeysList && sshKeysList.length > 0) {
 428       return (
 429         <div className="configure-nsd_section">
 430           <h3 className="launchpadCard_title">SSH Authorized Keys</h3>
 431
 432             {
 433               sshKeysRef.map(function(ref, i) {
 434                 let keyref = JSON.stringify(ref)
 435                 return (
 436                   <div key={keyref.name + '-' + i} className="inputControls inputControls-sshkeys">
 437                     <label>
 438                       <div>
 439                       <SelectOption
 440                         label="Key Pair"
 441                         options={sshKeysList && sshKeysList.map(function(k) {
 442                           return {
 443                             label: k.name,
 444                             value: k
 445                           }
 446                         })}
 447                         ref="keyPairSelection"
 448                         initial={false}
 449                         defaultValue={keyref.name || sshKeysList[0].name}
 450                         onChange={props.sshFn.updateKeyRef(i)}>
 451                       </SelectOption>
 452                       </div>
 453                     </label>
 454                     <label>
 455                       <span onClick={props.sshFn.updateKeyRef(i, true)} className="removeInput">
 456                         <img src={imgRemove} />
 457                         Remove
 458                       </span>
 459                     </label>
 460                   </div>
 461                 )
 462               })
 463             }
 464             <div className="inputControls inputControls-sshkeys ">
 465               <label style={{display: 'flex', 'flexDirection': 'row'}}>
 466               SSH KEY PAIR
 467                 <span onClick={props.sshFn.updateKeyRef().bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 468                   <img src={imgAdd} />
 469                   ADD
 470                 </span>
 471               </label>
 472             </div>
 473         </div>
 474       );
 475     }
 476   }
 477   usersHTML = (props) => {
 478     let usersFn = props.usersFn;
 479     let sshKeysList = props.sshKeysList;
 480     let usersList = props.usersList && props.usersList.map(function(u, i) {
 481       let sshKeysRef = u['ssh-authorized-key'];
 482       return (
 483         <div className="input_group input_group-users" key={i}>
 484           <div className="inputControls">
 485           <div style={{fontWeight: 'bold', display: 'flex'}}>USER <span onClick={usersFn.remove(i)} className="removeInput"><img src={imgRemove} />Remove</span></div>
 486             <TextInput onChange={usersFn.update(i, 'name')} label="USERNAME" value={i.name} />
 487             <TextInput onChange={usersFn.update(i, 'user-info')} label="REAL NAME" value={i.gecos} />
 488             {
 489               sshKeysRef.map(function(ref, j) {
 490                 let keyref = JSON.stringify(ref)
 491                 return (
 492                   <div key={keyref.name + '-' + i + '-' + j} className="inputControls inputControls-sshkeys">
 493                     <label>
 494                       <div>
 495                       <SelectOption
 496                         label="Key Pair"
 497                         options={sshKeysList && sshKeysList.map(function(k) {
 498                           return {
 499                             label: k.name,
 500                             value: k
 501                           }
 502                         })}
 503                         ref="keyPairSelection"
 504                         initial={false}
 505                         defaultValue={ref}
 506                         onChange={usersFn.updateSSHkeyRef(i, j)}>
 507                       </SelectOption>
 508                       </div>
 509                     </label>
 510                     {
 511                       sshKeysRef.length > 0 ?
 512                         <label>
 513                           <span onClick={usersFn.updateSSHkeyRef(i, j, true)} className="removeInput">
 514                             <img src={imgRemove} />
 515                             Remove
 516                           </span>
 517                         </label>
 518                       : null
 519                     }
 520
 521                   </div>
 522                 )
 523               })
 524             }
 525               <div className="inputControls inputControls-sshkeys ">
 526                 <label style={{display: 'flex', 'flexDirection': 'row', 'alignItems': 'center'}}>
 527                 SSH KEY PAIR
 528                   <span onClick={usersFn.updateSSHkeyRef(i).bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 529                     <img src={imgAdd} />
 530                     ADD
 531                   </span>
 532                 </label>
 533               </div>
 534           </div>
 535         </div>
 536       )
 537     });
 538     return (
 539       <div className="configure-nsd_section">
 540         <h3 className="launchpadCard_title">USERS</h3>
 541         {usersList}
 542         <div className="inputControls inputControls-sshkeys inputControls-addUser ">
 543             <span onClick={usersFn.add(sshKeysList)} className="addInput">
 544               <img src={imgAdd} />
 545               ADD USER
 546             </span>
 547         </div>
 548       </div>
 549     )
 550   }
 551
 552   render() {
 553     const props = this.props;
 554     let html;
 555     let self = this;
 556
 557     html = (
 558         <div className="instantiateInputParams">
 559           {
 560             //NS NAMEA AND CLOUD
 561             this.nsConfigHTML(props)
 562           }
 563           {
 564             //VNF VIM ACCOUNTS
 565             this.vnfCloudAccountsHTML(props)
 566           }
 567           {
 568             //INPUT PARAMETERS
 569             this.inputParametersHTML(props)
 570           }
 571           {
 572             //NS PLACEMENTGROUPS
 573             this.nsPlacementGroupsHTML(props)
 574           }
 575           {
 576             //VNF PLACEMENTGROUPS
 577             this.vnfPlacementGroupsHTML(props)
 578           }
 579           {
 580             //VLD CONFIGURATION
 581             this.vldsHTML(props)
 582           }
 583           {
 584             //IP PROFILE CONFIGURATION
 585             this.ipProfilesHTML(props)
 586           }
 587           {
 588             //SSH KEY ASSIGNMENTS
 589             this.sshKeysHTML(props)
 590           }
 591           {
 592             //USER MANAGEMENT
 593             this.usersHTML(props)
 594           }
 595         </div>
 596     )
 597     return html;
 598   }
 599 }
 600 function showInput(e){
 601   let target = e.target;
 602   if(target.parentElement.classList.contains("addInput")) {
 603     target = target.parentElement;
 604   }
 605   target.style.display = 'none';
 606   target.parentElement.nextElementSibling.style.display = 'flex';
 607   // e.target.parentElement.nextElementSibling.children[1].style.display = 'initial';
 608 }
 609 function hideInput(e){
 610   let target = e.target;
 611   if(target.parentElement.classList.contains("removeInput")) {
 612     target = target.parentElement;
 613   }
 614   target.parentElement.style.display = 'none';
 615   target.parentElement.previousElementSibling.children[1].style.display = 'inline';
 616   target.previousSibling.value = '';
 617 }
 618 function addDNS(){}
 619 function removeDNS(){}
 620 function constructCloudAccountOptions(cloudAccounts){
 621   let CloudAccountOptions = cloudAccounts && cloudAccounts.map(function(ca, index) {
 622     return {
 623       label: ca.name,
 624       value: ca
 625     }
 626   });
 627   return CloudAccountOptions;
 628 }
 629 function dataCentersHTML(dataCenters, onChange, initial) {
 630   //Build DataCenter options
 631   //Relook at this, why is it an object?
 632   let DataCenterOptions = [];
 633   DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) {
 634     return {
 635       label: dc.name,
 636       value: dc.uuid
 637     }
 638   });
 639   if (dataCenters && dataCenters.length > 0) {
 640     return (
 641       <label>Select Data Center
 642         <SelectOption initial={!!initial} options={DataCenterOptions} onChange={onChange} />
 643       </label>
 644     )
 645   }
 646 }
 647 function isOpenMano(account) {
 648   if (account) {
 649     let a = account;
 650     if (a.constructor.name == 'String') {
 651       a = JSON.parse(a);
 652     }
 653     return a['account-type'] == 'openmano';
 654   } else {
 655     return false;
 656   }
 657 }
 658 function updateNewSshKeyRefSelection(e) {
 659   this.setState({
 660     newRefSelection: e.target.value
 661   })
 662 }
 663 function resetRef() {
 664     this.setState({
 665     newRefSelection: null
 666   })
 667 }
 668 InstantiateInputParams.defaultProps = {
 669   data: [],
 670   sshKeysList: [],
 671   sshKeysRef: [],
 672   users: {}
 673 }