Return-Path: X-Original-To: apmail-cloudstack-commits-archive@www.apache.org Delivered-To: apmail-cloudstack-commits-archive@www.apache.org Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by minotaur.apache.org (Postfix) with SMTP id 1B627C8FF for ; Fri, 19 Jul 2013 17:01:36 +0000 (UTC) Received: (qmail 98500 invoked by uid 500); 19 Jul 2013 17:01:27 -0000 Delivered-To: apmail-cloudstack-commits-archive@cloudstack.apache.org Received: (qmail 98454 invoked by uid 500); 19 Jul 2013 17:01:27 -0000 Mailing-List: contact commits-help@cloudstack.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@cloudstack.apache.org Delivered-To: mailing list commits@cloudstack.apache.org Received: (qmail 97186 invoked by uid 99); 19 Jul 2013 17:01:15 -0000 Received: from tyr.zones.apache.org (HELO tyr.zones.apache.org) (140.211.11.114) by apache.org (qpsmtpd/0.29) with ESMTP; Fri, 19 Jul 2013 17:01:15 +0000 Received: by tyr.zones.apache.org (Postfix, from userid 65534) id 6F47A8AF0CE; Fri, 19 Jul 2013 17:01:14 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: jessicawang@apache.org To: commits@cloudstack.apache.org Date: Fri, 19 Jul 2013 17:01:23 -0000 Message-Id: In-Reply-To: <95ac9365660642adb4aa92c9c833a961@git.apache.org> References: <95ac9365660642adb4aa92c9c833a961@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: [10/39] Format JS http://git-wip-us.apache.org/repos/asf/cloudstack/blob/f766a9e5/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 = $('
').addClass('button view-all'); - var $label = $('').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 = $('
').addClass('button view-all'); + var $label = $('').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 = $('
'); - 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 = $('
'); + 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 = $('
    ').addClass('resources'); - - // Make resource items - $.each(computeResources, function(id, resource) { - var $li = $('
  • '); - var $label = $('').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 = $('
    '); - var $browser = $('#browser .container'); - var $loading = $('
    ').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 = $('
    ').addClass('system-network-chart'); - var $trafficTypes = $('
      ').addClass('resources traffic-types'); - - $loading.remove(); - - var trafficTypes = { - 'public': { - label: _l('label.public'), - configure: { - action: actions.trafficTypeDetails('public', targetContext) - } - }, + var $computeResources = $('
        ').addClass('resources'); - 'guest': { - label: _l('label.guest'), - configure: { - action: actions.trafficTypeDetails('guest', targetContext) - } - }, + // Make resource items + $.each(computeResources, function(id, resource) { + var $li = $('
      • '); + var $label = $('').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 = $('
        '); + var $browser = $('#browser .container'); + var $loading = $('
        ').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 = $('
        ').addClass('system-network-chart'); + var $trafficTypes = $('
          ').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 = $('
        • ').addClass(id); + var $label = $('').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 = $('
          ').addClass('network-chart-item').addClass(id); + $targetChartItem.appendTo($networkChart); + }); + + var $switchIcon = $('
          ').addClass('network-switch-icon').append( + $('').html('L2/L3 switch') + ); + var $circleIcon = $('
          ').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 = $('
          ').addClass('system-chart network'); + + renderChart({ + $chart: $chart, + data: args.context.physicalNetworks[0] + }); + + return $chart; + } + } + } + } + }) + }); + $loading.remove(); + } } - } - - // Make list item - var $li = $('
        • ').addClass(id); - var $label = $('').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 = $('
          ').addClass('network-chart-item').addClass(id); - $targetChartItem.appendTo($networkChart); }); - var $switchIcon = $('
          ').addClass('network-switch-icon').append( - $('').html('L2/L3 switch') - ); - var $circleIcon = $('
          ').addClass('base-circle-icon'); - - $targetChart.append($trafficTypes, $switchIcon, $networkChart, $circleIcon); - } - } - }); - }; + return $chart; + }, + + resources: function(args) { + var $chart = $('
          ').addClass('dashboard admin'); + var $chartItems = $('
            '); + var $stats = $('
            ').addClass('stats'); + var $container = $('
            ').addClass('dashboard-container head'); + var $top = $('
            ').addClass('top'); + var $title = $('
            ').addClass('title').append($('').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 = $('
            ').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 = $('
            ').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 = $('
          • '); + var $name = $('
            ').addClass('name').html(chartItem.name); + var $value = $('
            ').addClass('value'); + var $content = $('
            ').addClass('content').html('Allocated: '); + var $allocatedValue = $('').addClass('allocated').html(data.used); + var $totalValue = $('').addClass('total').html(data.total); + var $chart = $('
            ').addClass('chart'); + var $chartLine = $('
            ').addClass('chart-line') + .css({ + width: '0%' + }) + .animate({ + width: data.percent + '%' + }); + var $percent = $('
            ').addClass('percentage'); + var $percentValue = $('').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 = $('
            ').addClass('dashboard admin'); - var $chartItems = $('
              '); - var $stats = $('
              ').addClass('stats'); - var $container = $('
              ').addClass('dashboard-container head'); - var $top = $('
              ').addClass('top'); - var $title = $('
              ').addClass('title').append($('').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 = $('
              ').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 = $('
            • '); - var $name = $('
              ').addClass('name').html(chartItem.name); - var $value = $('
              ').addClass('value'); - var $content = $('
              ').addClass('content').html('Allocated: '); - var $allocatedValue = $('').addClass('allocated').html(data.used); - var $totalValue = $('').addClass('total').html(data.total); - var $chart = $('
              ').addClass('chart'); - var $chartLine = $('
              ').addClass('chart-line') - .css({ width: '0%' }) - .animate({ width: data.percent + '%' }); - var $percent = $('
              ').addClass('percentage'); - var $percentValue = $('').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/f766a9e5/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 = $('
              ').addClass('zone-filter'); - var $zoneTypeSelect = $('').append( + $('