x/compass-web
Code Issues Proposed changes

Update UI to work with updated UI. Add demo config data.

Browse Source
This commit is contained in:
Weidong Shao 2014-01-10 23:38:39 +00:00
parent eb25fb3707
commit 87dac15628
12 changed files with 209 additions and 9064 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/github.css
View File

File diff suppressed because one or more lines are too long

1
public/css/github2.css
View File

File diff suppressed because one or more lines are too long

1
public/css/style.css
View File

@ -89,6 +89,7 @@ p {
a {
text-decoration: none;
color: blue;
cursor: pointer;
}
h3 {

8981
public/lib/d3.js vendored
View File

File diff suppressed because it is too large Load Diff

81
public/ods/config.js
View File

@ -48,7 +48,7 @@ config = {
"ip_end": "192.168.100.200",
"netmask": "255.255.255.0",
"gateway": "192.168.100.1",
"nic": "eth1",
"nic": "eth0",
"promisc": 0
},
"public": {
@ -56,25 +56,94 @@ config = {
"ip_end": "172.29.3.200",
"netmask": "255.255.255.0",
"gateway": "172.29.3.1",
"nic": "eth2",
"promisc": 0
"nic": "eth1",
"promisc": 1
},
"storage": {
"ip_start": "172.16.128.10",
"ip_end": "172.16.128.200",
"netmask": "255.255.255.0",
"gateway": "172.16.128.1",
"nic": "eth3",
"nic": "eth0",
"promisc": 0
}
},
"global": {
"nameservers": "4.4.4.4,8.8.8.8",
"search_path": "ods.com,ods2.com",
"search_path": "ods.com",
"gateway": "172.19.100.1",
"proxy": "",
"ntp_server": ""
}
}
}
};
config_demo = {
"switches": [
{
"switch": {
"ip": "127.0.0.1",
"credential": {
"version": "v2c",
"community": "public"
}
}
} ],
"security": {
"server_credentials": {
"username": "root",
"password": "huawei123"
},
"service_credentials": {
"username": "service",
"password": "huawei123"
},
"console_credentials": {
"username": "console",
"password": "huawei123"
}
},
"networking": {
"interfaces": {
"management": {
"ip_start": "33.33.33.100",
"ip_end": "33.33.33.255",
"netmask": "255.255.255.0",
"gateway": "33.33.33.10",
"nic": "eth0",
"promisc": 0
},
"tenant": {
"ip_start": "192.168.100.100",
"ip_end": "192.168.100.200",
"netmask": "255.255.255.0",
"gateway": "192.168.100.1",
"nic": "eth0",
"promisc": 0
},
"public": {
"ip_start": "172.29.3.100",
"ip_end": "172.29.3.200",
"netmask": "255.255.255.0",
"gateway": "172.29.3.1",
"nic": "eth1",
"promisc": 1
},
"storage": {
"ip_start": "172.16.128.10",
"ip_end": "172.16.128.200",
"netmask": "255.255.255.0",
"gateway": "172.16.128.1",
"nic": "eth0",
"promisc": 0
}
},
"global": {
"nameservers": "33.33.33.10",
"search_path": "ods.com",
"gateway": "33.33.33.10",
"proxy": "http://33.33.33.10:3128",
"ntp_server": "33.33.33.10"
}
}
};

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

@ -375,8 +375,8 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
var res = {
"status": "OK",
"type": "clusterlinks",
"clusterlinks": {
"type": "dashboardlinks",
"dashboardlinks": {
"os-single-controller": "http://10.145.88.232"
}
};

7
public/ods/ods.js
View File

@ -54,7 +54,10 @@ steal(
state.switches = config.switches;
state.security = config.security;
state.networking = config.networking;
}
} else if (result.config == "demo") {
state.switches = config_demo.switches;
state.security = config_demo.security;
state.networking = config_demo.networking;
}
}
})

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

