!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} />
+ <SelectOption options={constructCloudAccountOptions(props.cloudAccounts)} initial={true} onChange={props.vnfFn.updateSelectedCloudAccount.bind(null, v['member-vnf-index'])} defaultValue={defaultValue} />
</label>
)
: null
isOpenMano(props.ro) ?
dataCentersHTML(
props.dataCenters[props.ro.name],
- props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index']))
+ props.vnfFn.updateSelectedDataCenter.bind(null, v['member-vnf-index']), true)
: null
}
{
}
inputParametersHTML = (props) => {
let inputParameters = props.inputParameters;
+ const handleChange = (i, event) => props.updateInputParam(i, event.target.value);
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)} />
+ <TextInput label={ input.label || input.xpath } type="text" onChange={handleChange.bind(this, i)} />
</div>
</div>
)
{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' />
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>
{
);
}
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>
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>
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>
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']}
/>
{
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
})}
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>
<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>
}
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>
)
<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>
});
return CloudAccountOptions;
}
-function dataCentersHTML(dataCenters, onChange) {
+function dataCentersHTML(dataCenters, onChange, initial) {
//Build DataCenter options
//Relook at this, why is it an object?
let DataCenterOptions = [];
if (dataCenters && dataCenters.length > 0) {
return (
<label>Select Data Center
- <SelectOption options={DataCenterOptions} onChange={onChange} />
+ <SelectOption initial={!!initial} options={DataCenterOptions} onChange={onChange} />
</label>
)
}