mirror of https://github.com/apache/cloudstack.git
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.
This commit is contained in:
Brian Federle
parent
fe6fc0a20e
commit
1ac86e96cb
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -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(',');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
.append(
|
||||
$('<span>').html(_l('label.view') + ' ' + _l(view.label))
|
||||
)
|
||||
)
|
||||
.append(
|
||||
$('<div>').addClass('end')
|
||||
)
|
||||
.appendTo(
|
||||
$('<td>')
|
||||
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')
|
||||
.css('padding','9px 3px 8px 0')
|
||||
.appendTo($actions.find('tr'))
|
||||
);
|
||||
});
|
||||
.append(
|
||||
$('<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 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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue