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