x/compass-web
Code Issues Proposed changes

Add switch refresh funtion after page going back.

Browse Source 
Fix servers panel height on host config page.
Fix switch API handling.

Change-Id: Iab0a42118cd4b78aac081968f3d8b5540daa98d3
This commit is contained in:
jiahuay 2014-01-24 14:07:20 -08:00
parent 904422457a
commit 0a902980a3
9 changed files with 116 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/base.css
View File

@ -242,6 +242,7 @@ input.rounded:focus {
font-size:12px; font-size:12px;
padding: 1px 5px; padding: 1px 5px;
text-decoration:none; text-decoration:none;
width: 90px;
} }
.tab_nav:hover { .tab_nav:hover {

9
public/ods/fixtures/fixtures.js
View File

@ -10,6 +10,8 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
self.port = 0; self.port = 0;
self.num =0;
$.fixture('POST /api/switches', function(original, settings, headers) { $.fixture('POST /api/switches', function(original, settings, headers) {
var manage_ip = JSON.parse(original.data).switch.ip; var manage_ip = JSON.parse(original.data).switch.ip;
@ -61,7 +63,7 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
var returnData = { var returnData = {
"status": "accepted", "status": "accepted",
"switch": { "switch": {
"state": "repulling", "state": "repolling",
"link": { "link": {
"href": "/switches/"+switchId+"/", "href": "/switches/"+switchId+"/",
"rel": "self" "rel": "self"
@ -76,12 +78,13 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
$.fixture('GET /api/switches/{id}', function(original, settings, headers) { $.fixture('GET /api/switches/{id}', function(original, settings, headers) {
var switchId = settings.url.substring(14,15); var switchId = settings.url.substring(14,15);
self.num ++;
var returnData = { var returnData = {
"status": "OK", "status": "OK",
"switch": { "switch": {
"state": switchId == 10 ? "initialized" : "under_monitoring", "state": switchId == 1 ? (self.num < 5 ? "initialized" : "unreachable") : "under_monitoring",
"err-msg": "error message", "err_msg": "error message",
"link": { "link": {
"href": settings.url, "href": settings.url,
"rel": "self" "rel": "self"

4
public/ods/ui/host_config/host_config.js
View File

@ -154,9 +154,13 @@ steal(
filloutTabs: function() { filloutTabs: function() {
var serverData = this.options.odsState.servers_config; var serverData = this.options.odsState.servers_config;
var count = 0;
for (var key in serverData) { for (var key in serverData) {
$(".switch-navs").append('<div data-switchIp="' + key + '" class="tab_nav">' + key + '</div><br>'); $(".switch-navs").append('<div data-switchIp="' + key + '" class="tab_nav">' + key + '</div><br>');
count ++;
} }
var panel_minheight = $(".tab_nav").height() * count + 50;
$(".tab_panel_active").css("min-height", panel_minheight);
this.tabSelected($(".switch-navs .tab_nav:first-child")); this.tabSelected($(".switch-navs .tab_nav:first-child"));
}, },

2
public/ods/ui/servers/servers.css
View File

@ -21,7 +21,7 @@
} }
.server-result { .server-result {
min-height: 200px; min-height: 450px;
} }
.server-g-num { .server-g-num {

10
public/ods/ui/servers/servers.js
View File

@ -133,10 +133,12 @@ steal(
}, },
removeServersBySwitch: function(switchIp) { removeServersBySwitch: function(switchIp) {
// remove servers from datatable
var servers = this.dataTable.fnGetData(); var servers = this.dataTable.fnGetData();
var serversCount = servers.length; var serversCount = servers.length;
var i = 0; var i = 0;
while (i < serversCount) { while (i < serversCount) {
if (servers[i].switch_ip == switchIp) { if (servers[i].switch_ip == switchIp) {
this.dataTable.fnDeleteRow(i); this.dataTable.fnDeleteRow(i);
servers = this.dataTable.fnGetData(); servers = this.dataTable.fnGetData();
@ -166,6 +168,7 @@ steal(
alert("Please select at least one server"); alert("Please select at least one server");
} else { } else {
$("#continuing").css("opacity", 1); $("#continuing").css("opacity", 1);
this.options.odsState.machines = this.dataTable.fnGetData();
if (this.initServerStep) { if (this.initServerStep) {
// create cluster // create cluster
@ -301,11 +304,12 @@ steal(
$('.find_server').attr("disabled", true); $('.find_server').attr("disabled", true);
$('.find_server').html("Finding..."); $('.find_server').html("Finding...");
this.options.odsState.switches = [];
$('.switchtable').find('tr.switch_row').each(function(index, value) { $('.switchtable').find('tr.switch_row').each(function(index, value) {
$(value).controller().findServers(); $(value).controller().findServers();
}); });
setTimeout(this.proxy('checkSwitchesStatus'), 2000); setTimeout(this.proxy('checkSwitchesStatus'), 2000);
}, },
@ -329,9 +333,11 @@ steal(
onNewMachines: function(machines) { onNewMachines: function(machines) {
this.element.find('div.right-side').show(); this.element.find('div.right-side').show();
if (machines.length > 0) { if ( machines.length > 0) {
this.dataTable.fnAddData(machines); this.dataTable.fnAddData(machines);
this.machines = this.machines.concat(machines); this.machines = this.machines.concat(machines);
//this.machines = this.options.odsState.machines;
//this.machines = this.machines.concat(machines);
this.options.odsState.machines = this.machines; this.options.odsState.machines = this.machines;
} }
}, },

24
public/ods/ui/servers/views/init.ejs
View File

@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="right-side" style="display:none"> <div class="right-side" style="display:none; min-height: 540px;">
<h3>Select servers onto which to deploy OpenStack</h3> <h3>Select servers onto which to deploy OpenStack</h3>
<div class="server-result"> <div class="server-result">
<table id="tb_server_select" cellpadding="0" cellspacing="0" border="0" class="display"> <table id="tb_server_select" cellpadding="0" cellspacing="0" border="0" class="display">
@ -53,15 +53,17 @@
</tbody> </tbody>
</table> </table>
</div> <br>
<div class='float_right rounded server-selection-num'> <div class='float_right rounded server-selection-num'>
<span id="selected_num">0</span> items selected <span id="selected_num">0</span> items selected
</div> </div>
<div class="clear"></div>
<div class="continue"><center> <div class="clear"></div>
<a href="javascript: void(0)" class="btn_continue server-finish">Continue</a>
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img><br> <div class="continue"><center>
<div id="server_continue_err" style="display:none;padding-top:10px"></div> <a href="javascript: void(0)" class="btn_continue server-finish">Continue</a>
</center></div> <img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img><br>
<div id="server_continue_err" style="display:none;padding-top:10px"></div>
</center></div>
</div>
</div> </div>

13
public/ods/ui/switch_entry/switch_entry.css
View File

@ -36,16 +36,3 @@ img.err:hover {
float: left; float: left;
} }
.switch_row input {
width: 100px;
}
.server-result {
min-height: 200px;
}
.server-g-num {
padding: 1px 10px;
margin-top: 2px;
}

114
public/ods/ui/switch_entry/switch_entry.js
View File

@ -16,32 +16,44 @@ steal(
this.element.html(this.view('init', { this.element.html(this.view('init', {
"first": this.options.first "first": this.options.first
})); }));
this.switchId = 0;
this.switchStatus = { this.switchStatus = {
"status": 0, "status": 0,
"message": "" "message": "none"
}; };
this.queryCount = 0; this.queryCount = 0;
this.displaySnmp(this.options.odsState.snmp); this.displaySnmp(this.options.odsState.snmp);
var switchData = this.options.switchData; var _switchData = this.options.switchData;
this.switchData = {"switch" : _switchData};
if (switchData) { if (_switchData) {
if (this.options.odsState.snmp) { if (this.options.odsState.snmp) {
this.find(".switchIp").val(switchData.ip); this.find(".switchIp").val(_switchData.ip);
this.find(".snmp").val(switchData.credential.version); this.find(".snmp").val(_switchData.credential.version);
this.find(".community").val(switchData.credential.community); this.find(".community").val(_switchData.credential.community);
} else { } else {
this.find(".switchIp").val(switchData.ip); this.find(".switchIp").val(_switchData.ip);
this.find(".username").val(switchData.credential.username); this.find(".username").val(_switchData.credential.username);
this.find(".password").val(switchData.credential.password); this.find(".password").val(_switchData.credential.password);
} }
} }
if (_switchData && _switchData.status) {
this.setSwitchStatus(_switchData.status.status, _switchData.status.message);
} else {
this.setSwitchStatus(0, "none");
}
if (_switchData && _switchData.id) {
this.setSwitchId(_switchData.id);
} else {
this.setSwitchId(0);
}
}, },
findServers: function() { findServers: function() {
this.setSwitchStatus(1, "waiting"); this.setSwitchStatus(1, "waiting");
var switchData = this.getSwitchData(); this.switchData = this.getSwitchData();
Ods.Switch.create(switchData, this.proxy('onSwitchCreated'), this.proxy('onSwitchCreateErr'));
this.options.odsState.switches.push(this.switchData);
Ods.Switch.create(this.switchData, this.proxy('onSwitchCreated'), this.proxy('onSwitchCreateErr'));
}, },
getSwitchData: function() { getSwitchData: function() {
@ -54,8 +66,8 @@ steal(
var ip = this.find('.switchIp').val(); var ip = this.find('.switchIp').val();
if ($("#useSNMP:checked").val()) { if ($("#useSNMP:checked").val()) {
snmp_version = $(".switch_row").eq(i).find(".snmp"); snmp_version = this.find(".snmp");
community = $(".switch_row").eq(i).find(".community"); community = this.find(".community");
switchData = { switchData = {
"switch": { "switch": {
"ip": ip, "ip": ip,
@ -84,14 +96,29 @@ steal(
'div.switch-refresh img click': function(el, ev) { 'div.switch-refresh img click': function(el, ev) {
//remove previously found servers in the data table //remove previously found servers in the data table
var oldSwitchStatus = this.getSwitchStatus().status; var oldSwitchStatus = this.getSwitchStatus().status;
if(oldSwitchStatus == 2) { if (oldSwitchStatus == 2) {
var switchIp = this.getSwitchData().switch.ip; var switchIp = this.switchData.switch.ip;
this.options.serverControl.removeServersBySwitch(switchIp); this.options.serverControl.removeServersBySwitch(switchIp);
} }
this.setSwitchStatus(1, "waiting"); this.setSwitchStatus(1, "waiting");
this.queryCount = 0; this.queryCount = 0;
this.checkSwitchState();
// PUT switches
Ods.Switch.update(this.switchId, this.switchData,
this.proxy('onSwitchUpdated'),
this.proxy('onSwitchUpdateErr'));
},
findSwitchDataFromOdsState : function() {
var ip = this.getSwitchData().switch.ip;
var switches = this.options.odsState.switches;
for (var i = 0; i < switches.length; i++) {
if (ip == switches[i].switch.ip) {
return switches[i];
}
}
return null;
}, },
/************************************/ /************************************/
@ -102,13 +129,11 @@ steal(
steal.dev.log(" *** onSwitchCreated textStatus *** ", textStatus); steal.dev.log(" *** onSwitchCreated textStatus *** ", textStatus);
steal.dev.log(" *** onSwitchCreated xhr *** ", xhr); steal.dev.log(" *** onSwitchCreated xhr *** ", xhr);
if (xhr.status == 202) { // accepted if (xhr.status == 202) { // accepted
this.switchId = data.switch.id; this.setSwitchId(data.switch.id);
this.checkSwitchState(); this.checkSwitchState();
} }
}, },
/************************************/ /************************************/
// switch create error callback // switch create error callback
/************************************/ /************************************/
@ -124,10 +149,10 @@ steal(
} else { } else {
failedSwitchId = JSON.parse(xhr.responseText).failedSwitch; failedSwitchId = JSON.parse(xhr.responseText).failedSwitch;
} }
this.setSwitchId(failedSwitchId);
steal.dev.log(" *** failed Switch Id *** ", failedSwitchId); steal.dev.log(" *** failed Switch Id *** ", failedSwitchId);
// PUT switches // PUT switches
var switchData = this.getSwitchData(); Ods.Switch.update(failedSwitchId, this.switchData,
Ods.Switch.update(failedSwitchId, switchData,
this.proxy('onSwitchUpdated'), this.proxy('onSwitchUpdated'),
this.proxy('onSwitchUpdateErr')); this.proxy('onSwitchUpdateErr'));
} else { } else {
@ -154,7 +179,7 @@ steal(
steal.dev.log(" *** onSwitchUpdated xhr *** ", xhr); steal.dev.log(" *** onSwitchUpdated xhr *** ", xhr);
if (xhr.status == 202 || xhr.status == 200) { // accepted or OK if (xhr.status == 202 || xhr.status == 200) { // accepted or OK
this.switchId = data.switch.id; this.setSwitchId(data.switch.id);
this.checkSwitchState(); this.checkSwitchState();
} }
}, },
@ -168,7 +193,6 @@ steal(
steal.dev.log(" *** onSwitchUpdateErr statusText *** ", statusText); steal.dev.log(" *** onSwitchUpdateErr statusText *** ", statusText);
this.setSwitchStatus(3, "PUT switch API error"); this.setSwitchStatus(3, "PUT switch API error");
if (xhr.status == 404) { // not found if (xhr.status == 404) { // not found
$(".switchesErr").html("Switch update error code: 404"); $(".switchesErr").html("Switch update error code: 404");
$(".switchesErr").show(); $(".switchesErr").show();
@ -183,7 +207,7 @@ steal(
checkSwitchState: function() { checkSwitchState: function() {
this.queryCount++; this.queryCount++;
if (this.queryCount > 5) { if (this.queryCount > 30) {
this.setSwitchStatus(3, "Timed out in connecting to switch"); this.setSwitchStatus(3, "Timed out in connecting to switch");
return; return;
} }
@ -203,13 +227,9 @@ steal(
this.element.find('div.right-side').show(); this.element.find('div.right-side').show();
this.getServersBySwitch(data.switch.id); this.getServersBySwitch(data.switch.id);
this.setSwitchStatus(2, "The switch is under monitoring"); this.setSwitchStatus(2, "The switch is under monitoring");
} else if (data.switch.state === "unreachable"){ } else if (data.switch.state === "initialized" || data.switch.state === "repolling") {
this.element.find('div.right-side').show();
this.getServersBySwitch(data.switch.id);
this.setSwitchStatus(3, data.switch.err_msg);
} else if (data.switch.state === "initialized" || data.switch.state === "repulling") {
setTimeout(this.proxy('checkSwitchState'), 2000); setTimeout(this.proxy('checkSwitchState'), 2000);
} else if (data.switch.state === "notsupported") { } else {
this.setSwitchStatus(3, data.switch.err_msg); this.setSwitchStatus(3, data.switch.err_msg);
} }
} }
@ -249,7 +269,6 @@ steal(
steal.dev.log(" *** onFindAllServers textStatus *** ", textStatus); steal.dev.log(" *** onFindAllServers textStatus *** ", textStatus);
steal.dev.log(" *** onFindAllServers xhr *** ", xhr); steal.dev.log(" *** onFindAllServers xhr *** ", xhr);
this.setSwitchStatus(2, "The switch is under monitoring");
this.options.serverControl.onNewMachines(data.machines); this.options.serverControl.onNewMachines(data.machines);
}, },
@ -275,6 +294,23 @@ steal(
} }
}, },
getSwitchId: function() {
return this.switchId;
},
setSwitchId: function(id) {
this.switchId = id;
// Update odsState with switch Id.
var switchObject = this.findSwitchDataFromOdsState();
if (switchObject) {
switchObject.switch.id = id;
} /*else {
var swData = this.switchData;
swData.switch.id = id;
this.options.odsState.switches.push(swData);
}*/
},
getSwitchStatus: function() { getSwitchStatus: function() {
return this.switchStatus; return this.switchStatus;
}, },
@ -282,8 +318,20 @@ steal(
setSwitchStatus: function(status, message) { setSwitchStatus: function(status, message) {
this.switchStatus.status = status; this.switchStatus.status = status;
this.switchStatus.message = message; this.switchStatus.message = message;
this.switchStatus.id = this.switchId;
this.displaySwitchStatus(this.switchStatus); this.displaySwitchStatus(this.switchStatus);
var switchObject = this.findSwitchDataFromOdsState();
if (switchObject) {
switchObject.switch.status = {
"status": status,
"message": message
};
} /*else {
var swData = this.switchData;
swData.switch.id = this.getSwitchId();
this.options.odsState.switches.push(swData);
}*/
}, },
displaySwitchStatus: function(swStatus) { displaySwitchStatus: function(swStatus) {
@ -293,7 +341,7 @@ steal(
this.find(".ok").hide(); this.find(".ok").hide();
this.find(".err").hide(); this.find(".err").hide();
this.find(".refresh").hide(); this.find(".refresh").hide();
break; break;
case 1: //waiting case 1: //waiting
this.find(".waiting").show(); this.find(".waiting").show();
this.find(".ok").hide(); this.find(".ok").hide();

4
public/ods/ui/switch_entry/views/init.ejs
View File

@ -1,8 +1,8 @@
<td><input type="input" class="switchIp non-empty-value rounded" placeholder="Switch IP"> </td> <td><input type="input" class="switchIp non-empty-value rounded" placeholder="Switch IP"> </td>
<td> <td>
<select class="snmp"> <select class="snmp">
<option>v1</option> <option value="2c" selected>2c</option>
<option selected>v2c</option> <option value="1">1</option>
</select> </select>
<input type="input" class="username non-empty-value rounded" placeholder="Username" style="display:none"> <input type="input" class="username non-empty-value rounded" placeholder="Username" style="display:none">
</td> </td>