apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

CLOUDSTACK-9020: UI enhancements from metrics view

Browse Source 
- 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 <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2015-11-23 11:40:46 +05:30
parent 3f7a86d8ef
commit 13f1319453
11 changed files with 443 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java
View File

@ -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> 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", 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); "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 @Override
public String getConfigComponentName() { public String getConfigComponentName() {
@ -34,7 +36,7 @@ public class ApiServiceConfiguration implements Configurable {
@Override @Override
public ConfigKey<?>[] getConfigKeys() { public ConfigKey<?>[] getConfigKeys() {
return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath}; return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath, DefaultUIPageSize};
} }
} }

175
ui/css/cloudstack3.css
View File

@ -46,7 +46,7 @@ div.toolbar,
/*+}*/ /*+}*/
body { body {
min-width: 1024px; min-width: 1224px;
font-family: sans-serif; font-family: sans-serif;
overflow: auto; overflow: auto;
background: #EDE8E8; background: #EDE8E8;
@ -61,7 +61,7 @@ body.install-wizard {
} }
#main-area { #main-area {
width: 1024px; width: 1224px;
height: 729px; height: 729px;
margin: auto; margin: auto;
border: 1px solid #D4D4D4; border: 1px solid #D4D4D4;
@ -96,8 +96,8 @@ a:hover {
/*Table*/ /*Table*/
table { table {
width: 740px; width: 940px;
max-width: 777px; max-width: 977px;
margin: 15px 15px 12px 12px; margin: 15px 15px 12px 12px;
font-size: 13px; font-size: 13px;
text-align: left; text-align: left;
@ -146,7 +146,7 @@ table thead th.sorted.asc {
table tbody td, table tbody td,
table th { table th {
padding: 10px 5px 8px; padding: 10px 5px 6px;
border-right: 1px solid #BFBFBF; border-right: 1px solid #BFBFBF;
color: #282828; color: #282828;
clear: none; clear: none;
@ -480,8 +480,8 @@ body.login {
} }
.login .logo { .login .logo {
width: 250px; width: 290px;
height: 31px; height: 40px;
float: left; float: left;
margin: 72px 0 0 209px; margin: 72px 0 0 209px;
background: url(../images/logo-login.png) no-repeat 0 0; background: url(../images/logo-login.png) no-repeat 0 0;
@ -1297,7 +1297,7 @@ div.panel div.list-view {
} }
.detail-view div.list-view { .detail-view div.list-view {
width: 730px; width: 930px;
border: 1px solid #DAD4D4; border: 1px solid #DAD4D4;
margin: 41px auto auto !important; margin: 41px auto auto !important;
height: 536px !important; height: 536px !important;
@ -1305,12 +1305,12 @@ div.panel div.list-view {
} }
div.panel div.list-view div.data-table table { div.panel div.list-view div.data-table table {
width: 755px; width: 955px;
margin-top: 44px; margin-top: 44px;
} }
.detail-view div.list-view div.data-table table { .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 { .detail-view div.list-view div.data-table table td {
@ -1321,7 +1321,7 @@ div.panel div.list-view div.fixed-header {
position: absolute; position: absolute;
top: 29px; top: 29px;
left: 12px; left: 12px;
width: 760px; width: 960px;
height: 47px; height: 47px;
display: table; display: table;
background-color: #F7F7F7; background-color: #F7F7F7;
@ -1330,9 +1330,9 @@ div.panel div.list-view div.fixed-header {
} }
.detail-view div.list-view div.fixed-header { .detail-view div.list-view div.fixed-header {
width: 703px !important; width: 903px !important;
top: 49px !important; top: 49px !important;
left: 32px !important; left: 29px !important;
background: #FFFFFF; background: #FFFFFF;
} }
@ -1354,7 +1354,7 @@ div.panel div.list-view div.fixed-header table {
position: relative; position: relative;
left: 0px; left: 0px;
top: 18px; top: 18px;
width: 755px; width: 955px;
/*+box-shadow:0px 4px 10px #DFE1E3;*/ /*+box-shadow:0px 4px 10px #DFE1E3;*/
-moz-box-shadow: 0px 4px 10px #DFE1E3; -moz-box-shadow: 0px 4px 10px #DFE1E3;
-webkit-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; -webkit-text-shadow: 0px 1px 1px #FFFFFF;
-o-text-shadow: 0px 1px 1px #FFFFFF; -o-text-shadow: 0px 1px 1px #FFFFFF;
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 { 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-image: url(../images/sprites.png);
background-repeat: no-repeat; background-repeat: no-repeat;
color: #B90606; 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*/ /** Quick view tooltip*/
@ -1828,7 +1890,7 @@ div.list-view td.state.off span {
} }
.detail-group table { .detail-group table {
width: 96%; width: 98%;
font-size: 12px; font-size: 12px;
border-bottom: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 ); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 );
@ -2373,7 +2435,7 @@ div.detail-group.actions td {
} }
#header.nologo div.logo { #header.nologo div.logo {
width: 1024px; width: 1224px;
height: 47px; height: 47px;
margin: auto; margin: auto;
background: url(../images/logo.png) no-repeat 0 center; background: url(../images/logo.png) no-repeat 0 center;
@ -2384,7 +2446,7 @@ div.detail-group.actions td {
} }
#header div.controls { #header div.controls {
width: 1026px; width: 1226px;
height: 48px; height: 48px;
position: relative; position: relative;
margin: 27px auto 0; margin: 27px auto 0;
@ -2492,7 +2554,7 @@ div.detail-group.actions td {
margin: 0; margin: 0;
position: absolute; position: absolute;
top: -47px; top: -47px;
left: 890px; left: 1090px;
cursor: default !important; cursor: default !important;
display: inline-block; display: inline-block;
float: left; float: left;
@ -2882,9 +2944,9 @@ div.detail-group.actions td {
/*Browser*/ /*Browser*/
#browser { #browser {
width: 794px; width: 994px;
height: 100%; height: 100%;
max-width: 794px; max-width: 994px;
position: relative; position: relative;
float: left; float: left;
overflow: hidden; overflow: hidden;
@ -3006,7 +3068,7 @@ div.detail-group.actions td {
} }
.detail-view .ui-tabs-panel div.toolbar { .detail-view .ui-tabs-panel div.toolbar {
width: 768px; width: 968px;
background: transparent; background: transparent;
border: none; border: none;
margin-top: 8px; margin-top: 8px;
@ -3172,7 +3234,7 @@ div.toolbar div.button.main-action span.icon {
div.toolbar div.button.refresh { div.toolbar div.button.refresh {
float: right; float: right;
margin: 0 15px 0 0; margin: 0 20px 0 0;
} }
div.toolbar div.button.refresh span { div.toolbar div.button.refresh span {
@ -4295,7 +4357,7 @@ textarea {
} }
.dashboard.admin .dashboard-container.sub { .dashboard.admin .dashboard-container.sub {
width: 368px; width: 468px;
} }
.dashboard.admin .dashboard-container.sub .button.view-all, .dashboard.admin .dashboard-container.sub .button.view-all,
@ -4353,7 +4415,7 @@ textarea {
/**** Head*/ /**** Head*/
.dashboard.admin .dashboard-container.head { .dashboard.admin .dashboard-container.head {
width: 766px; width: 966px;
height: 331px; height: 331px;
margin: 9px 0 0; margin: 9px 0 0;
float: left; float: left;
@ -4413,7 +4475,7 @@ textarea {
/**** Charts / stats*/ /**** Charts / stats*/
.dashboard.admin .zone-stats { .dashboard.admin .zone-stats {
width: 774px; width: 974px;
height: 316px; height: 316px;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
@ -4424,7 +4486,7 @@ textarea {
} }
.dashboard.admin .zone-stats ul { .dashboard.admin .zone-stats ul {
width: 796px; width: 996px;
/*+placement:shift -2px 11px;*/ /*+placement:shift -2px 11px;*/
position: relative; position: relative;
left: -2px; left: -2px;
@ -4432,7 +4494,7 @@ textarea {
} }
.dashboard.admin .zone-stats ul li { .dashboard.admin .zone-stats ul li {
width: 388px; width: 488px;
font-size: 14px; font-size: 14px;
height: 79px; height: 79px;
float: left; float: left;
@ -4452,7 +4514,7 @@ textarea {
} }
.dashboard.admin .zone-stats ul li .label { .dashboard.admin .zone-stats ul li .label {
width: 111px; width: 161px;
float: left; float: left;
font-weight: 100; font-weight: 100;
border-bottom: 1px solid #E2E2E2; border-bottom: 1px solid #E2E2E2;
@ -4623,7 +4685,7 @@ textarea {
} }
.dashboard.admin .dashboard-container.sub.alerts ul { .dashboard.admin .dashboard-container.sub.alerts ul {
width: 368px; width: 468px;
height: 234px; height: 234px;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
@ -5083,7 +5145,7 @@ textarea {
} }
.system-chart.dashboard.admin .dashboard-container { .system-chart.dashboard.admin .dashboard-container {
width: 740px; width: 930px;
border: none; border: none;
} }
@ -5104,7 +5166,7 @@ textarea {
} }
.system-chart.dashboard.admin .dashboard-container .stats .chart { .system-chart.dashboard.admin .dashboard-container .stats .chart {
width: 136px; width: 300px;
} }
/** Compute*/ /** Compute*/
@ -5121,7 +5183,7 @@ textarea {
} }
.system-chart.compute ul.resources li.zone { .system-chart.compute ul.resources li.zone {
left: 96px; left: 196px;
} }
.system-chart.compute ul.resources li.zone .label { .system-chart.compute ul.resources li.zone .label {
@ -5133,32 +5195,32 @@ textarea {
} }
.system-chart.compute ul.resources li.pods { .system-chart.compute ul.resources li.pods {
left: 199px; left: 299px;
top: 112px; top: 112px;
} }
.system-chart.compute ul.resources li.clusters { .system-chart.compute ul.resources li.clusters {
left: 296px; left: 396px;
top: 189px; top: 189px;
} }
.system-chart.compute ul.resources li.hosts { .system-chart.compute ul.resources li.hosts {
left: 407px; left: 507px;
top: 265px; top: 265px;
} }
.system-chart.compute ul.resources li.primaryStorage { .system-chart.compute ul.resources li.primaryStorage {
left: 407px; left: 507px;
top: 375px; top: 375px;
} }
.system-chart.compute ul.resources li.secondaryStorage { .system-chart.compute ul.resources li.secondaryStorage {
left: 199px; left: 299px;
top: 497px; top: 497px;
} }
.system-chart.compute ul.resources li.ucs { .system-chart.compute ul.resources li.ucs {
left: 199px; left: 299px;
top: 406px; top: 406px;
} }
@ -8079,6 +8141,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.detail-view .multi-edit select { .detail-view .multi-edit select {
width: 93%; width: 93%;
font-size: 10px; font-size: 10px;
min-width: 80px;
} }
.multi-edit input { .multi-edit input {
@ -9017,7 +9080,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.network-chart li.firewall { .network-chart li.firewall {
/*+placement:shift 282px 188px;*/ /*+placement:shift 282px 188px;*/
position: relative; position: relative;
left: 282px; left: 356px;
top: 188px; top: 188px;
position: absolute; position: absolute;
} }
@ -9025,7 +9088,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.network-chart li.loadBalancing { .network-chart li.loadBalancing {
/*+placement:shift 167px 342px;*/ /*+placement:shift 167px 342px;*/
position: relative; position: relative;
left: 167px; left: 237px;
top: 342px; top: 342px;
position: absolute; position: absolute;
} }
@ -9033,7 +9096,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.network-chart li.portForwarding { .network-chart li.portForwarding {
/*+placement:shift 401px 342px;*/ /*+placement:shift 401px 342px;*/
position: relative; position: relative;
left: 401px; left: 480px;
top: 342px; top: 342px;
position: absolute; position: absolute;
} }
@ -9110,7 +9173,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
/*System Dashboard*/ /*System Dashboard*/
.system-dashboard { .system-dashboard {
height: 258px; height: 258px;
width: 762px; width: 962px;
display: block; display: block;
/*+border-radius:3px;*/ /*+border-radius:3px;*/
-moz-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; position: relative;
left: 18px; left: 18px;
top: 110px; top: 110px;
width: 78%; width: 83%;
position: absolute; position: absolute;
text-align: center; text-align: center;
padding: 8px 0; padding: 8px 0;
@ -9223,7 +9286,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
.system-dashboard .status_box li { .system-dashboard .status_box li {
height: 178px; height: 178px;
width: 178px; width: 228px;
padding: 0; padding: 0;
margin: 0 0 0 8px; margin: 0 0 0 8px;
/*+border-radius:3px;*/ /*+border-radius:3px;*/
@ -9247,7 +9310,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
padding: 65px 80px 5px; padding: 65px 80px 5px;
/*+placement:shift 31px 19px;*/ /*+placement:shift 31px 19px;*/
position: relative; position: relative;
left: 31px; left: 51px;
top: 19px; top: 19px;
position: absolute; position: absolute;
/*+opacity:56%;*/ /*+opacity:56%;*/
@ -9284,7 +9347,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
/*+placement:shift 13px 5px;*/ /*+placement:shift 13px 5px;*/
position: relative; position: relative;
left: 13px; left: 13px;
top: 5px; top: 13px;
font-weight: 100; 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; 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, .attach .icon,
.attachISO .icon, .attachISO .icon,
.attachDisk .icon, .attachDisk .icon,

BIN
ui/images/logo-login-oss.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
ui/images/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
ui/images/sprites.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 194 KiB

20
ui/scripts/cloudStack.js
View File

@ -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 // Populate IDP list
$.ajax({ $.ajax({
type: 'GET', type: 'GET',

10
ui/scripts/instances.js
View File

@ -170,6 +170,9 @@
label: 'label.display.name', label: 'label.display.name',
truncate: true truncate: true
}, },
ipaddress: {
label: 'label.ip.address'
},
zonename: { zonename: {
label: 'label.zone.name' label: 'label.zone.name'
}, },
@ -381,6 +384,13 @@
data: data, data: data,
success: function(json) { success: function(json) {
var items = json.listvirtualmachinesresponse.virtualmachine; 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({ args.response.success({
data: items data: items
}); });

16
ui/scripts/system.js
View File

@ -7709,7 +7709,7 @@
} }
} }
}, },
show: cloudStack.uiCustom.physicalResources({ physicalResourceSection: {
sections: { sections: {
physicalResources: { physicalResources: {
type: 'select', type: 'select',
@ -7792,7 +7792,7 @@
}); });
} }
} }
} },
}, },
detailView: { detailView: {
@ -9484,7 +9484,7 @@
} }
} }
} }
}), },
subsections: { subsections: {
virtualRouters: { virtualRouters: {
sectionSelect: { sectionSelect: {
@ -15226,11 +15226,12 @@
} }
if (! args.context.instances) { 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) 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) if ("clusters" in args.context)
array1.push("&clusterid=" + args.context.clusters[0].id); array1.push("&clusterid=" + args.context.clusters[0].id);
} else { } else {
//Instances menu > Instance detailView > View Hosts //Instances menu > Instance detailView > View Hosts
array1.push("&id=" + args.context.instances[0].hostid); 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) { function addExternalLoadBalancer(args, physicalNetworkObj, apiCmd, apiCmdRes, apiCmdObj) {
var array1 =[]; var array1 =[];
array1.push("&physicalnetworkid=" + physicalNetworkObj.id); array1.push("&physicalnetworkid=" + physicalNetworkObj.id);

8
ui/scripts/ui/widgets/cloudBrowser.js
View File

@ -321,6 +321,14 @@
return $panel; 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 * Clear all panels
*/ */

100
ui/scripts/ui/widgets/dataTable.js
View File

@ -141,49 +141,100 @@
* @param columnIndex Index of column (starting at 0) to sort by * @param columnIndex Index of column (starting at 0) to sort by
*/ */
var sortTable = function(columnIndex) { var sortTable = function(columnIndex) {
return false;
var direction = 'asc'; var direction = 'asc';
if ($table.find('thead th').hasClass('sorted ' + direction)) { if ($table.find('thead tr:last th').hasClass('sorted ' + direction)) {
direction = 'desc'; direction = 'desc';
} }
$table.find('thead th').removeClass('sorted desc asc'); $table.find('thead tr:last th').removeClass('sorted desc asc');
$($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction); $($table.find('thead tr:last th')[columnIndex]).addClass('sorted').addClass(direction);
var $elems = $table.find('tbody td').filter(function() { var $elems = $table.find('tbody td').filter(function() {
return $(this).index() == columnIndex; return $(this).index() == columnIndex;
}); });
var sortData = []; if ($elems.length < 2) {
$elems.each(function() { return;
sortData.push($(this).html()); }
sortData.sort();
if (direction == 'asc') { var stringComparator = function(a,b) {
sortData.reverse(); 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() {
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));
}); });
$(sortData).each(function() { if ($($elems[0]).hasClass('state')) {
var sortKey = this; comparator = stateComparator;
var $targetCell = $elems.filter(function() { } else {
return $(this).html() == sortKey; if (hasAllRowsSameValue) {
}); return;
var $targetContainer = $targetCell.parent(); }
if (columnIndex != 0 && numericDataCount > ($elems.length / 4)) {
comparator = numericComparator;
}
}
$targetContainer.remove().appendTo($table.find('tbody')); sortData.sort(comparator);
if (direction == 'asc') {
sortData.reverse();
}
var elements = [];
$(sortData).each(function() {
elements.push($(this).parent().clone(true));
});
var $tbody = $table.find('tbody');
$tbody.empty();
$(elements).each(function() {
$(this).appendTo($tbody);
}); });
computeEvenOddRows(); computeEvenOddRows();
}; };
var resizeHeaders = function() { 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 $tbody = $table.find('tbody');
var $ths = $thead.find('th'); var $ths = $thead.find('th');
var $tds = $tbody.find('tr:first td'); var $tds = $tbody.find('tr:first td');
if ($table.hasClass('no-split')) {
$tbody.width($thead.width());
}
if ($ths.size() > $tds.size()) { if ($ths.size() > $tds.size()) {
$ths.width( $ths.width(
$table.width() / $ths.size() $table.width() / $ths.size()
@ -194,6 +245,10 @@
$ths.each(function() { $ths.each(function() {
var $th = $(this); var $th = $(this);
if ($th.hasClass('collapsible-column')) {
return true;
}
var $td = $tds.filter(function() { var $td = $tds.filter(function() {
return $(this).index() == $th.index(); return $(this).index() == $th.index();
}); });
@ -238,9 +293,12 @@
$table.find('tbody').closest('table').addClass('body'); $table.find('tbody').closest('table').addClass('body');
} }
$table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent); if (!$table.hasClass('horizontal-overflow')) {
$table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent); $table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
$table.find('th:not(:has(input))').bind('click', function(event) { $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')) { if ($(this).hasClass('resizable')) {
return false; return false;
} }

204
ui/scripts/ui/widgets/listView.js
View File

@ -765,10 +765,12 @@
var createHeader = function(preFilter, fields, $table, actions, options) { var createHeader = function(preFilter, fields, $table, actions, options) {
if (!options) 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 reorder = options.reorder;
var detailView = options.detailView; var detailView = options.detailView;
var multiSelect = options.multiSelect; var multiSelect = options.multiSelect;
var groupableColumns = options.groupableColumns;
var viewArgs = $table.closest('.list-view').data('view-args'); var viewArgs = $table.closest('.list-view').data('view-args');
var uiCustom = viewArgs.uiCustom; var uiCustom = viewArgs.uiCustom;
var hiddenFields = []; var hiddenFields = [];
@ -776,8 +778,110 @@
if (preFilter != null) if (preFilter != null)
hiddenFields = preFilter(); 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('&laquo').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(' &raquo').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) { if (multiSelect) {
var $th = $('<th>').addClass('multiselect').appendTo($thead.find('tr')); var $th = $('<th>').addClass('multiselect').appendTo($tr);
var content = $('<input>') var content = $('<input>')
.attr('type', 'checkbox') .attr('type', 'checkbox')
.addClass('multiSelectMasterCheckbox') .addClass('multiSelectMasterCheckbox')
@ -794,18 +898,24 @@
if ($.inArray(key, hiddenFields) != -1) if ($.inArray(key, hiddenFields) != -1)
return true; return true;
var field = this; var field = this;
var $th = $('<th>').addClass(key).appendTo($thead.find('tr')); if (field.columns) {
$.each(field.columns, function(idx) {
if ($th.index()) $th.addClass('reduced-hide'); var subfield = this;
addColumnToTr($tr, key, 1, subfield.label);
$th.html(_l(field.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; return true;
}); });
// Re-order row buttons // Re-order row buttons
if (reorder) { if (reorder) {
$thead.find('tr').append( $tr.append(
$('<th>').html(_l('label.order')).addClass('reorder-actions reduced-hide') $('<th>').html(_l('label.order')).addClass('reorder-actions reduced-hide')
); );
} }
@ -826,7 +936,7 @@
); );
if (actions && !options.noActionCol && renderActionCol(actions) && actionsArray.length != headerActionsArray.length) { if (actions && !options.noActionCol && renderActionCol(actions) && actionsArray.length != headerActionsArray.length) {
$thead.find('tr').append( $tr.append(
$('<th></th>') $('<th></th>')
.html(_l('label.actions')) .html(_l('label.actions'))
.addClass('actions reduced-hide') .addClass('actions reduced-hide')
@ -835,7 +945,7 @@
// Quick view // Quick view
if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) { if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
$thead.find('tr').append( $tr.append(
$('<th></th>') $('<th></th>')
.html(_l('label.quickview')) .html(_l('label.quickview'))
.addClass('quick-view reduced-hide') .addClass('quick-view reduced-hide')
@ -1033,6 +1143,7 @@
var listViewArgs = $listView.data('view-args'); var listViewArgs = $listView.data('view-args');
var uiCustom = listViewArgs.uiCustom; var uiCustom = listViewArgs.uiCustom;
var subselect = uiCustom ? listViewArgs.listView.subselect : null; var subselect = uiCustom ? listViewArgs.listView.subselect : null;
var hasCollapsibleColumn = false;
if (!(data && data.length)) { if (!(data && data.length)) {
$listView.data('end-of-table', true); $listView.data('end-of-table', true);
@ -1088,8 +1199,25 @@
); );
} }
// Add field data var reducedFields = {};
var idx = 0;
$.each(fields, function(key) { $.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) if ($.inArray(key, hiddenFields) != -1)
return true; return true;
var field = this; var field = this;
@ -1103,6 +1231,11 @@
$td.addClass('truncated'); $td.addClass('truncated');
} }
if (field.blankCell) {
$td.css({'min-width': '10px', 'width': '10px'});
$td.hide();
}
if (field.indicator) { if (field.indicator) {
$td.addClass('state').addClass(field.indicator[content]); $td.addClass('state').addClass(field.indicator[content]);
@ -1110,6 +1243,19 @@
//$tr.find('td:first').addClass('item-state-' + field.indicator[content]); //$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 (field.id == true) id = field.id;
if ($td.index()) $td.addClass('reduced-hide'); if ($td.index()) $td.addClass('reduced-hide');
if (field.action) { if (field.action) {
@ -1140,9 +1286,12 @@
$('<pre>').html(_s(content)) $('<pre>').html(_s(content))
); );
} else { } else {
$td.append( var span = $('<span>').html(_s(content));
$('<span>').html(_s(content)) if (field.compact) {
); span.addClass('compact');
span.html('');
}
$td.append(span);
} }
} }
@ -1380,8 +1529,8 @@
.appendTo($tr); .appendTo($tr);
$quickView.mouseover( $quickView.mouseover(
// Show quick view // Show quick view
function() { function() {
var $quickView = $(this);
var $quickViewTooltip = $('<div>').addClass('quick-view-tooltip hovered-elem'); var $quickViewTooltip = $('<div>').addClass('quick-view-tooltip hovered-elem');
var $tr = $quickView.closest('tr'); var $tr = $quickView.closest('tr');
var $listView = $tr.closest('.list-view'); var $listView = $tr.closest('.list-view');
@ -1465,7 +1614,7 @@
}); });
$quickViewTooltip.css({ $quickViewTooltip.css({
position: 'absolute', 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, top: $quickView.offset().top,
zIndex: $tr.closest('.panel').zIndex() + 1 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; return rows;
}; };
@ -1798,8 +1955,19 @@
reorder: reorder, reorder: reorder,
detailView: listViewData.detailView, detailView: listViewData.detailView,
'multiSelect': multiSelect, '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); createFilters($toolbar, listViewData.filters);
if (listViewData.hideSearchBar != true) { if (listViewData.hideSearchBar != true) {