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                     <label>
 358                       <div style={{display:'flex'}}>
 359                         DNS SERVERS <span onClick={props.dnsFn.addDNS(j)} className="addInput"><img src={imgAdd} />Add</span>
 360                       </div>
 361                       {
 362                         ipl['dns-server'] && ipl['dns-server'].map(function(dns, k) {
 363                           return (
 364                             <div key={k} style={{display:'flex'}}>
 365                               <TextInput
 366                                   onChange={props.ipProfileFn.updateProfile(j,k)}
 367                                   value={ipl['dns-server'][k]}
 368                                   />
 369                               <span onClick={props.dnsFn.removeDNS(j,k)} className="removeInput">
 370                                 <img src={imgRemove} />Remove</span>
 371                             </div>
 372                           )
 373                         })
 374                       }
 375                     </label>
 376                   <div  className="inputControls-radioGroup">
 377                     <label className="inputControls-radio">
 378                     DHCP ENABLED
 379                       <input type="radio"
 380                         name={'ip-profile-dhcp' + j }
 381                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 382                         checked={ipl.hasOwnProperty('dhcp-params') && ipl['dhcp-params'].enabled}
 383                         value={true} />
 384                       YES
 385                     </label>
 386                     <label className="inputControls-radio">
 387                       <input type="radio"
 388                         name={'ip-profile-dhcp' + j }
 389                         onChange={props.ipProfileFn.updateDHCP(j, 'enabled')}
 390                         checked={!ipl.hasOwnProperty('dhcp-params') || !ipl['dhcp-params'].enabled}
 391                         value={false} />
 392                       NO
 393                     </label>
 394                   </div>
 395                   {
 396                     (ipl['dhcp-params'] && ipl['dhcp-params'].enabled) ? dhcpHTML(props, ipl, j) : null
 397                   }
 398                 </div>
 399               )
 400           })
 401         }
 402         </div>);
 403     function dhcpHTML(props, ipl, j){
 404       return (<div>
 405                   <TextInput
 406                     label="DCHP Start Address"
 407                     onChange={props.ipProfileFn.updateDHCP(j, 'start-address')}
 408                     value={ipl['dhcp-params'] && ipl['dhcp-params']['start-address']}
 409                     />
 410                   <TextInput
 411                     label="DCHP Count"
 412                     onChange={props.ipProfileFn.updateDHCP(j, 'count')}
 413                     value={ipl['dhcp-params'] && ipl['dhcp-params']['count']}
 414                     />
 415                 </div>
 416                 );
 417     }
 418   }
 419   sshKeysHTML = (props) => {
 420     let sshKeysList = props.sshKeysList;
 421     let sshKeysRef = props.sshKeysRef;
 422     if(sshKeysList && sshKeysList.length > 0) {
 423       return (
 424         <div className="configure-nsd_section">
 425           <h3 className="launchpadCard_title">SSH Authorized Keys</h3>
 426
 427             {
 428               sshKeysRef.map(function(ref, i) {
 429                 let keyref = JSON.stringify(ref)
 430                 return (
 431                   <div key={keyref.name + '-' + i} className="inputControls inputControls-sshkeys">
 432                     <label>
 433                       <div>
 434                       <SelectOption
 435                         label="Key Pair"
 436                         options={sshKeysList && sshKeysList.map(function(k) {
 437                           return {
 438                             label: k.name,
 439                             value: k
 440                           }
 441                         })}
 442                         ref="keyPairSelection"
 443                         initial={false}
 444                         defaultValue={keyref.name || sshKeysList[0].name}
 445                         onChange={props.sshFn.updateKeyRef(i)}>
 446                       </SelectOption>
 447                       </div>
 448                     </label>
 449                     <label>
 450                       <span onClick={props.sshFn.updateKeyRef(i, true)} className="removeInput">
 451                         <img src={imgRemove} />
 452                         Remove
 453                       </span>
 454                     </label>
 455                   </div>
 456                 )
 457               })
 458             }
 459             <div className="inputControls inputControls-sshkeys ">
 460               <label style={{display: 'flex', 'flexDirection': 'row'}}>
 461               SSH KEY PAIR
 462                 <span onClick={props.sshFn.updateKeyRef().bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
 463                   <img src={imgAdd} />
 464                   ADD
 465                 </span>
 466               </label>
 467             </div>
 468         </div>
 469       );
 470     }
 471   }
 472   usersHTML = (props) => {
 473     let usersFn = props.usersFn;
 474     let usersList = props.usersList && props.usersList.map(function(u, i) {
 475       return (
 476         <div className="input_group input_group-users" key={i}>
 477           <div className="inputControls">
 478           <div style={{fontWeight: 'bold', display: 'flex'}}>USER <span onClick={usersFn.remove(i)} className="removeInput"><img src={imgRemove} />Remove</span></div>
 479             <TextInput onChange={usersFn.update(i, 'name')} label="USERNAME" value={i.name} />
 480             <TextInput onChange={usersFn.update(i, 'gecos')} label="REAL NAME" value={i.gecos} />
 481             <TextInput onChange={usersFn.update(i, 'passwd')} type="password" label="PASSWORD" value={i.passwd} />
 482           </div>
 483         </div>
 484       )
 485     });
 486     return (
 487       <div className="configure-nsd_section">
 488         <h3 className="launchpadCard_title">USERS</h3>
 489         {usersList}
 490         <div className="inputControls inputControls-sshkeys ">
 491             <span onClick={usersFn.add} className="addInput">
 492               <img src={imgAdd} onClick={usersFn.add} />
 493               ADD USER
 494             </span>
 495         </div>
 496       </div>
 497     )
 498   }
 499
 500   render() {
 501     const props = this.props;
 502     let html;
 503     let self = this;
 504
 505     html = (
 506         <div className="instantiateInputParams">
 507           {
 508             //NS NAMEA AND CLOUD
 509             this.nsConfigHTML(props)
 510           }
 511           {
 512             //VNF VIM ACCOUNTS
 513             this.vnfCloudAccountsHTML(props)
 514           }
 515           {
 516             //INPUT PARAMETERS
 517             this.inputParametersHTML(props)
 518           }
 519           {
 520             //NS PLACEMENTGROUPS
 521             this.nsPlacementGroupsHTML(props)
 522           }
 523           {
 524             //VNF PLACEMENTGROUPS
 525             this.vnfPlacementGroupsHTML(props)
 526           }
 527           {
 528             //VLD CONFIGURATION
 529             this.vldsHTML(props)
 530           }
 531           {
 532             //IP PROFILE CONFIGURATION
 533             this.ipProfilesHTML(props)
 534           }
 535           {
 536             //SSH KEY ASSIGNMENTS
 537             this.sshKeysHTML(props)
 538           }
 539           {
 540             //USER MANAGEMENT
 541             this.usersHTML(props)
 542           }
 543         </div>
 544     )
 545     return html;
 546   }
 547 }
 548 function showInput(e){
 549   let target = e.target;
 550   if(target.parentElement.classList.contains("addInput")) {
 551     target = target.parentElement;
 552   }
 553   target.style.display = 'none';
 554   target.parentElement.nextElementSibling.style.display = 'flex';
 555   // e.target.parentElement.nextElementSibling.children[1].style.display = 'initial';
 556 }
 557 function hideInput(e){
 558   let target = e.target;
 559   if(target.parentElement.classList.contains("removeInput")) {
 560     target = target.parentElement;
 561   }
 562   target.parentElement.style.display = 'none';
 563   target.parentElement.previousElementSibling.children[1].style.display = 'inline';
 564   target.previousSibling.value = '';
 565 }
 566 function addDNS(){}
 567 function removeDNS(){}
 568 function constructCloudAccountOptions(cloudAccounts){
 569   let CloudAccountOptions = cloudAccounts && cloudAccounts.map(function(ca, index) {
 570     return {
 571       label: ca.name,
 572       value: ca
 573     }
 574   });
 575   return CloudAccountOptions;
 576 }
 577 function dataCentersHTML(dataCenters, onChange, initial) {
 578   //Build DataCenter options
 579   //Relook at this, why is it an object?
 580   let DataCenterOptions = [];
 581   DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) {
 582     return {
 583       label: dc.name,
 584       value: dc.uuid
 585     }
 586   });
 587   if (dataCenters && dataCenters.length > 0) {
 588     return (
 589       <label>Select Data Center
 590         <SelectOption initial={!!initial} options={DataCenterOptions} onChange={onChange} />
 591       </label>
 592     )
 593   }
 594 }
 595 function isOpenMano(account) {
 596   if (account) {
 597     let a = account;
 598     if (a.constructor.name == 'String') {
 599       a = JSON.parse(a);
 600     }
 601     return a['account-type'] == 'openmano';
 602   } else {
 603     return false;
 604   }
 605 }
 606 function updateNewSshKeyRefSelection(e) {
 607   this.setState({
 608     newRefSelection: e.target.value
 609   })
 610 }
 611 function resetRef() {
 612     this.setState({
 613     newRefSelection: null
 614   })
 615 }
 616 InstantiateInputParams.defaultProps = {
 617   data: [],
 618   sshKeysList: [],
 619   sshKeysRef: [],
 620   users: {}
 621 }