Add refresh function for each switch.
Update switch API handling. Update loading state for 'find servers' button. Update servers order on host config page. Change-Id: Ia25f13a0c6fba3a3115646aa5af5995cc016bf6b
This commit is contained in:
jiahuay
parent
a4856ff62a
commit
4571242354
@ -119,8 +119,9 @@
|
||||
color:#ffffff;
|
||||
font-family:arial;
|
||||
font-size:12px;
|
||||
padding: 3px 20px;
|
||||
padding: 5px 20px;
|
||||
text-decoration:none;
|
||||
width: 120px
|
||||
}
|
||||
.btn_find:hover {
|
||||
background: rgba(50,54,162,1);
|
||||
@ -131,6 +132,19 @@
|
||||
background: -ms-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3236a2', endColorstr='#8d92fb', GradientType=0 );
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn_find[disabled] {
|
||||
background: rgba(50,54,162,1);
|
||||
background: -moz-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(50,54,162,1)), color-stop(100%, rgba(141,146,251,1)));
|
||||
background: -webkit-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(50,54,162,1) 0%, rgba(141,146,251,1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3236a2', endColorstr='#8d92fb', GradientType=0 );
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.btn_find_inactive {
|
||||
|
||||
@ -8,7 +8,7 @@ body {
|
||||
|
||||
#header {
|
||||
height: 60px;
|
||||
min-width: 1150px;
|
||||
min-width: 1200px;
|
||||
background-color: rgb(248, 248, 248);
|
||||
background-image: url("../img/hw_000469.jpg");
|
||||
border-bottom: 1px solid rgb(255, 255, 255);
|
||||
@ -30,7 +30,7 @@ body {
|
||||
|
||||
#menu {
|
||||
height: 46px;
|
||||
min-width: 1150px;
|
||||
min-width: 1200px;
|
||||
overflow: hidden;
|
||||
width: auto !important;
|
||||
margin: 0px auto;
|
||||
@ -106,7 +106,7 @@ h2 {
|
||||
}
|
||||
|
||||
#content {
|
||||
min-width: 1150px;
|
||||
min-width: 1200px;
|
||||
min-height: 200px;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
|
||||
BIN
public/img/blue_refresh_16px.png
Normal file
BIN
public/img/blue_refresh_16px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 842 B |
Binary file not shown.
|
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 3.2 KiB |
BIN
public/img/red_cross_16px.png
Normal file
BIN
public/img/red_cross_16px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 B |
BIN
public/img/refresh.png
Normal file
BIN
public/img/refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/img/waiting_16px.gif
Normal file
BIN
public/img/waiting_16px.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@ -1,6 +1,5 @@
|
||||
config = {
|
||||
"switches": [
|
||||
{
|
||||
"switches": [{
|
||||
"switch": {
|
||||
"ip": "172.29.8.40",
|
||||
"credential": {
|
||||
@ -8,8 +7,7 @@ config = {
|
||||
"community": "public"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
}, {
|
||||
"switch": {
|
||||
"ip": "172.29.8.41",
|
||||
"credential": {
|
||||
@ -17,8 +15,15 @@ config = {
|
||||
"community": "public"
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"switch": {
|
||||
"ip": "172.29.8.42",
|
||||
"credential": {
|
||||
"version": "v2c",
|
||||
"community": "public"
|
||||
}
|
||||
],
|
||||
}
|
||||
}],
|
||||
"security": {
|
||||
"server_credentials": {
|
||||
"username": "root",
|
||||
@ -79,8 +84,7 @@ config = {
|
||||
};
|
||||
|
||||
config_demo = {
|
||||
"switches": [
|
||||
{
|
||||
"switches": [{
|
||||
"switch": {
|
||||
"ip": "127.0.0.1",
|
||||
"credential": {
|
||||
|
||||
@ -17,15 +17,16 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
|
||||
|
||||
if (manage_ip == "172.29.8.40") {
|
||||
switchId = 1;
|
||||
}
|
||||
else if(manage_ip == "172.29.8.41"){
|
||||
} else if (manage_ip == "172.29.8.41") {
|
||||
switchId = 2;
|
||||
} else if (manage_ip == "172.29.8.42") {
|
||||
switchId = 3;
|
||||
}
|
||||
|
||||
var returnData = {
|
||||
"status": "accepted",
|
||||
"switch": {
|
||||
"state": "not_reached",
|
||||
"state": "initialized",
|
||||
"link": {
|
||||
"href": "/switches/"+switchId+"/",
|
||||
"rel": "self"
|
||||
@ -44,9 +45,12 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
|
||||
if (switchId == 1) {
|
||||
return [202, "accepted", returnData, {}];
|
||||
//return [202, returnData ];
|
||||
}
|
||||
else if(switchId == 2) {
|
||||
} else if (switchId == 2) {
|
||||
return [409, duplicateErr];
|
||||
//return [202, "accepted", returnData, {} ];
|
||||
} else if (switchId == 3) {
|
||||
//return [409, duplicateErr];
|
||||
return [202, "accepted", returnData, {} ];
|
||||
}
|
||||
|
||||
});
|
||||
@ -57,7 +61,7 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
|
||||
var returnData = {
|
||||
"status": "accepted",
|
||||
"switch": {
|
||||
"state": "not_reached",
|
||||
"state": "repulling",
|
||||
"link": {
|
||||
"href": "/switches/"+switchId+"/",
|
||||
"rel": "self"
|
||||
@ -76,7 +80,8 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"switch": {
|
||||
"state": switchId == 10 ? "not_reached" : "under_monitoring",
|
||||
"state": switchId == 10 ? "initialized" : "under_monitoring",
|
||||
"err-msg": "error message",
|
||||
"link": {
|
||||
"href": settings.url,
|
||||
"rel": "self"
|
||||
@ -183,6 +188,36 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
else if(switchId == 3) {
|
||||
var returnData = {
|
||||
"status": "OK",
|
||||
"machines": [
|
||||
{
|
||||
"mac": "28:e5:ee:23:14:92",
|
||||
"vlan": 3,
|
||||
"link": {
|
||||
"href": "/api/machines/80",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 80,
|
||||
"port": 1,
|
||||
"switch_ip": "172.29.8.42"
|
||||
},
|
||||
{
|
||||
"mac": "28:22:77:c2:46:4a",
|
||||
"vlan": 3,
|
||||
"link": {
|
||||
"href": "/api/machines/90",
|
||||
"rel": "self"
|
||||
},
|
||||
"id": 90,
|
||||
"port": 2,
|
||||
"switch_ip": "172.29.8.42"
|
||||
}
|
||||
]
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ steal(
|
||||
feature: null,
|
||||
machines: [],
|
||||
switches: [],
|
||||
snmp: 1,
|
||||
snmp: true,
|
||||
adapter_id: null
|
||||
};
|
||||
|
||||
|
||||
@ -48,7 +48,7 @@ steal(
|
||||
}
|
||||
});
|
||||
|
||||
$(document).tooltip({
|
||||
$(".pattern-tip").tooltip({
|
||||
items: "[data-geo], [title]",
|
||||
content: function() {
|
||||
var element = $(this);
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<option>Switch alias</option>
|
||||
<option>Host</option>
|
||||
</select>
|
||||
<span class="ui-icon ui-icon-info" style="float: right; margin: 6px 19px 4px 7px;" data-geo="info-ico">
|
||||
<span class="pattern-tip ui-icon ui-icon-info" style="float: right; margin: 6px 19px 4px 7px;" data-geo="info-ico">
|
||||
</p>
|
||||
</div>
|
||||
<div class="">
|
||||
|
||||
@ -129,18 +129,14 @@ steal(
|
||||
$("#continuing").css("opacity", 1);
|
||||
|
||||
var cluster_id = this.options.odsState.cluster_id;
|
||||
Ods.Cluster.action(
|
||||
cluster_id, {
|
||||
"deploy": ""
|
||||
},
|
||||
Ods.Cluster.action(cluster_id, {"deploy": []},
|
||||
this.proxy('onTriggerDeploy'),
|
||||
this.proxy('onTriggerDeployErr'));
|
||||
},
|
||||
|
||||
onTriggerDeploy: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onTriggerDeploy data *** ", data);
|
||||
steal.dev.log(" *** onTriggerDeploy textStatus *** ",
|
||||
textStatus);
|
||||
steal.dev.log(" *** onTriggerDeploy textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onTriggerDeploy xhr *** ", xhr);
|
||||
|
||||
if (xhr.status == 202) { // accepted
|
||||
@ -155,8 +151,7 @@ steal(
|
||||
onTriggerDeployErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onTriggerDeployErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onTriggerDeployErr status *** ", status);
|
||||
steal.dev.log(" *** onTriggerDeployErr statusText *** ",
|
||||
statusText);
|
||||
steal.dev.log(" *** onTriggerDeployErr statusText *** ", statusText);
|
||||
},
|
||||
|
||||
initProgressbars: function() {
|
||||
@ -186,8 +181,7 @@ steal(
|
||||
switchjson.children.push(serverjson);
|
||||
|
||||
// initiate list based progress bars
|
||||
this.initListProgressbar(servers[i].clusterhost_id,
|
||||
servers[i].hostname);
|
||||
this.initListProgressbar(servers[i].clusterhost_id, servers[i].hostname);
|
||||
}
|
||||
this.serverTreeJson.children.push(switchjson);
|
||||
}
|
||||
@ -202,10 +196,8 @@ steal(
|
||||
this.totalProgressbar.progressbar({
|
||||
value: false
|
||||
});
|
||||
this.totalProgressLabel = this.totalProgressbar.children(
|
||||
".progress-label");
|
||||
this.totalProgressbarValue = this.totalProgressbar.find(
|
||||
".ui-progressbar-value");
|
||||
this.totalProgressLabel = this.totalProgressbar.children(".progress-label");
|
||||
this.totalProgressbarValue = this.totalProgressbar.find(".ui-progressbar-value");
|
||||
},
|
||||
|
||||
initListProgressbar: function(hostid, hostname) {
|
||||
@ -214,8 +206,7 @@ steal(
|
||||
"hostid": hostid,
|
||||
"message": "Waiting..."
|
||||
}
|
||||
$("#tabs-2 table tbody").append(this.view('progress_row',
|
||||
initPData));
|
||||
$("#tabs-2 table tbody").append(this.view('progress_row', initPData));
|
||||
|
||||
var pbar = $('div[data-hostid="' + hostid + '"]');
|
||||
pbar.progressbar({
|
||||
@ -247,10 +238,7 @@ steal(
|
||||
this.pendingHostList = [];
|
||||
|
||||
for (var i = 0; i < count; i++) {
|
||||
Ods.ClusterHost.progress(
|
||||
hosts[i],
|
||||
this.proxy('updateProgressBar'),
|
||||
this.proxy('updateProgressBarErr'));
|
||||
Ods.ClusterHost.progress(hosts[i], this.proxy('updateProgressBar'), this.proxy('updateProgressBarErr'));
|
||||
}
|
||||
},
|
||||
|
||||
@ -289,8 +277,7 @@ steal(
|
||||
updateProgressBarErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** updateProgressBarErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** updateProgressBarErr status *** ", status);
|
||||
steal.dev.log(" *** updateProgressBarErr statusText *** ",
|
||||
xhr);
|
||||
steal.dev.log(" *** updateProgressBarErr statusText *** ", xhr);
|
||||
//TODO
|
||||
},
|
||||
|
||||
@ -311,16 +298,13 @@ steal(
|
||||
}
|
||||
|
||||
// update graph-based progress bar
|
||||
if ($('rect[data-hostid="' + progressData.id + '"]')) {
|
||||
// check if the node is expanded
|
||||
if ($('rect[data-hostid="' + progressData.id + '"]')) { // check if the node is expanded
|
||||
if (progressData.percentage > 1.0) {
|
||||
progressData.percentage = 1.0;
|
||||
}
|
||||
$('rect[data-hostid="' + progressData.id + '"]')
|
||||
.attr("width", imgWidth * progressData.percentage);
|
||||
$('rect[data-hostid="' + progressData.id + '"]').attr("width", imgWidth * progressData.percentage);
|
||||
|
||||
$('text[data-hostid="' + progressData.id + '"]')
|
||||
.text(progressData.message);
|
||||
$('text[data-hostid="' + progressData.id + '"]').text(progressData.message);
|
||||
}
|
||||
},
|
||||
|
||||
@ -360,17 +344,14 @@ steal(
|
||||
"background": "#5BB75B"
|
||||
});
|
||||
} else {
|
||||
pbar.progressbar(
|
||||
"value", progressData.percentage * 100)
|
||||
pbar.progressbar("value", progressData.percentage * 100)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateTotalBar: function(data) {
|
||||
if (this.pendingHostCount == 0) {
|
||||
Ods.Cluster.progress(this.options.odsState.cluster_id,
|
||||
this.proxy('onTotalProgressData'),
|
||||
this.proxy('onTotalProgressDataErr'));
|
||||
Ods.Cluster.progress(this.options.odsState.cluster_id, this.proxy('onTotalProgressData'), this.proxy('onTotalProgressDataErr'));
|
||||
}
|
||||
},
|
||||
|
||||
@ -379,8 +360,7 @@ steal(
|
||||
/********************************************/
|
||||
onTotalProgressData: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onTotalProgressData data *** ", data);
|
||||
steal.dev.log(" *** onTotalProgressData textStatus *** ",
|
||||
textStatus);
|
||||
steal.dev.log(" *** onTotalProgressData textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onTotalProgressData xhr *** ", xhr);
|
||||
|
||||
var total = data.progress.percentage;
|
||||
@ -397,9 +377,7 @@ steal(
|
||||
setTimeout(this.proxy('getProgressData'), 3000);
|
||||
} else {
|
||||
this.totalProgressbar.progressbar("value", 100);
|
||||
Ods.DashboardLink.findOne(
|
||||
this.options.odsState.cluster_id,
|
||||
this.proxy('onFindDashboardLink'));
|
||||
Ods.DashboardLink.findOne(this.options.odsState.cluster_id, this.proxy('onFindDashboardLink'));
|
||||
}
|
||||
},
|
||||
|
||||
@ -408,23 +386,18 @@ steal(
|
||||
/********************************************/
|
||||
onTotalProgressDataErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onTotalProgressDataErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onTotalProgressDataErr status *** ",
|
||||
status);
|
||||
steal.dev.log(" *** onTotalProgressDataErr statusText *** ",
|
||||
xhr);
|
||||
steal.dev.log(" *** onTotalProgressDataErr status *** ", status);
|
||||
steal.dev.log(" *** onTotalProgressDataErr statusText *** ", xhr);
|
||||
//TODO
|
||||
},
|
||||
|
||||
onFindDashboardLink: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onFindDashboardLink data *** ", data);
|
||||
steal.dev.log(" *** onFindDashboardLink textStatus *** ",
|
||||
textStatus);
|
||||
steal.dev.log(" *** onFindDashboardLink textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onFindDashboardLink xhr *** ", xhr);
|
||||
|
||||
if (data.status == "OK") {
|
||||
$(".dashboard-link").attr(
|
||||
"href",
|
||||
data.dashboardlinks["os-single-controller"]);
|
||||
$(".dashboard-link").attr("href", data.dashboardlinks["os-single-controller"]);
|
||||
$(".dashboard-link").attr("target", "_blank");
|
||||
$(".dashboard-link").removeClass("disabled");
|
||||
}
|
||||
@ -486,8 +459,7 @@ steal(
|
||||
.attr("width", width + margin.right + margin.left)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform",
|
||||
"translate(" + margin.left + "," + margin.top + ")");
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
root = this.serverTreeJson;
|
||||
root.x0 = height / 2;
|
||||
|
||||
@ -165,7 +165,7 @@ steal(
|
||||
server['roles'] = [];
|
||||
}
|
||||
|
||||
server['server_ip'] = this.startPrefix + (parseInt(this.startLastDigit) + i);
|
||||
//server['server_ip'] = this.startPrefix + (parseInt(this.startLastDigit) + i);
|
||||
|
||||
var switchIp = server.switch_ip;
|
||||
if (this.serverData[switchIp] == undefined) {
|
||||
@ -176,6 +176,16 @@ steal(
|
||||
}
|
||||
this.options.odsState.servers_config = this.serverData;
|
||||
|
||||
var j = 0;
|
||||
var serverData = this.options.odsState.servers_config;
|
||||
for (var key in serverData) {
|
||||
var servers = serverData[key];
|
||||
for (var i = 0; i < servers.length; i++) {
|
||||
serverData[key][i]['server_ip'] = this.startPrefix + (parseInt(this.startLastDigit) + j);
|
||||
j++;
|
||||
}
|
||||
}
|
||||
|
||||
var networkingData = {
|
||||
"networking": {
|
||||
"interfaces": {
|
||||
|
||||
@ -26,12 +26,12 @@
|
||||
<option>eth3</option>
|
||||
<option>eth4</option>
|
||||
</select>
|
||||
<div id="mgt_nic_err" class="nicHint float_left"></div>
|
||||
<div id="mgt_nic_err" class="nicHint float_left" ><i> (This selection should be consistent with your networking plan.)</i></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="mgt_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
|
||||
<td><input id="mgt_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="vnw_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
|
||||
<td><input id="vnw_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -105,7 +105,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="float_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
|
||||
<td><input id="float_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -141,7 +141,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Promisc Mode</td>
|
||||
<td><input id="storage_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
|
||||
<td><input id="storage_promisc" type="checkbox"><i> (The interface running in promisc mode will receive and pass all the trafic.)</i></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -150,23 +150,23 @@
|
||||
<table>
|
||||
<tr>
|
||||
<td>Nameserver</td>
|
||||
<td><input id="global_nameservers" type="input" class="rounded non-empty-value" value="">e.g. "[compass server ip]"</td>
|
||||
<td><input id="global_nameservers" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Search Path</td>
|
||||
<td><input id="global_searchpath" type="input" class="rounded non-empty-value" value="">e.g. "ods.com"</td>
|
||||
<td><input id="global_searchpath" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gateway</td>
|
||||
<td><input id="global_gateway" type="input" class="rounded non-empty-value" value="">e.g. "[compass server gateway ip]"</td>
|
||||
<td><input id="global_gateway" type="input" class="rounded non-empty-value" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Proxy (optional)</td>
|
||||
<td><input id="global_proxy" type="input" class="rounded" value="">e.g. "http://[compass server ip]:3128"</td>
|
||||
<td><input id="global_proxy" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NTP Server (optional)</td>
|
||||
<td><input id="global_ntpserver" type="input" class="rounded" value="">e.g. "[compass server ip]"</td>
|
||||
<td><input id="global_ntpserver" type="input" class="rounded" value=""></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -85,15 +85,15 @@ table.display thead th {
|
||||
}
|
||||
|
||||
.sorting {
|
||||
background: url('../../../img/bg.gif') no-repeat center right;
|
||||
background: url('../../../img/bg.gif') no-repeat 60% 50%;
|
||||
}
|
||||
|
||||
.sorting_desc {
|
||||
background: url('../../../img/desc.gif') no-repeat center right;
|
||||
background: url('../../../img/desc.gif') no-repeat 60% 50%;
|
||||
}
|
||||
|
||||
.sorting_asc {
|
||||
background: url('../../../img/asc.gif') no-repeat center right;
|
||||
background: url('../../../img/asc.gif') no-repeat 60% 50%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
||||
@ -7,20 +7,20 @@ steal(
|
||||
'./servers.css',
|
||||
'./views/init.ejs',
|
||||
'lib/jquery.dataTables.js',
|
||||
'./views/switch_row.ejs',
|
||||
//'lib/jquery.dataTables.dataSourcePlugins.js',
|
||||
'ods/models/servers.js',
|
||||
'ods/models/cluster.js'
|
||||
'ods/models/cluster.js',
|
||||
'ods/ui/switch_entry'
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.servers', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init'));
|
||||
|
||||
this.pendingSwitchList = [];
|
||||
|
||||
// we query up to 10 times. Report an error if any of the switches
|
||||
// remains in not_reached status.
|
||||
this.queryCount = 0;
|
||||
|
||||
this.displayNodes = [];
|
||||
this.initServerTable();
|
||||
|
||||
this.checked_num = 0;
|
||||
@ -50,10 +50,8 @@ steal(
|
||||
|
||||
|
||||
var oldSwitchesData = this.options.odsState.switches;
|
||||
|
||||
if (oldSwitchesData.length > 0) {
|
||||
var tbody = $(".switchtable tbody");
|
||||
|
||||
if (oldSwitchesData.length > 0) {
|
||||
if (this.options.odsState.snmp) {
|
||||
$('#useSNMP').prop('checked', true);
|
||||
} else {
|
||||
@ -61,39 +59,31 @@ steal(
|
||||
}
|
||||
|
||||
for (var i = 0; i < oldSwitchesData.length; i++) {
|
||||
if (i > 0) {
|
||||
tbody.append(this.view('switch_row'));
|
||||
tbody.append("<tr class=\"switch_row\"></tr>");
|
||||
var tr = tbody.find("tr:last");
|
||||
tr.ods_ui_switch_entry({
|
||||
"odsState": this.options.odsState,
|
||||
"switchData": oldSwitchesData[i].switch,
|
||||
"first": i == 0,
|
||||
"serverControl": this
|
||||
});
|
||||
}
|
||||
if (this.options.odsState.snmp) {
|
||||
$("#snmpTitle").html("SNMP Version");
|
||||
$("#communityTitle").html("Community");
|
||||
$(".switch_row").find(".snmp").show();
|
||||
$(".switch_row").find(".community").show();
|
||||
$(".switch_row").find(".username").hide();
|
||||
$(".switch_row").find(".password").hide();
|
||||
} else {
|
||||
$("#snmpTitle").html("Username");
|
||||
$("#communityTitle").html("Password");
|
||||
$(".switch_row").find(".snmp").hide();
|
||||
$(".switch_row").find(".community").hide();
|
||||
$(".switch_row").find(".username").show();
|
||||
$(".switch_row").find(".password").show();
|
||||
tbody.append("<tr class=\"switch_row\"></tr>");
|
||||
var tr = tbody.find("tr:last");
|
||||
tr.ods_ui_switch_entry({
|
||||
"odsState": this.options.odsState,
|
||||
"switchData": null,
|
||||
"first": true,
|
||||
"serverControl": this
|
||||
});
|
||||
}
|
||||
|
||||
if (this.options.odsState.snmp) {
|
||||
$(".switch_row").eq(i).find(".switchIp").val(oldSwitchesData[i].switch.ip);
|
||||
$(".switch_row").eq(i).find(".snmp").val(oldSwitchesData[i].switch.credential.version);
|
||||
$(".switch_row").eq(i).find(".community").val(oldSwitchesData[i].switch.credential.community);
|
||||
} else {
|
||||
$(".switch_row").eq(i).find(".switchIp").val(oldSwitchesData[i].switch.ip);
|
||||
$(".switch_row").eq(i).find(".username").val(oldSwitchesData[i].switch.credential.username);
|
||||
$(".switch_row").eq(i).find(".password").val(oldSwitchesData[i].switch.credential.password);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
initServerTable: function() {
|
||||
var currNode = [];
|
||||
var self = this;
|
||||
this.dataTable = $('#tb_server_select').dataTable({
|
||||
"sScrollY": "200px",
|
||||
"bPaginate": false,
|
||||
@ -122,7 +112,19 @@ steal(
|
||||
"aaSorting": [
|
||||
[2, "asc"],
|
||||
[4, "asc"]
|
||||
]
|
||||
],
|
||||
"fnPreDrawCallback": function(oSettings) {
|
||||
/* reset currNode before each draw*/
|
||||
currNode = [];
|
||||
},
|
||||
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
|
||||
/* push this row of data to currNode array*/
|
||||
currNode.push(nRow);
|
||||
},
|
||||
"fnDrawCallback": function(oSettings) {
|
||||
/* can now access sorted node array*/
|
||||
self.displayNodes = currNode;
|
||||
}
|
||||
});
|
||||
|
||||
$('.dataTables_info').remove();
|
||||
@ -130,21 +132,30 @@ steal(
|
||||
$('.dataTables_filter input').addClass('rounded');
|
||||
},
|
||||
|
||||
removeServersBySwitch: function(switchIp) {
|
||||
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();
|
||||
serversCount = servers.length;
|
||||
} else {
|
||||
i++;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
'input[name="snmp"] click': function(el, ev) {
|
||||
this.options.odsState.attr("snmp", el.val() == "snmp");
|
||||
|
||||
if (el.val() == "snmp") {
|
||||
$("#snmpTitle").html("SNMP Version");
|
||||
$("#communityTitle").html("Community");
|
||||
$(".snmp").show();
|
||||
$(".community").show();
|
||||
$(".username").hide();
|
||||
$(".password").hide();
|
||||
} else {
|
||||
$("#snmpTitle").html("Username");
|
||||
$("#communityTitle").html("Password");
|
||||
$(".snmp").hide();
|
||||
$(".community").hide();
|
||||
$(".username").show();
|
||||
$(".password").show();
|
||||
}
|
||||
},
|
||||
|
||||
@ -203,22 +214,23 @@ steal(
|
||||
},
|
||||
|
||||
'getSelectedServers': function() {
|
||||
selectedServers = [];
|
||||
console.log("displayNodes ", this.displayNodes);
|
||||
var selectedServers = [];
|
||||
|
||||
this.options.odsState.servers = [];
|
||||
this.options.odsState.servers_config = [];
|
||||
|
||||
// loop through dataTable nodes to find selected servers
|
||||
for (var i = 0; i < this.dataTable.fnGetNodes().length; i++) {
|
||||
var ckboxTd = $('td', this.dataTable.fnGetNodes()[i])[0];
|
||||
for (var i = 0; i < this.displayNodes.length; i++) {
|
||||
var ckboxTd = $('td', this.displayNodes[i])[0];
|
||||
var server_ckbox = $('input', ckboxTd)[0];
|
||||
|
||||
if (server_ckbox.checked == true) {
|
||||
var checkTd = $('td', this.dataTable.fnGetNodes()[i])[1];
|
||||
var macTd = $('td', this.dataTable.fnGetNodes()[i])[1];
|
||||
var switchIpTd = $('td', this.dataTable.fnGetNodes()[i])[2];
|
||||
var vlanTd = $('td', this.dataTable.fnGetNodes()[i])[3];
|
||||
var portTd = $('td', this.dataTable.fnGetNodes()[i])[4];
|
||||
var checkTd = $('td', this.displayNodes[i])[1];
|
||||
var macTd = $('td', this.displayNodes[i])[1];
|
||||
var switchIpTd = $('td', this.displayNodes[i])[2];
|
||||
var vlanTd = $('td', this.displayNodes[i])[3];
|
||||
var portTd = $('td', this.displayNodes[i])[4];
|
||||
|
||||
var mac = macTd.textContent || macTd.innerText;
|
||||
var switch_ip = switchIpTd.textContent || switchIpTd.innerText;
|
||||
@ -242,29 +254,25 @@ steal(
|
||||
|
||||
'div.add click': function(el, ev) {
|
||||
var tbody = el.closest('tbody');
|
||||
tbody.append(this.view('switch_row'));
|
||||
|
||||
if (!$("#useSNMP:checked").val()) {
|
||||
$(".switch_row").last().find(".snmp").hide();
|
||||
$(".switch_row").last().find(".community").hide();
|
||||
$(".switch_row").last().find(".username").show();
|
||||
$(".switch_row").last().find(".password").show();
|
||||
}
|
||||
tbody.append("<tr class=\"switch_row\"></tr>");
|
||||
var tr = tbody.find("tr:last");
|
||||
tr.ods_ui_switch_entry({
|
||||
"odsState": this.options.odsState,
|
||||
"switchData": null
|
||||
});
|
||||
},
|
||||
|
||||
'div.remove click': function(el, ev) {
|
||||
var row = el.closest('tr');
|
||||
row.remove();
|
||||
},
|
||||
|
||||
'a.find_server click': function(el, ev) {
|
||||
'.find_server click': function(el, ev) {
|
||||
// remove the error class within the el
|
||||
$('.switchtable').find('.error').removeClass('error');
|
||||
$(".switchesErr").hide();
|
||||
|
||||
this.dataTable.fnClearTable();
|
||||
|
||||
var self = this;
|
||||
var hasError = false;
|
||||
this.pendingSwitchList.length = 0;
|
||||
|
||||
this.queryCount = 0;
|
||||
|
||||
// return if the switch_ip/community or username/password input is empty
|
||||
@ -273,6 +281,7 @@ steal(
|
||||
hasError = true;
|
||||
}
|
||||
});
|
||||
// return if the ip format is not correct
|
||||
$('.switchtable').find('.switchIp').each(function(index, value) {
|
||||
var isValid = self.validateIpFormat($(value).val());
|
||||
if (!isValid) {
|
||||
@ -287,269 +296,44 @@ steal(
|
||||
}
|
||||
|
||||
$("#finding-servers").css("opacity", 1);
|
||||
$('.find_server').attr("disabled", true);
|
||||
$('.find_server').html("Finding...");
|
||||
|
||||
var switch_count = $(".switch_row").length;
|
||||
this.pendingCount = switch_count;
|
||||
this.switches = [];
|
||||
$('.switchtable').find('tr.switch_row').each(function(index, value) {
|
||||
$(value).controller().findServers();
|
||||
});
|
||||
|
||||
// loop through switch rows to create new switches
|
||||
for (i = 0; i < switch_count; i++) {
|
||||
var switch_ip = $(".switch_row").eq(i).find(".switchIp");
|
||||
var snmp_version = null,
|
||||
community = null;
|
||||
var username = null,
|
||||
password = null;
|
||||
var switchData = {};
|
||||
|
||||
if ($("#useSNMP:checked").val()) {
|
||||
this.options.odsState.snmp = 1;
|
||||
snmp_version = $(".switch_row").eq(i).find(".snmp");
|
||||
community = $(".switch_row").eq(i).find(".community");
|
||||
switchData = {
|
||||
"switch": {
|
||||
"ip": switch_ip.val(),
|
||||
"credential": {
|
||||
'version': snmp_version.val(),
|
||||
'community': community.val()
|
||||
}
|
||||
}
|
||||
};
|
||||
} else {
|
||||
this.options.odsState.snmp = 0;
|
||||
username = $(".switch_row").eq(i).find(".username");
|
||||
password = $(".switch_row").eq(i).find(".password");
|
||||
switchData = {
|
||||
"switch": {
|
||||
"ip": switch_ip.val(),
|
||||
"credential": {
|
||||
"username": username.val(),
|
||||
"password": password.val()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
this.switches.push(switchData);
|
||||
|
||||
Ods.Switch.create(switchData, this.proxy('onSwitchCreated', i), this.proxy('onSwitchCreateErr', i));
|
||||
}
|
||||
this.options.odsState.switches = this.switches;
|
||||
|
||||
setTimeout(this.proxy('checkSwitchesStatus'), 2000);
|
||||
},
|
||||
|
||||
'input.switchIp keyup': function(el, ev) {
|
||||
var isValid = this.validateIpFormat(el.val());
|
||||
if (!isValid) {
|
||||
el.addClass("error");
|
||||
} else {
|
||||
el.removeClass("error");
|
||||
checkSwitchesStatus: function() {
|
||||
var switchesFinished = true;
|
||||
$('.switchtable').find('tr.switch_row').each(function(index, value) {
|
||||
var status = $(value).controller().getSwitchStatus();
|
||||
if(status.status == 1) {
|
||||
switchesFinished = false;
|
||||
}
|
||||
},
|
||||
|
||||
validateIpFormat: function(value) {
|
||||
var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
if (value.match(ipformat)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch create success callback
|
||||
/************************************/
|
||||
onSwitchCreated: function(switchIndex, data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onSwitchCreated data *** ", data);
|
||||
steal.dev.log(" *** onSwitchCreated textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onSwitchCreated xhr *** ", xhr);
|
||||
|
||||
this.pendingCount--;
|
||||
if (xhr.status == 202) { // accepted
|
||||
var switchId = data.
|
||||
switch.id;
|
||||
this.pendingSwitchList.push(switchId);
|
||||
}
|
||||
|
||||
if (this.pendingCount == 0) {
|
||||
this.checkSwitchState();
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch create error callback
|
||||
/************************************/
|
||||
onSwitchCreateErr: function(switchIndex, xhr, status, statusText) {
|
||||
steal.dev.log(" *** onSwitchCreatErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onSwitchCreatErr status *** ", status);
|
||||
steal.dev.log(" *** onSwitchCreatErr statusText *** ", xhr);
|
||||
|
||||
})
|
||||
if (switchesFinished) {
|
||||
$("#finding-servers").css("opacity", 0);
|
||||
|
||||
if (xhr.status == 409) { // duplicate
|
||||
var failedSwitchId = 0;
|
||||
if ($.fixture.on == true) {
|
||||
failedSwitchId = statusText.failedSwitch;
|
||||
$('.find_server').attr("disabled", false);
|
||||
$('.find_server').html("Find Servers");
|
||||
} else {
|
||||
failedSwitchId = JSON.parse(xhr.responseText).failedSwitch;
|
||||
}
|
||||
steal.dev.log(" *** failed Switch Id *** ", failedSwitchId);
|
||||
// PUT switches
|
||||
Ods.Switch.update(failedSwitchId, this.switches[switchIndex],
|
||||
this.proxy('onSwitchUpdated', switchIndex), this.proxy('onSwitchUpdateErr'));
|
||||
|
||||
} else if (xhr.status == 400) { //bad request
|
||||
$(".switchesErr").html("Switch post error code: 400");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 500) { // internal server error
|
||||
$(".switchesErr").html("Switch post error code: 500");
|
||||
$(".switchesErr").show();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch update success callback
|
||||
/************************************/
|
||||
onSwitchUpdated: function(switchIndex, data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onSwitchUpdated data *** ", data);
|
||||
steal.dev.log(" *** onSwitchUpdated textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onSwitchUpdated xhr *** ", xhr);
|
||||
|
||||
this.pendingCount--;
|
||||
|
||||
if (xhr.status == 202 || xhr.status == 200) { // accepted or OK
|
||||
var switchId = data.
|
||||
switch.id;
|
||||
this.pendingSwitchList.push(switchId);
|
||||
}
|
||||
|
||||
if (this.pendingCount == 0) {
|
||||
this.checkSwitchState();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch create error callback
|
||||
/************************************/
|
||||
onSwitchUpdateErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onSwitchUpdateErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onSwitchUpdateErr status *** ", status);
|
||||
steal.dev.log(" *** onSwitchUpdateErr statusText *** ", statusText);
|
||||
|
||||
$("#finding-servers").css("opacity", 0);
|
||||
|
||||
if (xhr.status == 404) { // not found
|
||||
$(".switchesErr").html("Switch update error code: 404");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 400) { // bad request
|
||||
$(".switchesErr").html("Switch update error code: 400");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 500) { // internal server error
|
||||
$(".switchesErr").html("Switch update error code: 500");
|
||||
$(".switchesErr").show();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
checkSwitchState: function() {
|
||||
this.queryCount++;
|
||||
this.pendingCount = this.pendingSwitchList.length;
|
||||
|
||||
if (this.queryCount > 10) {
|
||||
$(".switchesErr").html("There is(are) " + this.pendingCount + " switch(es) not responding now. Please try again later.")
|
||||
$(".switchesErr").show();
|
||||
$("#finding-servers").css("opacity", 0);
|
||||
return;
|
||||
}
|
||||
|
||||
var switches = this.pendingSwitchList;
|
||||
this.pendingSwitchList = [];
|
||||
var count = this.pendingCount;
|
||||
for (var i = 0; i < count; i++) {
|
||||
Ods.Switch.findOne(switches[i], this.proxy('onFindOneSwitch'), this.proxy('onFindOneSwitchErr'));
|
||||
setTimeout(this.proxy('checkSwitchesStatus'), 2000);
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// find one switch success callback
|
||||
/************************************/
|
||||
onFindOneSwitch: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onFindOneSwitch data *** ", data);
|
||||
steal.dev.log(" *** onFindOneSwitch textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onFindOneSwitch xhr *** ", xhr);
|
||||
|
||||
this.pendingCount--;
|
||||
|
||||
if (xhr.status == 200) { //OK
|
||||
if (data.switch.state === "under_monitoring") {
|
||||
onNewMachines: function(machines) {
|
||||
this.element.find('div.right-side').show();
|
||||
this.dataTable.fnClearTable();
|
||||
|
||||
this.getServersBySwitch(data.switch.id);
|
||||
} else {
|
||||
this.pendingSwitchList.push(data.switch.id);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.pendingCount == 0) {
|
||||
setTimeout(this.proxy('checkSwitchState'), 2000);
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// find one switch error callback
|
||||
/************************************/
|
||||
onFindOneSwitchErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onFindOneSwitchErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onFindOneSwitchErr status *** ", status);
|
||||
steal.dev.log(" *** onFindOneSwitchErr statusText *** ", statusText);
|
||||
|
||||
$("#finding-servers").css("opacity", 0);
|
||||
if (xhr.status == 404) { // not found
|
||||
$(".switchesErr").html("Find switch error code: 404");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 500) {
|
||||
$(".switchesErr").html("Find switch error code: 500");
|
||||
$(".switchesErr").show();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getServersBySwitch: function(id) {
|
||||
Ods.Server.findAll({
|
||||
switchId: id
|
||||
}, this.proxy('onFindAllServers'));
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// find all servers success callback
|
||||
/************************************/
|
||||
onFindAllServers: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onFindAllServers data *** ", data);
|
||||
steal.dev.log(" *** onFindAllServers textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onFindAllServers xhr *** ", xhr);
|
||||
|
||||
this.dataTable.fnAddData(data.machines);
|
||||
|
||||
this.machines = this.machines.concat(data.machines);
|
||||
|
||||
if (this.pendingCount == 0 && this.pendingSwitchList.length == 0) {
|
||||
steal.dev.log("loading finished");
|
||||
$("#finding-servers").css("opacity", 0);
|
||||
if (machines.length > 0) {
|
||||
this.dataTable.fnAddData(machines);
|
||||
this.machines = this.machines.concat(machines);
|
||||
this.options.odsState.machines = this.machines;
|
||||
}
|
||||
},
|
||||
|
||||
checkNonEmpty: function(el) {
|
||||
var value = el.val();
|
||||
if (!value) {
|
||||
el.addClass('error');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// add server to cluster success callback
|
||||
/************************************/
|
||||
@ -621,6 +405,33 @@ steal(
|
||||
this.countCheckedServers();
|
||||
},
|
||||
|
||||
'input.switchIp keyup': function(el, ev) {
|
||||
var isValid = this.validateIpFormat(el.val());
|
||||
if (!isValid) {
|
||||
el.addClass("error");
|
||||
} else {
|
||||
el.removeClass("error");
|
||||
}
|
||||
},
|
||||
|
||||
validateIpFormat: function(value) {
|
||||
var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
||||
if (value.match(ipformat)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
checkNonEmpty: function(el) {
|
||||
var value = el.val();
|
||||
if (!value) {
|
||||
el.addClass('error');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
show: function() {
|
||||
|
||||
this.element.show();
|
||||
|
||||
@ -19,26 +19,12 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="switch_row">
|
||||
<td><input type="input" class="switchIp non-empty-value rounded" placeholder="Switch IP" value=""> </td>
|
||||
<td style="width:110px">
|
||||
<select class="snmp">
|
||||
<option>v1</option>
|
||||
<option selected>v2c</option>
|
||||
</select>
|
||||
<input type="input" class="username non-empty-value rounded" placeholder="Username" value="" style="display:none">
|
||||
</td>
|
||||
<td>
|
||||
<input type="password" class="community non-empty-value rounded" placeholder="Community" value="">
|
||||
<input type="password" class="password non-empty-value rounded" placeholder="Password" value="" style="display:none;">
|
||||
</td>
|
||||
<td width="120px"><div class="add"> </div></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="continue">
|
||||
<center>
|
||||
<a href="javascript:void(0)" class="find_server btn_find"> Find Servers </a>
|
||||
<button class="find_server btn_find"> Find Servers </button>
|
||||
<img id="finding-servers" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img>
|
||||
</center>
|
||||
<center class="switchesErr errhint" style="margin-top:10px;display:none;">
|
||||
|
||||
55
public/ods/ui/switch_entry/servers_test.html
Normal file
55
public/ods/ui/switch_entry/servers_test.html
Normal file
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>servers Widget Unit Test</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<table><tbody id="servers-test"> </tbody></table>
|
||||
</div>
|
||||
|
||||
<button class="b">Click Me </button>
|
||||
</div>
|
||||
|
||||
<script type='text/javascript' src='../../../steal/steal.js'></script>
|
||||
<script type='text/javascript'>
|
||||
steal('jquery/dom/route', 'ods/fixtures', 'ods/ui/switch_entry').then(function($) {
|
||||
|
||||
var odsState = {
|
||||
credential: "snmp",
|
||||
networking: null,
|
||||
servers: [],
|
||||
servers_config: null,
|
||||
cluster_id: null,
|
||||
security: null,
|
||||
partition: null,
|
||||
feature: null,
|
||||
machines: [],
|
||||
switches: [],
|
||||
snmp: 1
|
||||
};
|
||||
var state = new $.Observe(odsState);
|
||||
|
||||
|
||||
|
||||
/* $("button.b").click(function() { console.log("clicked ....."); state.attr("credential", "ssh");}); */
|
||||
|
||||
$("button.b").click(function() {
|
||||
$('#servers-test').ods_ui_switch_entry("findServers");
|
||||
});
|
||||
$('#servers-test').ods_ui_switch_entry({
|
||||
"odsState": state
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
51
public/ods/ui/switch_entry/switch_entry.css
Normal file
51
public/ods/ui/switch_entry/switch_entry.css
Normal file
@ -0,0 +1,51 @@
|
||||
.switch-status {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.switch-refresh {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.switch-refresh img {
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img.err:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("../../../img/add_button_16px.png");
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("../../../img/remove_button_16px.png");
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.switch_row input {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.server-result {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.server-g-num {
|
||||
padding: 1px 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
327
public/ods/ui/switch_entry/switch_entry.js
Normal file
327
public/ods/ui/switch_entry/switch_entry.js
Normal file
@ -0,0 +1,327 @@
|
||||
steal(
|
||||
'jquery/controller',
|
||||
'jquery/view/ejs',
|
||||
'jquery/controller/view',
|
||||
'jquery/lang/json'
|
||||
).then(
|
||||
'./switch_entry.css',
|
||||
'./views/init.ejs',
|
||||
'./views/switch_row.ejs',
|
||||
'ods/models/servers.js',
|
||||
'ods/models/cluster.js',
|
||||
'lib/jquery-ui-1.10.3.custom.js'
|
||||
).then(function($) {
|
||||
$.Controller('Ods.Ui.SwitchEntry', {}, {
|
||||
init: function() {
|
||||
this.element.html(this.view('init', {
|
||||
"first": this.options.first
|
||||
}));
|
||||
this.switchId = 0;
|
||||
this.switchStatus = {
|
||||
"status": 0,
|
||||
"message": ""
|
||||
};
|
||||
this.queryCount = 0;
|
||||
this.displaySnmp(this.options.odsState.snmp);
|
||||
var switchData = this.options.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);
|
||||
} else {
|
||||
this.find(".switchIp").val(switchData.ip);
|
||||
this.find(".username").val(switchData.credential.username);
|
||||
this.find(".password").val(switchData.credential.password);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
findServers: function() {
|
||||
this.setSwitchStatus(1, "waiting");
|
||||
var switchData = this.getSwitchData();
|
||||
Ods.Switch.create(switchData, this.proxy('onSwitchCreated'), this.proxy('onSwitchCreateErr'));
|
||||
},
|
||||
|
||||
getSwitchData: function() {
|
||||
var snmp_version = null,
|
||||
community = null;
|
||||
var username = null,
|
||||
password = null;
|
||||
var switchData = {};
|
||||
|
||||
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");
|
||||
switchData = {
|
||||
"switch": {
|
||||
"ip": ip,
|
||||
"credential": {
|
||||
'version': snmp_version.val(),
|
||||
'community': community.val()
|
||||
}
|
||||
}
|
||||
};
|
||||
} else {
|
||||
username = this.find(".username");
|
||||
password = this.find(".password");
|
||||
switchData = {
|
||||
"switch": {
|
||||
"ip": ip,
|
||||
"credential": {
|
||||
"username": username.val(),
|
||||
"password": password.val()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return switchData;
|
||||
},
|
||||
|
||||
'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;
|
||||
this.options.serverControl.removeServersBySwitch(switchIp);
|
||||
}
|
||||
|
||||
this.setSwitchStatus(1, "waiting");
|
||||
this.queryCount = 0;
|
||||
this.checkSwitchState();
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch create success callback
|
||||
/************************************/
|
||||
onSwitchCreated: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onSwitchCreated data *** ", data);
|
||||
steal.dev.log(" *** onSwitchCreated textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onSwitchCreated xhr *** ", xhr);
|
||||
|
||||
|
||||
if (xhr.status == 202) { // accepted
|
||||
this.switchId = data.switch.id;
|
||||
this.checkSwitchState();
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch create error callback
|
||||
/************************************/
|
||||
onSwitchCreateErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onSwitchCreatErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onSwitchCreatErr status *** ", status);
|
||||
steal.dev.log(" *** onSwitchCreatErr statusText *** ", xhr);
|
||||
|
||||
if (xhr.status == 409) { // duplicate
|
||||
var failedSwitchId = 0;
|
||||
if ($.fixture.on == true) {
|
||||
failedSwitchId = statusText.failedSwitch;
|
||||
} else {
|
||||
failedSwitchId = JSON.parse(xhr.responseText).failedSwitch;
|
||||
}
|
||||
steal.dev.log(" *** failed Switch Id *** ", failedSwitchId);
|
||||
// PUT switches
|
||||
var switchData = this.getSwitchData();
|
||||
Ods.Switch.update(failedSwitchId, switchData,
|
||||
this.proxy('onSwitchUpdated'),
|
||||
this.proxy('onSwitchUpdateErr'));
|
||||
} else {
|
||||
this.setSwitchStatus(3, "POST switch API error");
|
||||
//TODO
|
||||
/*
|
||||
if (xhr.status == 400) { //bad request
|
||||
$(".switchesErr").html("Switch post error code: 400");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 500) { // internal server error
|
||||
$(".switchesErr").html("Switch post error code: 500");
|
||||
$(".switchesErr").show();
|
||||
}
|
||||
*/
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch update success callback
|
||||
/************************************/
|
||||
onSwitchUpdated: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onSwitchUpdated data *** ", data);
|
||||
steal.dev.log(" *** onSwitchUpdated textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onSwitchUpdated xhr *** ", xhr);
|
||||
|
||||
if (xhr.status == 202 || xhr.status == 200) { // accepted or OK
|
||||
this.switchId = data.switch.id;
|
||||
this.checkSwitchState();
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// switch create error callback
|
||||
/************************************/
|
||||
onSwitchUpdateErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onSwitchUpdateErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onSwitchUpdateErr status *** ", status);
|
||||
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();
|
||||
} else if (xhr.status == 400) { // bad request
|
||||
$(".switchesErr").html("Switch update error code: 400");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 500) { // internal server error
|
||||
$(".switchesErr").html("Switch update error code: 500");
|
||||
$(".switchesErr").show();
|
||||
}
|
||||
},
|
||||
|
||||
checkSwitchState: function() {
|
||||
this.queryCount++;
|
||||
if (this.queryCount > 5) {
|
||||
this.setSwitchStatus(3, "Timed out in connecting to switch");
|
||||
return;
|
||||
}
|
||||
Ods.Switch.findOne(this.switchId, this.proxy('onFindOneSwitch'), this.proxy('onFindOneSwitchErr'));
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// find one switch success callback
|
||||
/************************************/
|
||||
onFindOneSwitch: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onFindOneSwitch data *** ", data);
|
||||
steal.dev.log(" *** onFindOneSwitch textStatus *** ", textStatus);
|
||||
steal.dev.log(" *** onFindOneSwitch xhr *** ", xhr);
|
||||
|
||||
if (xhr.status == 200) { //OK
|
||||
if (data.switch.state === "under_monitoring") {
|
||||
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") {
|
||||
setTimeout(this.proxy('checkSwitchState'), 2000);
|
||||
} else if (data.switch.state === "notsupported") {
|
||||
this.setSwitchStatus(3, data.switch.err_msg);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// find one switch error callback
|
||||
/************************************/
|
||||
onFindOneSwitchErr: function(xhr, status, statusText) {
|
||||
steal.dev.log(" *** onFindOneSwitchErr xhr *** ", xhr);
|
||||
steal.dev.log(" *** onFindOneSwitchErr status *** ", status);
|
||||
steal.dev.log(" *** onFindOneSwitchErr statusText *** ", statusText);
|
||||
|
||||
this.setSwitchStatus(3, "GET switch API error");
|
||||
|
||||
/*
|
||||
if (xhr.status == 404) { // not found
|
||||
$(".switchesErr").html("Find switch error code: 404");
|
||||
$(".switchesErr").show();
|
||||
} else if (xhr.status == 500) {
|
||||
$(".switchesErr").html("Find switch error code: 500");
|
||||
$(".switchesErr").show();
|
||||
}*/
|
||||
},
|
||||
|
||||
getServersBySwitch: function(id) {
|
||||
Ods.Server.findAll({
|
||||
switchId: id
|
||||
}, this.proxy('onFindAllServers'));
|
||||
},
|
||||
|
||||
/************************************/
|
||||
// find machines success callback
|
||||
/************************************/
|
||||
onFindAllServers: function(data, textStatus, xhr) {
|
||||
steal.dev.log(" *** onFindAllServers data *** ", data);
|
||||
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);
|
||||
},
|
||||
|
||||
"{odsState} snmp change": function(Observe, ev, attr, action, newVal, oldVal) {
|
||||
console.log(Observe, ev, attr, action, newVal, oldVal);
|
||||
|
||||
if (attr == "snmp" && action == "set") {
|
||||
this.displaySnmp(newVal);
|
||||
}
|
||||
},
|
||||
|
||||
displaySnmp: function(snmp) {
|
||||
if (snmp) {
|
||||
$(".username").hide();
|
||||
$(".password").hide();
|
||||
$(".snmp").show();
|
||||
$(".community").show();
|
||||
} else {
|
||||
$(".snmp").hide();
|
||||
$(".community").hide();
|
||||
$(".username").show();
|
||||
$(".password").show();
|
||||
}
|
||||
},
|
||||
|
||||
getSwitchStatus: function() {
|
||||
return this.switchStatus;
|
||||
},
|
||||
|
||||
setSwitchStatus: function(status, message) {
|
||||
this.switchStatus.status = status;
|
||||
this.switchStatus.message = message;
|
||||
this.displaySwitchStatus(this.switchStatus);
|
||||
|
||||
},
|
||||
|
||||
displaySwitchStatus: function(swStatus) {
|
||||
switch(swStatus.status) {
|
||||
case 0: //none
|
||||
this.find(".waiting").hide();
|
||||
this.find(".ok").hide();
|
||||
this.find(".err").hide();
|
||||
this.find(".refresh").hide();
|
||||
break;
|
||||
case 1: //waiting
|
||||
this.find(".waiting").show();
|
||||
this.find(".ok").hide();
|
||||
this.find(".err").hide();
|
||||
this.find(".refresh").hide();
|
||||
break;
|
||||
case 2: //ok
|
||||
this.find(".ok").show();
|
||||
this.find(".waiting").hide();
|
||||
this.find(".err").hide();
|
||||
this.find(".refresh").show();
|
||||
break;
|
||||
case 3: //error
|
||||
this.find(".err").show();
|
||||
this.find(".ok").hide();
|
||||
this.find(".waiting").hide();
|
||||
this.find(".refresh").show();
|
||||
this.find(".err").attr("title", swStatus.message);
|
||||
this.find(".err").tooltip();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
// remove switch row in switch table
|
||||
'div.remove click': function(el, ev) {
|
||||
var row = el.closest('tr');
|
||||
row.remove();
|
||||
},
|
||||
|
||||
});
|
||||
});
|
||||
27
public/ods/ui/switch_entry/views/init.ejs
Normal file
27
public/ods/ui/switch_entry/views/init.ejs
Normal file
@ -0,0 +1,27 @@
|
||||
<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>
|
||||
</select>
|
||||
<input type="input" class="username non-empty-value rounded" placeholder="Username" style="display:none">
|
||||
</td>
|
||||
<td>
|
||||
<input type="password" class="community non-empty-value rounded" placeholder="Community">
|
||||
<input type="password" class="password non-empty-value rounded" placeholder="Password" style="display:none">
|
||||
</td>
|
||||
<td>
|
||||
<div class='add'></div>
|
||||
<% if (!first) { %> <div class='remove'></div> <% } %>
|
||||
|
||||
<span class="status"></span>
|
||||
<div class="switch-refresh float_right">
|
||||
<img class="refresh" src="../img/blue_refresh_16px.png" style="display:none;">
|
||||
</div>
|
||||
<div class="switch-status float_right">
|
||||
<img class="waiting" src="../img/waiting_16px.gif" style="display:none;">
|
||||
<img class="ok" src="../img/green_check_16px.png" style="display:none;">
|
||||
<img class="err" src="../img/red_cross_16px.png" style="display:none;">
|
||||
</div>
|
||||
</td>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<tr class="switch_row">
|
||||
<tr class="switch_row" <% this %>>
|
||||
<td><input type="input" class="switchIp non-empty-value rounded" placeholder="Switch IP"> </td>
|
||||
<td>
|
||||
<select class="snmp">
|
||||
Loading…
Reference in New Issue
Block a user