diff --git a/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java b/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java index 94c0a55de6a..701af625884 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 ManagementHostIPAdr = new ConfigKey("Advanced", String.class, "host", "localhost", "The ip address of management server", true); public static final ConfigKey ApiServletPath = new ConfigKey("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 DefaultUIPageSize = new ConfigKey("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}; } } diff --git a/client/WEB-INF/classes/resources/messages.properties b/client/WEB-INF/classes/resources/messages.properties index 6cafdb01732..d3cc4d0073e 100644 --- a/client/WEB-INF/classes/resources/messages.properties +++ b/client/WEB-INF/classes/resources/messages.properties @@ -842,6 +842,41 @@ label.menu.virtual.appliances=Virtual Appliances label.menu.virtual.resources=Virtual Resources label.menu.volumes=Volumes label.menu.sshkeypair=SSH KeyPair +label.metrics=Metrics +label.metrics.allocated=Allocated +label.metrics.clusters=Clusters +label.metrics.cpu.allocated=CPU Allocation +label.metrics.cpu.max.dev=Deviation +label.metrics.cpu.total=Total +label.metrics.cpu.usage=CPU Usage +label.metrics.cpu.used.avg=Used +label.metrics.disk=Disk +label.metrics.disk.iops.total=IOPS +label.metrics.disk.read=Read +label.metrics.disk.size=Size +label.metrics.disk.storagetype=Type +label.metrics.disk.usage=Disk Usage +label.metrics.disk.used=Used +label.metrics.disk.total=Total +label.metrics.disk.allocated=Allocated +label.metrics.disk.unallocated=Unallocated +label.metrics.disk.write=Write +label.metrics.hosts=Hosts +label.metrics.memory.allocated=Mem Allocation +label.metrics.memory.max.dev=Deviation +label.metrics.memory.total=Total +label.metrics.memory.usage=Mem Usage +label.metrics.memory.used.avg=Used +label.metrics.name=Name +label.metrics.network.usage=Network Usage +label.metrics.network.read=Read +label.metrics.network.write=Write +label.metrics.num.cpu.cores=Cores +label.metrics.property=Property +label.metrics.scope=Scope +label.metrics.state=State +label.metrics.storagepool=Storage Pool +label.metrics.vm.name=VM Name label.migrate.instance.to.host=Migrate instance to another host label.migrate.instance.to.ps=Migrate instance to another primary storage label.migrate.instance.to=Migrate instance to diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 2ea85374024..22f7409be7e 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, diff --git a/ui/dictionary.jsp b/ui/dictionary.jsp index ed280de3af9..977cd7a8e95 100644 --- a/ui/dictionary.jsp +++ b/ui/dictionary.jsp @@ -837,6 +837,41 @@ dictionary = { 'label.menu.virtual.resources': '', 'label.menu.volumes': '', 'label.menu.sshkeypair': '', +'label.metrics': '', +'label.metrics.allocated': '', +'label.metrics.clusters': '', +'label.metrics.cpu.allocated': '', +'label.metrics.cpu.max.dev': '', +'label.metrics.cpu.total': '', +'label.metrics.cpu.usage': '', +'label.metrics.cpu.used.avg': '', +'label.metrics.disk': '', +'label.metrics.disk.iops.total': '', +'label.metrics.disk.read': '', +'label.metrics.disk.size': '', +'label.metrics.disk.storagetype': '', +'label.metrics.disk.usage': '', +'label.metrics.disk.used': '', +'label.metrics.disk.total': '', +'label.metrics.disk.allocated': '', +'label.metrics.disk.unallocated': '', +'label.metrics.disk.write': '', +'label.metrics.hosts': '', +'label.metrics.memory.allocated': '', +'label.metrics.memory.max.dev': '', +'label.metrics.memory.total': '', +'label.metrics.memory.usage': '', +'label.metrics.memory.used.avg': '', +'label.metrics.name': '', +'label.metrics.network.read': '', +'label.metrics.network.usage': '', +'label.metrics.network.write': '', +'label.metrics.num.cpu.cores': '', +'label.metrics.property': '', +'label.metrics.scope': '', +'label.metrics.state': '', +'label.metrics.storagepool': '', +'label.metrics.vm.name': '', 'label.migrate.instance.to': '', 'label.migrate.instance.to.host': '', 'label.migrate.instance.to.ps': '', diff --git a/ui/images/logo-login-oss.png b/ui/images/logo-login-oss.png index e0f37678045..92fc81ce775 100644 Binary files a/ui/images/logo-login-oss.png and b/ui/images/logo-login-oss.png differ diff --git a/ui/images/logo.png b/ui/images/logo.png index f36a9cb9e23..2e3aae936c4 100644 Binary files a/ui/images/logo.png and b/ui/images/logo.png differ diff --git a/ui/images/sprites.png b/ui/images/sprites.png index 1a6eaa577f2..0ddafaff27e 100755 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ diff --git a/ui/index.jsp b/ui/index.jsp index 302e464de65..703507fe5ed 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -1800,6 +1800,7 @@ + @@ -1836,6 +1837,7 @@ + diff --git a/ui/scripts/cloudStack.js b/ui/scripts/cloudStack.js index 8137043cbc3..b5aa94a1890 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', diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js index 5096297f5df..2b7576cd1f2 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' }, @@ -294,7 +297,20 @@ poll: pollAsyncJobResult } }, - snapshot: vmSnapshotAction({ listView: true }) + snapshot: vmSnapshotAction({ listView: true }), + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'vms'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } + }, }, dataProvider: function(args) { @@ -381,6 +397,11 @@ data: data, success: function(json) { var items = json.listvirtualmachinesresponse.virtualmachine; + $.each(items, function(idx, vm) { + if (vm.nic && vm.nic.length > 0 && vm.nic[0].ipaddress) { + items[idx].ipaddress = vm.nic[0].ipaddress; + } + }); args.response.success({ data: items }); diff --git a/ui/scripts/metrics.js b/ui/scripts/metrics.js new file mode 100644 index 00000000000..609022a81a3 --- /dev/null +++ b/ui/scripts/metrics.js @@ -0,0 +1,1121 @@ +// Licensed to the Apache Software Foundation (ASF) under one +// or more contributor license agreements. See the NOTICE file +// distributed with this work for additional information +// regarding copyright ownership. The ASF licenses this file +// to you under the Apache License, Version 2.0 (the +// "License"); you may not use this file except in compliance +// with the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. +(function(cloudStack) { + cloudStack.sections.metrics = { + title: 'label.metrics', + listView: { + id: 'metrics', + fields: { + name: { + label: 'metrics' + } + }, + } + }; + + + // Zones Metrics + cloudStack.sections.metrics.zones = { + title: 'label.metrics', + listView: { + id: 'physicalResources', + fields: { + name: { + label: 'label.metrics.name' + }, + state: { + label: 'label.metrics.state', + converter: function (str) { + // For localization + return str; + }, + indicator: { + 'Enabled': 'on', + 'Disabled': 'off' + }, + compact: true + }, + clusters : { + label: 'label.metrics.clusters' + }, + cpuused: { + label: 'label.metrics.cpu.usage', + collapsible: true, + columns: { + cpuusedavg: { + label: 'label.metrics.cpu.used.avg', + thresholdcolor: true, + thresholds: { + notification: 'cpunotificationthreshold', + disable: 'cpudisablethreshold' + } + }, + cpumaxdev: { + label: 'label.metrics.cpu.max.dev' + } + } + }, + cpuallocated: { + label: 'label.metrics.cpu.allocated', + collapsible: true, + columns: { + cpuallocated: { + label: 'label.metrics.allocated', + thresholdcolor: true, + thresholds: { + notification: 'cpunotificationthreshold', + disable: 'cpudisablethreshold' + } + }, + cputotal: { + label: 'label.metrics.cpu.total' + } + } + }, + memused: { + label: 'label.metrics.memory.usage', + collapsible: true, + columns: { + memusedavg: { + label: 'label.metrics.memory.used.avg', + thresholdcolor: true, + thresholds: { + notification: 'memnotificationthreshold', + disable: 'memdisablethreshold' + } + }, + memmaxdev: { + label: 'label.metrics.memory.max.dev' + } + } + }, + memallocated: { + label: 'label.metrics.memory.allocated', + collapsible: true, + columns: { + memallocated: { + label: 'label.metrics.allocated', + thresholdcolor: true, + thresholds: { + notification: 'memnotificationthreshold', + disable: 'memdisablethreshold' + } + }, + memtotal: { + label: 'label.metrics.memory.total' + } + } + } + }, + dataProvider: function(args) { + var data = {}; + listViewDataProvider(args, data); + $.ajax({ + url: createURL('listZones'), + data: data, + success: function(json) { + var items = json.listzonesresponse.zone; + if (items) { + $.each(items, function(idx, zone) { + items[idx].clusters = 0; + items[idx].clustersUp = 0; + items[idx].hosts = 0; + items[idx].cpuusedavg = 0.0; + items[idx].cpumaxdev = 0.0; + items[idx].cpuallocated = 0.0; + items[idx].cputotal = 0.0; + items[idx].maxCpuUsed = 0.0; + items[idx].memusedavg = 0.0; + items[idx].memmaxdev = 0.0; + items[idx].memallocated = 0.0; + items[idx].memtotal = 0.0; + items[idx].maxMemUsed = 0.0; + + // Threshold color coding + items[idx].cpunotificationthreshold = 75.0; + items[idx].cpudisablethreshold = 95.0; + items[idx].memnotificationthreshold = 75.0; + items[idx].memdisablethreshold = 95.0; + + $.ajax({ + url: createURL('listClusters'), + data: {zoneid: zone.id}, + success: function(json) { + if (json && json.listclustersresponse && json.listclustersresponse.cluster && json.listclustersresponse.count) { + items[idx].clusters += parseInt(json.listclustersresponse.count); + $.each(json.listclustersresponse.cluster, function(i, cluster) { + if (cluster.allocationstate == 'Enabled' && cluster.managedstate == 'Managed') { + items[idx].clustersUp += 1; + } + $.ajax({ + url: createURL('listHosts'), + data: {clusterid: cluster.id, type: 'routing'}, + success: function(json) { + if (json && json.listhostsresponse && json.listhostsresponse.host && json.listhostsresponse.count) { + items[idx].hosts += parseInt(json.listhostsresponse.count); + $.each(json.listhostsresponse.host, function(i, host) { + if (host.hasOwnProperty('cpuused')) { + var hostCpuUsage = parseFloat(host.cpuused); + items[idx].cpuusedavg += hostCpuUsage; + if (hostCpuUsage > items[idx].maxCpuUsed) { + items[idx].maxCpuUsed = hostCpuUsage; + } + } + + if (host.hasOwnProperty('cpuallocated')) { + items[idx].cpuallocated += parseFloat(host.cpuallocated.replace('%', '')); + } + + if (host.hasOwnProperty('memoryused')) { + var hostMemoryUsage = 100.0 * parseFloat(host.memoryused) / parseFloat(host.memorytotal); + items[idx].memusedavg += hostMemoryUsage; + if (hostMemoryUsage > items[idx].maxMemUsed) { + items[idx].maxMemUsed = hostMemoryUsage; + } + } + + if (host.hasOwnProperty('memoryallocated')) { + items[idx].memallocated += parseFloat(100.0 * parseFloat(host.memoryallocated)/parseFloat(host.memorytotal)); + } + }); + } + }, + async: false + }); + }); + } + }, + async: false + }); + + $.ajax({ + url: createURL('listCapacity'), + data: {zoneid: zone.id}, + success: function(json) { + if (json && json.listcapacityresponse && json.listcapacityresponse.capacity) { + $.each(json.listcapacityresponse.capacity, function(i, capacity) { + // CPU + if (capacity.type == 1) { + items[idx].cputotal = parseInt(capacity.capacitytotal)/1000.0; + } + // Memory + if (capacity.type == 0) { + items[idx].memtotal = parseInt(capacity.capacitytotal)/(1024.0*1024.0*1024.0); + } + }); + } + }, + async: false + }); + + if (items[idx].hosts != 0) { + items[idx].cpuusedavg = (items[idx].cpuusedavg / items[idx].hosts); + items[idx].cpumaxdev = (items[idx].maxCpuUsed - items[idx].cpuusedavg); + items[idx].cpuallocated = (items[idx].cpuallocated / items[idx].hosts); + + items[idx].memusedavg = (items[idx].memusedavg / items[idx].hosts); + items[idx].memmaxdev = (items[idx].maxMemUsed - items[idx].memusedavg); + items[idx].memallocated = (items[idx].memallocated / items[idx].hosts); + } + // Format data + items[idx].cpuusedavg = (items[idx].cpuusedavg).toFixed(2) + "%"; + items[idx].cpumaxdev = (items[idx].cpumaxdev).toFixed(2) + "%"; + items[idx].cpuallocated = (items[idx].cpuallocated).toFixed(2) + "%"; + items[idx].cputotal = (items[idx].cputotal).toFixed(2) + " Ghz"; + + items[idx].memusedavg = (items[idx].memusedavg).toFixed(2) + "%"; + items[idx].memmaxdev = (items[idx].memmaxdev).toFixed(2) + "%"; + items[idx].memallocated = (items[idx].memallocated).toFixed(2) + "%"; + items[idx].memtotal = (items[idx].memtotal).toFixed(2) + " GB"; + + items[idx].clusters = items[idx].clustersUp + ' / ' + items[idx].clusters; + items[idx].state = items[idx].allocationstate; + }); + } + args.response.success({ + data: items + }); + } + }); + }, + browseBy: { + filterBy: 'zoneid', + resource: 'clusters' + }, + detailView: cloudStack.sections.system.physicalResourceSection.sections.physicalResources.listView.zones.detailView + } + }; + + + // Clusters Metrics + cloudStack.sections.metrics.clusters = { + title: 'label.metrics', + listView: { + id: 'clusters', + fields: { + name: { + label: 'label.metrics.name' + }, + state: { + label: 'label.metrics.state', + converter: function (str) { + // For localization + return str; + }, + indicator: { + 'Enabled': 'on', + 'Unmanaged': 'warning', + 'Disabled': 'off' + }, + compact: true + }, + hosts: { + label: 'label.metrics.hosts' + }, + cpuused: { + label: 'label.metrics.cpu.usage', + collapsible: true, + columns: { + cpuusedavg: { + label: 'label.metrics.cpu.used.avg', + thresholdcolor: true, + thresholds: { + notification: 'cpunotificationthreshold', + disable: 'cpudisablethreshold' + } + }, + cpumaxdev: { + label: 'label.metrics.cpu.max.dev' + } + } + }, + cpuallocated: { + label: 'label.metrics.cpu.allocated', + collapsible: true, + columns: { + cpuallocated: { + label: 'label.metrics.allocated', + thresholdcolor: true, + thresholds: { + notification: 'cpunotificationthreshold', + disable: 'cpudisablethreshold' + } + }, + cputotal: { + label: 'label.metrics.cpu.total' + } + } + }, + memused: { + label: 'label.metrics.memory.usage', + collapsible: true, + columns: { + memusedavg: { + label: 'label.metrics.memory.used.avg', + thresholdcolor: true, + thresholds: { + notification: 'memnotificationthreshold', + disable: 'memdisablethreshold' + } + }, + memmaxdev: { + label: 'label.metrics.memory.max.dev' + } + } + }, + memallocated: { + label: 'label.metrics.memory.allocated', + collapsible: true, + columns: { + memallocated: { + label: 'label.metrics.allocated', + thresholdcolor: true, + thresholds: { + notification: 'memnotificationthreshold', + disable: 'memdisablethreshold' + } + }, + memtotal: { + label: 'label.metrics.memory.total' + } + } + } + }, + dataProvider: function(args) { + var data = {}; + listViewDataProvider(args, data); + if (args.context.metricsFilterData && args.context.metricsFilterData.key && args.context.metricsFilterData.value) { + data[args.context.metricsFilterData.key] = args.context.metricsFilterData.value; + } + $.ajax({ + url: createURL('listClusters'), + data: data, + success: function(json) { + var items = json.listclustersresponse.cluster; + if (items) { + $.each(items, function(idx, cluster) { + items[idx].hosts = 0; + items[idx].hostsUp = 0; + items[idx].cpuusedavg = 0.0; + items[idx].cpumaxdev = 0.0; + items[idx].cpuallocated = 0.0; + items[idx].cputotal = 0.0; + items[idx].maxCpuUsed = 0; + items[idx].memusedavg = 0.0; + items[idx].memmaxdev = 0.0; + items[idx].memallocated = 0.0; + items[idx].memtotal = 0.0; + items[idx].maxMemUsed = 0.0; + + // Threshold color coding + items[idx].cpunotificationthreshold = 75.0; + items[idx].cpudisablethreshold = 95.0; + items[idx].memnotificationthreshold = 75.0; + items[idx].memdisablethreshold = 95.0; + + $.ajax({ + url: createURL('listConfigurations'), + data: {clusterid: cluster.id, listAll: true}, + success: function(json) { + if (json.listconfigurationsresponse && json.listconfigurationsresponse.configuration) { + $.each(json.listconfigurationsresponse.configuration, function(i, config) { + switch (config.name) { + case 'cluster.cpu.allocated.capacity.disablethreshold': + items[idx].cpudisablethreshold = 100 * parseFloat(config.value); + break; + case 'cluster.cpu.allocated.capacity.notificationthreshold': + items[idx].cpunotificationthreshold = 100 * parseFloat(config.value); + break; + case 'cluster.memory.allocated.capacity.disablethreshold': + items[idx].memdisablethreshold = 100 * parseFloat(config.value); + break; + case 'cluster.memory.allocated.capacity.notificationthreshold': + items[idx].memnotificationthreshold = 100 * parseFloat(config.value); + break; + } + }); + } + }, + async: false + }); + + $.ajax({ + url: createURL('listHosts'), + data: {clusterid: cluster.id, type: 'routing'}, + success: function(json) { + if (json && json.listhostsresponse && json.listhostsresponse.host && json.listhostsresponse.count) { + items[idx].hosts += parseInt(json.listhostsresponse.count); + $.each(json.listhostsresponse.host, function(i, host) { + if (host.state == 'Up') { + items[idx].hostsUp += 1; + } + if (host.hasOwnProperty('cpuused')) { + var hostCpuUsage = parseFloat(host.cpuused); + items[idx].cpuusedavg += hostCpuUsage; + if (hostCpuUsage > items[idx].maxCpuUsed) { + items[idx].maxCpuUsed = hostCpuUsage; + } + } + + if (host.hasOwnProperty('cpuallocated')) { + items[idx].cpuallocated += parseFloat(host.cpuallocated.replace('%', '')); + } + + if (host.hasOwnProperty('memoryused')) { + var hostMemoryUsage = 100.0 * parseFloat(host.memoryused) / parseFloat(host.memorytotal); + items[idx].memusedavg += hostMemoryUsage; + if (hostMemoryUsage > items[idx].maxMemUsed) { + items[idx].maxMemUsed = hostMemoryUsage; + } + } + + if (host.hasOwnProperty('memoryallocated')) { + items[idx].memallocated += parseFloat(100.0 * parseFloat(host.memoryallocated)/parseFloat(host.memorytotal)); + } + }); + } + }, + async: false + }); + + $.ajax({ + url: createURL('listCapacity'), + data: {clusterid: cluster.id}, + success: function(json) { + if (json && json.listcapacityresponse && json.listcapacityresponse.capacity) { + $.each(json.listcapacityresponse.capacity, function(i, capacity) { + // CPU + if (capacity.type == 1) { + items[idx].cputotal = parseInt(capacity.capacitytotal)/1000.0; + } + // Memory + if (capacity.type == 0) { + items[idx].memtotal = parseInt(capacity.capacitytotal)/(1024.0*1024.0*1024.0); + } + }); + } + }, + async: false + }); + + if (items[idx].hosts != 0) { + items[idx].cpuusedavg = (items[idx].cpuusedavg / items[idx].hosts); + items[idx].cpumaxdev = (items[idx].maxCpuUsed - items[idx].cpuusedavg); + items[idx].cpuallocated = (items[idx].cpuallocated / items[idx].hosts); + + items[idx].memusedavg = (items[idx].memusedavg / items[idx].hosts); + items[idx].memmaxdev = (items[idx].maxMemUsed - items[idx].memusedavg); + items[idx].memallocated = (items[idx].memallocated / items[idx].hosts); + } + + // Format data + items[idx].cpuusedavg = (items[idx].cpuusedavg).toFixed(2) + "%"; + items[idx].cpumaxdev = (items[idx].cpumaxdev).toFixed(2) + "%"; + items[idx].cpuallocated = (items[idx].cpuallocated).toFixed(2) + "%"; + items[idx].cputotal = (items[idx].cputotal).toFixed(2) + " Ghz"; + + items[idx].memusedavg = (items[idx].memusedavg).toFixed(2) + "%"; + items[idx].memmaxdev = (items[idx].memmaxdev).toFixed(2) + "%"; + items[idx].memallocated = (items[idx].memallocated).toFixed(2) + "%"; + items[idx].memtotal = (items[idx].memtotal).toFixed(2) + " GB"; + items[idx].hosts = items[idx].hostsUp + ' / ' + items[idx].hosts; + + items[idx].state = items[idx].allocationstate; + if (items[idx].managedstate == 'Unmanaged') { + items[idx].state = 'Unmanaged'; + } + + if (items[idx].managedstate == 'Managed' && items[idx].allocationstate == 'Enabled') { + items[idx].state = 'Enabled'; + } + + if (items[idx].managedstate == 'Managed' && items[idx].allocationstate == 'Disabled') { + items[idx].state = 'Disabled'; + } + }); + } + args.response.success({ + data: items + }); + } + }); + }, + browseBy: { + filterBy: 'clusterid', + resource: 'hosts' + }, + detailView: cloudStack.sections.system.subsections.clusters.listView.detailView + } + }; + + + // Hosts Metrics + cloudStack.sections.metrics.hosts = { + title: 'label.metrics', + listView: { + id: 'hosts', + fields: { + name: { + label: 'label.metrics.name' + }, + state: { + label: 'label.metrics.state', + converter: function (str) { + // For localization + return str; + }, + indicator: { + 'Up': 'on', + 'Down': 'off', + 'Disconnected': 'off', + 'Removed': 'off', + 'Error': 'off', + 'Connecting': 'transition', + 'Rebalancing': 'transition', + 'Alert': 'warning', + }, + compact: true + }, + instances: { + label: 'label.instances' + }, + cpuused: { + label: 'label.metrics.cpu.usage', + collapsible: true, + columns: { + cores: { + label: 'label.metrics.num.cpu.cores', + }, + cputotal: { + label: 'label.metrics.cpu.total' + }, + cpuusedavg: { + label: 'label.metrics.cpu.used.avg', + thresholdcolor: true, + thresholds: { + notification: 'cpunotificationthreshold', + disable: 'cpudisablethreshold' + } + }, + cpuallocated: { + label: 'label.metrics.allocated', + thresholdcolor: true, + thresholds: { + notification: 'cpunotificationthreshold', + disable: 'cpudisablethreshold' + } + } + } + }, + memused: { + label: 'label.metrics.memory.usage', + collapsible: true, + columns: { + memtotal: { + label: 'label.metrics.memory.total' + }, + memusedavg: { + label: 'label.metrics.memory.used.avg', + thresholdcolor: true, + thresholds: { + notification: 'memnotificationthreshold', + disable: 'memdisablethreshold' + } + }, + memallocated: { + label: 'label.metrics.allocated', + thresholdcolor: true, + thresholds: { + notification: 'memnotificationthreshold', + disable: 'memdisablethreshold' + } + } + } + }, + network: { + label: 'label.metrics.network.usage', + collapsible: true, + columns: { + networkread: { + label: 'label.metrics.network.read' + }, + networkwrite: { + label: 'label.metrics.network.write' + } + } + } + }, + dataProvider: function(args) { + var data = {}; + data.type = 'routing'; + listViewDataProvider(args, data); + if (args.context.metricsFilterData && args.context.metricsFilterData.key && args.context.metricsFilterData.value) { + data[args.context.metricsFilterData.key] = args.context.metricsFilterData.value; + } + $.ajax({ + url: createURL('listHosts'), + data: data, + success: function(json) { + var items = json.listhostsresponse.host; + if (items) { + $.each(items, function(idx, host) { + items[idx].cores = host.cpunumber; + items[idx].cputotal = (parseFloat(host.cpunumber) * parseFloat(host.cpuspeed) / 1000.0).toFixed(2); + if (host.cpuused) { + items[idx].cpuusedavg = (parseFloat(host.cpuused) * items[idx].cputotal / 100.0).toFixed(2) + ' Ghz'; + } else { + items[idx].cpuusedavg = ''; + } + items[idx].cpuallocated = (parseFloat(host.cpuallocated) * items[idx].cputotal / 100.0).toFixed(2) + ' Ghz'; + items[idx].memtotal = (parseFloat(host.memorytotal)/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB'; + items[idx].memallocated = (parseFloat(host.memoryallocated)/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB'; + if (host.memoryused) { + items[idx].memusedavg = (parseFloat(host.memoryused)/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB'; + } else { + items[idx].memusedavg = ''; + } + if (host.networkkbsread && host.networkkbswrite) { + items[idx].networkread = (parseFloat(host.networkkbsread)/(1024.0*1024.0)).toFixed(2) + ' GB'; + items[idx].networkwrite = (parseFloat(host.networkkbswrite)/(1024.0*1024.0)).toFixed(2) + ' GB'; + } else { + items[idx].networkread = ''; + items[idx].networkwrite = ''; + } + + // Threshold color coding + items[idx].cpunotificationthreshold = 0.75 * parseFloat(items[idx].cputotal); + items[idx].cpudisablethreshold = 0.95 * parseFloat(items[idx].cputotal); + items[idx].memnotificationthreshold = 0.75 * parseFloat(items[idx].memtotal); + items[idx].memdisablethreshold = 0.95 * parseFloat(items[idx].memtotal); + + $.ajax({ + url: createURL('listConfigurations'), + data: {clusterid: host.clusterid, listAll: true}, + success: function(json) { + if (json.listconfigurationsresponse && json.listconfigurationsresponse.configuration) { + $.each(json.listconfigurationsresponse.configuration, function(i, config) { + switch (config.name) { + case 'cluster.cpu.allocated.capacity.disablethreshold': + items[idx].cpudisablethreshold = parseFloat(config.value) * parseFloat(items[idx].cputotal); + break; + case 'cluster.cpu.allocated.capacity.notificationthreshold': + items[idx].cpunotificationthreshold = parseFloat(config.value) * parseFloat(items[idx].cputotal); + break; + case 'cluster.memory.allocated.capacity.disablethreshold': + items[idx].memdisablethreshold = parseFloat(config.value) * parseFloat(items[idx].memtotal); + break; + case 'cluster.memory.allocated.capacity.notificationthreshold': + items[idx].memnotificationthreshold = parseFloat(config.value) * parseFloat(items[idx].memtotal); + break; + } + }); + } + }, + async: false + }); + + var cpuOverCommit = 1.0; + var memOverCommit = 1.0; + $.ajax({ + url: createURL('listClusters'), + data: {clusterid: host.clusterid, listAll: true}, + success: function(json) { + if (json.listclustersresponse && json.listclustersresponse.cluster) { + var cluster = json.listclustersresponse.cluster[0]; + cpuOverCommit = cluster.cpuovercommitratio; + memOverCommit = cluster.memoryovercommitratio; + } + }, + async: false + }); + + items[idx].cputotal = items[idx].cputotal + ' Ghz (x' + cpuOverCommit + ')'; + items[idx].memtotal = items[idx].memtotal + ' (x' + memOverCommit + ')'; + + items[idx].instances = 0; + items[idx].instancesUp = 0; + $.ajax({ + url: createURL('listVirtualMachines'), + data: {hostid: host.id, listAll: true}, + success: function(json) { + if (json && json.listvirtualmachinesresponse && json.listvirtualmachinesresponse.virtualmachine) { + var vms = json.listvirtualmachinesresponse.virtualmachine; + if (vms) { + $.each(vms, function(_, vm) { + items[idx].instances += 1; + if (vm.state == 'Running') { + items[idx].instancesUp += 1; + } + }); + } + } + }, + async: false + }); + items[idx].instances = items[idx].instancesUp + ' / ' + items[idx].instances; + }); + } + args.response.success({ + data: items + }); + } + }); + }, + browseBy: { + filterBy: 'hostid', + resource: 'vms' + }, + detailView: cloudStack.sections.system.subsections.hosts.listView.detailView + } + }; + + + // VMs Metrics + cloudStack.sections.metrics.instances = { + title: 'label.metrics', + listView: { + id: 'instances', + fields: { + name: { + label: 'label.metrics.name' + }, + state: { + label: 'label.metrics.state', + converter: function (str) { + // For localization + return str; + }, + indicator: { + 'Running': 'on', + 'Stopped': 'off', + 'Error': 'off', + 'Destroyed': 'off', + 'Expunging': 'off', + 'Stopping': 'transition', + 'Starting': 'transition', + 'Migrating': 'transition', + 'Shutdowned': 'warning', + }, + compact: true + }, + ipaddress: { + label: 'label.ip.address' + }, + zonename: { + label: 'label.zone' + }, + cpuused: { + label: 'label.metrics.cpu.usage', + collapsible: true, + columns: { + cores: { + label: 'label.metrics.num.cpu.cores', + }, + cputotal: { + label: 'label.metrics.cpu.total' + }, + cpuused: { + label: 'label.metrics.cpu.used.avg', + } + } + }, + memused: { + label: 'label.metrics.memory.usage', + collapsible: true, + columns: { + memallocated: { + label: 'label.metrics.allocated' + } + } + }, + network: { + label: 'label.metrics.network.usage', + collapsible: true, + columns: { + networkread: { + label: 'label.metrics.network.read' + }, + networkwrite: { + label: 'label.metrics.network.write' + } + } + }, + disk: { + label: 'label.metrics.disk.usage', + collapsible: true, + columns: { + diskread: { + label: 'label.metrics.disk.read' + }, + diskwrite: { + label: 'label.metrics.disk.write' + }, + diskiopstotal: { + label: 'label.metrics.disk.iops.total' + } + } + } + }, + dataProvider: function(args) { + var data = {}; + listViewDataProvider(args, data); + if (args.context.metricsFilterData && args.context.metricsFilterData.key && args.context.metricsFilterData.value) { + data[args.context.metricsFilterData.key] = args.context.metricsFilterData.value; + } + $.ajax({ + url: createURL('listVirtualMachines'), + data: data, + success: function(json) { + var items = []; + if (json && json.listvirtualmachinesresponse && json.listvirtualmachinesresponse.virtualmachine) { + items = json.listvirtualmachinesresponse.virtualmachine; + $.each(items, function(idx, vm) { + items[idx].cores = vm.cpunumber; + items[idx].cputotal = (parseFloat(vm.cpunumber) * parseFloat(vm.cpuspeed) / 1000.0).toFixed(1) + ' Ghz'; + items[idx].cpuusedavg = vm.cpuused; + items[idx].cpuallocated = vm.cpuallocated; + items[idx].memallocated = (parseFloat(vm.memory)/1024.0).toFixed(2) + ' GB'; + items[idx].networkread = (parseFloat(vm.networkkbsread)/(1024.0)).toFixed(2) + ' MB'; + items[idx].networkwrite = (parseFloat(vm.networkkbswrite)/(1024.0)).toFixed(2) + ' MB'; + items[idx].diskread = (parseFloat(vm.diskkbsread)/(1024.0)).toFixed(2) + ' MB'; + items[idx].diskwrite = (parseFloat(vm.diskkbswrite)/(1024.0)).toFixed(2) + ' MB'; + items[idx].diskiopstotal = parseFloat(vm.diskioread) + parseFloat(vm.diskiowrite); + if (vm.nic && vm.nic.length > 0 && vm.nic[0].ipaddress) { + items[idx].ipaddress = vm.nic[0].ipaddress; + } + + var keys = [{'cpuused': 'cpuusedavg'}, + {'networkkbsread': 'networkread'}, + {'networkkbswrite': 'networkwrite'}, + {'diskkbsread': 'diskread'}, + {'diskkbswrite': 'diskwrite'}, + {'diskioread': 'diskiopstotal'}]; + for (keyIdx in keys) { + var map = keys[keyIdx]; + var key = Object.keys(map)[0]; + var uiKey = map[key]; + if (!vm.hasOwnProperty(key)) { + items[idx][uiKey] = ''; + } + } + }); + } + args.response.success({ + data: items + }); + } + }); + }, + browseBy: { + filterBy: 'virtualmachineid', + resource: 'volumes' + }, + detailView: cloudStack.sections.instances.listView.detailView + } + }; + + + // Volumes Metrics + cloudStack.sections.metrics.volumes = { + title: 'label.metrics', + listView: { + id: 'volumes', + fields: { + name: { + label: 'label.metrics.name' + }, + state: { + label: 'label.metrics.state', + converter: function (str) { + // For localization + return str; + }, + indicator: { + 'Allocated': 'transition', + 'Creating': 'transition', + 'Ready': 'on', + 'Destroy': 'off', + 'Expunging': 'off', + 'Migrating': 'warning', + 'UploadOp': 'transition', + 'Snapshotting': 'warning', + }, + compact: true + }, + vmname: { + label: 'label.metrics.vm.name' + }, + disksize: { + label: 'label.metrics.disk.size' + }, + storagetype: { + label: 'label.metrics.disk.storagetype' + }, + storagepool: { + label: 'label.metrics.storagepool' + }, + }, + dataProvider: function(args) { + var data = {listAll: true}; + listViewDataProvider(args, data); + if (args.context.metricsFilterData && args.context.metricsFilterData.key && args.context.metricsFilterData.value) { + data[args.context.metricsFilterData.key] = args.context.metricsFilterData.value; + } + $.ajax({ + url: createURL('listVolumes'), + data: data, + success: function(json) { + var items = []; + if (json && json.listvolumesresponse && json.listvolumesresponse.volume) { + items = json.listvolumesresponse.volume; + $.each(items, function(idx, volume) { + items[idx].name = volume.name; + items[idx].state = volume.state; + items[idx].vmname = volume.vmname; + items[idx].disksize = parseFloat(volume.size)/(1024.0*1024.0*1024.0) + ' GB'; + items[idx].storagetype = volume.storagetype.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) + ' (' + volume.type + ')'; + if (volume.storage) { + items[idx].storagepool = volume.storage; + } + }); + } + args.response.success({ + data: items + }); + } + }); + }, + detailView: cloudStack.sections.storage.sections.volumes.listView.detailView + } + }; + + + // Storage Pool Metrics + cloudStack.sections.metrics.storagepool = { + title: 'label.metrics', + listView: { + id: 'primarystorages', + fields: { + name: { + label: 'label.metrics.name' + }, + property: { + label: 'label.metrics.property', + collapsible: true, + columns: { + state: { + label: 'label.metrics.state', + converter: function (str) { + // For localization + return str; + }, + indicator: { + 'Up': 'on', + 'Down': 'off', + 'Removed': 'off', + 'ErrorInMaintenance': 'off', + 'PrepareForMaintenance': 'transition', + 'CancelMaintenance': 'warning', + 'Maintenance': 'warning', + }, + compact: true + }, + scope: { + label: 'label.metrics.scope' + }, + type: { + label: 'label.metrics.disk.storagetype' + }, + } + }, + disk: { + label: 'label.metrics.disk', + collapsible: true, + columns: { + disksizeused: { + label: 'label.metrics.disk.used', + thresholdcolor: true, + thresholds: { + notification: 'storagenotificationthreshold', + disable: 'storagedisablethreshold' + } + }, + disksizetotal: { + label: 'label.metrics.disk.total' + }, + disksizeallocated: { + label: 'label.metrics.disk.allocated', + thresholdcolor: true, + thresholds: { + notification: 'storageallocatednotificationthreshold', + disable: 'storageallocateddisablethreshold' + } + }, + disksizeunallocated: { + label: 'label.metrics.disk.unallocated' + } + } + } + }, + dataProvider: function(args) { + var data = {}; + listViewDataProvider(args, data); + if (args.context.metricsFilterData && args.context.metricsFilterData.key && args.context.metricsFilterData.value) { + data[args.context.metricsFilterData.key] = args.context.metricsFilterData.value; + } + $.ajax({ + url: createURL('listStoragePools'), + data: data, + success: function(json) { + var items = []; + if (json && json.liststoragepoolsresponse && json.liststoragepoolsresponse.storagepool) { + items = json.liststoragepoolsresponse.storagepool; + $.each(items, function(idx, pool) { + items[idx].name = pool.name; + items[idx].state = pool.state; + items[idx].scope = pool.scope; + items[idx].type = pool.type; + items[idx].overprovisionfactor = parseFloat(pool.overprovisionfactor); + if (pool.disksizeused) { + items[idx].disksizeused = (parseFloat(pool.disksizeused)/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB'; + } else { + items[idx].disksizeused = ''; + } + items[idx].disksizetotal = parseFloat(pool.disksizetotal); + items[idx].disksizeallocated = parseFloat(pool.disksizeallocated); + items[idx].disksizeunallocated = (items[idx].overprovisionfactor * items[idx].disksizetotal) - items[idx].disksizeallocated; + + // Format presentation + items[idx].disksizetotal = (items[idx].disksizetotal/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB (x' + items[idx].overprovisionfactor + ')'; + items[idx].disksizeallocated = (items[idx].disksizeallocated/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB'; + items[idx].disksizeunallocated = (items[idx].disksizeunallocated/(1024.0*1024.0*1024.0)).toFixed(2) + ' GB'; + + // Threshold color coding + items[idx].storagenotificationthreshold = 0.75 * parseFloat(items[idx].disksizetotal); + items[idx].storagedisablethreshold = 0.95 * parseFloat(items[idx].disksizetotal); + items[idx].storageallocatednotificationthreshold = 0.75 * parseFloat(items[idx].disksizetotal) * items[idx].overprovisionfactor; + items[idx].storageallocateddisablethreshold = 0.95 * parseFloat(items[idx].disksizetotal) * items[idx].overprovisionfactor; + + + var getThresholds = function(data, items, idx) { + data.listAll = true; + $.ajax({ + url: createURL('listConfigurations'), + data: data, + success: function(json) { + if (json.listconfigurationsresponse && json.listconfigurationsresponse.configuration) { + $.each(json.listconfigurationsresponse.configuration, function(i, config) { + switch (config.name) { + case 'cluster.storage.allocated.capacity.notificationthreshold': + items[idx].storageallocatednotificationthreshold = parseFloat(config.value) * parseFloat(items[idx].disksizetotal); + break; + case 'cluster.storage.capacity.notificationthreshold': + items[idx].storagenotificationthreshold = parseFloat(config.value) * parseFloat(items[idx].disksizetotal); + break; + case 'pool.storage.allocated.capacity.disablethreshold': + items[idx].storageallocateddisablethreshold = parseFloat(config.value) * parseFloat(items[idx].disksizetotal); + break; + case 'pool.storage.capacity.disablethreshold': + items[idx].storagedisablethreshold = parseFloat(config.value) * parseFloat(items[idx].disksizetotal); + break; + } + }); + } + }, + async: false + }); + }; + // Update global and cluster level thresholds + getThresholds({}, items, idx); + getThresholds({clusterid: pool.clusterid}, items, idx); + }); + } + args.response.success({ + data: items + }); + } + }); + }, + browseBy: { + filterBy: 'storageid', + resource: 'volumes' + }, + detailView: cloudStack.sections.system.subsections['primary-storage'].listView.detailView + } + }; + +})(cloudStack); diff --git a/ui/scripts/storage.js b/ui/scripts/storage.js index 77bd00284b1..09d0052629a 100644 --- a/ui/scripts/storage.js +++ b/ui/scripts/storage.js @@ -245,6 +245,20 @@ } }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'volumes'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } + }, + uploadVolume: { isHeader: true, label: 'label.upload', diff --git a/ui/scripts/system.js b/ui/scripts/system.js index c2680b8f0df..eaf2e0daab8 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,20 @@ }); } } - } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'zones'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } + }, }, detailView: { @@ -9484,7 +9497,7 @@ } } } - }), + }, subsections: { virtualRouters: { sectionSelect: { @@ -14524,6 +14537,19 @@ } }); } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'clusters'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } } }, @@ -15226,11 +15252,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); @@ -15833,6 +15860,19 @@ return 'label.add.host'; } } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'hosts'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } } }, detailView: { @@ -17647,6 +17687,19 @@ return 'label.add.primary.storage'; } } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'storagepool'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } } }, @@ -19883,6 +19936,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); diff --git a/ui/scripts/ui-custom/metricsView.js b/ui/scripts/ui-custom/metricsView.js new file mode 100644 index 00000000000..ef5dbba4ba4 --- /dev/null +++ b/ui/scripts/ui-custom/metricsView.js @@ -0,0 +1,140 @@ +// Licensed to the Apache Software Foundation (ASF) under one +// or more contributor license agreements. See the NOTICE file +// distributed with this work for additional information +// regarding copyright ownership. The ASF licenses this file +// to you under the Apache License, Version 2.0 (the +// "License"); you may not use this file except in compliance +// with the License. You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, +// software distributed under the License is distributed on an +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +// KIND, either express or implied. See the License for the +// specific language governing permissions and limitations +// under the License. +(function($, cloudStack) { + + cloudStack.uiCustom.metricsView = function(args) { + return function() { + var metricsListView = cloudStack.sections.metrics.listView; + var metricsLabel = _l('label.metrics'); + + if (args.resource == 'zones') { + metricsListView = cloudStack.sections.metrics.zones.listView; + metricsLabel = _l('label.zones') + ' ' + metricsLabel; + } else if (args.resource == 'clusters') { + metricsListView = cloudStack.sections.metrics.clusters.listView; + metricsLabel = _l('label.clusters') + ' ' + metricsLabel; + } else if (args.resource == 'hosts') { + metricsListView = cloudStack.sections.metrics.hosts.listView; + metricsLabel = _l('label.hosts') + ' ' + metricsLabel; + } else if (args.resource == 'storagepool') { + metricsListView = cloudStack.sections.metrics.storagepool.listView; + metricsLabel = _l('label.primary.storage') + ' ' + metricsLabel; + } else if (args.resource == 'vms') { + metricsListView = cloudStack.sections.metrics.instances.listView; + metricsLabel = _l('label.instances') + ' ' + metricsLabel; + } else if (args.resource == 'volumes') { + metricsListView = cloudStack.sections.metrics.volumes.listView; + metricsLabel = _l('label.volumes') + ' ' + metricsLabel; + } + + // list view refresh button + metricsListView.actions = { + refreshMetrics: { + label: 'label.refresh', + isHeader: true, + addRow: true, + action: { + custom: function (args) { + return function() { + }; + } + } + } + }; + + metricsListView.hideSearchBar = true; + metricsListView.needsRefresh = true; + metricsListView.noSplit = true; + metricsListView.horizontalOverflow = true; + metricsListView.groupableColumns = true; + + if (args.resource == 'volumes') { + metricsListView.groupableColumns = false; + } + + var metricsContext = cloudStack.context; + if (metricsContext.metricsFilterData) { + delete metricsContext.metricsFilterData; + } + if (args.filterBy) { + metricsContext.metricsFilterData = { + key: args.filterBy, + value: args.id + }; + } + + var $browser = $('#browser .container'); + return $browser.cloudBrowser('addPanel', { + title: metricsLabel, + maximizeIfSelected: true, + complete: function($newPanel) { + $newPanel.listView({ + $browser: $browser, + context: metricsContext, + listView: metricsListView + }); + // Make metrics tables horizontally scrollable + $newPanel.find('.list-view').css({'overflow-x': 'visible'}); + // Refresh metrics when refresh button is clicked + $newPanel.find('.refreshMetrics').click(function() { + var sortedTh = $newPanel.find('table thead tr:last th.sorted'); + var thIndex = sortedTh.index(); + var thClassName = null; + var wasSorted = false; + var sortClassName = 'asc'; + if (sortedTh && sortedTh.hasClass('sorted')) { + wasSorted = true; + var classes = sortedTh.attr('class').split(/\s+/); + thClassName = classes[0]; + if (classes.indexOf('desc') > -1) { + sortClassName = 'desc'; + } + } + $browser.cloudBrowser('removeLastPanel', {}); + var refreshedPanel = cloudStack.uiCustom.metricsView(args)(); + if (wasSorted && thClassName) { + refreshedPanel.find('th.' + thClassName).filter(function() { + return $(this).index() == thIndex; + }).addClass('sorted').addClass(sortClassName); + } + }); + + var filterMetricView = metricsListView.browseBy; + if (filterMetricView) { + $newPanel.bind('click', function(event) { + event.stopPropagation(); + var $target = $(event.target); + var id = $target.closest('tr').data('list-view-item-id'); + var jsonObj = $target.closest('tr').data('jsonObj'); + if (filterMetricView.filterKey && jsonObj) { + if (jsonObj.hasOwnProperty(filterMetricView.filterKey)) { + id = jsonObj[filterMetricView.filterKey]; + } else { + return; // return if provided key is missing + } + } + if (id && ($target.hasClass('first') || $target.parent().hasClass('first')) && ($target.is('td') || $target.parent().is('td'))) { + filterMetricView.id = id; + cloudStack.uiCustom.metricsView(filterMetricView)(); + } + }); + } + } + }); + }; + }; +})(jQuery, cloudStack); diff --git a/ui/scripts/ui/widgets/cloudBrowser.js b/ui/scripts/ui/widgets/cloudBrowser.js index 007025b14be..b7a5c38b390 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 */ diff --git a/ui/scripts/ui/widgets/dataTable.js b/ui/scripts/ui/widgets/dataTable.js index 4c025314be0..45740527f71 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; }); - 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; } diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js index c3c6930752e..c0740aa6a6a 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 = $('').prependTo($table).append($('')); + var $tr = $(''); + var $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 = $('').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 = $('').css({'margin-right': '10px'}); + karetLeft.attr('title', trText); + karetLeft.appendTo($th); + $('').html('«').css({'font-size': '15px', 'float': 'right'}).appendTo(karetLeft); + $('').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, ''); + $('').html(trText.substring(0,3)).appendTo(karetRight); + $('').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 = $('').appendTo($thead); + $tr.addClass('groupable-header'); + } + if (multiSelect) { - var $th = $('').addClass('multiselect').appendTo($thead.find('tr')); + var $th = $('').addClass('multiselect').appendTo($tr); var content = $('') .attr('type', 'checkbox') .addClass('multiSelectMasterCheckbox') @@ -794,18 +898,24 @@ if ($.inArray(key, hiddenFields) != -1) return true; var field = this; - var $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( $('').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( $('') .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( $('') .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 @@ $('
').html(_s(content))
                         );
                     } else {
-                        $td.append(
-                            $('').html(_s(content))
-                        );
+                        var 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 = $('
').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) {