X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Flaunchpad%2Fsrc%2Finstantiate%2FinstantiateInputParams.jsx;h=624829c0b9c2d8839ea359b157b3ce2de80ca425;hb=03156e335275de1dafbc2a816e98006afdf249bf;hp=87c95921f0ec3029f930e166414c9bbc444b22be;hpb=dfe972ff7c9f7b6b1d730e66b0b2aa8df2ce329b;p=osm%2FUI.git

diff --git a/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx b/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx
index 87c95921f..624829c0b 100644
--- a/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx
+++ b/skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.jsx
@@ -31,22 +31,22 @@ export default class InstantiateInputParams extends Component {
   nsConfigHTML = (props) => {
     return (
       <div className="configure-nsd_section">
+        <div className="noticeSubText noticeSubText_right">
+            * required
+        </div>
         <div className="inputControls">
-            <TextInput label="Instance Name" type="text" pattern="^[a-zA-Z0-9_]*$" style={{textAlign:'left'}} onChange={props.updateName} value={props.name}/>
-          {
-            !isOpenMano(props.ro) ?
-              (
-                <label>Select VIM Account
-                  <SelectOption options={constructCloudAccountOptions(props.cloudAccounts)} onChange={props.nsFn.updateSelectedCloudAccount} />
-                </label>
-              )
-            : null
-          }
+            <TextInput label="Instance Name" required={true} type="text" pattern="^[a-zA-Z0-9_]*$" style={{textAlign:'left'}} onChange={props.updateName} value={props.name}/>
+            <label>Resource Orchestrator
+              <SelectOption options={constructROOptions(props.resourceOrchestrators)} onChange={props.nsFn.updateSelectedRoAccount} />
+            </label>
           {
-            isOpenMano(props.ro) ?
-              dataCentersHTML(props.dataCenters[props.ro.name],
-                              props.nsFn.updateSelectedDataCenter)
-              : null
+            (props.selectedResourceOrchestrator.datacenters && props.selectedResourceOrchestrator.datacenters.datacenters) ?
+                        (
+                          <label>Datacenter
+                            <SelectOption options={constructDataCenterOptions(props.selectedResourceOrchestrator.datacenters.datacenters)} onChange={props.nsFn.updateSelectedDataCenter} />
+                          </label>
+                        )
+                      : <span>No datacenters configured</span>
           }
         </div>
       </div>
@@ -68,26 +68,19 @@ export default class InstantiateInputParams extends Component {
                 }
                 return (
                     <div className="inputControls" key={i}>
-                    <h4 className="inputControls-title">VNFD: {v.name}</h4>
+                    <h4 className="inputControls-title">VNFD: {v['vnf-name']}</h4>
                   {
-                    !isOpenMano(props.ro) ?
-                      (
-                        <label>Select VIM Account
-                          <SelectOption options={constructCloudAccountOptions(props.cloudAccounts)} initial={true} onChange={props.vnfFn.updateSelectedCloudAccount.bind(v['member-vnf-index'])} defaultValue={defaultValue} />
-                        </label>
-                      )
-                    : null
+                   (props.selectedResourceOrchestrator.datacenters && props.selectedResourceOrchestrator.datacenters.datacenters) ?
+                        (
+                          <label>Datacenter
+                            <SelectOption options={constructDataCenterOptions(props.selectedResourceOrchestrator.datacenters.datacenters)} onChange={props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index'])}  initial={true} />
+                          </label>
+                        )
+                      : <span>No datacenters configured</span>
                   }
-                      {
-                        isOpenMano(props.ro) ?
-                          dataCentersHTML(
-                                          props.dataCenters[props.ro.name],
-                                          props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index']))
-                          : null
-                      }
                       {
                         (props.configAgentAccounts && props.configAgentAccounts.length > 0) ?
-                        <label>Select Config Agent Account
+                        <label>Config Agent Account
                           <SelectOption options={props.configAgentAccounts && props.configAgentAccounts.map(function(c) {
                             return {
                               label: c.name,
@@ -103,18 +96,65 @@ export default class InstantiateInputParams extends Component {
       </div>
     )
   }
+  //"vnfd-catalog/vnfd[id=../../../constituent-vnfd[0]/vnfd-id-ref]/version";
+
   inputParametersHTML = (props) => {
     let inputParameters = props.inputParameters;
-    return inputParameters && inputParameters.map(function(input, i) {
-        return (
-                <div className="configure-nsd_section" key={i}>
-                  <h3 className="launchpadCard_title">Input Parameters</h3>
-                  <div className="inputControls">
-                      <TextInput label={ input.label || input.xpath } type="text" onChange={props.updateInputParam.bind(self, i)} />
-                  </div>
-                </div>
-        )
-      })
+    const handleChange = (i, event) => props.updateInputParam(i, event.target.value);
+    let nsInputParamsHTML = [];
+    inputParameters && inputParameters.map(function(input, i) {
+        nsInputParamsHTML.push(
+          <div className="inputControls" key={i}>
+            <TextInput label={ input.label || input.xpath }  value={input.value || input['default-value']} type="text" onChange={handleChange.bind(this, i)} />
+          </div>
+        );
+     });
+    var nsinput = (
+      <div className="configure-nsd_section" >
+        <h3 className="launchpadCard_title">NS Input Parameters</h3>
+        {
+          nsInputParamsHTML
+        }
+     </div>
+    );
+    return nsinput;
+  }
+  //"vnfd-catalog/vnfd[id=../../../constituent-vnfd[0]/vnfd-id-ref]/version";
+
+  vnfInputParametersHTML = (props) => {
+    let vnfInputParams = props.vnfInputParams;
+    const handleChange = (vnfIndex, parameterIndex, event) => props.updateVnfInputParam(vnfIndex, parameterIndex, event.target.value);
+    let vnfInputParamsHTML = [];
+    vnfInputParams && vnfInputParams.map(function(input, i) {
+        vnfInputParamsHTML.push(
+          <div className="configure-nsd_section" key={i}>
+            <h3 className="launchpadCard_title">{`VNF Input Parameters: ${input['name']}:${input['member-vnf-index-ref']}`}</h3>
+            {
+              input['input-parameter'].filter(function(p){
+                let regex = /vnfd\[(?:vnfd:)?id\s*=\s*'?"?(\S+?)'?"?\s*\]/
+                // if has id, then it belongs in a vnfd section
+                if (p.xpath.match(regex)) {
+                  // look for matching vnfd
+                  if ((p.xpath.match(regex)[1] == input['vnfd-id-ref'])) {
+                    return true
+                  } else {
+                    return false;
+                  }
+                } else {
+                  return true;
+                }
+              }).map(function(p, j){
+                let param = vnfInputParams[i]['input-parameter'][j];
+                return (<div className="inputControls" key={j}>
+                        <TextInput label={(p.label || p.xpath)} value={param.value || param['default-value']} type="text" onChange={handleChange.bind(this, i, j)} />
+                    </div>)
+              })
+            }
+         </div>
+        );
+    })
+
+    return <div>{vnfInputParamsHTML}</div>;
   }
   nsPlacementGroupsHTML = (props) => {
     let nsPlacementGroups = props.nsPlacementGroups;
@@ -167,8 +207,8 @@ export default class InstantiateInputParams extends Component {
                             return (
 
                                   <div className="input_group" key={j}>
-                                    <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, j, 'key')} placeholder="KEY" value={key} />
-                                    <TextInput type="text" onChange={props.nsFn.placementGroupUpdate.bind(self, i, j, 'value')} placeholder="VALUE"  value={value} />
+                                    <TextInput type="text" onChange={props.nsFn.hostAggregateUpdate.bind(self, i, j, 'key')} placeholder="KEY" value={key} />
+                                    <TextInput type="text" onChange={props.nsFn.hostAggregateUpdate.bind(self, i, j, 'value')} placeholder="VALUE"  value={value} />
                                     <span onClick={props.nsFn.removeHostAggregate.bind(self, i, j)} className="removeInput"><img src={imgRemove} />Remove</span>
                                   </div>
                             )
@@ -259,10 +299,11 @@ export default class InstantiateInputParams extends Component {
             {vlds && vlds.map(function(v, i) {
                   let currentType = v.type;
                   let isVIM = (currentType == 'vim-network-name');
-                  let isUnknown = (currentType == 'unknown') || ((currentType != 'vim-network-name') && (currentType != 'ip-profile-ref'));
+                  let isUnknown = (currentType == 'none') || ((currentType != 'vim-network-name') && (currentType != 'ip-profile-ref'));
                   return (
                     <div key={self.props.nsd.id + '-' + i} className="inputControls">
-                        <h4 className="inputControls-title">VLD: {v['short-name']}</h4>
+                        <h4 className="inputControls-title">VLD: {v['short-name'] ? v['short-name'] : v['name']}</h4>
+                        <label><span>Specify VLD Parameters</span></label>
                         <div  className="inputControls-radioGroup">
                           <label className="inputControls-radio" style={{display: ipProfileList ? 'flex' : 'none'}}>
                             <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={!isVIM && !isUnknown} value='ip-profile-ref' />
@@ -273,14 +314,21 @@ export default class InstantiateInputParams extends Component {
                             VIM Network Name
                           </label>
                           <label className="inputControls-radio">
-                            <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isUnknown} value='unknown' />
-                            Unknown
+                            <input type="radio" name={'vld-' + i } onChange={self.props.vldFn.updateType(i)} checked={isUnknown} value='none' />
+                            None
                           </label>
                         </div>
                           {
                             isUnknown ? null : isVIM ?
-                            <TextInput label="Network Name" onChange={self.props.vldFn.updateValue(i, currentType)} value={v[currentType]} /> :
-                            <div>
+                              <div>
+                                <TextInput label="Network Name" onChange={self.props.vldFn.updateValue(i, currentType)} value={v[currentType]} />
+                                {
+                                  v['mgmt-network'].toUpperCase() == "TRUE" ?
+                                    <TextInput label="IPV4 NAT POOL NAME" placeholder={self.props.dataCenterID} onChange={self.props.vldFn.updateValue(i, 'ipv4-nat-pool-name')} value={v['ipv4-nat-pool-name']} />
+                                    : null
+                                }
+                              </div>
+                            : <div>
                               <SelectOption
                               label="IP PROFILE NAME"
                                 options={ipProfileList && ipProfileList.map(function(ip) {
@@ -305,8 +353,14 @@ export default class InstantiateInputParams extends Component {
     );
   }
   ipProfilesHTML = (props) => {
+    let vldHasIPprofile = false;
+    props.vlds && props.vlds.map(function(v){
+      if(v.type == 'ip-profile-ref') {
+        vldHasIPprofile = true;
+      }
+    })
     let ipProfileList = props.ipProfileList;
-    return ipProfileList &&
+    return ipProfileList && vldHasIPprofile &&
       (
       <div className="configure-nsd_section">
         <h3 className="launchpadCard_title">IP Profiles</h3>
@@ -348,6 +402,11 @@ export default class InstantiateInputParams extends Component {
                     onChange={props.ipProfileFn.updateProfile(j, 'security-group')}
                     value={ipl['security-group']}
                     />
+                  <TextInput
+                    label="subnet prefix pool"
+                    onChange={props.ipProfileFn.updateProfile(j, 'subnet-prefix-pool')}
+                    value={ipl['subnet-prefix-pool']}
+                    />
                     <label>
                       <div style={{display:'flex'}}>
                         DNS SERVERS <span onClick={props.dnsFn.addDNS(j)} className="addInput"><img src={imgAdd} />Add</span>
@@ -357,8 +416,8 @@ export default class InstantiateInputParams extends Component {
                           return (
                             <div key={k} style={{display:'flex'}}>
                               <TextInput
-                                  onChange={props.ipProfileFn.updateProfile(j,k)}
-                                  value={ipl['dns-server'][k]}
+                                  onChange={props.dnsFn.updateDNS(j,k)}
+                                  value={ipl['dns-server'][k].address}
                                   />
                               <span onClick={props.dnsFn.removeDNS(j,k)} className="removeInput">
                                 <img src={imgRemove} />Remove</span>
@@ -397,12 +456,12 @@ export default class InstantiateInputParams extends Component {
     function dhcpHTML(props, ipl, j){
       return (<div>
                   <TextInput
-                    label="DCHP Start Address"
+                    label="DHCP Start Address"
                     onChange={props.ipProfileFn.updateDHCP(j, 'start-address')}
                     value={ipl['dhcp-params'] && ipl['dhcp-params']['start-address']}
                     />
                   <TextInput
-                    label="DCHP Count"
+                    label="DHCP Count"
                     onChange={props.ipProfileFn.updateDHCP(j, 'count')}
                     value={ipl['dhcp-params'] && ipl['dhcp-params']['count']}
                     />
@@ -420,8 +479,9 @@ export default class InstantiateInputParams extends Component {
 
             {
               sshKeysRef.map(function(ref, i) {
+                let keyref = JSON.stringify(ref)
                 return (
-                  <div key={i} className="inputControls inputControls-sshkeys">
+                  <div key={keyref.name + '-' + i} className="inputControls inputControls-sshkeys">
                     <label>
                       <div>
                       <SelectOption
@@ -434,13 +494,13 @@ export default class InstantiateInputParams extends Component {
                         })}
                         ref="keyPairSelection"
                         initial={false}
-                        defaultValue={sshKeysList[0].name}
-                        onChange={self.props.updateSshKeyRef(i)}>
+                        defaultValue={keyref.name || sshKeysList[0].name}
+                        onChange={props.sshFn.updateKeyRef(i)}>
                       </SelectOption>
                       </div>
                     </label>
                     <label>
-                      <span onClick={self.props.updateSshKeyRef(i, true)} className="removeInput">
+                      <span onClick={props.sshFn.updateKeyRef(i, true)} className="removeInput">
                         <img src={imgRemove} />
                         Remove
                       </span>
@@ -452,7 +512,7 @@ export default class InstantiateInputParams extends Component {
             <div className="inputControls inputControls-sshkeys ">
               <label style={{display: 'flex', 'flexDirection': 'row'}}>
               SSH KEY PAIR
-                <span onClick={self.props.updateSshKeyRef().bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
+                <span onClick={props.sshFn.updateKeyRef().bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
                   <img src={imgAdd} />
                   ADD
                 </span>
@@ -464,14 +524,62 @@ export default class InstantiateInputParams extends Component {
   }
   usersHTML = (props) => {
     let usersFn = props.usersFn;
+    let sshKeysList = props.sshKeysList;
     let usersList = props.usersList && props.usersList.map(function(u, i) {
+      let sshKeysRef = u['ssh-authorized-key'];
       return (
         <div className="input_group input_group-users" key={i}>
           <div className="inputControls">
           <div style={{fontWeight: 'bold', display: 'flex'}}>USER <span onClick={usersFn.remove(i)} className="removeInput"><img src={imgRemove} />Remove</span></div>
+
             <TextInput onChange={usersFn.update(i, 'name')} label="USERNAME" value={i.name} />
-            <TextInput onChange={usersFn.update(i, 'gecos')} label="REAL NAME" value={i.gecos} />
-            <TextInput onChange={usersFn.update(i, 'passwd')} type="password" label="PASSWORD" value={i.passwd} />
+            <TextInput onChange={usersFn.update(i, 'user-info')} label="REAL NAME" value={i.gecos} />
+            {
+              sshKeysRef.map(function(ref, j) {
+                let keyref = JSON.stringify(ref)
+                return (
+                  <div key={keyref.name + '-' + i + '-' + j} className="inputControls inputControls-sshkeys">
+                    <label>
+                      <div>
+                      <SelectOption
+                        label="Key Pair"
+                        options={sshKeysList && sshKeysList.map(function(k) {
+                          return {
+                            label: k.name,
+                            value: k
+                          }
+                        })}
+                        ref="keyPairSelection"
+                        initial={false}
+                        defaultValue={ref}
+                        onChange={usersFn.updateSSHkeyRef(i, j)}>
+                      </SelectOption>
+                      </div>
+                    </label>
+                    {
+                      sshKeysRef.length > 0 ?
+                        <label>
+                          <span onClick={usersFn.updateSSHkeyRef(i, j, true)} className="removeInput">
+                            <img src={imgRemove} />
+                            Remove
+                          </span>
+                        </label>
+                      : null
+                    }
+
+                  </div>
+                )
+              })
+            }
+              <div className="inputControls inputControls-sshkeys ">
+                <label style={{display: 'flex', 'flexDirection': 'row', 'alignItems': 'center'}}>
+                SSH KEY PAIR
+                  <span onClick={usersFn.updateSSHkeyRef(i).bind(null, {target:{value: JSON.stringify(sshKeysList[0])}})} className="addInput">
+                    <img src={imgAdd} />
+                    ADD
+                  </span>
+                </label>
+              </div>
           </div>
         </div>
       )
@@ -480,9 +588,9 @@ export default class InstantiateInputParams extends Component {
       <div className="configure-nsd_section">
         <h3 className="launchpadCard_title">USERS</h3>
         {usersList}
-        <div className="inputControls inputControls-sshkeys ">
-            <span onClick={usersFn.add} className="addInput">
-              <img src={imgAdd} onClick={usersFn.add} />
+        <div className="inputControls inputControls-sshkeys inputControls-addUser ">
+            <span onClick={usersFn.add(sshKeysList)} className="addInput">
+              <img src={imgAdd} />
               ADD USER
             </span>
         </div>
@@ -510,12 +618,20 @@ export default class InstantiateInputParams extends Component {
             this.inputParametersHTML(props)
           }
           {
+            //VNF INPUT PARAMETERS
+            this.vnfInputParametersHTML(props)
+          }
+          {
+            true ?
+            // self.props.selectedResourceOrchestrator['ro-account-type'] == 'rift-ro' ?
             //NS PLACEMENTGROUPS
-            this.nsPlacementGroupsHTML(props)
+            this.nsPlacementGroupsHTML(props) : null
           }
           {
+            true ?
+            // self.props.selectedResourceOrchestrator['ro-account-type'] == 'rift-ro' ?
             //VNF PLACEMENTGROUPS
-            this.vnfPlacementGroupsHTML(props)
+            this.vnfPlacementGroupsHTML(props) : null
           }
           {
             //VLD CONFIGURATION
@@ -558,6 +674,15 @@ function hideInput(e){
 }
 function addDNS(){}
 function removeDNS(){}
+function constructROOptions(resourceOrchestrators){
+  let ROOptions = resourceOrchestrators && resourceOrchestrators.map(function(ro, index) {
+    return {
+      label: ro.name,
+      value: ro
+    }
+  });
+  return ROOptions;
+}
 function constructCloudAccountOptions(cloudAccounts){
   let CloudAccountOptions = cloudAccounts && cloudAccounts.map(function(ca, index) {
     return {
@@ -567,7 +692,16 @@ function constructCloudAccountOptions(cloudAccounts){
   });
   return CloudAccountOptions;
 }
-function dataCentersHTML(dataCenters, onChange) {
+function constructDataCenterOptions(dataCenters){
+  let DataCenterOptions = dataCenters && dataCenters.map(function(dc, index) {
+    return {
+      label: dc.name,
+      value: dc.name
+    }
+  });
+  return DataCenterOptions;
+}
+function dataCentersHTML(dataCenters, onChange, initial) {
   //Build DataCenter options
   //Relook at this, why is it an object?
   let DataCenterOptions = [];
@@ -579,23 +713,12 @@ function dataCentersHTML(dataCenters, onChange) {
   });
   if (dataCenters && dataCenters.length > 0) {
     return (
-      <label>Select Data Center
-        <SelectOption options={DataCenterOptions} onChange={onChange} />
+      <label>Data Center
+        <SelectOption initial={!!initial} options={DataCenterOptions} onChange={onChange} />
       </label>
     )
   }
 }
-function isOpenMano(account) {
-  if (account) {
-    let a = account;
-    if (a.constructor.name == 'String') {
-      a = JSON.parse(a);
-    }
-    return a['account-type'] == 'openmano';
-  } else {
-    return false;
-  }
-}
 function updateNewSshKeyRefSelection(e) {
   this.setState({
     newRefSelection: e.target.value