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

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

@ -154,9 +154,13 @@ steal(
filloutTabs: function() {
var serverData = this.options.odsState.servers_config;
var count = 0;
for (var key in serverData) {
$(".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"));
},

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

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

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

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

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

@ -36,7 +36,7 @@
</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>
<div class="server-result">
<table id="tb_server_select" cellpadding="0" cellspacing="0" border="0" class="display">
@ -53,15 +53,17 @@
</tbody>
</table>
</div>
<div class='float_right rounded server-selection-num'>
<span id="selected_num">0</span> items selected
</div>
<div class="clear"></div>
<br>
<div class='float_right rounded server-selection-num'>
<span id="selected_num">0</span> items selected
</div>
<div class="continue"><center>
<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 id="server_continue_err" style="display:none;padding-top:10px"></div>
</center></div>
<div class="clear"></div>
<div class="continue"><center>
<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 id="server_continue_err" style="display:none;padding-top:10px"></div>
</center></div>
</div>
</div>

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

@ -36,16 +36,3 @@ img.err:hover {
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', {
"first": this.options.first
}));
this.switchId = 0;
this.switchStatus = {
"status": 0,
"message": ""
"message": "none"
};
this.queryCount = 0;
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) {
this.find(".switchIp").val(switchData.ip);
this.find(".snmp").val(switchData.credential.version);
this.find(".community").val(switchData.credential.community);
this.find(".switchIp").val(_switchData.ip);
this.find(".snmp").val(_switchData.credential.version);
this.find(".community").val(_switchData.credential.community);
} else {
this.find(".switchIp").val(switchData.ip);
this.find(".username").val(switchData.credential.username);
this.find(".password").val(switchData.credential.password);
this.find(".switchIp").val(_switchData.ip);
this.find(".username").val(_switchData.credential.username);
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() {
this.setSwitchStatus(1, "waiting");
var switchData = this.getSwitchData();
Ods.Switch.create(switchData, this.proxy('onSwitchCreated'), this.proxy('onSwitchCreateErr'));
this.switchData = this.getSwitchData();
this.options.odsState.switches.push(this.switchData);
Ods.Switch.create(this.switchData, this.proxy('onSwitchCreated'), this.proxy('onSwitchCreateErr'));
},
getSwitchData: function() {
@ -54,8 +66,8 @@ steal(
var ip = this.find('.switchIp').val();
if ($("#useSNMP:checked").val()) {
snmp_version = $(".switch_row").eq(i).find(".snmp");
community = $(".switch_row").eq(i).find(".community");
snmp_version = this.find(".snmp");
community = this.find(".community");
switchData = {
"switch": {
"ip": ip,
@ -84,14 +96,29 @@ steal(
'div.switch-refresh img click': function(el, ev) {
//remove previously found servers in the data table
var oldSwitchStatus = this.getSwitchStatus().status;
if(oldSwitchStatus == 2) {
var switchIp = this.getSwitchData().switch.ip;
if (oldSwitchStatus == 2) {
var switchIp = this.switchData.switch.ip;
this.options.serverControl.removeServersBySwitch(switchIp);
}
this.setSwitchStatus(1, "waiting");
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 xhr *** ", xhr);
if (xhr.status == 202) { // accepted
this.switchId = data.switch.id;
this.setSwitchId(data.switch.id);
this.checkSwitchState();
}
},
/************************************/
// switch create error callback
/************************************/
@ -124,10 +149,10 @@ steal(
} else {
failedSwitchId = JSON.parse(xhr.responseText).failedSwitch;
}
this.setSwitchId(failedSwitchId);
steal.dev.log(" *** failed Switch Id *** ", failedSwitchId);
// PUT switches
var switchData = this.getSwitchData();
Ods.Switch.update(failedSwitchId, switchData,
Ods.Switch.update(failedSwitchId, this.switchData,
this.proxy('onSwitchUpdated'),
this.proxy('onSwitchUpdateErr'));
} else {
@ -154,7 +179,7 @@ steal(
steal.dev.log(" *** onSwitchUpdated xhr *** ", xhr);
if (xhr.status == 202 || xhr.status == 200) { // accepted or OK
this.switchId = data.switch.id;
this.setSwitchId(data.switch.id);
this.checkSwitchState();
}
},
@ -168,7 +193,6 @@ steal(
steal.dev.log(" *** onSwitchUpdateErr statusText *** ", statusText);
this.setSwitchStatus(3, "PUT switch API error");
if (xhr.status == 404) { // not found
$(".switchesErr").html("Switch update error code: 404");
$(".switchesErr").show();
@ -183,7 +207,7 @@ steal(
checkSwitchState: function() {
this.queryCount++;
if (this.queryCount > 5) {
if (this.queryCount > 30) {
this.setSwitchStatus(3, "Timed out in connecting to switch");
return;
}
@ -203,13 +227,9 @@ steal(
this.element.find('div.right-side').show();
this.getServersBySwitch(data.switch.id);
this.setSwitchStatus(2, "The switch is under monitoring");
} else if (data.switch.state === "unreachable"){
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") {
} else if (data.switch.state === "initialized" || data.switch.state === "repolling") {
setTimeout(this.proxy('checkSwitchState'), 2000);
} else if (data.switch.state === "notsupported") {
} else {
this.setSwitchStatus(3, data.switch.err_msg);
}
}
@ -249,7 +269,6 @@ steal(
steal.dev.log(" *** onFindAllServers textStatus *** ", textStatus);
steal.dev.log(" *** onFindAllServers xhr *** ", xhr);
this.setSwitchStatus(2, "The switch is under monitoring");
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() {
return this.switchStatus;
},
@ -282,8 +318,20 @@ steal(
setSwitchStatus: function(status, message) {
this.switchStatus.status = status;
this.switchStatus.message = message;
this.switchStatus.id = this.switchId;
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) {
@ -293,7 +341,7 @@ steal(
this.find(".ok").hide();
this.find(".err").hide();
this.find(".refresh").hide();
break;
break;
case 1: //waiting
this.find(".waiting").show();
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>
<select class="snmp">
<option>v1</option>
<option selected>v2c</option>
<option value="2c" selected>2c</option>
<option value="1">1</option>
</select>
<input type="input" class="username non-empty-value rounded" placeholder="Username" style="display:none">
</td>