x/compass-web
Code Issues Proposed changes

Update UI code per API changes

Browse Source
This commit is contained in:
Weidong Shao 2014-01-02 23:00:39 +00:00
parent 71fd42f788
commit 42bc19736d
13 changed files with 172 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -211,7 +211,7 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
steal.dev.log("fixture cluster action hostIds : ", hostIds);
var returnData = {
"status": "OK",
"clusterHosts": []
"cluster_hosts": []
};
for(var i = 0; i<hostIds.length; i++) {
@ -220,7 +220,7 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
"id": hostIds[i]*10
}
returnData.clusterHosts.push(tmp);
returnData.cluster_hosts.push(tmp);
}
return returnData;
}
@ -273,24 +273,29 @@ steal("jquery/dom/fixture", "jquery/lang/json", function(){
return returnData;
});
/*
// used on Install Review Page
$.fixture('GET /api/logicpartition', function() {
return self.partition_data;
$.fixture('GET /api/adapters/{id}/roles', function(data) {
var returnData = {
"status": "OK",
"roles": [{
"name": "role1",
"description": "desc1"
}, {
"name": "role2",
"description": "desc2"
}, {
"name": "role3",
"description": "desc3"
}, {
"name": "role4",
"description": "desc4"
}, {
"name": "role5",
"description": "desc5"
}]
};
return returnData;
});
// used on Install Review Page
$.fixture('GET /api/security', function() {
return self.security_data;
});
// used on Install Review Page
$.fixture('GET /api/networking', function(data) {
//console.log(data);
return self.networking_data;
});
*/
$.fixture('POST /api/triggerinstall/', function(data) {
console.log(data);
var returnData = {

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

@ -85,4 +85,15 @@ steal("jquery/model", "jquery/lang/json",
}
}, {});
$.Model('Ods.Adapter', {
getRoles: function(id, success, error) {
$.ajax({
url: '/api/adapters/' + id + '/roles',
type: 'get',
success: success,
error: error
});
}
}, {});
});

3
public/ods/ods.js
View File

@ -18,7 +18,8 @@ steal(
feature: null,
machines: [],
switches: [],
snmp: 1
snmp: 1,
adapter_id: null
};
var state = new $.Observe(odsState);

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

@ -1,7 +1,18 @@
.tab_panel{
.tab_panel {
display: none;
}
.tab_panel_active {
display: block;
}
.roles {
width: 150px;
}
.ms-choice {
border: 1px solid #C0C0C0;
border-radius: 6px;
box-shadow: 0 0 5px 0 rgba(215, 211, 207, 0.75) inset;
}

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

@ -9,7 +9,9 @@ steal(
'ods/models/cluster.js',
'lib/jquery-ui-1.10.3.custom.css',
'lib/jquery-ui-1.10.3.custom.js',
'lib/jquery.numeric.js'
'lib/jquery.numeric.js',
'lib/jquery.multiple.select.js',
'lib/multiple-select.css'
).then(function($) {
$.Controller('Ods.Ui.host_config', {}, {
init: function() {
@ -61,11 +63,48 @@ steal(
this.focus();
});
this.filloutTabs();
// get adapter roles
this.adapterRoles = [];
Ods.Adapter.getRoles(this.options.odsState.adapter_id, this.proxy('onGetRoles'), this.proxy('onGetRolesErr'));
this.server_count = this.options.odsState.servers.length;
},
onGetRoles: function(data, textStatus, xhr) {
steal.dev.log(" *** onGetRoles data *** ", data);
steal.dev.log(" *** onGetRoles textStatus *** ", textStatus);
steal.dev.log(" *** onGetRoles xhr *** ", xhr);
if (xhr.status == 200) {
this.adapterRoles = data.roles;
this.filloutTabs();
}
},
onGetRolesErr: function(xhr, status, statusText) {
steal.dev.log(" *** onGetRoleErr xhr *** ", xhr);
steal.dev.log(" *** onGetRoleErr status *** ", status);
steal.dev.log(" *** onGetRoleErr statusText *** ", xhr);
this.adapterRoles = [];
this.filloutTabs();
$('.roles').multipleSelect({
placeholder: "No roles available",
selectAll: false
});
},
fillRolesDropdowns: function(el, selectedRoles) {
for (var i = 0; i < this.adapterRoles.length; i++) {
el.append("<option value=" + this.adapterRoles[i].name + ">" + this.adapterRoles[i].description + "</option>");
}
el.multipleSelect({
placeholder: "auto",
selectAll: false
});
el.multipleSelect("setSelects", selectedRoles);
},
fillHostnameBySwitchIp: function() {
var serverData = this.options.odsState.servers_config;
this.server_count = 0;
@ -130,7 +169,13 @@ steal(
var serverData = this.options.odsState.servers_config;
var servers = serverData[switchIp];
for (var i = 0; i < servers.length; i++) {
$('#tab1 table tbody').append(this.view('server_row', servers[i]));
$('#hostconfig-table tbody').append(this.view('server_row', servers[i]));
var roles = servers[i].roles;
var rolesDropdown = $("#hostconfig-table tbody tr").eq(i).find(".roles");
if(!roles) {
roles = [];
}
this.fillRolesDropdowns(rolesDropdown, roles);
}
},
@ -143,6 +188,11 @@ steal(
for (var i = 0; i < this.options.odsState.servers_config[currentSwitch].length; i++) {
this.options.odsState.servers_config[currentSwitch][i].hostname = $("#hostconfig-table tbody tr").eq(i).find(".hostname").val();
this.options.odsState.servers_config[currentSwitch][i].server_ip = $("#hostconfig-table tbody tr").eq(i).find(".serverIp").val();
var roles = $("#hostconfig-table tbody tr").eq(i).find(".roles").val();
if(!roles) {
roles = [];
}
this.options.odsState.servers_config[currentSwitch][i].roles = roles;
}
},
@ -198,6 +248,7 @@ steal(
var clusterhost_id = servers[i]['clusterhost_id'];
var hostname = servers[i]['hostname'];
var server_ip = servers[i]['server_ip'];
var roles = servers[i]['roles'];
var clusterhostConfigData = {
"hostname": hostname,
@ -207,7 +258,8 @@ steal(
"ip": server_ip
}
}
}
},
"roles": roles
};
Ods.ClusterHost.update(clusterhost_id, clusterhostConfigData, this.proxy('onHostconfigData'), this.proxy('onHostconfigDataErr'));

9
public/ods/ui/host_config/host_config_test.html
View File

@ -28,7 +28,8 @@
port: "1",
server_ip: "10.2.172.9",
switch_ip: "172.29.8.40",
vlan: "1"
vlan: "1",
roles: []
};
var server2 = {
@ -39,7 +40,8 @@
port: "2",
server_ip: "10.2.172.9",
switch_ip: "172.29.8.40",
vlan: "2"
vlan: "2",
roles: []
};
if (config["172.29.8.40"] == undefined) {
@ -60,7 +62,8 @@
feature: null,
machines: [],
switches: [],
snmp: 1
snmp: 1,
adapter_id: 1
};
var state = new $.Observe(odsState);

1
public/ods/ui/host_config/views/init.ejs
View File

@ -32,6 +32,7 @@
<th>Port</th>
<th>Host name</th>
<th>IP address</th>
<th>Roles</th>
</tr>
</thead>
<tbody>

16
public/ods/ui/host_config/views/server_row.ejs
View File

@ -1,5 +1,15 @@
<tr data-hostid="<%= clusterhost_id %>">
<td><%= port %></td>
<td><input class="rounded hostname non-empty-value" name="hostname" value="<%= hostname %>"></td>
<td><input class="rounded serverIp non-empty-value" name="serverIp" value="<%= server_ip %>"></td>
<td>
<%= port %>
</td>
<td>
<input class="rounded hostname non-empty-value" name="hostname" value="<%= hostname %>">
</td>
<td>
<input class="rounded serverIp non-empty-value" name="serverIp" value="<%= server_ip %>">
</td>
<td>
<select multiple="multiple" class="roles" name="roles">
</select>
</td>
</tr>

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

@ -350,7 +350,7 @@ steal(
"background": "#0000ff",
"opacity": 0.5
});
this.totalProgressLabel.text(total * 100 + "%");
this.totalProgressLabel.text(Math.round(total * 100) + "%");
this.totalProgressbarValue.css({
"width": total * this.totalProgressbar.width()
});
@ -411,9 +411,15 @@ steal(
right: 120,
bottom: 0,
left: 130
},
width = 1000 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
};
var serversHeight = this.options.odsState.servers.length * 68;
if (serversHeight < 500) {
serversHeight = 500;
}
var width = 1000 - margin.right - margin.left,
height = serversHeight - margin.top - margin.bottom;
imgWidth = 163;
imgHeight = 32;

