You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by se...@apache.org on 2013/07/18 18:34:45 UTC
[10/39] Format JS
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui-custom/zoneChart.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/zoneChart.js b/ui/scripts/ui-custom/zoneChart.js
index 5d4e0c0..1a5fb59 100644
--- a/ui/scripts/ui-custom/zoneChart.js
+++ b/ui/scripts/ui-custom/zoneChart.js
@@ -15,412 +15,440 @@
// specific language governing permissions and limitations
// under the License.
(function($, cloudStack) {
- /**
- * Zone details chart
- */
- cloudStack.uiCustom.systemChart = function(chartID) {
/**
- * Make view all button
+ * Zone details chart
*/
- var viewAllButton = function(args) {
- var $viewAll = $('<div>').addClass('button view-all');
- var $label = $('<span>').addClass('view-all-label').html(args.label ? args.label : 'View all');
- var $browser = args.$browser;
- var action = args.action;
- // Launch a list view
- //var $multiple-click=$viewAll.data('multiple-click',false);
- $viewAll.click(function() {
- if ($viewAll.data('multiple-click')) return false;
- //@pranav-handling the multiple clicks by using a flag variable
- $viewAll.data('multiple-click', true);
- $browser.cloudBrowser('addPanel', {
- title: args.title,
- maximizeIfSelected: true,
- complete: function($newPanel) {
- $viewAll.data('multiple-click', false);
- action({ $panel: $newPanel });
- }
- });
- });
-
- $viewAll.append($label);
-
- return $viewAll;
- };
+ cloudStack.uiCustom.systemChart = function(chartID) {
+ /**
+ * Make view all button
+ */
+ var viewAllButton = function(args) {
+ var $viewAll = $('<div>').addClass('button view-all');
+ var $label = $('<span>').addClass('view-all-label').html(args.label ? args.label : 'View all');
+ var $browser = args.$browser;
+ var action = args.action;
+ // Launch a list view
+ //var $multiple-click=$viewAll.data('multiple-click',false);
+ $viewAll.click(function() {
+ if ($viewAll.data('multiple-click')) return false;
+ //@pranav-handling the multiple clicks by using a flag variable
+ $viewAll.data('multiple-click', true);
+ $browser.cloudBrowser('addPanel', {
+ title: args.title,
+ maximizeIfSelected: true,
+ complete: function($newPanel) {
+ $viewAll.data('multiple-click', false);
+ action({
+ $panel: $newPanel
+ });
+ }
+ });
+ });
- /**
- * Chart button action generators
- */
- var actions = {
- /**
- * Makes a list view from given zone sub-section
- */
- listView: function(targetID, context) {
- return function(args) {
- var $elem = args.$panel;
- var listView = cloudStack.sections.system.subsections[targetID];
+ $viewAll.append($label);
- $elem.listView($.extend(true, {}, listView, {
- context: context
- }));
+ return $viewAll;
};
- },
-
- providerListView: function(context) {
- return function(args) {
- var $elem = args.$panel;
- var listViewArgs = cloudStack.sections.system.naas.providerListView;
- $elem.listView({
- context: context,
- listView: listViewArgs
- });
- };
- },
+ /**
+ * Chart button action generators
+ */
+ var actions = {
+ /**
+ * Makes a list view from given zone sub-section
+ */
+ listView: function(targetID, context) {
+ return function(args) {
+ var $elem = args.$panel;
+ var listView = cloudStack.sections.system.subsections[targetID];
+
+ $elem.listView($.extend(true, {}, listView, {
+ context: context
+ }));
+ };
+ },
- /**
- * Makes details for a given traffic type
- */
- trafficTypeDetails: function(targetID, context) {
- return function(args) {
- var $elem = args.$panel;
- var detailViewArgs = cloudStack.sections.system.naas.mainNetworks[targetID].detailView;
+ providerListView: function(context) {
+ return function(args) {
+ var $elem = args.$panel;
+ var listViewArgs = cloudStack.sections.system.naas.providerListView;
- $elem.detailView($.extend(true, {}, detailViewArgs, {
- $browser: $('#browser .container'),
- context: context
- }));
+ $elem.listView({
+ context: context,
+ listView: listViewArgs
+ });
+ };
+ },
+
+ /**
+ * Makes details for a given traffic type
+ */
+ trafficTypeDetails: function(targetID, context) {
+ return function(args) {
+ var $elem = args.$panel;
+ var detailViewArgs = cloudStack.sections.system.naas.mainNetworks[targetID].detailView;
+
+ $elem.detailView($.extend(true, {}, detailViewArgs, {
+ $browser: $('#browser .container'),
+ context: context
+ }));
+ };
+ }
};
- }
- };
- /**
- * Chart generators
- */
- var charts = {
- /**
- * Compute tab
- */
- compute: function(args) {
- var $chart = $('<div>');
- var $browser = $('#browser .container');
- var context = args.context;
-
- // Resource items
- var computeResources = {
- zone: {
- label: 'Zone'
- },
-
- pods: {
- label: 'Pods',
- viewAll: {
- action: actions.listView('pods', context)
- }
- },
+ /**
+ * Chart generators
+ */
+ var charts = {
+ /**
+ * Compute tab
+ */
+ compute: function(args) {
+ var $chart = $('<div>');
+ var $browser = $('#browser .container');
+ var context = args.context;
+
+ // Resource items
+ var computeResources = {
+ zone: {
+ label: 'Zone'
+ },
+
+ pods: {
+ label: 'Pods',
+ viewAll: {
+ action: actions.listView('pods', context)
+ }
+ },
- clusters: {
- label: 'Clusters',
- viewAll: {
- action: actions.listView('clusters', context)
- }
- },
+ clusters: {
+ label: 'Clusters',
+ viewAll: {
+ action: actions.listView('clusters', context)
+ }
+ },
- hosts: {
- label: 'Hosts',
- viewAll: {
- action: actions.listView('hosts', context)
- }
- },
+ hosts: {
+ label: 'Hosts',
+ viewAll: {
+ action: actions.listView('hosts', context)
+ }
+ },
- primaryStorage: {
- label: 'Primary Storage',
- viewAll: {
- action: actions.listView('primary-storage', context)
- }
- },
+ primaryStorage: {
+ label: 'Primary Storage',
+ viewAll: {
+ action: actions.listView('primary-storage', context)
+ }
+ },
- ucs: {
- label: 'UCS',
- viewAll: {
- action: actions.listView('ucs', context)
- }
- },
+ ucs: {
+ label: 'UCS',
+ viewAll: {
+ action: actions.listView('ucs', context)
+ }
+ },
- secondaryStorage: {
- label: 'Secondary Storage',
- viewAll: {
- action: actions.listView('secondary-storage', context)
- }
- }
- };
+ secondaryStorage: {
+ label: 'Secondary Storage',
+ viewAll: {
+ action: actions.listView('secondary-storage', context)
+ }
+ }
+ };
- var $computeResources = $('<ul>').addClass('resources');
-
- // Make resource items
- $.each(computeResources, function(id, resource) {
- var $li = $('<li>');
- var $label = $('<span>').addClass('label');
-
- $li.addClass(id);
- $label.html(resource.label);
- $label.appendTo($li);
-
- // View all
- if (resource.viewAll) {
- viewAllButton($.extend(resource.viewAll, {
- title: resource.label,
- $browser: $browser,
- context: context
- })).appendTo($li);
- }
-
- $li.appendTo($computeResources);
- });
-
- $chart.append($computeResources);
-
- return $chart;
- },
-
- network: function(args) {
- var $chart = $('<div>');
- var $browser = $('#browser .container');
- var $loading = $('<div>').addClass('loading-overlay');
- var context = args.context;
- var networkDataProvider = cloudStack.sections.system.naas.networks.dataProvider;
- var trafficTypeDataProvider = cloudStack.sections.system.naas.trafficTypes.dataProvider;
-
- $loading.appendTo($chart);
-
- var renderChart = function(args) {
- var $targetChart = args.$chart ? args.$chart : $chart;
- var targetContext = $.extend(true, {}, context, {
- physicalNetworks: [args.data]
- });
-
- // Get traffic type data
- trafficTypeDataProvider({
- context: targetContext,
- response: {
- success: function(args) {
- var $networkChart = $('<div>').addClass('system-network-chart');
- var $trafficTypes = $('<ul>').addClass('resources traffic-types');
-
- $loading.remove();
-
- var trafficTypes = {
- 'public': {
- label: _l('label.public'),
- configure: {
- action: actions.trafficTypeDetails('public', targetContext)
- }
- },
+ var $computeResources = $('<ul>').addClass('resources');
- 'guest': {
- label: _l('label.guest'),
- configure: {
- action: actions.trafficTypeDetails('guest', targetContext)
- }
- },
+ // Make resource items
+ $.each(computeResources, function(id, resource) {
+ var $li = $('<li>');
+ var $label = $('<span>').addClass('label');
- 'management': {
- label: _l('label.management'),
- configure: {
- action: actions.trafficTypeDetails('management', targetContext)
- }
- },
+ $li.addClass(id);
+ $label.html(resource.label);
+ $label.appendTo($li);
- 'storage': {
- label: _l('label.storage'),
- configure: {
- action: actions.trafficTypeDetails('storage', targetContext)
+ // View all
+ if (resource.viewAll) {
+ viewAllButton($.extend(resource.viewAll, {
+ title: resource.label,
+ $browser: $browser,
+ context: context
+ })).appendTo($li);
}
- },
-
- 'providers': {
- label: _l('label.network.service.providers'),
- ignoreChart: true,
- dependsOn: 'guest',
- configure: {
- action: actions.providerListView(targetContext)
- }
- }
- };
- var validTrafficTypes = $.map(args.data, function(trafficType) {
- return trafficType.name.toLowerCase();
+ $li.appendTo($computeResources);
});
- // Make traffic type elems
- $.each(trafficTypes, function(id, trafficType) {
- if ($.inArray(id, validTrafficTypes) == -1) { //if it is not a valid traffic type
- if(trafficType.dependsOn != null && trafficType.dependsOn.length > 0) { //if it has dependsOn
- if($.inArray(trafficType.dependsOn, validTrafficTypes) == -1) { //if its dependsOn is not a valid traffic type, either
- return true; //skip this item
- }
- //else, if its dependsOn is a valid traffic type, continue to Make list item (e.g. providers.dependsOn is 'guest')
- }
- else {
- return true; //if it doesn't have dependsOn, skip this item
+ $chart.append($computeResources);
+
+ return $chart;
+ },
+
+ network: function(args) {
+ var $chart = $('<div>');
+ var $browser = $('#browser .container');
+ var $loading = $('<div>').addClass('loading-overlay');
+ var context = args.context;
+ var networkDataProvider = cloudStack.sections.system.naas.networks.dataProvider;
+ var trafficTypeDataProvider = cloudStack.sections.system.naas.trafficTypes.dataProvider;
+
+ $loading.appendTo($chart);
+
+ var renderChart = function(args) {
+ var $targetChart = args.$chart ? args.$chart : $chart;
+ var targetContext = $.extend(true, {}, context, {
+ physicalNetworks: [args.data]
+ });
+
+ // Get traffic type data
+ trafficTypeDataProvider({
+ context: targetContext,
+ response: {
+ success: function(args) {
+ var $networkChart = $('<div>').addClass('system-network-chart');
+ var $trafficTypes = $('<ul>').addClass('resources traffic-types');
+
+ $loading.remove();
+
+ var trafficTypes = {
+ 'public': {
+ label: _l('label.public'),
+ configure: {
+ action: actions.trafficTypeDetails('public', targetContext)
+ }
+ },
+
+ 'guest': {
+ label: _l('label.guest'),
+ configure: {
+ action: actions.trafficTypeDetails('guest', targetContext)
+ }
+ },
+
+ 'management': {
+ label: _l('label.management'),
+ configure: {
+ action: actions.trafficTypeDetails('management', targetContext)
+ }
+ },
+
+ 'storage': {
+ label: _l('label.storage'),
+ configure: {
+ action: actions.trafficTypeDetails('storage', targetContext)
+ }
+ },
+
+ 'providers': {
+ label: _l('label.network.service.providers'),
+ ignoreChart: true,
+ dependsOn: 'guest',
+ configure: {
+ action: actions.providerListView(targetContext)
+ }
+ }
+ };
+
+ var validTrafficTypes = $.map(args.data, function(trafficType) {
+ return trafficType.name.toLowerCase();
+ });
+
+ // Make traffic type elems
+ $.each(trafficTypes, function(id, trafficType) {
+ if ($.inArray(id, validTrafficTypes) == -1) { //if it is not a valid traffic type
+ if (trafficType.dependsOn != null && trafficType.dependsOn.length > 0) { //if it has dependsOn
+ if ($.inArray(trafficType.dependsOn, validTrafficTypes) == -1) { //if its dependsOn is not a valid traffic type, either
+ return true; //skip this item
+ }
+ //else, if its dependsOn is a valid traffic type, continue to Make list item (e.g. providers.dependsOn is 'guest')
+ } else {
+ return true; //if it doesn't have dependsOn, skip this item
+ }
+ }
+
+ // Make list item
+ var $li = $('<li>').addClass(id);
+ var $label = $('<span>').addClass('label').html(trafficType.label);
+ var $configureButton = viewAllButton($.extend(trafficType.configure, {
+ label: _l('label.configure'),
+ title: trafficType.label,
+ $browser: $browser,
+ targetContext: targetContext
+ }));
+
+ $li.append($label, $configureButton);
+ $li.appendTo($trafficTypes);
+
+ // Make chart
+ if (trafficType.ignoreChart)
+ return true;
+
+ var $targetChartItem = $('<div>').addClass('network-chart-item').addClass(id);
+ $targetChartItem.appendTo($networkChart);
+ });
+
+ var $switchIcon = $('<div>').addClass('network-switch-icon').append(
+ $('<span>').html('L2/L3 switch')
+ );
+ var $circleIcon = $('<div>').addClass('base-circle-icon');
+
+ $targetChart.append($trafficTypes, $switchIcon, $networkChart, $circleIcon);
+ }
+ }
+ });
+ };
+
+ // Get network data
+ networkDataProvider({
+ context: context,
+ response: {
+ success: function(args) {
+ var data = args.data;
+ var actionFilter = args.actionFilter;
+
+ $chart.listView({
+ listView: $.extend(true, {}, cloudStack.sections.system.naas.networks.listView, {
+ dataProvider: function(args) {
+ args.response.success({
+ actionFilter: actionFilter,
+ data: data
+ });
+ },
+ detailView: {
+ noCompact: true,
+ tabs: {
+ network: {
+ title: 'Network',
+ custom: function(args) {
+ var $chart = $('<div>').addClass('system-chart network');
+
+ renderChart({
+ $chart: $chart,
+ data: args.context.physicalNetworks[0]
+ });
+
+ return $chart;
+ }
+ }
+ }
+ }
+ })
+ });
+ $loading.remove();
+ }
}
- }
-
- // Make list item
- var $li = $('<li>').addClass(id);
- var $label = $('<span>').addClass('label').html(trafficType.label);
- var $configureButton = viewAllButton($.extend(trafficType.configure, {
- label: _l('label.configure'),
- title: trafficType.label,
- $browser: $browser,
- targetContext: targetContext
- }));
-
- $li.append($label, $configureButton);
- $li.appendTo($trafficTypes);
-
- // Make chart
- if (trafficType.ignoreChart)
- return true;
-
- var $targetChartItem = $('<div>').addClass('network-chart-item').addClass(id);
- $targetChartItem.appendTo($networkChart);
});
- var $switchIcon = $('<div>').addClass('network-switch-icon').append(
- $('<span>').html('L2/L3 switch')
- );
- var $circleIcon = $('<div>').addClass('base-circle-icon');
-
- $targetChart.append($trafficTypes, $switchIcon, $networkChart, $circleIcon);
- }
- }
- });
- };
+ return $chart;
+ },
+
+ resources: function(args) {
+ var $chart = $('<div>').addClass('dashboard admin');
+ var $chartItems = $('<ul>');
+ var $stats = $('<div>').addClass('stats');
+ var $container = $('<div>').addClass('dashboard-container head');
+ var $top = $('<div>').addClass('top');
+ var $title = $('<div>').addClass('title').append($('<span>').html(_l('label.system.wide.capacity')));
+
+ var chartItems = {
+ // The keys are based on the internal type ID associated with each capacity
+ 0: {
+ name: _l('label.memory')
+ },
+ 1: {
+ name: _l('label.cpu')
+ },
+ 2: {
+ name: _l('label.storage')
+ },
+ 3: {
+ name: _l('label.primary.allocated')
+ },
+ 6: {
+ name: _l('label.secondary.storage')
+ },
+ 9: {
+ name: _l('label.local.storage')
+ },
+ 4: {
+ name: _l('label.public.ips')
+ },
+ 5: {
+ name: _l('label.management.ips')
+ },
+ 8: {
+ name: _l('label.direct.ips')
+ },
+ 7: {
+ name: _l('label.vlan')
+ }
+ };
- // Get network data
- networkDataProvider({
- context: context,
- response: {
- success: function(args) {
- var data = args.data;
- var actionFilter = args.actionFilter;
-
- $chart.listView({
- listView: $.extend(true, {}, cloudStack.sections.system.naas.networks.listView, {
- dataProvider: function(args) {
- args.response.success({ actionFilter: actionFilter, data: data });
- },
- detailView: {
- noCompact: true,
- tabs: {
- network: {
- title: 'Network',
- custom: function(args) {
- var $chart = $('<div>').addClass('system-chart network');
-
- renderChart({
- $chart: $chart,
- data: args.context.physicalNetworks[0]
- });
-
- return $chart;
+ $top.append($title);
+ $container.append($top, $stats.append($chartItems));
+ $chart.append($container);
+ var $loading = $('<div>').addClass('loading-overlay').prependTo($chart);
+
+ cloudStack.sections.system.zoneDashboard({
+ context: args.context,
+ response: {
+ success: function(args) {
+ $loading.remove();
+ $.each(chartItems, function(id, chartItem) {
+ var data = args.data[id] ? args.data[id] : {
+ used: 0,
+ total: 0,
+ percent: 0
+ };
+ var $item = $('<li>');
+ var $name = $('<div>').addClass('name').html(chartItem.name);
+ var $value = $('<div>').addClass('value');
+ var $content = $('<div>').addClass('content').html('Allocated: ');
+ var $allocatedValue = $('<span>').addClass('allocated').html(data.used);
+ var $totalValue = $('<span>').addClass('total').html(data.total);
+ var $chart = $('<div>').addClass('chart');
+ var $chartLine = $('<div>').addClass('chart-line')
+ .css({
+ width: '0%'
+ })
+ .animate({
+ width: data.percent + '%'
+ });
+ var $percent = $('<div>').addClass('percentage');
+ var $percentValue = $('<soan>').addClass('value').html(data.percent);
+
+ $chartItems.append(
+ $item.append(
+ $name,
+ $value.append(
+ $content.append(
+ $allocatedValue,
+ ' / ',
+ $totalValue
+ )
+ ),
+ $chart.append($chartLine),
+ $percent.append($percentValue, '%')
+ )
+ );
+ });
}
- }
}
- }
- })
- });
- $loading.remove();
- }
- }
- });
-
- return $chart;
- },
-
- resources: function(args) {
- var $chart = $('<div>').addClass('dashboard admin');
- var $chartItems = $('<ul>');
- var $stats = $('<div>').addClass('stats');
- var $container = $('<div>').addClass('dashboard-container head');
- var $top = $('<div>').addClass('top');
- var $title = $('<div>').addClass('title').append($('<span>').html(_l('label.system.wide.capacity')));
-
- var chartItems = {
- // The keys are based on the internal type ID associated with each capacity
- 0: { name: _l('label.memory') },
- 1: { name: _l('label.cpu') },
- 2: { name: _l('label.storage') },
- 3: { name: _l('label.primary.allocated') },
- 6: { name: _l('label.secondary.storage') },
- 9: { name: _l('label.local.storage') },
- 4: { name: _l('label.public.ips') },
- 5: { name: _l('label.management.ips') },
- 8: { name: _l('label.direct.ips') },
- 7: { name: _l('label.vlan') }
- };
+ });
- $top.append($title);
- $container.append($top, $stats.append($chartItems));
- $chart.append($container);
- var $loading = $('<div>').addClass('loading-overlay').prependTo($chart);
-
- cloudStack.sections.system.zoneDashboard({
- context: args.context,
- response: {
- success: function(args) {
- $loading.remove();
- $.each(chartItems, function(id, chartItem) {
- var data = args.data[id] ? args.data[id] : {
- used: 0,
- total: 0,
- percent: 0
- };
- var $item = $('<li>');
- var $name = $('<div>').addClass('name').html(chartItem.name);
- var $value = $('<div>').addClass('value');
- var $content = $('<div>').addClass('content').html('Allocated: ');
- var $allocatedValue = $('<span>').addClass('allocated').html(data.used);
- var $totalValue = $('<span>').addClass('total').html(data.total);
- var $chart = $('<div>').addClass('chart');
- var $chartLine = $('<div>').addClass('chart-line')
- .css({ width: '0%' })
- .animate({ width: data.percent + '%' });
- var $percent = $('<div>').addClass('percentage');
- var $percentValue = $('<soan>').addClass('value').html(data.percent);
-
- $chartItems.append(
- $item.append(
- $name,
- $value.append(
- $content.append(
- $allocatedValue,
- ' / ',
- $totalValue
- )
- ),
- $chart.append($chartLine),
- $percent.append($percentValue, '%')
- )
- );
- });
+ return $chart;
}
- }
- });
-
- return $chart;
- }
- };
+ };
- return function(args) {
- // Fix zone context naming
- args.context.zones = args.context.physicalResources;
+ return function(args) {
+ // Fix zone context naming
+ args.context.zones = args.context.physicalResources;
- var $chart = charts[chartID](args).addClass('system-chart').addClass(chartID);
+ var $chart = charts[chartID](args).addClass('system-chart').addClass(chartID);
- return $chart;
+ return $chart;
+ };
};
- };
})(jQuery, cloudStack);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/ad69bc8d/ui/scripts/ui-custom/zoneFilter.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/zoneFilter.js b/ui/scripts/ui-custom/zoneFilter.js
index 9e6a493..6b9454c 100644
--- a/ui/scripts/ui-custom/zoneFilter.js
+++ b/ui/scripts/ui-custom/zoneFilter.js
@@ -16,24 +16,23 @@
// under the License.
(function($, cloudStack) {
- $(window).bind('cloudStack.ready', function() {
- var $header = $('#header .controls');
- var $zoneFilter = $('<div>').addClass('zone-filter');
- var $zoneTypeSelect = $('<select>').append(
- $('<option>').attr('value', '').html(_l('All zones')),
- $('<option>').attr('value', 'Basic').html(_l('Basic')),
- $('<option>').attr('value', 'Advanced').html(_l('Advanced'))
- );
- var $label = $('<label>').html('Zone type:');
+ $(window).bind('cloudStack.ready', function() {
+ var $header = $('#header .controls');
+ var $zoneFilter = $('<div>').addClass('zone-filter');
+ var $zoneTypeSelect = $('<select>').append(
+ $('<option>').attr('value', '').html(_l('All zones')),
+ $('<option>').attr('value', 'Basic').html(_l('Basic')),
+ $('<option>').attr('value', 'Advanced').html(_l('Advanced'))
+ );
+ var $label = $('<label>').html('Zone type:');
- $zoneFilter.append($label, $zoneTypeSelect);
- $zoneFilter.insertAfter($header.find('.project-switcher'));
- $zoneTypeSelect.change(function() {
- cloudStack.context.zoneType = $zoneTypeSelect.val();
+ $zoneFilter.append($label, $zoneTypeSelect);
+ $zoneFilter.insertAfter($header.find('.project-switcher'));
+ $zoneTypeSelect.change(function() {
+ cloudStack.context.zoneType = $zoneTypeSelect.val();
- // Go to default/start page (dashboard)
- $('#breadcrumbs .home').click();
+ // Go to default/start page (dashboard)
+ $('#breadcrumbs .home').click();
+ });
});
- });
-}(jQuery, cloudStack));
-
+}(jQuery, cloudStack));