@ -7,7 +7,7 @@ steal(
'./install_review.css',
'./views/install.ejs',
'./views/progress_row.ejs',
'ods/models/cluster.js',
'ods/models/cluster.js',
'lib/jquery-ui-1.10.3.custom.css',
'lib/jquery.dataTables.js'
).then(
@ -20,8 +20,6 @@ steal(
this.element.html(this.view('init'));
this.totalProgress = 0;
this.progressbarPendingCount = 0;
this.serverCount = 0;
this.initServerTable();
@ -131,14 +129,18 @@ steal(
$("#continuing").css("opacity", 1);
var cluster_id = this.options.odsState.cluster_id;
Ods.Cluster.action(cluster_id, {
"deploy": ""
}, this.proxy('onTriggerDeploy'), this.proxy('onTriggerDeployErr'));
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
@ -153,7 +155,8 @@ 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() {
@ -183,7 +186,8 @@ 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);
}
@ -198,8 +202,10 @@ 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) {
@ -208,7 +214,8 @@ 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({
@ -216,19 +223,35 @@ steal(
});
},
getProgressData: function() {
if (this.progressbarPendingCount == 0) {
this.serverCount = 0;
}
'.refresh-progressbar click': function(el, ev) {
this.getProgressData();
},
getHostList: function() {
this.pendingHostList = [];
var serverData = this.options.odsState.servers_config;
for (var key in serverData) {
var servers = serverData[key];
for (var i = 0; i < servers.length; i++) {
Ods.ClusterHost.progress(servers[i].clusterhost_id, this.proxy('updateProgressBar'), this.proxy('updateProgressBarErr'));
this.serverCount++;
this.pendingHostList.push(servers[i].clusterhost_id);
}
}
this.progressbarPendingCount = this.serverCount;
},
getProgressData: function() {
this.getHostList();
var hosts = this.pendingHostList;
this.pendingHostCount = hosts.length;
var count = hosts.length;
this.pendingHostList = [];
for (var i = 0; i < count; i++) {
Ods.ClusterHost.progress(
hosts[i],
this.proxy('updateProgressBar'),
this.proxy('updateProgressBarErr'));
}
},
@ -240,22 +263,13 @@ steal(
steal.dev.log(" *** onUpdateProgressBar textStatus *** ", textStatus);
steal.dev.log(" *** onUpdateProgressBar xhr *** ", xhr);
this.pendingHostCount --;
var progressData = data.progress;
this.progressbarPendingCount--;
// update progress data in serverTreeJson
for (var sw in this.serverTreeJson.children) {
var servers = this.serverTreeJson.children[sw]._children;
if (servers == null) {
servers = this.serverTreeJson.children[sw].children;
}
for (var i = 0; i < servers.length; i++) {
if (servers[i].hostid == progressData.id) {
servers[i].progress = progressData.percentage;
servers[i].message = progressData.message;
}
}
if(progressData.percentage < 1) {
this.pendingHostList.push(progressData.id);
}
// update graph-based progress bar
@ -275,18 +289,38 @@ 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
},
updateGraphBar: function(progressData) {
// update progress data in serverTreeJson
for (var sw in this.serverTreeJson.children) {
var servers = this.serverTreeJson.children[sw]._children;
if (servers == null) {
servers = this.serverTreeJson.children[sw].children;
}
for (var i = 0; i < servers.length; i++) {
if (servers[i].hostid == progressData.id) {
servers[i].progress = progressData.percentage;
servers[i].message = progressData.message;
}
}
}
// 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);
$('text[data-hostid="' + progressData.id + '"]').text(progressData.message);
$('rect[data-hostid="' + progressData.id + '"]')
.attr("width", imgWidth * progressData.percentage);
$('text[data-hostid="' + progressData.id + '"]')
.text(progressData.message);
}
},
@ -326,14 +360,17 @@ steal(
"background": "#5BB75B"
});
} else {
pbar.progressbar("value", progressData.percentage * 100)
pbar.progressbar(
"value", progressData.percentage * 100)
}
}
},
updateTotalBar: function(data) {
if (this.progressbarPendingCount == 0) {
Ods.Cluster.progress(this.options.odsState.cluster_id, this.proxy('onTotalProgressData'), this.proxy('onTotalProgressDataErr'));
if(this.pendingHostCount == 0) {
Ods.Cluster.progress(this.options.odsState.cluster_id,
this.proxy('onTotalProgressData'),
this.proxy('onTotalProgressDataErr'));
}
},
@ -342,7 +379,8 @@ 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;
@ -355,11 +393,13 @@ steal(
"width": total * this.totalProgressbar.width()
});
if (total < 1) {
if (total < 1 || this.pendingHostList.length > 0) {
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'));
}
},
@ -368,18 +408,23 @@ 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");
}
@ -387,10 +432,11 @@ steal(
'.ui-tabs-nav click': function(el, ev) {
if ($("#tabs-2").is(":visible")) {
for (var sw in this.serverTreeJson.children) {
var servers = this.serverTreeJson.children[sw]._children;
var children = this.serverTreeJson.children;
for (var sw in children) {
var servers = children[sw]._children;
if (servers == null) {
servers = this.serverTreeJson.children[sw].children;
servers = children[sw].children;
}
for (var i = 0; i < servers.length; i++) {
var data = {
@ -440,7 +486,8 @@ 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;

9
public/ods/ui/install_review/views/install.ejs
View File

@ -1,4 +1,9 @@
<h2>Deploying OpenStack</h2>
<h2>
Deploying OpenStack
<span style="float:right;">
<a class="refresh-progressbar"><img src="../img/refresh.png"></img></a>
</span>
</h2>
<p style="padding-left: 30px; color: black;">Compass is deploying OpenStack onto the servers, and configuring them for use with the following features: <span style="color: #990000; margin-top: -5px; font-weight: bold;">Core virtualization, <span style="opacity:0.3">Live Migration, High Availability</span></span> </p>
@ -16,7 +21,7 @@
<div id="total_bar" style="width:0%; height: 100%; background: #0000ff; opacity: 0.5;"></div>-->
</div>
</td>
<td style="font-size: 13px; font-weight: bold;">&nbsp;&nbsp;Errors: 0</td>
<td style="font-size: 13px; font-weight: bold; padding-left: 3px;"></td>
</tr>
</tbody>
</table>

18
public/ods/ui/networking/views/init.ejs
View File

@ -31,7 +31,7 @@
</tr>
<tr>
<td>Promisc Mode</td>
<td><input id="mgt_promisc" type="checkbox"></td>
<td><input id="mgt_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
</tr>
</table>
</div>
@ -65,7 +65,7 @@
</tr>
<tr>
<td>Promisc Mode</td>
<td><input id="vnw_promisc" type="checkbox"></td>
<td><input id="vnw_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
</tr>
</table>
</div>
@ -105,7 +105,7 @@
</tr>
<tr>
<td>Promisc Mode</td>
<td><input id="float_promisc" type="checkbox"></td>
<td><input id="float_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </td>
</tr>
</table>
</div>
@ -141,7 +141,7 @@
</tr>
<tr>
<td>Promisc Mode</td>
<td><input id="storage_promisc" type="checkbox"></td>
<td><input id="storage_promisc" type="checkbox"> The interface running in promisc mode will receive all packages in network. </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. "4.4.4.4,8.8.8.8"</td>
<td><input id="global_nameservers" type="input" class="rounded non-empty-value" value="">e.g. "[compass server ip]"</td>
</tr>
<tr>
<td>Search Path</td>
<td><input id="global_searchpath" type="input" class="rounded non-empty-value" value="">e.g. "ods.com,ods2.com"</td>
<td><input id="global_searchpath" type="input" class="rounded non-empty-value" value="">e.g. "ods.com"</td>
</tr>
<tr>
<td>Gateway</td>
<td><input id="global_gateway" type="input" class="rounded non-empty-value" value=""></td>
<td><input id="global_gateway" type="input" class="rounded non-empty-value" value="">e.g. "[compass server gateway ip]"</td>
</tr>
<tr>
<td>Proxy (optional)</td>
<td><input id="global_proxy" type="input" class="rounded" value=""></td>
<td><input id="global_proxy" type="input" class="rounded" value="">e.g. "http://[compass server ip]:3128"</td>
</tr>
<tr>
<td>NTP Server (optional)</td>
<td><input id="global_ntpserver" type="input" class="rounded" value=""></td>
<td><input id="global_ntpserver" type="input" class="rounded" value="">e.g. "[compass server ip]"</td>
</tr>
</table>
</div>

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

@ -57,7 +57,7 @@ steal(
if (this.options.odsState.snmp) {
$('#useSNMP').prop('checked', true);
} else {
$('#useSNMP').prop('checked', false);
$('#useSSH').prop('checked', true);
}
for (var i = 0; i < oldSwitchesData.length; i++) {
@ -115,6 +115,9 @@ steal(
"aoColumnDefs": [{
bSortable: false,
aTargets: [0, 1, 3]
}, {
bSearchable: false,
aTargets: [ 0 ]
}],
"aaSorting": [
[2, "asc"],
@ -127,8 +130,8 @@ steal(
$('.dataTables_filter input').addClass('rounded');
},
'#useSNMP click': function(el, ev) {
if ($("#useSNMP:checked").val()) {
'input[name="snmp"] click': function(el, ev) {
if (el.val() == "snmp") {
$("#snmpTitle").html("SNMP Version");
$("#communityTitle").html("Community");
$(".snmp").show();
@ -479,16 +482,13 @@ steal(
this.pendingCount--;
if (xhr.status == 200) { //OK
if (data.
switch.state === "under_monitoring") {
if (data.switch.state === "under_monitoring") {
this.element.find('div.right-side').show();
this.dataTable.fnClearTable();
this.getServersBySwitch(data.
switch.id);
this.getServersBySwitch(data.switch.id);
} else {
this.pendingSwitchList.push(data.
switch.id);
this.pendingSwitchList.push(data.switch.id);
}
}

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

@ -12,7 +12,10 @@
<th>Switch IP</th>
<th id="snmpTitle">SNMP Version</th>
<th id="communityTitle">Community</th>
<th><input id="useSNMP" type="checkbox" checked> Use SNMP</th>
<th><!--<input id="useSNMP" type="checkbox" checked> Use SNMP-->
<input type="radio" id="useSNMP" name="snmp" value="snmp" checked> Use SNMP <br>
<input type="radio" id="useSSH" name="snmp" value="ssh"> Use SSH
</th>
</tr>
</thead>
<tbody>