etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Implement dashboard capacity section

This commit is contained in:
Brian Federle 2011-12-14 14:55:50 -08:00
parent 2df6f7a0f1
commit 94ed94c3fb
5 changed files with 195 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/css/cloudstack3.css
View File

@ -3128,15 +3128,15 @@ Dialogs*/
}
.dashboard.admin .dashboard-container .stats ul li .name {
width: 132px;
width: 121px;
float: left;
margin: 19px 40px 0 0;
margin: 19px 15px 0 0;
}
.dashboard.admin .dashboard-container .stats ul li div.value {
float: left;
background: url(../images/bg-gradients.png) 0px -51px;
width: 179px;
width: 212px;
height: 100%;
border-left: 1px solid #C8C2C2;
border-right: 1px solid #C8C2C2;

40
ui/index-test.html
View File

@ -510,6 +510,16 @@
</div>
</div>
<!-- Network domain-->
<div class="field odd">
<div class="name">
<span>Network domain</span>
</div>
<div class="value">
<input type="text" name="networkdomain" />
</div>
</div>
<div class="conditional vlan">
<!-- Guest CIDR -->
<div class="field">
@ -524,7 +534,7 @@
</div>
<!-- Public -->
<div class="field odd">
<div class="field">
<div class="name">
<span>Public</span>
</div>
@ -535,7 +545,7 @@
<div class="conditional public">
<!-- Domain -->
<div class="field">
<div class="field odd">
<div class="name">
<span>Domain</span>
</div>
@ -889,7 +899,7 @@
<div class="title">
<span>System-wide capacity</span>
</div>
<div class="selects">
<div class="selects" style="display:none;">
<div class="select">
<label>Zone:</label>
<select>
@ -908,49 +918,49 @@
<div class="name">Public IP Addresses</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0</span> / <span class="total">0</span>
Allocated: <span class="allocated" data-item="publicIPAllocated">0</span> / <span class="total" data-item="publicIPTotal">0</span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="publicIPPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="publicIPPercentage"></span>%</div>
</li>
<li>
<div class="name">Private IP Addresses</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0</span> / <span class="total">0</span>
Allocated: <span class="allocated" data-item="privateIPAllocated"></span> / <span class="total" data-item="privateIPTotal">0</span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="privateIPPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="privateIPPercentage"></span>%</div>
</li>
<li>
<div class="name">Memory Allocated</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0mb</span> / <span class="total">0mb</span>
Allocated: <span class="allocated" data-item="memoryAllocated"></span> / <span class="total" data-item="memoryTotal"></span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="memoryPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="memoryPercentage"></span>%</div>
</li>
<li>
<div class="name">CPU Allocated</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0</span> / <span class="total">0</span>
Allocated: <span class="allocated" data-item="cpuAllocated"></span> / <span class="total" data-item="cpuTotal">0</span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="cpuPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="cpuPercentage"></span>%</div>
</li>
</ul>
</div>

32
ui/index.jsp
View File

@ -509,7 +509,7 @@
<input type="text" name="internaldns2" />
</div>
</div>
<!-- Network domain-->
<div class="field odd">
<div class="name">
@ -518,8 +518,8 @@
<div class="value">
<input type="text" name="networkdomain" />
</div>
</div>
</div>
<div class="conditional vlan">
<!-- Guest CIDR -->
<div class="field">
@ -899,7 +899,7 @@
<div class="title">
<span>System-wide capacity</span>
</div>
<div class="selects">
<div class="selects" style="display:none;">
<div class="select">
<label>Zone:</label>
<select>
@ -918,49 +918,49 @@
<div class="name">Public IP Addresses</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0</span> / <span class="total">0</span>
Allocated: <span class="allocated" data-item="publicIPAllocated">0</span> / <span class="total" data-item="publicIPTotal">0</span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="publicIPPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="publicIPPercentage"></span>%</div>
</li>
<li>
<div class="name">Private IP Addresses</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0</span> / <span class="total">0</span>
Allocated: <span class="allocated" data-item="privateIPAllocated"></span> / <span class="total" data-item="privateIPTotal">0</span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="privateIPPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="privateIPPercentage"></span>%</div>
</li>
<li>
<div class="name">Memory Allocated</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0mb</span> / <span class="total">0mb</span>
Allocated: <span class="allocated" data-item="memoryAllocated"></span> / <span class="total" data-item="memoryTotal"></span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="memoryPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="memoryPercentage"></span>%</div>
</li>
<li>
<div class="name">CPU Allocated</div>
<div class="value">
<div class="content">
Allocated: <span class="allocated">0</span> / <span class="total">0</span>
Allocated: <span class="allocated" data-item="cpuAllocated"></span> / <span class="total" data-item="cpuTotal">0</span>
</div>
</div>
<div class="chart">
<div class="chart-line" style="width: 0%;"></div>
<div class="chart-line" style="width: 0%;" data-item="cpuPercentage"></div>
</div>
<div class="percentage"><span class="value">0</span>%</div>
<div class="percentage"><span class="value" data-item="cpuPercentage"></span>%</div>
</li>
</ul>
</div>

60
ui/scripts-test/dashboard.js
View File

@ -1,11 +1,61 @@
(function(cloudStack) {
(function(cloudStack, testData) {
// Admin dashboard
cloudStack.sections.dashboard = {
title: 'Dashboard',
show: function() {
return $('<img>').attr({
src: 'images/screens/Dashboard2.jpg'
var $dashboard = $('#template').find('div.dashboard.admin').clone();
$dashboard.find('.view-all').click(function() {
$('#navigation li.events').click();
});
var getData = function() {
// Populate data
$dashboard.find('[data-item]').hide();
cloudStack.sections.dashboard.dataProvider({
response: {
success: function(args) {
var data = args.data;
$.each(data, function(key, value) {
var $elem = $dashboard.find('[data-item=' + key + ']');
$elem.each(function() {
var $item = $(this);
if ($item.hasClass('chart-line')) {
$item.show().animate({ width: value + '%' });
} else {
$item.hide().html(value).fadeIn();
}
});
});
}
}
});
};
getData();
return $dashboard;
},
dataProvider: function(args) {
args.response.success({
data: {
publicIPAllocated: 50,
publicIPTotal: 100,
publicIPPercentage: 50,
privateIPAllocated: 50,
privateIPTotal: 100,
privateIPPercentage: (100 / 50) * 10,
memoryAllocated: 256,
memoryTotal: 1024,
memoryPercentage: (1024 / 256) * 10,
cpuAllocated: 500,
cpuTotal: 1200,
cpuPercentage: (1200 / 500) * 10
}
});
}
};
})(cloudStack);
};
})(cloudStack, testData);

107
ui/scripts/dashboard.js
View File

@ -9,18 +9,103 @@
$('#navigation li.events').click();
});
return $dashboard;
}
};
var getData = function() {
// Populate data
$dashboard.find('[data-item]').hide();
cloudStack.sections.dashboard.dataProvider({
response: {
success: function(args) {
var data = args.data;
// User dashboard
/*
cloudStack.sections['dashboard-user'] = {
title: 'Dashboard (user)',
show: function() {
return $('#template').find('div.dashboard.user').clone();
$.each(data, function(key, value) {
var $elem = $dashboard.find('[data-item=' + key + ']');
$elem.each(function() {
var $item = $(this);
if ($item.hasClass('chart-line')) {
$item.show().animate({ width: value + '%' });
} else {
$item.hide().html(value).fadeIn();
}
});
});
}
}
});
};
getData();
return $dashboard;
},
dataProvider: function(args) {
var dataFns = {
zones: function(data) {
$.ajax({
url: createURL('listZones'),
success: function(json) {
dataFns.capacity({
zones: json.listzonesresponse.zone
});
}
});
},
capacity: function(data) {
if (data.zones) {
$.ajax({
url: createURL('listCapacity'),
success: function(json) {
var capacities = json.listcapacityresponse.capacity;
var capacity = function(id, converter) {
return $.grep(capacities, function(capacity) {
return capacity.type == id;
})[0];
};
complete($.extend(data, {
publicIPAllocated: capacity(8).capacityused,
publicIPTotal: capacity(8).capacitytotal,
publicIPPercentage: parseInt(capacity(8).percentused),
privateIPAllocated: capacity(5).capacityused,
privateIPTotal: capacity(5).capacitytotal,
privateIPPercentage: parseInt(capacity(8).percentused),
memoryAllocated: cloudStack.converters.convertBytes(capacity(0).capacityused),
memoryTotal: cloudStack.converters.convertBytes(capacity(0).capacitytotal),
memoryPercentage: parseInt(capacity(0).percentused),
cpuAllocated: cloudStack.converters.convertHz(capacity(1).capacityused),
cpuTotal: cloudStack.converters.convertHz(capacity(1).capacitytotal),
cpuPercentage: parseInt(capacity(1).percentused)
}));
}
});
} else {
complete($.extend(data, {
publicIPAllocated: 0,
publicIPTotal: 0,
publicIPPercentage: 0,
privateIPAllocated: 0,
privateIPTotal: 0,
privateIPPercentage: 0,
memoryAllocated: 0,
memoryTotal: 0,
memoryPercentage: 0,
cpuAllocated: 0,
cpuTotal: 0,
cpuPercentage: 0
}));
}
}
};
var complete = function(data) {
args.response.success({
data: data
});
};
dataFns.zones({});
}
};
*/
})(cloudStack, testData);