mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
342 lines
12 KiB
JavaScript
342 lines
12 KiB
JavaScript
(function($, cloudStack) {
|
|
/**
|
|
* Make system zone 'org' chart
|
|
*/
|
|
cloudStack.zoneChart = function(args) {
|
|
return function(listViewArgs) {
|
|
var naas = cloudStack.sections.system.naas;
|
|
var $browser = listViewArgs.$browser;
|
|
var $charts = $('<div>').addClass('system-charts');
|
|
var context = listViewArgs.context;
|
|
|
|
// Renders individual network's chart
|
|
var chartView = function(network) {
|
|
var $chartView = $('<div>').addClass('system-chart-view')
|
|
.append($('#template').find('div.zone-chart').clone());
|
|
var $naasView = $chartView.find('.resources.naas ul.system-main');
|
|
var networkStatus = naas.networkProviders.statusCheck({
|
|
context: $.extend(true, {}, context, {
|
|
systemNetworks: [network]
|
|
})
|
|
});
|
|
|
|
// Update title
|
|
var $title = $chartView.find('.head span');
|
|
$title.html($title.html() + ' - ' + network.name);
|
|
|
|
// Render network provider items
|
|
var $networkProviders = $('<ul>')
|
|
.appendTo(
|
|
$('<li>').addClass('network-providers').appendTo($naasView)
|
|
);
|
|
|
|
$.each(naas.networkProviders.types, function(name, type) {
|
|
var status = networkStatus[name];
|
|
|
|
var $item = $('<li>').addClass('provider')
|
|
.attr('rel', name)
|
|
.attr('network-status', status)
|
|
.addClass(name).addClass(status)
|
|
.appendTo($networkProviders)
|
|
.append($('<div>').addClass('name').html(type.label))
|
|
.append($('<div>').addClass('status')
|
|
.append($('<span>').html(status)))
|
|
.append($('<div>').addClass('view-all configure').html('Configure'));
|
|
});
|
|
|
|
// View all action
|
|
$chartView.find('ul li div.view-all').click(function() {
|
|
var $target = $(this);
|
|
|
|
if ($target.hasClass('configure')) return false;
|
|
|
|
var $panel = $browser.cloudBrowser('addPanel', {
|
|
title: $target.closest('li').find('div.name span').html(),
|
|
data: '',
|
|
noSelectPanel: true,
|
|
maximizeIfSelected: true,
|
|
complete: function($newPanel) {
|
|
$panel.listView(
|
|
$.extend(cloudStack.sections.system.subsections[
|
|
$target.attr('zone-target')
|
|
], {
|
|
$browser: $browser,
|
|
$chartView: $chartView,
|
|
ref: { zoneID: listViewArgs.id },
|
|
context: { zones: listViewArgs.context.physicalResources }
|
|
})
|
|
);
|
|
}
|
|
});
|
|
|
|
return false;
|
|
});
|
|
|
|
// View details action
|
|
$chartView.find('ul li div.view-details').click(function() {
|
|
var $target = $(this);
|
|
var $panel = $browser.cloudBrowser('addPanel', {
|
|
title: 'Zone Details',
|
|
data: '',
|
|
noSelectPanel: true,
|
|
maximizeIfSelected: true,
|
|
complete: function($newPanel) {
|
|
// Create detail view
|
|
$.extend(args.detailView, {
|
|
id: listViewArgs.id,
|
|
context: { zones: listViewArgs.context.physicalResources },
|
|
$browser: listViewArgs.$browser
|
|
});
|
|
|
|
$panel.detailView(args.detailView);
|
|
}
|
|
});
|
|
|
|
return false;
|
|
});
|
|
|
|
// Add button action
|
|
$chartView.find('.add').click(function() {
|
|
var completeAction = function() { return false; };
|
|
var $addResource = $('<div>').addClass('add-zone-resource');
|
|
var $header = $('<div>').addClass('head').appendTo($addResource)
|
|
.append(
|
|
$('<span>').addClass('message').html('Select resource to add:')
|
|
);
|
|
var $select = $('<select>').change(function() {
|
|
var action = cloudStack.sections.system.subsections[$select.val()]
|
|
.listView.actions.add;
|
|
var createForm = action.createForm;
|
|
|
|
$addResource.find('.form-container').remove();
|
|
|
|
// Create dialog
|
|
var formData = cloudStack.dialog.createForm({
|
|
form: createForm,
|
|
context: { zones: listViewArgs.context.physicalResources },
|
|
after: function(args) {
|
|
action.action($.extend(args, {
|
|
response: {
|
|
success: function(args) {
|
|
$('div.notifications').notifications('add', {
|
|
desc: action.messages.notification({}),
|
|
interval: 1000,
|
|
poll: action.notification.poll
|
|
});
|
|
}
|
|
}
|
|
}));
|
|
},
|
|
noDialog: true
|
|
});
|
|
|
|
var $formContainer = formData.$formContainer
|
|
.appendTo($addResource).validate();
|
|
completeAction = formData.completeAction;
|
|
|
|
$(':ui-dialog').dialog('option', 'position', 'center');
|
|
});
|
|
|
|
// Append list of 'add new' items, based on subsection actions
|
|
$.each(cloudStack.sections.system.subsections, function(sectionID, section) {
|
|
var addAction = section.listView && section.listView.actions ?
|
|
section.listView.actions.add : null;
|
|
|
|
if (addAction) {
|
|
$('<option>').appendTo($select)
|
|
.html(section.title)
|
|
.val(sectionID);
|
|
}
|
|
});
|
|
|
|
$header.append($select);
|
|
$addResource.dialog({
|
|
dialogClass: 'create-form',
|
|
width: 400,
|
|
title: 'Add resource',
|
|
buttons: [
|
|
{
|
|
text: 'Create',
|
|
'class': 'ok',
|
|
click: function() {
|
|
if (!completeAction($addResource.find('.form-container'))) {
|
|
return false;
|
|
}
|
|
|
|
$('div.overlay').remove();
|
|
$(this).dialog('destroy');
|
|
|
|
return true;
|
|
}
|
|
},
|
|
{
|
|
text: 'Cancel',
|
|
'class': 'cancel',
|
|
click: function() {
|
|
$('div.overlay').remove();
|
|
$(this).dialog('destroy');
|
|
}
|
|
}
|
|
]
|
|
}).closest('.ui-dialog').overlay();
|
|
$select.trigger('change');
|
|
|
|
return false;
|
|
});
|
|
|
|
return $chartView;
|
|
};
|
|
|
|
// Iterate through networks; render tabs
|
|
var loadNetworkData = function() {
|
|
// Toolbar
|
|
var $toolbar = $('<div>').addClass('toolbar').appendTo($charts);
|
|
var $refresh = $('<div>').addClass('button refresh').appendTo($toolbar)
|
|
.append($('<span>').html('Refresh'));
|
|
|
|
// Tab content
|
|
var $tabMain = $('<div>').addClass('network-tabs').appendTo($charts);
|
|
var $loading = $('<div>').addClass('loading-overlay').appendTo($tabMain);
|
|
naas.networks.dataProvider({
|
|
context: context,
|
|
response: {
|
|
success: function(args) {
|
|
var $tabs = $('<ul>').appendTo($tabMain);
|
|
|
|
$loading.remove();
|
|
|
|
// Populate network data with individual zone charts
|
|
$(args.data).each(function() {
|
|
var tabID = 'tab-system-networks-' + this.id;
|
|
var $tab = $('<li>').appendTo($tabs).append(
|
|
$('<a>')
|
|
.attr({
|
|
href: '#' + tabID
|
|
})
|
|
.html(this.name)
|
|
);
|
|
var $tabContent = $('<div>').appendTo($tabMain)
|
|
.attr({ id: tabID })
|
|
.append(chartView(this));
|
|
|
|
// Tooltip hover event
|
|
var $tooltip = $tabContent.find('.tooltip-info:visible').hide();
|
|
$tabContent.find('li.main').mouseenter(function(event) {
|
|
$tooltip.css({ opacity: 0 });
|
|
$tooltip.show().animate({ opacity: 1 }, { queue: false });
|
|
|
|
var $item = $(this);
|
|
|
|
$item.siblings().each(function() {
|
|
$tooltip.removeClass($(this).attr('rel'));
|
|
});
|
|
$tooltip.addClass('tooltip-info ' + $item.attr('rel'));
|
|
});
|
|
|
|
$tabContent.find('li.main').mouseleave(function(event) {
|
|
$tooltip.animate({ opacity: 0 }, { queue: false });
|
|
});
|
|
|
|
// Main items configure event
|
|
$tabContent.find('li.main .view-all.configure').click(function() {
|
|
var itemID = $(this).closest('li').attr('rel');
|
|
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: itemID + ' details',
|
|
maximizeIfSelected: true,
|
|
complete: function($newPanel) {
|
|
$newPanel.detailView(
|
|
naas.mainNetworks[itemID].detailView
|
|
);
|
|
}
|
|
});
|
|
|
|
return false;
|
|
});
|
|
|
|
// Provider configure event
|
|
$tabContent.find('li.provider .view-all.configure').click(function() {
|
|
var $li = $(this).closest('li');
|
|
var itemID = $li.attr('rel');
|
|
var status = $li.attr('network-status');
|
|
var networkProviderArgs = naas.networkProviders.types[itemID];
|
|
var createForm = networkProviderArgs.actions.add.createForm;
|
|
var action = networkProviderArgs.actions.add;
|
|
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: itemID + ' details',
|
|
maximizeIfSelected: true,
|
|
complete: function($newPanel) {
|
|
if (status == 'disabled') {
|
|
// Create form
|
|
var formData = cloudStack.dialog.createForm({
|
|
form: createForm,
|
|
context: { zones: listViewArgs.context.physicalResources },
|
|
after: function(args) {
|
|
action.action($.extend(args, {
|
|
response: {
|
|
success: function(args) {
|
|
$('div.notifications').notifications('add', {
|
|
desc: action.messages.notification({}),
|
|
interval: 1000,
|
|
poll: action.notification.poll
|
|
});
|
|
$newPanel.html('').listView({
|
|
listView: naas.networkProviders.types[itemID]
|
|
});
|
|
}
|
|
}
|
|
}));
|
|
},
|
|
noDialog: true
|
|
});
|
|
|
|
var $formContainer = formData.$formContainer;
|
|
var $form = $formContainer.find('form');
|
|
var completeAction = formData.completeAction;
|
|
|
|
$newPanel.append(
|
|
$.merge(
|
|
$formContainer,
|
|
$('<div>')
|
|
.addClass('button submit')
|
|
.append($('<span>').html('Add'))
|
|
.click(function() {
|
|
if ($form.valid()) {
|
|
completeAction($formContainer);
|
|
}
|
|
})
|
|
)
|
|
);
|
|
} else {
|
|
$newPanel.listView({
|
|
listView: naas.networkProviders.types[itemID]
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
$tabMain.tabs();
|
|
$tabMain.find('li:first').addClass('first');
|
|
$tabMain.find('li:last').addClass('last');
|
|
}
|
|
}
|
|
});
|
|
|
|
$refresh.click(function() {
|
|
$charts.children().remove();
|
|
loadNetworkData();
|
|
|
|
return false;
|
|
});
|
|
};
|
|
|
|
loadNetworkData();
|
|
|
|
return $charts;
|
|
};
|
|
};
|
|
})(jQuery, cloudStack);
|