Quick view UI: Fix to support multiple quick links There was previously a limitation in the detail view/quickview where only 1 'view all' link was visible per page. Change this to show n number of view all links, if an array is passed to 'viewAll.' This also lowers the # of clicks necessary to navigate to some items.
This also adds more view all buttons to instances, storage, and system resources. Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/1ac86e96 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/1ac86e96 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/1ac86e96 Branch: refs/heads/master Commit: 1ac86e96cbc944ce094f894d06147c6944381382 Parents: fe6fc0a Author: Brian Federle <[email protected]> Authored: Thu Feb 21 15:09:03 2013 -0800 Committer: Brian Federle <[email protected]> Committed: Thu Feb 21 15:09:03 2013 -0800 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 34 +++++++-- ui/scripts/instances.js | 109 ++++++++++++++++++----------- ui/scripts/storage.js | 16 +++++ ui/scripts/system.js | 16 +++-- ui/scripts/ui/widgets/detailView.js | 103 ++++++++++++++++++---------- 5 files changed, 187 insertions(+), 91 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index efdae35..cf18ab2 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -1276,14 +1276,14 @@ div.list-view td.state.off span { /** Quick view tooltip*/ .quick-view-tooltip { - width: 400px; + width: 470px; display: inline-block; - margin-left: -359px; + margin-left: -462px; padding-top: 50px; } .quick-view-tooltip > div.title { - width: 376px; + width: 444px; position: absolute; top: 71px; left: 10px; @@ -1320,7 +1320,7 @@ div.list-view td.state.off span { .quick-view-tooltip .container { border: 1px solid #9EA2A5; background: #CCCFD6; - width: 400px; + width: 470px; min-height: 100px; height: auto; overflow: hidden; @@ -1337,7 +1337,7 @@ div.list-view td.state.off span { } .quick-view-tooltip .detail-view .main-groups { - width: 394px; + width: 456px; height: 132px; position: absolute; top: 55px; @@ -1484,7 +1484,7 @@ div.list-view td.state.off span { } .quick-view-tooltip .detail-view .detail-group.actions .detail-actions { - width: 400px; + width: 460px; height: auto; background: none; vertical-align: top; @@ -1495,7 +1495,7 @@ div.list-view td.state.off span { position: relative; left: 0px; float: left; - width: 394px; + width: 460px; height: 22px; border-top: 1px solid #808080; /*+box-shadow:inset 0px 1px #FFFFFF;*/ @@ -1911,6 +1911,20 @@ div.details .main-groups label.error { top: 6px; } +.detail-view td.view-all.multiple { + width: 123px !important; + height: 22px; + float: left; + display: block; + margin: 8px 2px 8px 8px; + border: none !important; + /*+box-shadow:none;*/ + -moz-box-shadow: none !important; + -webkit-box-shadow: none !important; + -o-box-shadow: none !important; + box-shadow: none !important; +} + /*** Actions*/ div.detail-group.actions { padding: 0; @@ -1935,6 +1949,12 @@ div.detail-group.actions td { height: 26px; } +.detail-group table td.detail-actions.full-length { + display: block; + width: 99%; + border-bottom: 1px solid #AAAAAA; +} + .detail-group table td.detail-actions .action.text { padding: 0px 6px 0px 0px; cursor: pointer; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/instances.js ---------------------------------------------------------------------- diff --git a/ui/scripts/instances.js b/ui/scripts/instances.js index 264b5a1..76ca693 100644 --- a/ui/scripts/instances.js +++ b/ui/scripts/instances.js @@ -34,15 +34,15 @@ }, label: 'state.Destroyed' } - }, + }, preFilter: function(args) { var hiddenFields = []; - if(!isAdmin()) { + if(!isAdmin()) { hiddenFields.push('instancename'); - } + } return hiddenFields; - }, - fields: { + }, + fields: { name: { label: 'label.name' }, instancename: { label: 'label.internal.name' }, displayname: { label: 'label.display.name' }, @@ -57,18 +57,18 @@ } } }, - + advSearchFields: { name: { label: 'Name' }, - zoneid: { - label: 'Zone', - select: function(args) { + zoneid: { + label: 'Zone', + select: function(args) { $.ajax({ url: createURL('listZones'), data: { listAll: true }, - success: function(json) { + success: function(json) { var zones = json.listzonesresponse.zone; args.response.success({ @@ -81,16 +81,16 @@ }); } }); - } - }, - - domainid: { - label: 'Domain', + } + }, + + domainid: { + label: 'Domain', select: function(args) { if(isAdmin() || isDomainAdmin()) { $.ajax({ url: createURL('listDomains'), - data: { + data: { listAll: true, details: 'min' }, @@ -120,21 +120,21 @@ else return true; } - }, - account: { + }, + account: { label: 'Account', isHidden: function(args) { if(isAdmin() || isDomainAdmin()) return false; else return true; - } + } }, - + tagKey: { label: 'Tag Key' }, - tagValue: { label: 'Tag Value' } - }, - + tagValue: { label: 'Tag Value' } + }, + // List view actions actions: { // Add instance wizard @@ -145,9 +145,9 @@ custom: cloudStack.uiCustom.instanceWizard(cloudStack.instanceWizard) }, - messages: { - notification: function(args) { - return 'label.vm.add'; + messages: { + notification: function(args) { + return 'label.vm.add'; } }, notification: { @@ -346,49 +346,49 @@ dataProvider: function(args) { var data = {}; - listViewDataProvider(args, data); - + listViewDataProvider(args, data); + if(args.filterBy != null) { //filter dropdown if(args.filterBy.kind != null) { switch(args.filterBy.kind) { - case "all": + case "all": break; case "mine": if (!args.context.projects) { $.extend(data, { - domainid: g_domainid, + domainid: g_domainid, account: g_account - }); - } + }); + } break; case "running": $.extend(data, { state: 'Running' - }); + }); break; case "stopped": $.extend(data, { state: 'Stopped' - }); + }); break; case "destroyed": $.extend(data, { state: 'Destroyed' - }); + }); break; } - } + } } - - if("hosts" in args.context) { + + if("hosts" in args.context) { $.extend(data, { hostid: args.context.hosts[0].id }); } - + $.ajax({ url: createURL('listVirtualMachines'), - data: data, + data: data, success: function(json) { var items = json.listvirtualmachinesresponse.virtualmachine; // Code for hiding "Expunged VMs" @@ -419,7 +419,34 @@ detailView: { name: 'Instance details', - viewAll: [{ path: 'storage.volumes', label: 'label.volumes' }, { path: 'vmsnapshots', label: 'Snapshots' } ], + viewAll: [ + { path: 'storage.volumes', label: 'label.volumes' }, + { path: 'vmsnapshots', label: 'label.snapshots' }, + { + path: '_zone.hosts', + label: 'label.hosts', + preFilter: function(args) { + return isAdmin(); + }, + updateContext: function(args) { + var instance = args.context.instances[0]; + var zone; + + $.ajax({ + url: createURL('listZones'), + data: { + id: instance.zoneid + }, + async: false, + success: function(json) { + zone = json.listzonesresponse.zone[0] + } + }); + + return { zones: [zone] }; + } + } + ], tabFilter: function(args) { var hiddenTabs = []; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/storage.js ---------------------------------------------------------------------- diff --git a/ui/scripts/storage.js b/ui/scripts/storage.js index 73a496e..5c19bd0 100644 --- a/ui/scripts/storage.js +++ b/ui/scripts/storage.js @@ -1282,6 +1282,7 @@ dataProvider: function(args) { var data = {}; + var instanceVolumeIds = []; listViewDataProvider(args, data); if(args.context != null) { @@ -1289,6 +1290,21 @@ $.extend(data, { volumeid: args.context.volumes[0].id }); + } else if (args.context.instances) { + $.ajax({ + url: createURL('listVolumes'), + data: { + virtualmachineid: args.context.instances[0].id, + listAll: true + }, + async: false, + success: function(json) { + instanceVolumeIds = $.map(json.listvolumesresponse.volume, function(volume) { + return volume.id; + }) + } + }); + data.volumeid = instanceVolumeIds.join(','); } } http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/system.js ---------------------------------------------------------------------- diff --git a/ui/scripts/system.js b/ui/scripts/system.js index e51bf90..8e54d02 100644 --- a/ui/scripts/system.js +++ b/ui/scripts/system.js @@ -7965,11 +7965,17 @@ } } } - array1.push("&zoneid=" + args.context.zones[0].id); - if("pods" in args.context) - array1.push("&podid=" + args.context.pods[0].id); - if("clusters" in args.context) - array1.push("&clusterid=" + args.context.clusters[0].id); + + if (!args.context.instances) { + array1.push("&zoneid=" + args.context.zones[0].id); + if("pods" in args.context) + array1.push("&podid=" + args.context.pods[0].id); + if("clusters" in args.context) + array1.push("&clusterid=" + args.context.clusters[0].id); + } else { + array1.push("&hostid=" + args.context.instances[0].hostid); + } + $.ajax({ url: createURL("listHosts&type=Routing" + array1.join("") + "&page=" + args.page + "&pagesize=" + pageSize), dataType: "json", http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/1ac86e96/ui/scripts/ui/widgets/detailView.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js index 97933a9..f0cc8fd 100644 --- a/ui/scripts/ui/widgets/detailView.js +++ b/ui/scripts/ui/widgets/detailView.js @@ -578,7 +578,7 @@ } }; - var viewAll = function(viewAllID) { + var viewAll = function(viewAllID, options) { var $detailView = $('div.detail-view:last'); var args = $detailView.data('view-args'); var cloudStackArgs = $('[cloudstack-container]').data('cloudStack-args'); @@ -586,6 +586,7 @@ var listViewArgs, viewAllPath; var $listView; var isCustom = $.isFunction(viewAllID.custom); + var updateContext = options.updateContext; if (isCustom) { $browser.cloudBrowser('addPanel', { @@ -637,6 +638,10 @@ // Load context data var context = $.extend(true, {}, $detailView.data('view-args').context); + if (updateContext) { + $.extend(context, updateContext({ context: context })); + } + // Make panel var $panel = $browser.cloudBrowser('addPanel', { title: _l(listViewArgs.title), @@ -823,16 +828,7 @@ */ $name.html(_l(value.label)); - - if (!value.isExternalLink) { - $value.html(_s(content)); - } else { - $value.html('').append( - $('<a>').attr({ - href: _s(content) - }).html(_s(content)) - ); - } + $value.html(_s(content)); // Set up validation metadata $value.data('validation-rules', value.validation); @@ -901,32 +897,58 @@ $actions.prependTo($firstRow.closest('div.detail-group').closest('.details')); } if (detailViewArgs.viewAll && showViewAll) { - - if( !(detailViewArgs.viewAll instanceof Array)){ - detailViewArgs.viewAll = [detailViewArgs.viewAll]; - } - $.each(detailViewArgs.viewAll, function(n, view){ - $('<div>') - .addClass('view-all') - .append( - $('<a>') - .attr({ href: '#' }) - .css('padding','0 1px') - .data('detail-view-link-view-all', view) + if (!$.isArray(detailViewArgs.viewAll)) { + $('<div>') + .addClass('view-all') + .append( + $('<a>') + .attr({ href: '#' }) + .data('detail-view-link-view-all', detailViewArgs.viewAll) + .append( + $('<span>').html(_l('label.view') + ' ' + _l(detailViewArgs.viewAll.label)) + ) + ) + .append( + $('<div>').addClass('end') + ) + .appendTo( + $('<td>') + .addClass('view-all') + .appendTo($actions.find('tr')) + ); + } else { + $(detailViewArgs.viewAll).each(function() { + var viewAllItem = this; + + if (viewAllItem.preFilter && + !viewAllItem.preFilter({ context: context })) { + return true; + } + + $('<div>') + .addClass('view-all') .append( - $('<span>').html(_l('label.view') + ' ' + _l(view.label)) + $('<a>') + .attr({ href: '#' }) + .data('detail-view-link-view-all', viewAllItem) + .append( + $('<span>').html(_l('label.view') + ' ' + _l(viewAllItem.label)) + ) ) - ) - .append( - $('<div>').addClass('end') - ) - .appendTo( - $('<td>') - .addClass('view-all') - .css('padding','9px 3px 8px 0') - .appendTo($actions.find('tr')) - ); - }); + .append( + $('<div>').addClass('end') + ) + .appendTo( + $('<td>') + .addClass('view-all multiple') + .appendTo($actions.find('tr')) + ); + + $actions.find('td.view-all:first').addClass('first'); + $actions.find('td.view-all:last').addClass('last'); + $actions.find('td.detail-actions').addClass('full-length'); + }); + } } } @@ -1187,12 +1209,17 @@ $('a').live('click', function(event) { var $target = $(event.target); var $viewAll = $target.closest('td.view-all a'); + var viewAllArgs; if ($target.closest('div.detail-view').size() && $target.closest('td.view-all a').size()) { + viewAllArgs = $viewAll.data('detail-view-link-view-all'); viewAll( - $viewAll.data('detail-view-link-view-all').custom ? - $viewAll.data('detail-view-link-view-all') : - $viewAll.data('detail-view-link-view-all').path + viewAllArgs.custom ? + viewAllArgs : + viewAllArgs.path, + { + updateContext: viewAllArgs.updateContext + } ); return false; }
