mirror of https://github.com/apache/cloudstack.git
VPC: Add tier detail view
On click of tier name, show a detail view of the specific tier.
This implemented as follows:
tiers: {
detailView: {
name: 'Tier details',
tabs: {
details: {
title: 'Details',
fields: [
{ id: { label: 'ID' }},
{
name: { label: 'Name' },
cidr: { label: 'CIDR' }
}
],
dataProvider: function(args) {
args.response.success({
data: args.context.networks[0]
});
}
}
}
},
...
This commit is contained in:
Brian Federle
parent
b2e1dd7697
commit
722d8faf17
|
|
@ -9013,11 +9013,13 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
|
||||
.vpc-chart li.tier span.title {
|
||||
color: #FFFFFF;
|
||||
/*+placement:shift 11px 13px;*/
|
||||
/*+placement:shift 8px 7px;*/
|
||||
position: relative;
|
||||
left: 11px;
|
||||
top: 13px;
|
||||
left: 8px;
|
||||
top: 7px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
font-size: 24px;
|
||||
/*+text-shadow:1px 2px 2px #000000;*/
|
||||
-moz-text-shadow: 1px 2px 2px #000000;
|
||||
|
|
@ -9175,7 +9177,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
margin: 4px;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .vm-count:hover {
|
||||
.vpc-chart li.tier .vm-count:hover,
|
||||
.vpc-chart li.tier .title:hover {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #4C545E;
|
||||
background: url(../images/bg-gradients.png) 0px -2751px;
|
||||
|
|
@ -9229,6 +9232,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
-webkit-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
-o-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
text-shadow: 0px 0px 7px #FFFFFF;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.virtual-router {
|
||||
|
|
|
|||
|
|
@ -134,6 +134,8 @@
|
|||
};
|
||||
}
|
||||
);
|
||||
var detailView = args.detailView;
|
||||
var $browser = args.$browser;
|
||||
var isPlaceholder = args.isPlaceholder;
|
||||
var virtualMachines = args.virtualMachines;
|
||||
var $tier = $('<li>').addClass('tier');
|
||||
|
|
@ -170,6 +172,19 @@
|
|||
}).closest('.ui-dialog').overlay();
|
||||
});
|
||||
|
||||
// Title shows tier details
|
||||
$title.click(function() {
|
||||
$browser.cloudBrowser('addPanel', {
|
||||
title: name,
|
||||
maximizeIfSelected: true,
|
||||
complete: function($panel) {
|
||||
$panel.detailView($.extend(true, {}, detailView, {
|
||||
context: context
|
||||
}));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (isPlaceholder) {
|
||||
$tier.addClass('placeholder');
|
||||
$title.html('Create Tier');
|
||||
|
|
@ -248,6 +263,7 @@
|
|||
var actionPreFilter = args.actionPreFilter;
|
||||
var vpcName = args.vpcName;
|
||||
var context = args.context;
|
||||
var tierDetailView = args.tierDetailView;
|
||||
var $tiers = $('<ul>').addClass('tiers');
|
||||
var $router = elems.router();
|
||||
var $chart = $('<div>').addClass('vpc-chart');
|
||||
|
|
@ -270,6 +286,8 @@
|
|||
}
|
||||
|
||||
addTierDialog({
|
||||
$browser: $browser,
|
||||
tierDetailView: tierDetailView,
|
||||
$tiers: $tiers,
|
||||
context: context,
|
||||
actions: actions,
|
||||
|
|
@ -283,6 +301,8 @@
|
|||
if (tiers != null && tiers.length > 0) {
|
||||
$(tiers).map(function(index, tier) {
|
||||
var $tier = elems.tier({
|
||||
$browser: $browser,
|
||||
detailView: tierDetailView,
|
||||
name: tier.name,
|
||||
cidr: tier.cidr,
|
||||
virtualMachines: tier.virtualMachines,
|
||||
|
|
@ -458,7 +478,11 @@
|
|||
var vmListView = args.vmListView;
|
||||
var actionPreFilter = args.actionPreFilter;
|
||||
var context = args.context;
|
||||
var $browser = args.$browser;
|
||||
var tierDetailView = args.tierDetailView;
|
||||
var tier = $.extend(args.tier, {
|
||||
$browser: $browser,
|
||||
detailView: tierDetailView,
|
||||
context: context,
|
||||
vmListView: vmListView,
|
||||
actions: actions,
|
||||
|
|
@ -482,6 +506,8 @@
|
|||
var vmListView = args.vmListView;
|
||||
var actionPreFilter = args.actionPreFilter;
|
||||
var $tiers = args.$tiers;
|
||||
var $browser = args.$browser;
|
||||
var tierDetailView = args.tierDetailView;
|
||||
|
||||
cloudStack.dialog.createForm({
|
||||
form: actions.add.createForm,
|
||||
|
|
@ -504,6 +530,8 @@
|
|||
function(args) {
|
||||
$loading.remove();
|
||||
addNewTier({
|
||||
$browser: $browser,
|
||||
tierDetailView: tierDetailView,
|
||||
context: $.extend(true, {}, context, {
|
||||
networks: [tier]
|
||||
}),
|
||||
|
|
@ -564,6 +592,7 @@
|
|||
$browser: $browser,
|
||||
ipAddresses: ipAddresses,
|
||||
gateways: gateways,
|
||||
tierDetailView: tierArgs.detailView,
|
||||
siteToSiteVPN: siteToSiteVPN,
|
||||
vmListView: vmListView,
|
||||
context: context,
|
||||
|
|
|
|||
|
|
@ -857,6 +857,26 @@
|
|||
},
|
||||
|
||||
tiers: {
|
||||
detailView: {
|
||||
name: 'Tier details',
|
||||
tabs: {
|
||||
details: {
|
||||
title: 'Details',
|
||||
fields: [
|
||||
{ id: { label: 'ID' }},
|
||||
{
|
||||
name: { label: 'Name' },
|
||||
cidr: { label: 'CIDR' }
|
||||
}
|
||||
],
|
||||
dataProvider: function(args) {
|
||||
args.response.success({
|
||||
data: args.context.networks[0]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
actionPreFilter: function(args) {
|
||||
var tier = args.context.networks[0];
|
||||
var state = tier.state;
|
||||
|
|
@ -908,7 +928,7 @@
|
|||
netmask: {
|
||||
label: 'label.netmask',
|
||||
validation: { required: true }
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
action: function(args) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue