mirror of https://github.com/apache/cloudstack.git
Implement system dashboard
This commit is contained in:
Brian Federle
parent
3305498bd3
commit
405fa75b6d
|
|
@ -6119,8 +6119,18 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
width: 180px;
|
||||
height: 178px;
|
||||
padding: 0;
|
||||
background: url(../images/bg-status_box.png) no-repeat 0px 1px;
|
||||
background: url(../images/bg-gradients.png) repeat-x 0px -1003px;
|
||||
margin: 0 0 0 12px;
|
||||
/*+border-radius:7px;*/
|
||||
-moz-border-radius: 7px;
|
||||
-webkit-border-radius: 7px;
|
||||
-khtml-border-radius: 7px;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
/*+box-shadow:inset 0px 1px 3px #000000;*/
|
||||
-moz-box-shadow: inset 0px 1px 3px #000000;
|
||||
-webkit-box-shadow: inset 0px 1px 3px #000000;
|
||||
-o-box-shadow: inset 0px 1px 3px #000000;
|
||||
box-shadow: inset 0px 1px 3px #000000;
|
||||
position: relative;
|
||||
border: none;
|
||||
float: left;
|
||||
|
|
@ -6239,6 +6249,10 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.system-dashboard .status_box li.capacity span.overview.total {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.system-dashboard .status_box li span.overview.label {
|
||||
/*+placement:shift 52px 79px;*/
|
||||
position: relative;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.8 KiB |
28
ui/index.jsp
28
ui/index.jsp
|
|
@ -754,7 +754,11 @@
|
|||
|
||||
<!-- System dashboard -->
|
||||
<div class="system-dashboard-view">
|
||||
<div class="toolbar"></div>
|
||||
<div class="toolbar">
|
||||
<div class="button refresh">
|
||||
<span>Refresh</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone dashboard -->
|
||||
<div class="system-dashboard">
|
||||
|
|
@ -765,19 +769,19 @@
|
|||
<ul class="status_box good">
|
||||
<li class="block">
|
||||
<span class="header">Number of Zones</span>
|
||||
<span class="overview total">0</span>
|
||||
<span class="overview total" data-item="zoneCount"></span>
|
||||
</li>
|
||||
<li class="block">
|
||||
<span class="header">Number of Pods</span>
|
||||
<span class="overview total">0</span>
|
||||
<span class="overview total" data-item="podCount"></span>
|
||||
</li>
|
||||
<li class="block">
|
||||
<span class="header">Number of Clusters</span>
|
||||
<span class="overview total">0</span>
|
||||
<span class="overview total" data-item="clusterCount"></span>
|
||||
</li>
|
||||
<li class="block last">
|
||||
<span class="header">Number of Hosts</span>
|
||||
<span class="overview total">0</span>
|
||||
<span class="overview total" data-item="hostCount"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -791,19 +795,19 @@
|
|||
<ul class="status_box good">
|
||||
<li class="block">
|
||||
<span class="header">Total Hosts</span>
|
||||
<span class="overview total">0</span>
|
||||
<span class="overview total" data-item="hostCount"></span>
|
||||
</li>
|
||||
<li class="block">
|
||||
<li class="block capacity">
|
||||
<span class="header">Total CPU</span>
|
||||
<span class="overview total">500</span>
|
||||
<span class="overview total" data-item="cpuCapacityTotal"></span>
|
||||
</li>
|
||||
<li class="block">
|
||||
<li class="block capacity">
|
||||
<span class="header">Total Memory</span>
|
||||
<span class="overview total">60</span>
|
||||
<span class="overview total" data-item="memCapacityTotal"></span>
|
||||
</li>
|
||||
<li class="block last">
|
||||
<li class="block last capacity">
|
||||
<span class="header">Total Storage</span>
|
||||
<span class="overview total">10</span>
|
||||
<span class="overview total" data-item="storageCapacityTotal"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,98 @@
|
|||
cloudStack.sections.system = {
|
||||
title: 'System',
|
||||
id: 'system',
|
||||
|
||||
// System dashboard
|
||||
dashboard: {
|
||||
dataProvider: function(args) {
|
||||
var dataFns = {
|
||||
zoneCount: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listZones'),
|
||||
success: function(json) {
|
||||
dataFns.podCount($.extend(data, {
|
||||
zoneCount: json.listzonesresponse.count
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
podCount: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listPods'),
|
||||
success: function(json) {
|
||||
dataFns.clusterCount($.extend(data, {
|
||||
podCount: json.listpodsresponse.count
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
clusterCount: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listClusters'),
|
||||
success: function(json) {
|
||||
dataFns.hostCount($.extend(data, {
|
||||
clusterCount: json.listclustersresponse.count
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hostCount: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listHosts'),
|
||||
data: {
|
||||
type: 'routing'
|
||||
},
|
||||
success: function(json) {
|
||||
dataFns.capacity($.extend(data, {
|
||||
hostCount: json.listhostsresponse.count
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
capacity: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listCapacity'),
|
||||
success: function(json) {
|
||||
var capacities = json.listcapacityresponse.capacity;
|
||||
|
||||
var capacityTotal = function(id, converter) {
|
||||
var capacity = $.grep(capacities, function(capacity) {
|
||||
return capacity.type == id;
|
||||
})[0];
|
||||
|
||||
var total = capacity.capacitytotal;
|
||||
|
||||
if (converter) {
|
||||
return converter(total);
|
||||
}
|
||||
|
||||
return total;
|
||||
};
|
||||
|
||||
complete($.extend(data, {
|
||||
cpuCapacityTotal: capacityTotal(1, cloudStack.converters.convertHz),
|
||||
memCapacityTotal: capacityTotal(0, cloudStack.converters.convertBytes),
|
||||
storageCapacityTotal: capacityTotal(2, cloudStack.converters.convertBytes)
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var complete = function(data) {
|
||||
args.response.success({
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
dataFns.zoneCount({});
|
||||
}
|
||||
},
|
||||
|
||||
// Network-as-a-service configuration
|
||||
naas: {
|
||||
mainNetworks: {
|
||||
|
|
@ -259,13 +351,13 @@
|
|||
selectedZoneObj = json.updatezoneresponse.zone; //override selectedZoneObj after update zone
|
||||
}
|
||||
});
|
||||
|
||||
var vlan;
|
||||
|
||||
var vlan;
|
||||
if(args.data.endVlan == null || args.data.endVlan.length == 0)
|
||||
vlan = args.data.startVlan;
|
||||
else
|
||||
vlan = args.data.startVlan + "-" + args.data.endVlan;
|
||||
|
||||
vlan = args.data.startVlan + "-" + args.data.endVlan;
|
||||
|
||||
$.ajax({
|
||||
url: createURL("updatePhysicalNetwork&id=" + selectedPhysicalNetworkObj.id + "&vlan=" + todb(vlan)),
|
||||
dataType: "json",
|
||||
|
|
@ -297,22 +389,22 @@
|
|||
{
|
||||
id: { label: 'ID' },
|
||||
state: { label: 'State' },
|
||||
|
||||
|
||||
/*
|
||||
vlan: {
|
||||
label: 'VLAN',
|
||||
isEditable: true
|
||||
},
|
||||
*/
|
||||
startVlan: {
|
||||
label: 'Start Vlan',
|
||||
isEditable: true
|
||||
startVlan: {
|
||||
label: 'Start Vlan',
|
||||
isEditable: true
|
||||
},
|
||||
endVlan: {
|
||||
label: 'End Vlan',
|
||||
isEditable: true
|
||||
endVlan: {
|
||||
label: 'End Vlan',
|
||||
isEditable: true
|
||||
},
|
||||
|
||||
|
||||
broadcastdomainrange: { label: 'Broadcast domain range' },
|
||||
zoneid: { label: 'Zone ID' },
|
||||
guestcidraddress: {
|
||||
|
|
@ -323,10 +415,10 @@
|
|||
],
|
||||
dataProvider: function(args) {
|
||||
selectedPhysicalNetworkObj["guestcidraddress"] = selectedZoneObj.guestcidraddress;
|
||||
|
||||
|
||||
var startVlan, endVlan;
|
||||
var vlan = selectedPhysicalNetworkObj.vlan;
|
||||
|
||||
var vlan = selectedPhysicalNetworkObj.vlan;
|
||||
|
||||
if(vlan != null && vlan.length > 0) {
|
||||
if(vlan.indexOf("-") != -1) {
|
||||
var vlanArray = vlan.split("-");
|
||||
|
|
@ -338,8 +430,8 @@
|
|||
}
|
||||
selectedPhysicalNetworkObj["startVlan"] = startVlan;
|
||||
selectedPhysicalNetworkObj["endVlan"] = endVlan;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
args.response.success({
|
||||
actionFilter: function() {
|
||||
var allowedActions = [];
|
||||
|
|
@ -988,7 +1080,7 @@
|
|||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: [
|
||||
{ id: 1, name: 'Network 1' }//,
|
||||
{ id: 1, name: 'Network 1' }
|
||||
//{ id: 2, name: 'Network 2' },
|
||||
//{ id: 3, name: 'Network 3' }
|
||||
]
|
||||
|
|
@ -1143,14 +1235,14 @@
|
|||
title: 'Network',
|
||||
fields: [
|
||||
{
|
||||
name: { label: 'Name' }
|
||||
name: { label: 'Name' }
|
||||
},
|
||||
{
|
||||
id: { label: 'ID' },
|
||||
state: { label: 'State' },
|
||||
physicalnetworkid: { label: 'Physical network ID' },
|
||||
destinationphysicalnetworkid: { label: 'Destination physical networkID' }
|
||||
},
|
||||
},
|
||||
{
|
||||
Vpn: { label: 'VPN' },
|
||||
Dhcp: { label: 'DHCP' },
|
||||
|
|
@ -1167,7 +1259,7 @@
|
|||
dataProvider: function(args) {
|
||||
args.response.success({
|
||||
actionFilter: virtualRouterProviderActionFilter,
|
||||
data: $.extend(true, {}, nspMap["virtualRouter"], {
|
||||
data: $.extend(true, {}, nspMap["virtualRouter"], {
|
||||
Vpn: 'On',
|
||||
Dhcp: 'On',
|
||||
Dns: 'On',
|
||||
|
|
@ -1460,7 +1552,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
dataProvider: function(args) {
|
||||
dataProvider: function(args) {
|
||||
$.ajax({
|
||||
url: createURL("listRouters&zoneid=" + selectedZoneObj.id + "&page=" + args.page + "&pagesize=" + pageSize),
|
||||
dataType: 'json',
|
||||
|
|
@ -1744,7 +1836,7 @@
|
|||
return clientConsoleUrl + '?cmd=access&vm=' + args.context.routers[0].id;
|
||||
},
|
||||
title: function(args) {
|
||||
return "console"; //can't have space in window name in window.open()
|
||||
return "console"; //can't have space in window name in window.open()
|
||||
},
|
||||
width: 820,
|
||||
height: 640
|
||||
|
|
@ -2177,7 +2269,7 @@
|
|||
}
|
||||
else {
|
||||
$("body").stopTime(timerKey);
|
||||
if (result.jobstatus == 1) {
|
||||
if (result.jobstatus == 1) {
|
||||
nspMap["f5"] = json.queryasyncjobresultresponse.jobresult.networkserviceprovider;
|
||||
addExternalLoadBalancer(args, selectedPhysicalNetworkObj, "addF5LoadBalancer", "addf5bigiploadbalancerresponse");
|
||||
}
|
||||
|
|
@ -2411,7 +2503,7 @@
|
|||
}
|
||||
else {
|
||||
$("body").stopTime(timerKey);
|
||||
if (result.jobstatus == 1) {
|
||||
if (result.jobstatus == 1) {
|
||||
nspMap["srx"] = json.queryasyncjobresultresponse.jobresult.networkserviceprovider;
|
||||
addExternalFirewall(args, selectedPhysicalNetworkObj, "addSrxFirewall", "addsrxfirewallresponse", "srxfirewall");
|
||||
}
|
||||
|
|
@ -2614,7 +2706,7 @@
|
|||
id: { label: 'ID' },
|
||||
name: { label: 'Name' }//,
|
||||
//state: { label: 'Status' } //comment it for now, since dataProvider below doesn't get called by widget code after action is done
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3474,7 +3566,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
f5Providers: {
|
||||
id: 'f5Providers',
|
||||
title: 'F5',
|
||||
|
|
@ -3903,7 +3995,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
dataProvider: function(args) {
|
||||
dataProvider: function(args) {
|
||||
$.ajax({
|
||||
url: createURL("listSystemVms&zoneid=" + selectedZoneObj.id + "&page=" + args.page + "&pagesize=" + pageSize),
|
||||
dataType: "json",
|
||||
|
|
@ -4388,11 +4480,11 @@
|
|||
label: 'View console',
|
||||
action: {
|
||||
externalLink: {
|
||||
url: function(args) {
|
||||
url: function(args) {
|
||||
return clientConsoleUrl + '?cmd=access&vm=' + args.context.systemVMs[0].id;
|
||||
},
|
||||
title: function(args) {
|
||||
return "console"; //can't have space in window name in window.open()
|
||||
return "console"; //can't have space in window name in window.open()
|
||||
},
|
||||
width: 820,
|
||||
height: 640
|
||||
|
|
@ -8398,7 +8490,7 @@
|
|||
{jobId: jid,
|
||||
getUpdatedItem: function(json) {
|
||||
var item = json.queryasyncjobresultresponse.jobresult[apiCmdObj];
|
||||
|
||||
|
||||
return item;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,29 @@
|
|||
return $('<div>').listView(args);
|
||||
};
|
||||
|
||||
var $dashboard = $('#template').find('.system-dashboard-view').clone();
|
||||
|
||||
var getData = function() {
|
||||
// Populate data
|
||||
$dashboard.find('[data-item]').hide();
|
||||
cloudStack.sections.system.dashboard.dataProvider({
|
||||
response: {
|
||||
success: function(args) {
|
||||
var data = args.data;
|
||||
|
||||
$.each(data, function(key, value) {
|
||||
var $elem = $dashboard.find('[data-item=' + key + ']');
|
||||
$elem.hide().html(value).fadeIn();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var resourceChart = function(args) {
|
||||
return $('#template').find('.system-dashboard-view').clone()
|
||||
getData();
|
||||
|
||||
return $dashboard
|
||||
.click(function(event) {
|
||||
var $target = $(event.target);
|
||||
|
||||
|
|
@ -18,11 +39,21 @@
|
|||
complete: function($newPanel) {
|
||||
listView().appendTo($newPanel);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
$(window).bind('cloudStack.fullRefresh cloudStack.updateResources', function() {
|
||||
getData();
|
||||
});
|
||||
|
||||
$dashboard.find('.button.refresh').click(function() {
|
||||
getData();
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return function(args) {
|
||||
return resourceChart(args);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue