x/compass-web
Code Issues Proposed changes

add progress status page for the current pending cluster

Browse Source 
Change-Id: Ieb029ae39f7cafa5e02635e224a023b8c9f39ac9
This commit is contained in:
jiahuay 2014-02-06 14:46:40 -08:00
parent 4c56c7aa59
commit 56fe97ac8a
9 changed files with 243 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -239,6 +239,35 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
return returnData;
});
$.fixture('GET /api/clusters?state={state}', function(original, settings, headers) {
var returnData = {
"status": "OK",
"clusters": [{
"id": 1,
"clusterName": "cluster_01",
"link": {
"href": "/clusters/1",
"rel": "self"
}
}, {
"id": 2,
"clusterName": "cluster_02",
"link": {
"href": "/clusters/2",
"rel": "self"
}
}, {
"id": 3,
"clusterName": "cluster_03",
"link": {
"href": "/clusters/3",
"rel": "self"
}
}]
};
return returnData;
});
$.fixture('POST /api/clusters/{id}/action', function(original, settings, headers) {
var hostIds = JSON.parse(original.data).addHosts;
@ -391,6 +420,41 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
return res;
});
$.fixture('GET /api/clusterhosts?clustername={clustername}', function(original, settings, headers) {
var returnData = {
"status": "OK",
"cluster_hosts": [{
"hostname": "host_01",
"id": 100,
"switch_ip": "172.29.8.40",
"mutable": true,
"link": {
"href": "/clusterhosts/1",
"rel": "self"
}
}, {
"hostname": "host_02",
"id": 200,
"switch_ip": "172.29.8.40",
"mutable": true,
"link": {
"href": "/clusterhosts/2",
"rel": "self"
}
}, {
"hostname": "host_03",
"id": 300,
"switch_ip": "172.29.8.41",
"mutable": true,
"link": {
"href": "/clusterhosts/3",
"rel": "self"
}
}]
};
return returnData;
});
$.fixture('GET /api/clusters/{id}/progress', function(original, settings, headers) {
var returnData = {
"status": "OK",

22
public/ods/models/cluster.js
View File

@ -30,7 +30,18 @@ steal("jquery/model", "jquery/lang/json",
url: '/api/clusters/' + id + '/' + resource,
type: 'put',
dataType: 'json',
data: $.toJSON(params),
data: params,
contentType: "application/json",
success: success,
error: error
});
},
get: function(state, success, error) {
$.ajax({
url: '/api/clusters?state=' + state,
type: 'get',
dataType: 'json',
contentType: "application/json",
success: success,
error: error
@ -68,6 +79,15 @@ steal("jquery/model", "jquery/lang/json",
success: success,
error: error
});
},
get: function(clustername, success, error) {
$.ajax({
url: '/api/clusterhosts?clustername=' + clustername,
type: 'GET',
success: success,
error: error
});
}
}, {});

20
public/ods/ods.js
View File

@ -26,9 +26,6 @@ steal(
$('#nav').ods_ui_nav({"mainBox" : mainBox, "odsState" : state});
mainBox.ods_ui_welcome({ nav: $('#nav').controller(), "mainBox" : mainBox, "odsState" : state });
if (!window.location.host) {
$.fixture.on = true;
state.switches = config.switches;
@ -55,9 +52,22 @@ steal(
state.security = config.security;
state.networking = config.networking;
} else if (result.config == "demo") {
state.switches = config_demo.switches;
state.switches = config_demo.switches;
state.security = config_demo.security;
state.networking = config_demo.networking;
}
}
}
if (window.location.hash == "#progress") {
mainBox.ods_ui_install_review({
nav: $('#nav').controller(),
"mainBox": mainBox,
"odsState": state,
"installStep": "progress"
});
} else {
mainBox.ods_ui_welcome({ nav: $('#nav').controller(), "mainBox" : mainBox, "odsState" : state });
}
})

4
public/ods/ui/install_review/install_review.css
View File

@ -62,3 +62,7 @@ table.display thead th {
background: #C3C7DD;
}
table.cluster {
text-align: center;
}

84
public/ods/ui/install_review/install_review.js
View File

