You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by da...@apache.org on 2015/11/28 17:48:48 UTC
[1/2] git commit: updated refs/heads/4.6 to 2733c38
Repository: cloudstack
Updated Branches:
refs/heads/4.6 399d052f8 -> 2733c3835
CLOUDSTACK-9020: UI enhancements from metrics view
- Sortable columns
- Logos with cloudmonkey
- Wider UI
- CSS fixes and new status icons
- Configurable UI list api requests page size
- IP address column on instances page
- Listview widget enhancements
Signed-off-by: Rohit Yadav <ro...@shapeblue.com>
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/13f13194
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/13f13194
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/13f13194
Branch: refs/heads/4.6
Commit: 13f1319453fdbf525f3a88d46f958e4411afb25d
Parents: 3f7a86d
Author: Rohit Yadav <ro...@shapeblue.com>
Authored: Mon Nov 23 11:40:46 2015 +0530
Committer: Rohit Yadav <ro...@shapeblue.com>
Committed: Wed Nov 25 14:15:13 2015 +0530
----------------------------------------------------------------------
.../config/ApiServiceConfiguration.java | 4 +-
ui/css/cloudstack3.css | 175 +++++++++++-----
ui/images/logo-login-oss.png | Bin 22165 -> 10864 bytes
ui/images/logo.png | Bin 21781 -> 9257 bytes
ui/images/sprites.png | Bin 194105 -> 198421 bytes
ui/scripts/cloudStack.js | 20 ++
ui/scripts/instances.js | 10 +
ui/scripts/system.js | 16 +-
ui/scripts/ui/widgets/cloudBrowser.js | 8 +
ui/scripts/ui/widgets/dataTable.js | 96 +++++++--
ui/scripts/ui/widgets/listView.js | 204 +++++++++++++++++--
11 files changed, 441 insertions(+), 92 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java
----------------------------------------------------------------------
diff --git a/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java b/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java
index 94c0a55..701af62 100644
--- a/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java
+++ b/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java
@@ -26,6 +26,8 @@ public class ApiServiceConfiguration implements Configurable {
public static final ConfigKey<String> ManagementHostIPAdr = new ConfigKey<String>("Advanced", String.class, "host", "localhost", "The ip address of management server", true);
public static final ConfigKey<String> ApiServletPath = new ConfigKey<String>("Advanced", String.class, "endpointe.url", "http://localhost:8080/client/api",
"API end point. Can be used by CS components/services deployed remotely, for sending CS API requests", true);
+ public static final ConfigKey<Long> DefaultUIPageSize = new ConfigKey<Long>("Advanced", Long.class, "default.ui.page.size", "20",
+ "The default pagesize to be used by UI and other clients when making list* API calls", true, ConfigKey.Scope.Global);
@Override
public String getConfigComponentName() {
@@ -34,7 +36,7 @@ public class ApiServiceConfiguration implements Configurable {
@Override
public ConfigKey<?>[] getConfigKeys() {
- return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath};
+ return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath, DefaultUIPageSize};
}
}
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 2ea8537..22f7409 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -46,7 +46,7 @@ div.toolbar,
/*+}*/
body {
- min-width: 1024px;
+ min-width: 1224px;
font-family: sans-serif;
overflow: auto;
background: #EDE8E8;
@@ -61,7 +61,7 @@ body.install-wizard {
}
#main-area {
- width: 1024px;
+ width: 1224px;
height: 729px;
margin: auto;
border: 1px solid #D4D4D4;
@@ -96,8 +96,8 @@ a:hover {
/*Table*/
table {
- width: 740px;
- max-width: 777px;
+ width: 940px;
+ max-width: 977px;
margin: 15px 15px 12px 12px;
font-size: 13px;
text-align: left;
@@ -146,7 +146,7 @@ table thead th.sorted.asc {
table tbody td,
table th {
- padding: 10px 5px 8px;
+ padding: 10px 5px 6px;
border-right: 1px solid #BFBFBF;
color: #282828;
clear: none;
@@ -480,8 +480,8 @@ body.login {
}
.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 @@ div.panel div.list-view {
}
.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.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 @@ div.panel div.list-view div.fixed-header {
position: absolute;
top: 29px;
left: 12px;
- width: 760px;
+ width: 960px;
height: 47px;
display: table;
background-color: #F7F7F7;
@@ -1330,9 +1330,9 @@ div.panel div.list-view div.fixed-header {
}
.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 @@ div.panel div.list-view div.fixed-header table {
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;
@@ -1393,7 +1393,7 @@ div.list-view td.state span {
-webkit-text-shadow: 0px 1px 1px #FFFFFF;
-o-text-shadow: 0px 1px 1px #FFFFFF;
text-shadow: 0px 1px 1px #FFFFFF;
- background: url(../images/sprites.png) 1px -536px;
+ background: url(../images/sprites.png) 1px -526px;
}
div.list-view td.state.on span {
@@ -1407,7 +1407,69 @@ div.list-view td.state.off span {
background-image: url(../images/sprites.png);
background-repeat: no-repeat;
color: #B90606;
- background-position: 1px -496px;
+ background-position: 1px -492px;
+}
+
+div.list-view td.state.warning span {
+ background-image: url(../images/sprites.png);
+ background-repeat: no-repeat;
+ color: #B90606;
+ background-position: 1px -558px;
+}
+
+div.list-view td.state.transition span {
+ background-image: url(../images/sprites.png);
+ background-repeat: no-repeat;
+ color: #B90606;
+ background-position: 1px -432px;
+}
+
+.horizontal-overflow tbody td, .horizontal-overflow thead th {
+ min-width: 40px;
+ padding: 10px 10px 5px 0px;
+}
+
+.horizontal-overflow th.quick-view {
+ padding-left: 5px;
+}
+
+.groupable-header {
+ background: url(../images/bg-table-head.png);
+ border-left: 1px solid #C6C3C3;
+ border-right: 1px solid #C6C3C3;
+}
+
+.groupable-header-columns th {
+ border: none;
+}
+
+table.horizontal-overflow td.state {
+ width: 55px;
+ min-width: 55px;
+ max-width: 55px;
+}
+
+table.no-split td.first {
+ min-width: 150px;
+}
+
+.groupable-header-border {
+ border-left: 1px solid #C6C3C3;
+ border-right: 1px solid #C6C3C3;
+}
+
+td.alert-notification-threshold {
+ color: #E87900;
+ background-color: rgba(255, 231, 175, 0.75);
+}
+
+td.alert-disable-threshold {
+ color: #F50000;
+ background-color: rgba(255, 190, 190, 0.75);
+}
+
+span.compact {
+ height: 16px;
}
/** Quick view tooltip*/
@@ -1828,7 +1890,7 @@ div.list-view td.state.off span {
}
.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 );
@@ -2373,7 +2435,7 @@ div.detail-group.actions td {
}
#header.nologo div.logo {
- width: 1024px;
+ width: 1224px;
height: 47px;
margin: auto;
background: url(../images/logo.png) no-repeat 0 center;
@@ -2384,7 +2446,7 @@ div.detail-group.actions td {
}
#header div.controls {
- width: 1026px;
+ width: 1226px;
height: 48px;
position: relative;
margin: 27px auto 0;
@@ -2492,7 +2554,7 @@ div.detail-group.actions td {
margin: 0;
position: absolute;
top: -47px;
- left: 890px;
+ left: 1090px;
cursor: default !important;
display: inline-block;
float: left;
@@ -2882,9 +2944,9 @@ div.detail-group.actions td {
/*Browser*/
#browser {
- width: 794px;
+ width: 994px;
height: 100%;
- max-width: 794px;
+ max-width: 994px;
position: relative;
float: left;
overflow: hidden;
@@ -3006,7 +3068,7 @@ div.detail-group.actions td {
}
.detail-view .ui-tabs-panel div.toolbar {
- width: 768px;
+ width: 968px;
background: transparent;
border: none;
margin-top: 8px;
@@ -3172,7 +3234,7 @@ div.toolbar div.button.main-action span.icon {
div.toolbar div.button.refresh {
float: right;
- margin: 0 15px 0 0;
+ margin: 0 20px 0 0;
}
div.toolbar div.button.refresh span {
@@ -4295,7 +4357,7 @@ textarea {
}
.dashboard.admin .dashboard-container.sub {
- width: 368px;
+ width: 468px;
}
.dashboard.admin .dashboard-container.sub .button.view-all,
@@ -4353,7 +4415,7 @@ textarea {
/**** Head*/
.dashboard.admin .dashboard-container.head {
- width: 766px;
+ width: 966px;
height: 331px;
margin: 9px 0 0;
float: left;
@@ -4413,7 +4475,7 @@ textarea {
/**** Charts / stats*/
.dashboard.admin .zone-stats {
- width: 774px;
+ width: 974px;
height: 316px;
overflow: auto;
overflow-x: hidden;
@@ -4424,7 +4486,7 @@ textarea {
}
.dashboard.admin .zone-stats ul {
- width: 796px;
+ width: 996px;
/*+placement:shift -2px 11px;*/
position: relative;
left: -2px;
@@ -4432,7 +4494,7 @@ textarea {
}
.dashboard.admin .zone-stats ul li {
- width: 388px;
+ width: 488px;
font-size: 14px;
height: 79px;
float: left;
@@ -4452,7 +4514,7 @@ textarea {
}
.dashboard.admin .zone-stats ul li .label {
- width: 111px;
+ width: 161px;
float: left;
font-weight: 100;
border-bottom: 1px solid #E2E2E2;
@@ -4623,7 +4685,7 @@ textarea {
}
.dashboard.admin .dashboard-container.sub.alerts ul {
- width: 368px;
+ width: 468px;
height: 234px;
overflow: auto;
overflow-x: hidden;
@@ -5083,7 +5145,7 @@ textarea {
}
.system-chart.dashboard.admin .dashboard-container {
- width: 740px;
+ width: 930px;
border: none;
}
@@ -5104,7 +5166,7 @@ textarea {
}
.system-chart.dashboard.admin .dashboard-container .stats .chart {
- width: 136px;
+ width: 300px;
}
/** Compute*/
@@ -5121,7 +5183,7 @@ textarea {
}
.system-chart.compute ul.resources li.zone {
- left: 96px;
+ left: 196px;
}
.system-chart.compute ul.resources li.zone .label {
@@ -5133,32 +5195,32 @@ textarea {
}
.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;
}
@@ -8079,6 +8141,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.detail-view .multi-edit select {
width: 93%;
font-size: 10px;
+ min-width: 80px;
}
.multi-edit input {
@@ -9017,7 +9080,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.network-chart li.firewall {
/*+placement:shift 282px 188px;*/
position: relative;
- left: 282px;
+ left: 356px;
top: 188px;
position: absolute;
}
@@ -9025,7 +9088,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.network-chart li.loadBalancing {
/*+placement:shift 167px 342px;*/
position: relative;
- left: 167px;
+ left: 237px;
top: 342px;
position: absolute;
}
@@ -9033,7 +9096,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.network-chart li.portForwarding {
/*+placement:shift 401px 342px;*/
position: relative;
- left: 401px;
+ left: 480px;
top: 342px;
position: absolute;
}
@@ -9110,7 +9173,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
/*System Dashboard*/
.system-dashboard {
height: 258px;
- width: 762px;
+ width: 962px;
display: block;
/*+border-radius:3px;*/
-moz-border-radius: 3px;
@@ -9208,7 +9271,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
position: relative;
left: 18px;
top: 110px;
- width: 78%;
+ width: 83%;
position: absolute;
text-align: center;
padding: 8px 0;
@@ -9223,7 +9286,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.system-dashboard .status_box li {
height: 178px;
- width: 178px;
+ width: 228px;
padding: 0;
margin: 0 0 0 8px;
/*+border-radius:3px;*/
@@ -9247,7 +9310,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
padding: 65px 80px 5px;
/*+placement:shift 31px 19px;*/
position: relative;
- left: 31px;
+ left: 51px;
top: 19px;
position: absolute;
/*+opacity:56%;*/
@@ -9284,7 +9347,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
/*+placement:shift 13px 5px;*/
position: relative;
left: 13px;
- top: 5px;
+ top: 13px;
font-weight: 100;
}
@@ -12433,6 +12496,22 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
background-position: 0px -707px;
}
+.viewMetrics .icon {
+ background-position: -40px -32px;
+}
+
+.viewMetrics:hover .icon {
+ background-position: -40px -32px;
+}
+
+.refreshMetrics .icon {
+ background-position: 0px -62px;
+}
+
+.refreshMetrics:hover .icon {
+ background-position: 0px -62px;
+}
+
.attach .icon,
.attachISO .icon,
.attachDisk .icon,
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/images/logo-login-oss.png
----------------------------------------------------------------------
diff --git a/ui/images/logo-login-oss.png b/ui/images/logo-login-oss.png
index e0f3767..92fc81c 100644
Binary files a/ui/images/logo-login-oss.png and b/ui/images/logo-login-oss.png differ
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/images/logo.png
----------------------------------------------------------------------
diff --git a/ui/images/logo.png b/ui/images/logo.png
index f36a9cb..2e3aae9 100644
Binary files a/ui/images/logo.png and b/ui/images/logo.png differ
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/images/sprites.png
----------------------------------------------------------------------
diff --git a/ui/images/sprites.png b/ui/images/sprites.png
index 1a6eaa5..0ddafaf 100755
Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/scripts/cloudStack.js
----------------------------------------------------------------------
diff --git a/ui/scripts/cloudStack.js b/ui/scripts/cloudStack.js
index 8137043..b5aa94a 100644
--- a/ui/scripts/cloudStack.js
+++ b/ui/scripts/cloudStack.js
@@ -165,6 +165,26 @@
}
});
+ // Update global pagesize for list APIs in UI
+ $.ajax({
+ type: 'GET',
+ url: createURL('listConfigurations'),
+ data: {name: 'default.ui.page.size'},
+ dataType: 'json',
+ async: false,
+ success: function(data, textStatus, xhr) {
+ if (data && data.listconfigurationsresponse && data.listconfigurationsresponse.configuration) {
+ var config = data.listconfigurationsresponse.configuration[0];
+ if (config && config.name == 'default.ui.page.size') {
+ pageSize = parseInt(config.value);
+ }
+ }
+ },
+ error: function(xhr) { // ignore any errors, fallback to the default
+ },
+ });
+
+
// Populate IDP list
$.ajax({
type: 'GET',
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/scripts/instances.js
----------------------------------------------------------------------
diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js
index 5096297..da5a142 100644
--- a/ui/scripts/instances.js
+++ b/ui/scripts/instances.js
@@ -170,6 +170,9 @@
label: 'label.display.name',
truncate: true
},
+ ipaddress: {
+ label: 'label.ip.address'
+ },
zonename: {
label: 'label.zone.name'
},
@@ -381,6 +384,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
});
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/scripts/system.js
----------------------------------------------------------------------
diff --git a/ui/scripts/system.js b/ui/scripts/system.js
index c2680b8..e57a713 100644
--- a/ui/scripts/system.js
+++ b/ui/scripts/system.js
@@ -7709,7 +7709,7 @@
}
}
},
- show: cloudStack.uiCustom.physicalResources({
+ physicalResourceSection: {
sections: {
physicalResources: {
type: 'select',
@@ -7792,7 +7792,7 @@
});
}
}
- }
+ },
},
detailView: {
@@ -9484,7 +9484,7 @@
}
}
}
- }),
+ },
subsections: {
virtualRouters: {
sectionSelect: {
@@ -15226,11 +15226,12 @@
}
if (! args.context.instances) {
- array1.push("&zoneid=" + args.context.zones[0].id);
+ if ("zones" in args.context)
+ array1.push("&zoneid=" + args.context.zones[0].id);
if ("pods" in args.context)
- array1.push("&podid=" + args.context.pods[0].id);
+ array1.push("&podid=" + args.context.pods[0].id);
if ("clusters" in args.context)
- array1.push("&clusterid=" + args.context.clusters[0].id);
+ array1.push("&clusterid=" + args.context.clusters[0].id);
} else {
//Instances menu > Instance detailView > View Hosts
array1.push("&id=" + args.context.instances[0].hostid);
@@ -19883,6 +19884,9 @@
}
}
+ // Inject cloudStack infra page
+ cloudStack.sections.system.show = cloudStack.uiCustom.physicalResources(cloudStack.sections.system.physicalResourceSection);
+
function addExternalLoadBalancer(args, physicalNetworkObj, apiCmd, apiCmdRes, apiCmdObj) {
var array1 =[];
array1.push("&physicalnetworkid=" + physicalNetworkObj.id);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/scripts/ui/widgets/cloudBrowser.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js
index 007025b..b7a5c38 100644
--- a/ui/scripts/ui/widgets/cloudBrowser.js
+++ b/ui/scripts/ui/widgets/cloudBrowser.js
@@ -321,6 +321,14 @@
return $panel;
},
+ removeLastPanel: function(args) {
+ $('div.panel:last').stop(); // Prevent destroyed panels from animating
+ this.element.find('div.panel:last').remove();
+ this.element.find('div.panel:last').removeClass('reduced');
+ $('#breadcrumbs').find('ul li:last').remove();
+ $('#breadcrumbs').find('ul div.end').remove();
+ },
+
/**
* Clear all panels
*/
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/scripts/ui/widgets/dataTable.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js
index 4c02531..4574052 100644
--- a/ui/scripts/ui/widgets/dataTable.js
+++ b/ui/scripts/ui/widgets/dataTable.js
@@ -141,49 +141,100 @@
* @param columnIndex Index of column (starting at 0) to sort by
*/
var sortTable = function(columnIndex) {
- return false;
var direction = 'asc';
- if ($table.find('thead th').hasClass('sorted ' + direction)) {
+ if ($table.find('thead tr:last th').hasClass('sorted ' + direction)) {
direction = 'desc';
}
- $table.find('thead th').removeClass('sorted desc asc');
- $($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction);
+ $table.find('thead tr:last th').removeClass('sorted desc asc');
+ $($table.find('thead tr:last th')[columnIndex]).addClass('sorted').addClass(direction);
var $elems = $table.find('tbody td').filter(function() {
return $(this).index() == columnIndex;
});
+ if ($elems.length < 2) {
+ return;
+ }
+
+ var stringComparator = function(a,b) {
+ return a.html().localeCompare(b.html());
+ };
+ var numericComparator = function(a,b) {
+ return parseFloat(a.children().html()) < parseFloat(b.children().html()) ? 1 : -1;
+ };
+ var stateComparator = function(a,b) {
+ return a.attr('title').localeCompare(b.attr('title'));
+ };
+ var isNumeric = function(obj) {
+ return !$.isArray(obj) && !isNaN(parseFloat(obj)) && isFinite(parseFloat(obj));
+ }
+
+ var comparator = stringComparator;
+ var hasAllRowsSameValue = true;
+ var firstElem = $($elems[0]).html();
var sortData = [];
+ var numericDataCount = 0;
$elems.each(function() {
- sortData.push($(this).html());
- sortData.sort();
-
- if (direction == 'asc') {
- sortData.reverse();
+ var text = $(this);
+ if (hasAllRowsSameValue) {
+ if (firstElem !== text.html()) {
+ hasAllRowsSameValue = false;
+ }
+ }
+ if (text.children()) {
+ text = text.children().html();
+ } else {
+ text = text.html();
}
+ if (isNumeric(text) || !text) {
+ numericDataCount += 1;
+ }
+ sortData.push($(this));
});
+ if ($($elems[0]).hasClass('state')) {
+ comparator = stateComparator;
+ } else {
+ if (hasAllRowsSameValue) {
+ return;
+ }
+ if (columnIndex != 0 && numericDataCount > ($elems.length / 4)) {
+ comparator = numericComparator;
+ }
+ }
+
+ sortData.sort(comparator);
+
+ if (direction == 'asc') {
+ sortData.reverse();
+ }
+
+ var elements = [];
$(sortData).each(function() {
- var sortKey = this;
- var $targetCell = $elems.filter(function() {
- return $(this).html() == sortKey;
- });
- var $targetContainer = $targetCell.parent();
+ elements.push($(this).parent().clone(true));
+ });
- $targetContainer.remove().appendTo($table.find('tbody'));
+ var $tbody = $table.find('tbody');
+ $tbody.empty();
+ $(elements).each(function() {
+ $(this).appendTo($tbody);
});
computeEvenOddRows();
};
var resizeHeaders = function() {
- var $thead = $table.closest('div.data-table').find('thead');
+ var $thead = $table.hasClass('no-split') ? $table.find('thead') : $table.closest('div.data-table').find('thead');
var $tbody = $table.find('tbody');
var $ths = $thead.find('th');
var $tds = $tbody.find('tr:first td');
+ if ($table.hasClass('no-split')) {
+ $tbody.width($thead.width());
+ }
+
if ($ths.size() > $tds.size()) {
$ths.width(
$table.width() / $ths.size()
@@ -194,6 +245,10 @@
$ths.each(function() {
var $th = $(this);
+ if ($th.hasClass('collapsible-column')) {
+ return true;
+ }
+
var $td = $tds.filter(function() {
return $(this).index() == $th.index();
});
@@ -238,9 +293,12 @@
$table.find('tbody').closest('table').addClass('body');
}
- $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
- $table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
- $table.find('th:not(:has(input))').bind('click', function(event) {
+ if (!$table.hasClass('horizontal-overflow')) {
+ $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
+ $table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
+ }
+
+ $table.find('thead tr:last th:not(:has(input)):not(.collapsible-column):not(.quick-view)').unbind('click').bind('click', function(event) {
if ($(this).hasClass('resizable')) {
return false;
}
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/13f13194/ui/scripts/ui/widgets/listView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index c3c6930..c0740aa 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -765,10 +765,12 @@
var createHeader = function(preFilter, fields, $table, actions, options) {
if (!options) options = {};
- var $thead = $('<thead>').prependTo($table).append($('<tr>'));
+ var $tr = $('<tr>');
+ var $thead = $('<thead>').prependTo($table).append($tr);
var reorder = options.reorder;
var detailView = options.detailView;
var multiSelect = options.multiSelect;
+ var groupableColumns = options.groupableColumns;
var viewArgs = $table.closest('.list-view').data('view-args');
var uiCustom = viewArgs.uiCustom;
var hiddenFields = [];
@@ -776,8 +778,110 @@
if (preFilter != null)
hiddenFields = preFilter();
+ var addColumnToTr = function($tr, key, colspan, label, needsCollapsibleColumn) {
+ var trText = _l(label);
+ var $th = $('<th>').addClass(key).attr('colspan', colspan).appendTo($tr);
+ if ($th.index()) $th.addClass('reduced-hide');
+ $th.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3'});
+ if (needsCollapsibleColumn) {
+ var karetLeft = $('<span>').css({'margin-right': '10px'});
+ karetLeft.attr('title', trText);
+ karetLeft.appendTo($th);
+ $('<span>').html('«').css({'font-size': '15px', 'float': 'right'}).appendTo(karetLeft);
+ $('<span>').html(trText).appendTo(karetLeft);
+
+ $th.click(function(event) {
+ event.stopPropagation();
+ var $th = $(this);
+ var startIndex = 0;
+ $th.prevAll('th').each(function() {
+ startIndex += parseInt($(this).attr('colspan'));
+ });
+ var endIndex = startIndex + parseInt($th.attr('colspan'));
+ // Hide Column group
+ $th.hide();
+ $th.closest('table').find('tbody td').filter(function() {
+ return $(this).index() >= startIndex && $(this).index() < endIndex;
+ }).hide();
+ $th.closest('table').find('thead tr:last th').filter(function() {
+ return $(this).index() >= startIndex && $(this).index() < endIndex;
+ }).hide();
+ // Show collapsible column with blank cells
+ $th.next('th').show();
+ $th.closest('table').find('tbody td').filter(function() {
+ return $(this).index() == endIndex;
+ }).show();
+ $th.closest('table').find('thead tr:last th').filter(function() {
+ return $(this).index() == endIndex;
+ }).show();
+ // Refresh list view
+ $tr.closest('.list-view').find('.no-split').dataTable('refresh');
+ });
+
+ var karetRight = addColumnToTr($tr, 'collapsible-column', 1, '');
+ $('<span>').html(trText.substring(0,3)).appendTo(karetRight);
+ $('<span>').css({'font-size': '15px'}).html(' »').appendTo(karetRight);
+ karetRight.attr('title', trText);
+ karetRight.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3', 'min-width': '10px', 'width': '10px', 'max-width': '45px', 'padding': '2px'});
+ karetRight.hide();
+ karetRight.click(function(event) {
+ event.stopPropagation();
+ var prevTh = $(this).prev('th');
+ var startIndex = 0;
+ prevTh.prevAll('th').each(function() {
+ startIndex += parseInt($(this).attr('colspan'));
+ });
+ var endIndex = startIndex + parseInt(prevTh.attr('colspan'));
+
+ prevTh.show();
+ prevTh.closest('table').find('tbody td').filter(function() {
+ return $(this).index() >= startIndex && $(this).index() < endIndex;
+ }).show();
+ prevTh.closest('table').find('thead tr:last th').filter(function() {
+ return $(this).index() >= startIndex && $(this).index() < endIndex;
+ }).show();
+
+ prevTh.next('th').hide();
+ prevTh.closest('table').find('tbody td').filter(function() {
+ return $(this).index() == endIndex;
+ }).hide();
+ prevTh.closest('table').find('thead tr:last th').filter(function() {
+ return $(this).index() == endIndex;
+ }).hide();
+
+ $tr.closest('.list-view').find('.no-split').dataTable('refresh');
+ });
+ } else {
+ $th.html(trText);
+ }
+ return $th;
+ };
+
+ if (groupableColumns) {
+ $tr.addClass('groupable-header-columns').addClass('groupable-header');
+ $.each(fields, function(key) {
+ var field = this;
+ if (field.columns) {
+ var colspan = Object.keys(field.columns).length;
+ addColumnToTr($tr, key, colspan, field.label, true);
+ } else {
+ var label = '';
+ if (key == 'name') {
+ label = 'label.resources';
+ }
+ addColumnToTr($tr, key, 1, label);
+ }
+ return true;
+ });
+ if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
+ addColumnToTr($tr, 'quick-view', 1, '');
+ }
+ $tr = $('<tr>').appendTo($thead);
+ $tr.addClass('groupable-header');
+ }
+
if (multiSelect) {
- var $th = $('<th>').addClass('multiselect').appendTo($thead.find('tr'));
+ var $th = $('<th>').addClass('multiselect').appendTo($tr);
var content = $('<input>')
.attr('type', 'checkbox')
.addClass('multiSelectMasterCheckbox')
@@ -794,18 +898,24 @@
if ($.inArray(key, hiddenFields) != -1)
return true;
var field = this;
- var $th = $('<th>').addClass(key).appendTo($thead.find('tr'));
-
- if ($th.index()) $th.addClass('reduced-hide');
-
- $th.html(_l(field.label));
-
+ if (field.columns) {
+ $.each(field.columns, function(idx) {
+ var subfield = this;
+ addColumnToTr($tr, key, 1, subfield.label);
+ return true;
+ });
+ var blankCell = addColumnToTr($tr, 'collapsible-column', 1, '');
+ blankCell.css({'min-width': '10px', 'width': '10px'});
+ blankCell.hide();
+ } else {
+ addColumnToTr($tr, key, 1, field.label);
+ }
return true;
});
// Re-order row buttons
if (reorder) {
- $thead.find('tr').append(
+ $tr.append(
$('<th>').html(_l('label.order')).addClass('reorder-actions reduced-hide')
);
}
@@ -826,7 +936,7 @@
);
if (actions && !options.noActionCol && renderActionCol(actions) && actionsArray.length != headerActionsArray.length) {
- $thead.find('tr').append(
+ $tr.append(
$('<th></th>')
.html(_l('label.actions'))
.addClass('actions reduced-hide')
@@ -835,7 +945,7 @@
// Quick view
if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
- $thead.find('tr').append(
+ $tr.append(
$('<th></th>')
.html(_l('label.quickview'))
.addClass('quick-view reduced-hide')
@@ -1033,6 +1143,7 @@
var listViewArgs = $listView.data('view-args');
var uiCustom = listViewArgs.uiCustom;
var subselect = uiCustom ? listViewArgs.listView.subselect : null;
+ var hasCollapsibleColumn = false;
if (!(data && data.length)) {
$listView.data('end-of-table', true);
@@ -1088,8 +1199,25 @@
);
}
- // Add field data
+ var reducedFields = {};
+ var idx = 0;
$.each(fields, function(key) {
+ var field = this;
+ if (field.columns) {
+ $.each(field.columns, function(innerKey) {
+ reducedFields[innerKey] = this;
+ });
+ reducedFields['blank-cell-' + idx] = {blankCell: true};
+ idx += 1;
+ hasCollapsibleColumn = true;
+ } else {
+ reducedFields[key] = this;
+ }
+ return true;
+ });
+
+ // Add field data
+ $.each(reducedFields, function(key) {
if ($.inArray(key, hiddenFields) != -1)
return true;
var field = this;
@@ -1103,6 +1231,11 @@
$td.addClass('truncated');
}
+ if (field.blankCell) {
+ $td.css({'min-width': '10px', 'width': '10px'});
+ $td.hide();
+ }
+
if (field.indicator) {
$td.addClass('state').addClass(field.indicator[content]);
@@ -1110,6 +1243,19 @@
//$tr.find('td:first').addClass('item-state-' + field.indicator[content]);
}
+ if (field.thresholdcolor && field.thresholds) {
+ if ((field.thresholds.disable in dataItem) && (field.thresholds.notification in dataItem)) {
+ var disableThreshold = parseFloat(dataItem[field.thresholds.disable]);
+ var notificationThreshold = parseFloat(dataItem[field.thresholds.notification]);
+ var value = parseFloat(content);
+ if (value >= disableThreshold) {
+ $td.addClass('alert-disable-threshold');
+ } else if (value >= notificationThreshold) {
+ $td.addClass('alert-notification-threshold');
+ }
+ }
+ }
+
if (field.id == true) id = field.id;
if ($td.index()) $td.addClass('reduced-hide');
if (field.action) {
@@ -1140,9 +1286,12 @@
$('<pre>').html(_s(content))
);
} else {
- $td.append(
- $('<span>').html(_s(content))
- );
+ var span = $('<span>').html(_s(content));
+ if (field.compact) {
+ span.addClass('compact');
+ span.html('');
+ }
+ $td.append(span);
}
}
@@ -1380,8 +1529,8 @@
.appendTo($tr);
$quickView.mouseover(
// Show quick view
-
function() {
+ var $quickView = $(this);
var $quickViewTooltip = $('<div>').addClass('quick-view-tooltip hovered-elem');
var $tr = $quickView.closest('tr');
var $listView = $tr.closest('.list-view');
@@ -1465,7 +1614,7 @@
});
$quickViewTooltip.css({
position: 'absolute',
- left: $tr.offset().left + $tr.width() - $quickViewTooltip.width(),
+ left: $quickView.offset().left + $quickView.outerWidth() - $quickViewTooltip.width() - 2*(parseInt($quickView.css('border-left-width')) + parseInt($quickView.css('border-right-width'))),
top: $quickView.offset().top,
zIndex: $tr.closest('.panel').zIndex() + 1
});
@@ -1480,6 +1629,14 @@
}
});
+ // Toggle collapsible column to fix alignment of hidden/shown cells
+ if (hasCollapsibleColumn) {
+ $tbody.closest('table').find('tr:first th.collapsible-column:visible').prev('th').click();
+ }
+
+ // Re-sort table if a column was previously sorted
+ $listView.find('thead tr:last th.sorted').click().click();
+
return rows;
};
@@ -1798,8 +1955,19 @@
reorder: reorder,
detailView: listViewData.detailView,
'multiSelect': multiSelect,
- noActionCol: listViewData.noActionCol
+ noActionCol: listViewData.noActionCol,
+ groupableColumns: listViewData.groupableColumns
});
+
+ if (listViewData.noSplit) {
+ $table.addClass('no-split');
+ }
+
+ if (listViewData.horizontalOverflow) {
+ $table.addClass('horizontal-overflow');
+ $table.parent().css({'overflow-x': 'auto'});
+ }
+
createFilters($toolbar, listViewData.filters);
if (listViewData.hideSearchBar != true) {
[2/2] git commit: updated refs/heads/4.6 to 2733c38
Posted by da...@apache.org.
Merge pull request #1106 from shapeblue/4.6-uifixesmetrics
[4.6] CLOUDSTACK-9020: UI enhancements from metrics view- Sortable columns
- Logos with cloudmonkey
- Wider UI
- CSS fixes and new status icons
- Configurable UI list api requests page size
- IP address column on instances page
- Listview widget enhancements
cc @remibergsma @karuturi
* pr/1106:
CLOUDSTACK-9020: UI enhancements from metrics view
Signed-off-by: Daan Hoogland <da...@onecht.net>
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/2733c383
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/2733c383
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/2733c383
Branch: refs/heads/4.6
Commit: 2733c3835460f063ca3f5e28edfd206fbe836e6a
Parents: 399d052 13f1319
Author: Daan Hoogland <da...@onecht.net>
Authored: Sat Nov 28 17:47:30 2015 +0100
Committer: Daan Hoogland <da...@onecht.net>
Committed: Sat Nov 28 17:47:31 2015 +0100
----------------------------------------------------------------------
.../config/ApiServiceConfiguration.java | 4 +-
ui/css/cloudstack3.css | 175 +++++++++++-----
ui/images/logo-login-oss.png | Bin 22165 -> 10864 bytes
ui/images/logo.png | Bin 21781 -> 9257 bytes
ui/images/sprites.png | Bin 194105 -> 198421 bytes
ui/scripts/cloudStack.js | 20 ++
ui/scripts/instances.js | 10 +
ui/scripts/system.js | 16 +-
ui/scripts/ui/widgets/cloudBrowser.js | 8 +
ui/scripts/ui/widgets/dataTable.js | 96 +++++++--
ui/scripts/ui/widgets/listView.js | 204 +++++++++++++++++--
11 files changed, 441 insertions(+), 92 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/2733c383/ui/scripts/instances.js
----------------------------------------------------------------------