15
public/ods/ui/install_review/install_review_test.html
View File

@ -47,9 +47,23 @@
if (config["172.29.8.40"] == undefined) {
config["172.29.8.40"] = [server1];
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
} else {
config["172.29.8.40"].push(server1);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
config["172.29.8.40"].push(server2);
}
var odsState = {
@ -68,6 +82,7 @@
var state = new $.Observe(odsState);
state.servers_config = config;
state.cluster_id = 1;
state.servers = [{},{},{},{},{},{},{},{},{}];
$('#install_review-test').ods_ui_install_review({ "odsState" : state });

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

@ -4,6 +4,24 @@
<p style="padding-left: 30px; color: black;">Click <a class="dashboard-link disabled">here</a> to go to OpenStack dashboard when deployment is finished.</p>
<div class="rounded" style="margin-left: 45px; margin-bottom: 20px;"><center>
<table style="width:80%">
<tbody>
<tr>
<td style="width: 20%;">Total Progress:</td>
<td style="width: 70%;">
<div class="totalProgressbar float_left" style="width:100%; height: 20px; border: 1px solid #aaaaaa;">
<div class="progress-label">Waiting...</div>
<!--<div id="total_percentage" style="position: absolute; z-index: 5; margin-left: 390px;"></div>
<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>
</tr>
</tbody>
</table>
</center></div>
<div id="install_tabs" style="margin-left: 45px;">
<ul>
<li><a href="#tabs-1">Graph</a></li>
@ -23,24 +41,5 @@
</center></div>
</div>
<br>
<div class="rounded" style="margin-left: 45px;"><center>
<table style="width:80%">
<tbody>
<tr>
<td style="width: 20%;">Total Progress:</td>
<td style="width: 70%;">
<div class="totalProgressbar float_left" style="width:100%; height: 20px; border: 1px solid #aaaaaa;">
<div class="progress-label">Waiting...</div>
<!--<div id="total_percentage" style="position: absolute; z-index: 5; margin-left: 390px;"></div>
<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>
</tr>
</tbody>
</table>
</center></div>
<div class="clear"></div>

1
public/ods/ui/networking/networking.js
View File

@ -162,6 +162,7 @@ steal(
if (!isConfiged) {
server['hostname'] = '';
server['roles'] = [];
}
server['server_ip'] = this.startPrefix + (parseInt(this.startLastDigit) + i);

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

@ -161,6 +161,7 @@ steal(
"adapter_id": 1
}
}, this.proxy('onClusterCreated'), this.proxy('onClusterCreatedErr'));
this.options.odsState.adapter_id = 1;
} else {
// replace all hosts in current cluster
var cluster_id = this.options.odsState.cluster_id;
@ -556,10 +557,10 @@ steal(
$("#server_continue_err").hide();
if (xhr.status == 200) { // OK
// Assume the machine orders are same in returned data (data.clusterHosts)
// Assume the machine orders are same in returned data (data.cluster_hosts)
// and cached data (this.options.odsState.servers)
for (var i = 0; i < data.clusterHosts.length; i++) {
this.options.odsState.servers[i]['clusterhost_id'] = data.clusterHosts[i].id;
for (var i = 0; i < data.cluster_hosts.length; i++) {
this.options.odsState.servers[i]['clusterhost_id'] = data.cluster_hosts[i].id;
}
$("#continuing").css("opacity", 0);
this.options.nav.gotoStep("3");