mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
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 <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav
parent
3f7a86d8ef
commit
13f1319453
@ -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};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 194 KiB |
@ -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',
|
||||
|
||||
@ -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
|
||||
});
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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
|
||||
*/
|
||||
|
||||
@ -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;
|
||||
});
|
||||
|
||||
var sortData = [];
|
||||
$elems.each(function() {
|
||||
sortData.push($(this).html());
|
||||
sortData.sort();
|
||||
if ($elems.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (direction == 'asc') {
|
||||
sortData.reverse();
|
||||
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() {
|
||||
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() {
|
||||
var sortKey = this;
|
||||
var $targetCell = $elems.filter(function() {
|
||||
return $(this).html() == sortKey;
|
||||
});
|
||||
var $targetContainer = $targetCell.parent();
|
||||
if ($($elems[0]).hasClass('state')) {
|
||||
comparator = stateComparator;
|
||||
} else {
|
||||
if (hasAllRowsSameValue) {
|
||||
return;
|
||||
}
|
||||
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();
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user