metrics: Increase UI width, fix metrics ui issues
- Add instances count in host view, ip address in instances view
- Add ipaddress in instances view
- Increase UI container width by 200px
- Allow all users to see resource metrics
- Fix instance count issue on host metrics view
- Fix sorting issue in metrics tables
- Fix instances null check regression from 2f250e2
Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 3a4e963..e928409 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -46,7 +46,7 @@
/*+}*/
body {
- min-width: 1024px;
+ min-width: 1224px;
font-family: sans-serif;
overflow: auto;
background: #EDE8E8;
@@ -61,7 +61,7 @@
}
#main-area {
- width: 1024px;
+ width: 1224px;
height: 729px;
margin: auto;
border: 1px solid #D4D4D4;
@@ -96,8 +96,8 @@
/*Table*/
table {
- width: 740px;
- max-width: 777px;
+ width: 940px;
+ max-width: 977px;
margin: 15px 15px 12px 12px;
font-size: 13px;
text-align: left;
@@ -480,8 +480,8 @@
}
.login .logo {
- width: 250px;
- height: 31px;
+ width: 290px;
+ height: 40px;
float: left;
margin: 72px 0 0 209px;
background: url(../images/logo-login.png) no-repeat 0 0;
@@ -1297,7 +1297,7 @@
}
.detail-view div.list-view {
- width: 730px;
+ width: 930px;
border: 1px solid #DAD4D4;
margin: 41px auto auto !important;
height: 536px !important;
@@ -1305,12 +1305,12 @@
}
div.panel div.list-view div.data-table table {
- width: 755px;
+ width: 955px;
margin-top: 44px;
}
.detail-view div.list-view div.data-table table {
- width: 703px !important;
+ width: 903px !important;
}
.detail-view div.list-view div.data-table table td {
@@ -1321,7 +1321,7 @@
position: absolute;
top: 29px;
left: 12px;
- width: 760px;
+ width: 960px;
height: 47px;
display: table;
background-color: #F7F7F7;
@@ -1330,9 +1330,9 @@
}
.detail-view div.list-view div.fixed-header {
- width: 703px !important;
+ width: 903px !important;
top: 49px !important;
- left: 32px !important;
+ left: 29px !important;
background: #FFFFFF;
}
@@ -1354,7 +1354,7 @@
position: relative;
left: 0px;
top: 18px;
- width: 755px;
+ width: 955px;
/*+box-shadow:0px 4px 10px #DFE1E3;*/
-moz-box-shadow: 0px 4px 10px #DFE1E3;
-webkit-box-shadow: 0px 4px 10px #DFE1E3;
@@ -1890,7 +1890,7 @@
}
.detail-group table {
- width: 96%;
+ width: 98%;
font-size: 12px;
border-bottom: 1px solid #DFDFDF;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 );
@@ -2435,7 +2435,7 @@
}
#header.nologo div.logo {
- width: 1024px;
+ width: 1224px;
height: 47px;
margin: auto;
background: url(../images/logo.png) no-repeat 0 center;
@@ -2446,7 +2446,7 @@
}
#header div.controls {
- width: 1026px;
+ width: 1226px;
height: 48px;
position: relative;
margin: 27px auto 0;
@@ -2554,7 +2554,7 @@
margin: 0;
position: absolute;
top: -47px;
- left: 890px;
+ left: 1090px;
cursor: default !important;
display: inline-block;
float: left;
@@ -2944,9 +2944,9 @@
/*Browser*/
#browser {
- width: 794px;
+ width: 994px;
height: 100%;
- max-width: 794px;
+ max-width: 994px;
position: relative;
float: left;
overflow: hidden;
@@ -3068,7 +3068,7 @@
}
.detail-view .ui-tabs-panel div.toolbar {
- width: 768px;
+ width: 968px;
background: transparent;
border: none;
margin-top: 8px;
@@ -3234,7 +3234,7 @@
div.toolbar div.button.refresh {
float: right;
- margin: 0 15px 0 0;
+ margin: 0 20px 0 0;
}
div.toolbar div.button.refresh span {
@@ -4357,7 +4357,7 @@
}
.dashboard.admin .dashboard-container.sub {
- width: 368px;
+ width: 468px;
}
.dashboard.admin .dashboard-container.sub .button.view-all,
@@ -4415,7 +4415,7 @@
/**** Head*/
.dashboard.admin .dashboard-container.head {
- width: 766px;
+ width: 966px;
height: 331px;
margin: 9px 0 0;
float: left;
@@ -4475,7 +4475,7 @@
/**** Charts / stats*/
.dashboard.admin .zone-stats {
- width: 774px;
+ width: 974px;
height: 316px;
overflow: auto;
overflow-x: hidden;
@@ -4486,7 +4486,7 @@
}
.dashboard.admin .zone-stats ul {
- width: 796px;
+ width: 996px;
/*+placement:shift -2px 11px;*/
position: relative;
left: -2px;
@@ -4494,7 +4494,7 @@
}
.dashboard.admin .zone-stats ul li {
- width: 388px;
+ width: 488px;
font-size: 14px;
height: 79px;
float: left;
@@ -4514,7 +4514,7 @@
}
.dashboard.admin .zone-stats ul li .label {
- width: 111px;
+ width: 161px;
float: left;
font-weight: 100;
border-bottom: 1px solid #E2E2E2;
@@ -4685,7 +4685,7 @@
}
.dashboard.admin .dashboard-container.sub.alerts ul {
- width: 368px;
+ width: 468px;
height: 234px;
overflow: auto;
overflow-x: hidden;
@@ -5145,7 +5145,7 @@
}
.system-chart.dashboard.admin .dashboard-container {
- width: 740px;
+ width: 930px;
border: none;
}
@@ -5166,7 +5166,7 @@
}
.system-chart.dashboard.admin .dashboard-container .stats .chart {
- width: 136px;
+ width: 300px;
}
/** Compute*/
@@ -5183,7 +5183,7 @@
}
.system-chart.compute ul.resources li.zone {
- left: 96px;
+ left: 196px;
}
.system-chart.compute ul.resources li.zone .label {
@@ -5195,32 +5195,32 @@
}
.system-chart.compute ul.resources li.pods {
- left: 199px;
+ left: 299px;
top: 112px;
}
.system-chart.compute ul.resources li.clusters {
- left: 296px;
+ left: 396px;
top: 189px;
}
.system-chart.compute ul.resources li.hosts {
- left: 407px;
+ left: 507px;
top: 265px;
}
.system-chart.compute ul.resources li.primaryStorage {
- left: 407px;
+ left: 507px;
top: 375px;
}
.system-chart.compute ul.resources li.secondaryStorage {
- left: 199px;
+ left: 299px;
top: 497px;
}
.system-chart.compute ul.resources li.ucs {
- left: 199px;
+ left: 299px;
top: 406px;
}
@@ -8135,6 +8135,7 @@
.detail-view .multi-edit select {
width: 93%;
font-size: 10px;
+ min-width: 80px;
}
.multi-edit input {
@@ -9073,7 +9074,7 @@
.network-chart li.firewall {
/*+placement:shift 282px 188px;*/
position: relative;
- left: 282px;
+ left: 356px;
top: 188px;
position: absolute;
}
@@ -9081,7 +9082,7 @@
.network-chart li.loadBalancing {
/*+placement:shift 167px 342px;*/
position: relative;
- left: 167px;
+ left: 237px;
top: 342px;
position: absolute;
}
@@ -9089,7 +9090,7 @@
.network-chart li.portForwarding {
/*+placement:shift 401px 342px;*/
position: relative;
- left: 401px;
+ left: 480px;
top: 342px;
position: absolute;
}
@@ -9166,7 +9167,7 @@
/*System Dashboard*/
.system-dashboard {
height: 258px;
- width: 762px;
+ width: 962px;
display: block;
/*+border-radius:3px;*/
-moz-border-radius: 3px;
@@ -9264,7 +9265,7 @@
position: relative;
left: 18px;
top: 110px;
- width: 78%;
+ width: 83%;
position: absolute;
text-align: center;
padding: 8px 0;
@@ -9279,7 +9280,7 @@
.system-dashboard .status_box li {
height: 178px;
- width: 178px;
+ width: 228px;
padding: 0;
margin: 0 0 0 8px;
/*+border-radius:3px;*/
@@ -9303,7 +9304,7 @@
padding: 65px 80px 5px;
/*+placement:shift 31px 19px;*/
position: relative;
- left: 31px;
+ left: 51px;
top: 19px;
position: absolute;
/*+opacity:56%;*/
@@ -9340,7 +9341,7 @@
/*+placement:shift 13px 5px;*/
position: relative;
left: 13px;
- top: 5px;
+ top: 13px;
font-weight: 100;
}
diff --git a/ui/images/logo-login-oss.png b/ui/images/logo-login-oss.png
index e0f3767..92fc81c 100644
--- a/ui/images/logo-login-oss.png
+++ b/ui/images/logo-login-oss.png
Binary files differ
diff --git a/ui/images/logo.png b/ui/images/logo.png
index f36a9cb..2e3aae9 100644
--- a/ui/images/logo.png
+++ b/ui/images/logo.png
Binary files differ
diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js
index 8c7e31f..0cf0ea8 100644
--- a/ui/scripts/instances.js
+++ b/ui/scripts/instances.js
@@ -164,6 +164,9 @@
label: 'label.display.name',
truncate: true
},
+ ipaddress: {
+ label: 'label.ip.address'
+ },
zonename: {
label: 'label.zone.name'
},
@@ -293,9 +296,6 @@
label: 'label.metrics',
isHeader: true,
addRow: false,
- preFilter: function(args) {
- return isAdmin();
- },
action: {
custom: cloudStack.uiCustom.metricsView({resource: 'vms'})
},
@@ -371,6 +371,13 @@
data: data,
success: function(json) {
var items = json.listvirtualmachinesresponse.virtualmachine;
+ if (items) {
+ $.each(items, function(idx, vm) {
+ if (vm.nic && vm.nic.length > 0 && vm.nic[0].ipaddress) {
+ items[idx].ipaddress = vm.nic[0].ipaddress;
+ }
+ });
+ }
args.response.success({
data: items
});
diff --git a/ui/scripts/metrics.js b/ui/scripts/metrics.js
index 4fce7a0..609022a 100644
--- a/ui/scripts/metrics.js
+++ b/ui/scripts/metrics.js
@@ -159,7 +159,7 @@
items[idx].clusters += parseInt(json.listclustersresponse.count);
$.each(json.listclustersresponse.cluster, function(i, cluster) {
if (cluster.allocationstate == 'Enabled' && cluster.managedstate == 'Managed') {
- items[idx].clustersUp++;
+ items[idx].clustersUp += 1;
}
$.ajax({
url: createURL('listHosts'),
@@ -550,6 +550,9 @@
},
compact: true
},
+ instances: {
+ label: 'label.instances'
+ },
cpuused: {
label: 'label.metrics.cpu.usage',
collapsible: true,
@@ -702,6 +705,28 @@
items[idx].cputotal = items[idx].cputotal + ' Ghz (x' + cpuOverCommit + ')';
items[idx].memtotal = items[idx].memtotal + ' (x' + memOverCommit + ')';
+
+ items[idx].instances = 0;
+ items[idx].instancesUp = 0;
+ $.ajax({
+ url: createURL('listVirtualMachines'),
+ data: {hostid: host.id, listAll: true},
+ success: function(json) {
+ if (json && json.listvirtualmachinesresponse && json.listvirtualmachinesresponse.virtualmachine) {
+ var vms = json.listvirtualmachinesresponse.virtualmachine;
+ if (vms) {
+ $.each(vms, function(_, vm) {
+ items[idx].instances += 1;
+ if (vm.state == 'Running') {
+ items[idx].instancesUp += 1;
+ }
+ });
+ }
+ }
+ },
+ async: false
+ });
+ items[idx].instances = items[idx].instancesUp + ' / ' + items[idx].instances;
});
}
args.response.success({
@@ -747,6 +772,12 @@
},
compact: true
},
+ ipaddress: {
+ label: 'label.ip.address'
+ },
+ zonename: {
+ label: 'label.zone'
+ },
cpuused: {
label: 'label.metrics.cpu.usage',
collapsible: true,
@@ -823,6 +854,9 @@
items[idx].diskread = (parseFloat(vm.diskkbsread)/(1024.0)).toFixed(2) + ' MB';
items[idx].diskwrite = (parseFloat(vm.diskkbswrite)/(1024.0)).toFixed(2) + ' MB';
items[idx].diskiopstotal = parseFloat(vm.diskioread) + parseFloat(vm.diskiowrite);
+ if (vm.nic && vm.nic.length > 0 && vm.nic[0].ipaddress) {
+ items[idx].ipaddress = vm.nic[0].ipaddress;
+ }
var keys = [{'cpuused': 'cpuusedavg'},
{'networkkbsread': 'networkread'},
diff --git a/ui/scripts/storage.js b/ui/scripts/storage.js
index ee913f5..78826a3 100644
--- a/ui/scripts/storage.js
+++ b/ui/scripts/storage.js
@@ -257,9 +257,6 @@
label: 'label.metrics',
isHeader: true,
addRow: false,
- preFilter: function(args) {
- return isAdmin();
- },
action: {
custom: cloudStack.uiCustom.metricsView({resource: 'volumes'})
},
diff --git a/ui/scripts/system.js b/ui/scripts/system.js
index 8d097f4..3aafd8d 100644
--- a/ui/scripts/system.js
+++ b/ui/scripts/system.js
@@ -7710,9 +7710,6 @@
label: 'label.metrics',
isHeader: true,
addRow: false,
- preFilter: function(args) {
- return isAdmin();
- },
action: {
custom: cloudStack.uiCustom.metricsView({resource: 'zones'})
},
@@ -14392,9 +14389,6 @@
label: 'label.metrics',
isHeader: true,
addRow: false,
- preFilter: function(args) {
- return isAdmin();
- },
action: {
custom: cloudStack.uiCustom.metricsView({resource: 'clusters'})
},
@@ -15646,9 +15640,6 @@
label: 'label.metrics',
isHeader: true,
addRow: false,
- preFilter: function(args) {
- return isAdmin();
- },
action: {
custom: cloudStack.uiCustom.metricsView({resource: 'hosts'})
},
@@ -17468,9 +17459,6 @@
label: 'label.metrics',
isHeader: true,
addRow: false,
- preFilter: function(args) {
- return isAdmin();
- },
action: {
custom: cloudStack.uiCustom.metricsView({resource: 'storagepool'})
},
diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js
index 22ddda6..4574052 100644
--- a/ui/scripts/ui/widgets/dataTable.js
+++ b/ui/scripts/ui/widgets/dataTable.js
@@ -177,14 +177,19 @@
var sortData = [];
var numericDataCount = 0;
$elems.each(function() {
- var text = $(this).html();
+ var text = $(this);
if (hasAllRowsSameValue) {
- if (firstElem !== text) {
+ if (firstElem !== text.html()) {
hasAllRowsSameValue = false;
}
}
+ if (text.children()) {
+ text = text.children().html();
+ } else {
+ text = text.html();
+ }
if (isNumeric(text) || !text) {
- numericDataCount++;
+ numericDataCount += 1;
}
sortData.push($(this));
});
