x/valence
Code Issues Proposed changes

Add vlan parameters in compose menu

Browse Source 
This patch adds new dynamic input form in compose menu to support
user specify vlan ID for the ethernet interface. And supoort
multiply ethernet setting in next commit.

Change-Id: Ife0698e599806bf776634080fd4b34725aec4fc6
Closes-Bug: #1634596
This commit is contained in:
Lin Yang 2016-10-20 07:40:55 +08:00 committed by Nate Potter
parent 8144b0c98b
commit 6351e9a727
1 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
ui/src/js/components/home/ComposeDisplay.js
View File

@ -18,8 +18,34 @@ import React from "react";
var config = require('../../config.js');
var util = require('../../util.js');
const VlanItem = React.createClass({
render: function() {
return (
<div>
<input type="text" value={this.props.vlan[0]} readOnly/>
<div class="btn-group" data-toggle="buttons">
<label class={(this.props.vlan[1] == 'Untagged') ? "btn btn-primary active" : "btn btn-primary"} disabled>
<input type="radio" name="options" readOnly/>Untagged
</label>
<label class={(this.props.vlan[1] == 'Tagged') ? "btn btn-primary active" : "btn btn-primary"} disabled>
<input type="radio" name="options" readOnly/>Tagged
</label>
</div>
<button class="btn remove-vlan" type="button" onClick={() => this.props.remove(this.props.vlan)}>-</button>
</div>
);
}
});
const ComposeDisplay = React.createClass({
getInitialState: function() {
return {
vlans: []
};
},
compose: function() {
var data = this.prepareRequest();
var url = config.url + '/Nodes/Actions/Allocate';
@ -59,6 +85,10 @@ const ComposeDisplay = React.createClass({
var iqn = document.getElementById('iqn').value;
var masterDrive = document.getElementById('remoteDrives').value;
var processorModel = document.getElementById('processorModels').value;
var vlans = this.state.vlans.map(function(obj) {
return {"VLANId": obj[0],
"Tagged": (obj[1] == "Untagged") ? "false": "true"}
})
var data = {
"Name": name,
"Description": description,
@ -81,11 +111,38 @@ const ComposeDisplay = React.createClass({
}
}];
}
if (vlans.length > 0) {
data["EthernetInterfaces"] = [{"VLANs": vlans}];
}
return JSON.stringify(data);
},
clearInputs: function() {
document.getElementById("inputForm").reset();
this.setState({vlans: []});
},
addVlan: function() {
var vlanId = document.getElementById('vlanId').value;
var vlanTag = $(".btn-primary.vlan.active input:first").val();
document.getElementById('vlanId').value = '';
this.setState({
vlans: this.state.vlans.concat([[vlanId, vlanTag]])
});
},
removeVlan: function(vlan) {
var index = -1;
for (var i = 0; i < this.state.vlans.length; i++) {
if (vlan[0] == this.state.vlans[i][0] &&
vlan[1] == this.state.vlans[i][1]) {
index = i;
break;
}
}
var newData = this.state.vlans.slice();
newData.splice(index, 1);
this.setState({vlans: newData});
},
render: function() {
@ -128,6 +185,33 @@ const ComposeDisplay = React.createClass({
<td align="right">Remote storage master drive:</td>
<td align="left"><select id="remoteDrives" /></td>
</tr>
<tr>
<td align="right">Ethernet interface:</td>
<td align="left">
{this.state.vlans.map(function(obj) {
return <VlanItem vlan={obj} remove={this.removeVlan} />
}.bind(this))}
<div class="control-group" id="fields">
<div class="controls" id="profs">
<form class="input-append">
<div id="field">
<input class="input" id="vlanId" type="number" min="0" placeholder="VLAN ID"/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary vlan active">
<input type="radio" name="options" id="vlanUntagged" value="Untagged" checked/>Untagged
</label>
<label class="btn btn-primary vlan">
<input type="radio" name="options" id="vlanTagged" value="Tagged"/>Tagged
</label>
</div>
<button id="btn-add-vlan" class="btn add-vlan" type="button" onClick={() => this.addVlan()}>+</button>
</div>
</form>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>