etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

CLOUDSTACK-9020: Metrics views for CloudStack UI 

Implements following:
- A metrics table widget that is:
  - vertically and horizontally scrollable with pagination/infinite scrolling
  - sortable columns (client side)
  - groupable/collapsible columns
  - alternate row coloring
  - refresh button to refresh views
  - threshold table cell coloring
  - panel/breadcrumb navigation
  - quick view action column
  - translatable labels
- Sortable column for all CloudStack tables (client side)
- Configurable UI pagesize for list API calls, 'default.ui.page.size'
- Metrics views: Zones, Clusters, Hosts, Instances, Storage pools, Volumes
- Resource filtering/navigation: Zones->Clusters->Hosts->Instances->Volumes, Storage Pool->Volumes

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav 2015-11-03 15:27:46 +05:30
parent 173e2462b3
commit 938f1d2a7d
15 changed files with 1780 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,6 +26,8 @@ public class ApiServiceConfiguration implements Configurable {
public static final ConfigKey<String> ManagementHostIPAdr = new ConfigKey<String>("Advanced", String.class, "host", "localhost", "The ip address of management server", true);
public static final ConfigKey<String> ApiServletPath = new ConfigKey<String>("Advanced", String.class, "endpointe.url", "http://localhost:8080/client/api",
"API end point. Can be used by CS components/services deployed remotely, for sending CS API requests", true);
public static final ConfigKey<Long> DefaultUIPageSize = new ConfigKey<Long>("Advanced", Long.class, "default.ui.page.size", "20",
"The default pagesize to be used by UI and other clients when making list* API calls", true, ConfigKey.Scope.Global);
@Override
public String getConfigComponentName() {
@ -34,7 +36,7 @@ public class ApiServiceConfiguration implements Configurable {
@Override
public ConfigKey<?>[] getConfigKeys() {
return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath};
return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath, DefaultUIPageSize};
}
}

35
client/WEB-INF/classes/resources/messages.properties
View File

@ -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

84
ui/css/cloudstack3.css
View File

@ -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,

35
ui/dictionary.jsp
View File

@ -832,6 +832,41 @@ dictionary = {
'label.menu.virtual.appliances': '<fmt:message key="label.menu.virtual.appliances" />',
'label.menu.virtual.resources': '<fmt:message key="label.menu.virtual.resources" />',
'label.menu.volumes': '<fmt:message key="label.menu.volumes" />',
'label.metrics': '<fmt:message key="label.metrics" />',
'label.metrics.allocated': '<fmt:message key="label.metrics.allocated" />',
'label.metrics.clusters': '<fmt:message key="label.metrics.clusters" />',
'label.metrics.cpu.allocated': '<fmt:message key="label.metrics.cpu.allocated" />',
'label.metrics.cpu.max.dev': '<fmt:message key="label.metrics.cpu.max.dev" />',
'label.metrics.cpu.total': '<fmt:message key="label.metrics.cpu.total" />',
'label.metrics.cpu.usage': '<fmt:message key="label.metrics.cpu.usage" />',
'label.metrics.cpu.used.avg': '<fmt:message key="label.metrics.cpu.used.avg" />',
'label.metrics.disk': '<fmt:message key="label.metrics.disk" />',
'label.metrics.disk.iops.total': '<fmt:message key="label.metrics.disk.iops.total" />',
'label.metrics.disk.read': '<fmt:message key="label.metrics.disk.read" />',
'label.metrics.disk.size': '<fmt:message key="label.metrics.disk.size" />',
'label.metrics.disk.storagetype': '<fmt:message key="label.metrics.disk.storagetype" />',
'label.metrics.disk.usage': '<fmt:message key="label.metrics.disk.usage" />',
'label.metrics.disk.used': '<fmt:message key="label.metrics.disk.used" />',
'label.metrics.disk.total': '<fmt:message key="label.metrics.disk.total" />',
'label.metrics.disk.allocated': '<fmt:message key="label.metrics.disk.allocated" />',
'label.metrics.disk.unallocated': '<fmt:message key="label.metrics.disk.unallocated" />',
'label.metrics.disk.write': '<fmt:message key="label.metrics.disk.write" />',
'label.metrics.hosts': '<fmt:message key="label.metrics.hosts" />',
'label.metrics.memory.allocated': '<fmt:message key="label.metrics.memory.allocated" />',
'label.metrics.memory.max.dev': '<fmt:message key="label.metrics.memory.max.dev" />',
'label.metrics.memory.total': '<fmt:message key="label.metrics.memory.total" />',
'label.metrics.memory.usage': '<fmt:message key="label.metrics.memory.usage" />',
'label.metrics.memory.used.avg': '<fmt:message key="label.metrics.memory.used.avg" />',
'label.metrics.name': '<fmt:message key="label.metrics.name" />',
'label.metrics.network.read': '<fmt:message key="label.metrics.network.read" />',
'label.metrics.network.usage': '<fmt:message key="label.metrics.network.usage" />',
'label.metrics.network.write': '<fmt:message key="label.metrics.network.write" />',
'label.metrics.num.cpu.cores': '<fmt:message key="label.metrics.num.cpu.cores" />',
'label.metrics.property': '<fmt:message key="label.metrics.property" />',
'label.metrics.scope': '<fmt:message key="label.metrics.scope" />',
'label.metrics.state': '<fmt:message key="label.metrics.state" />',
'label.metrics.storagepool': '<fmt:message key="label.metrics.storagepool" />',
'label.metrics.vm.name': '<fmt:message key="label.metrics.vm.name" />',
'label.migrate.instance.to': '<fmt:message key="label.migrate.instance.to" />',
'label.migrate.instance.to.host': '<fmt:message key="label.migrate.instance.to.host" />',
'label.migrate.instance.to.ps': '<fmt:message key="label.migrate.instance.to.ps" />',

BIN
ui/images/sprites.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 194 KiB

2
ui/index.jsp
View File

@ -1763,6 +1763,7 @@
<script type="text/javascript" src="scripts/ui-custom/granularSettings.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/zoneChart.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/dashboard.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/metricsView.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/installWizard.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/installWizard.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/projects.js?t=<%=now%>"></script>
@ -1799,6 +1800,7 @@
<script type="text/javascript" src="scripts/vm_snapshots.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/projectSelect.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/ui-custom/saml.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/metrics.js?t=<%=now%>"></script>
<!-- Plugin/module API -->
<script type="text/javascript" src="scripts/ui-custom/pluginListing.js?t=<%=now%>"></script>

20
ui/scripts/cloudStack.js
View File

@ -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',

18
ui/scripts/instances.js
View File

@ -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) {

1087
ui/scripts/metrics.js Normal file
View File

File diff suppressed because it is too large Load Diff

17
ui/scripts/storage.js
View File

@ -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',

82
ui/scripts/system.js
View File

@ -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);

140
ui/scripts/ui-custom/metricsView.js Normal file
View File

@ -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);

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

@ -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
*/

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

@ -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;
}

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

@ -765,10 +765,12 @@
var createHeader = function(preFilter, fields, $table, actions, options) {
if (!options) options = {};
var $thead = $('<thead>').prependTo($table).append($('<tr>'));
var $tr = $('<tr>');
var $thead = $('<thead>').prependTo($table).append($tr);
var reorder = options.reorder;
var detailView = options.detailView;
var multiSelect = options.multiSelect;
var groupableColumns = options.groupableColumns;
var viewArgs = $table.closest('.list-view').data('view-args');
var uiCustom = viewArgs.uiCustom;
var hiddenFields = [];
@ -776,8 +778,110 @@
if (preFilter != null)
hiddenFields = preFilter();
var addColumnToTr = function($tr, key, colspan, label, needsCollapsibleColumn) {
var trText = _l(label);
var $th = $('<th>').addClass(key).attr('colspan', colspan).appendTo($tr);
if ($th.index()) $th.addClass('reduced-hide');
$th.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3'});
if (needsCollapsibleColumn) {
var karetLeft = $('<span>').css({'margin-right': '10px'});
karetLeft.attr('title', trText);
karetLeft.appendTo($th);
$('<span>').html('&laquo').css({'font-size': '15px', 'float': 'right'}).appendTo(karetLeft);
$('<span>').html(trText).appendTo(karetLeft);
$th.click(function(event) {
event.stopPropagation();
var $th = $(this);
var startIndex = 0;
$th.prevAll('th').each(function() {
startIndex += parseInt($(this).attr('colspan'));
});
var endIndex = startIndex + parseInt($th.attr('colspan'));
// Hide Column group
$th.hide();
$th.closest('table').find('tbody td').filter(function() {
return $(this).index() >= startIndex && $(this).index() < endIndex;
}).hide();
$th.closest('table').find('thead tr:last th').filter(function() {
return $(this).index() >= startIndex && $(this).index() < endIndex;
}).hide();
// Show collapsible column with blank cells
$th.next('th').show();
$th.closest('table').find('tbody td').filter(function() {
return $(this).index() == endIndex;
}).show();
$th.closest('table').find('thead tr:last th').filter(function() {
return $(this).index() == endIndex;
}).show();
// Refresh list view
$tr.closest('.list-view').find('.no-split').dataTable('refresh');
});
var karetRight = addColumnToTr($tr, 'collapsible-column', 1, '');
$('<span>').html(trText.substring(0,3)).appendTo(karetRight);
$('<span>').css({'font-size': '15px'}).html(' &raquo').appendTo(karetRight);
karetRight.attr('title', trText);
karetRight.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3', 'min-width': '10px', 'width': '10px', 'max-width': '45px', 'padding': '2px'});
karetRight.hide();
karetRight.click(function(event) {
event.stopPropagation();
var prevTh = $(this).prev('th');
var startIndex = 0;
prevTh.prevAll('th').each(function() {
startIndex += parseInt($(this).attr('colspan'));
});
var endIndex = startIndex + parseInt(prevTh.attr('colspan'));
prevTh.show();
prevTh.closest('table').find('tbody td').filter(function() {
return $(this).index() >= startIndex && $(this).index() < endIndex;
}).show();
prevTh.closest('table').find('thead tr:last th').filter(function() {
return $(this).index() >= startIndex && $(this).index() < endIndex;
}).show();
prevTh.next('th').hide();
prevTh.closest('table').find('tbody td').filter(function() {
return $(this).index() == endIndex;
}).hide();
prevTh.closest('table').find('thead tr:last th').filter(function() {
return $(this).index() == endIndex;
}).hide();
$tr.closest('.list-view').find('.no-split').dataTable('refresh');
});
} else {
$th.html(trText);
}
return $th;
};
if (groupableColumns) {
$tr.addClass('groupable-header-columns').addClass('groupable-header');
$.each(fields, function(key) {
var field = this;
if (field.columns) {
var colspan = Object.keys(field.columns).length;
addColumnToTr($tr, key, colspan, field.label, true);
} else {
var label = '';
if (key == 'name') {
label = 'label.resources';
}
addColumnToTr($tr, key, 1, label);
}
return true;
});
if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
addColumnToTr($tr, 'quick-view', 1, '');
}
$tr = $('<tr>').appendTo($thead);
$tr.addClass('groupable-header');
}
if (multiSelect) {
var $th = $('<th>').addClass('multiselect').appendTo($thead.find('tr'));
var $th = $('<th>').addClass('multiselect').appendTo($tr);
var content = $('<input>')
.attr('type', 'checkbox')
.addClass('multiSelectMasterCheckbox')
@ -794,18 +898,24 @@
if ($.inArray(key, hiddenFields) != -1)
return true;
var field = this;
var $th = $('<th>').addClass(key).appendTo($thead.find('tr'));
if ($th.index()) $th.addClass('reduced-hide');
$th.html(_l(field.label));
if (field.columns) {
$.each(field.columns, function(idx) {
var subfield = this;
addColumnToTr($tr, key, 1, subfield.label);
return true;
});
var blankCell = addColumnToTr($tr, 'collapsible-column', 1, '');
blankCell.css({'min-width': '10px', 'width': '10px'});
blankCell.hide();
} else {
addColumnToTr($tr, key, 1, field.label);
}
return true;
});
// Re-order row buttons
if (reorder) {
$thead.find('tr').append(
$tr.append(
$('<th>').html(_l('label.order')).addClass('reorder-actions reduced-hide')
);
}
@ -826,7 +936,7 @@
);
if (actions && !options.noActionCol && renderActionCol(actions) && actionsArray.length != headerActionsArray.length) {
$thead.find('tr').append(
$tr.append(
$('<th></th>')
.html(_l('label.actions'))
.addClass('actions reduced-hide')
@ -835,7 +945,7 @@
// Quick view
if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
$thead.find('tr').append(
$tr.append(
$('<th></th>')
.html(_l('label.quickview'))
.addClass('quick-view reduced-hide')
@ -1033,6 +1143,7 @@
var listViewArgs = $listView.data('view-args');
var uiCustom = listViewArgs.uiCustom;
var subselect = uiCustom ? listViewArgs.listView.subselect : null;
var hasCollapsibleColumn = false;
if (!(data && data.length)) {
$listView.data('end-of-table', true);
@ -1088,8 +1199,25 @@
);
}
// Add field data
var reducedFields = {};
var idx = 0;
$.each(fields, function(key) {
var field = this;
if (field.columns) {
$.each(field.columns, function(innerKey) {
reducedFields[innerKey] = this;
});
reducedFields['blank-cell-' + idx] = {blankCell: true};
idx += 1;
hasCollapsibleColumn = true;
} else {
reducedFields[key] = this;
}
return true;
});
// Add field data
$.each(reducedFields, function(key) {
if ($.inArray(key, hiddenFields) != -1)
return true;
var field = this;
@ -1103,6 +1231,11 @@
$td.addClass('truncated');
}
if (field.blankCell) {
$td.css({'min-width': '10px', 'width': '10px'});
$td.hide();
}
if (field.indicator) {
$td.addClass('state').addClass(field.indicator[content]);
@ -1110,6 +1243,19 @@
//$tr.find('td:first').addClass('item-state-' + field.indicator[content]);
}
if (field.thresholdcolor && field.thresholds) {
if ((field.thresholds.disable in dataItem) && (field.thresholds.notification in dataItem)) {
var disableThreshold = parseFloat(dataItem[field.thresholds.disable]);
var notificationThreshold = parseFloat(dataItem[field.thresholds.notification]);
var value = parseFloat(content);
if (value >= disableThreshold) {
$td.addClass('alert-disable-threshold');
} else if (value >= notificationThreshold) {
$td.addClass('alert-notification-threshold');
}
}
}
if (field.id == true) id = field.id;
if ($td.index()) $td.addClass('reduced-hide');
if (field.action) {
@ -1136,9 +1282,12 @@
$ul.appendTo($td);
} else {
$td.append(
$('<span>').html(_s(content))
);
var span = $('<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 = $('<div>').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) {