diff --git a/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java b/api/src/org/apache/cloudstack/config/ApiServiceConfiguration.java index 94c0a55de6a..1cf160bd923 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", "100", + "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 f5e058855dc..54276e45796 100644 --- a/client/WEB-INF/classes/resources/messages.properties +++ b/client/WEB-INF/classes/resources/messages.properties @@ -831,6 +831,41 @@ label.menu.templates=Templates label.menu.virtual.appliances=Virtual Appliances label.menu.virtual.resources=Virtual Resources label.menu.volumes=Volumes +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 c239e6726c5..3a4e963abdd 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -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; @@ -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*/ @@ -12420,6 +12482,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 414dab8783c..e0a41c1478f 100644 --- a/ui/dictionary.jsp +++ b/ui/dictionary.jsp @@ -832,6 +832,41 @@ dictionary = { 'label.menu.virtual.appliances': '', 'label.menu.virtual.resources': '', 'label.menu.volumes': '', +'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/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 60f3cc3832c..2541c2a342c 100644 --- a/ui/index.jsp +++ b/ui/index.jsp @@ -1763,6 +1763,7 @@ + @@ -1799,6 +1800,7 @@ + diff --git a/ui/scripts/cloudStack.js b/ui/scripts/cloudStack.js index 8b27452ddf3..1dcb99470ea 100644 --- a/ui/scripts/cloudStack.js +++ b/ui/scripts/cloudStack.js @@ -164,6 +164,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 b8d1299f74d..8c7e31fe6f1 100644 --- a/ui/scripts/instances.js +++ b/ui/scripts/instances.js @@ -288,7 +288,23 @@ poll: pollAsyncJobResult } }, - snapshot: vmSnapshotAction({ listView: true }) + snapshot: vmSnapshotAction({ listView: true }), + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + preFilter: function(args) { + return isAdmin(); + }, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'vms'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } + }, }, dataProvider: function(args) { diff --git a/ui/scripts/metrics.js b/ui/scripts/metrics.js new file mode 100644 index 00000000000..4fce7a0ab3f --- /dev/null +++ b/ui/scripts/metrics.js @@ -0,0 +1,1087 @@ +// 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++; + } + $.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 + }, + 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 + ')'; + }); + } + 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 + }, + 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); + + 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 d56835cd7e0..ee913f591cb 100644 --- a/ui/scripts/storage.js +++ b/ui/scripts/storage.js @@ -253,6 +253,23 @@ } }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + preFilter: function(args) { + return isAdmin(); + }, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'volumes'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } + }, + uploadVolume: { isHeader: true, label: 'label.upload.volume', diff --git a/ui/scripts/system.js b/ui/scripts/system.js index 7169a95632a..8d097f4fcd9 100644 --- a/ui/scripts/system.js +++ b/ui/scripts/system.js @@ -7622,7 +7622,7 @@ } } }, - show: cloudStack.uiCustom.physicalResources({ + physicalResourceSection: { sections: { physicalResources: { type: 'select', @@ -7705,7 +7705,23 @@ }); } } - } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + preFilter: function(args) { + return isAdmin(); + }, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'zones'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } + }, }, detailView: { @@ -9390,7 +9406,7 @@ } } } - }), + }, subsections: { virtualRouters: { sectionSelect: { @@ -14371,6 +14387,22 @@ } }); } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + preFilter: function(args) { + return isAdmin(); + }, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'clusters'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } } }, @@ -15073,11 +15105,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); @@ -15608,6 +15641,22 @@ return 'label.add.host'; } } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + preFilter: function(args) { + return isAdmin(); + }, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'hosts'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } } }, detailView: { @@ -17414,6 +17463,22 @@ return 'label.add.primary.storage'; } } + }, + viewMetrics: { + label: 'label.metrics', + isHeader: true, + addRow: false, + preFilter: function(args) { + return isAdmin(); + }, + action: { + custom: cloudStack.uiCustom.metricsView({resource: 'storagepool'}) + }, + messages: { + notification: function (args) { + return 'label.metrics'; + } + } } }, @@ -19649,7 +19714,10 @@ }); } } - + + // 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..22ddda6307f 100644 --- a/ui/scripts/ui/widgets/dataTable.js +++ b/ui/scripts/ui/widgets/dataTable.js @@ -141,49 +141,95 @@ * @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).html(); + if (hasAllRowsSameValue) { + if (firstElem !== text) { + hasAllRowsSameValue = false; + } } + if (isNumeric(text) || !text) { + numericDataCount++; + } + 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 +240,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 +288,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 07b60d95380..9b83940eaf6 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) { @@ -1136,9 +1282,12 @@ $ul.appendTo($td); } else { - $td.append( - $('').html(_s(content)) - ); + var span = $('').html(_s(content)); + if (field.compact) { + span.addClass('compact'); + span.html(''); + } + $td.append(span); } } @@ -1376,8 +1525,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'); @@ -1461,7 +1610,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 }); @@ -1476,6 +1625,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; }; @@ -1794,8 +1951,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) {