@ -17,16 +17,22 @@ steal(
function($) {
$.Controller('Ods.Ui.install_review', {}, {
init: function() {
this.element.html(this.view('init'));
this.totalProgress = 0;
if(this.options.installStep == "progress") {
this.element.html(this.view('pending_clusters'));
Ods.Cluster.get("installing",
this.proxy('onGetInstallingCluster'),
this.proxy('onGetInstallingClusterErr'));
this.initServerTable();
} else {
this.element.html(this.view('init'));
this.onSecurityData(this.options.odsState.security);
this.onNetworkingData(this.options.odsState.networking);
this.onLogicPartitionData(this.options.odsState.partition);
this.initServerTable();
this.onSecurityData(this.options.odsState.security);
this.onNetworkingData(this.options.odsState.networking);
this.onLogicPartitionData(this.options.odsState.partition);
}
},
'.review-back click': function(el, ev) {
@ -137,7 +143,7 @@ steal(
}
},
'a.btn_continue click': function(el, ev) {
'#begin-deploy click': function(el, ev) {
ev.preventDefault();
$("#continuing").css("opacity", 1);
@ -167,6 +173,70 @@ steal(
steal.dev.log(" *** onTriggerDeployErr statusText *** ", statusText);
},
'#retrieve-progress click': function(el, ev) {
var selectedCluster = $("input[name='clusterRadio']:checked");
if (!selectedCluster.val()) {
alert("Please select a cluster");
} else {
this.options.odsState.cluster_id = selectedCluster.data('hostid');
this.element.html(this.view('install'));
$("#install_tabs").tabs();
//get clusterhosts by clustername
Ods.ClusterHost.get(selectedCluster.val(),
this.proxy('onGetClusterHosts'),
this.proxy('onGetClusterHostsErr'));
}
},
onGetInstallingCluster: function(data, textStatus, xhr) {
steal.dev.log(" *** onGetInstallingCluster data *** ", data);
steal.dev.log(" *** onGetInstallingCluster textStatus *** ", textStatus);
steal.dev.log(" *** onGetInstallingCluster xhr *** ", xhr);
if (xhr.status == 200) {
for (index in data.clusters) {
$("table.cluster tbody").append(this.view('cluster_row', data.clusters[index]));
}
}
},
onGetInstallingClusterErr: function(xhr, status, statusText) {
steal.dev.log(" *** onGetInstallingClusterErr xhr *** ", xhr);
steal.dev.log(" *** onGetInstallingClusterErr status *** ", status);
steal.dev.log(" *** onGetInstallingClusterErr statusText *** ", statusText);
},
onGetClusterHosts: function(data, textStatus, xhr) {
steal.dev.log(" *** onGetClusterHosts data *** ", data);
steal.dev.log(" *** onGetClusterHosts textStatus *** ", textStatus);
steal.dev.log(" *** onGetClusterHosts xhr *** ", xhr);
if (xhr.status == 200) {
var serverConfig = [];
for (index in data.cluster_hosts) {
var server = {
"hostname": data.cluster_hosts[index].hostname,
"clusterhost_id": data.cluster_hosts[index].id,
"switch_ip": data.cluster_hosts[index].switch_ip
};
var switchIp = server.switch_ip;
if (serverConfig[switchIp] == undefined) {
serverConfig[switchIp] = [server];
} else {
serverConfig[switchIp].push(server);
}
}
this.options.odsState.servers_config = serverConfig;
this.initProgressbars();
}
},
onGetClusterHostsErr: function(xhr, status, statusText) {
steal.dev.log(" *** onGetClusterHostsErr xhr *** ", xhr);
steal.dev.log(" *** onGetClusterHostsErr status *** ", status);
steal.dev.log(" *** onGetClusterHostsErr statusText *** ", statusText);
},
initProgressbars: function() {
this.initTotalProgressbar();

5
public/ods/ui/install_review/views/cluster_row.ejs Normal file
View File

@ -0,0 +1,5 @@
<tr>
<td><input type="radio" name="clusterRadio" value="<%= clusterName%>" data-hostid="<%= id %>" ></td>
<td><%= id %></td>
<td style="width: 70%;"><%= clusterName%></td>
</tr>

2
public/ods/ui/install_review/views/init.ejs
View File

@ -87,6 +87,6 @@
<div class="clear"></div>
<div class="continue"><center>
<a href="#" class="go-back review-back" >Go back</a>
<a href="/web/install/" class="btn_continue">Deploy</a>
<a href="/web/install/" id="begin-deploy" class="btn_continue">Deploy</a>
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img>
</center></div>

23
public/ods/ui/install_review/views/pending_clusters.ejs Normal file
View File

@ -0,0 +1,23 @@
<h2>Pending Clusters</h2>
<p style="margin: 0; padding-left: 20px;">Click continue to see OpenStack deployment progress of the selected cluster.</p>
<div class="rounded" style="padding-top: 10px; padding-bottom: 5px; margin-left: 20px; margin-top: 10px;">
<table class="cluster">
<thead>
<tr>
<th></th>
<th>Cluster Id</th>
<th>Cluster Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="clear"></div>
<div class="continue"><center>
<a href="/web/install/" id="retrieve-progress" class="btn_continue">Continue</a>
<img id="continuing" class="loading" src="../img/ajax_loader.gif" height="30px" width="30px"></img>
</center></div>

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

@ -21,6 +21,7 @@ steal(
this.queryCount = 0;
this.displayNodes = [];
this.dataTableIpAddrSort();
this.initServerTable();
this.checked_num = 0;
@ -81,6 +82,36 @@ steal(
},
dataTableIpAddrSort: function() {
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"ip-address-pre": function(a) {
var m = a.split("."),
x = "";
for (var i = 0; i < m.length; i++) {
var item = m[i];
if (item.length == 1) {
x += "00" + item;
} else if (item.length == 2) {
x += "0" + item;
} else {
x += item;
}
}
return x;
},
"ip-address-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"ip-address-desc": function(a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
},
initServerTable: function() {
var currNode = [];
var self = this;
@ -96,7 +127,8 @@ steal(
}, {
"mData": "mac"
}, {
"mData": "switch_ip"
"mData": "switch_ip",
"sType": "ip-address"
}, {
"mData": "vlan"
}, {