Move HostPieChart into directive

awx/ui/static/js/app.js

@@ -33,7 +33,7 @@ angular.module('Tower', [
     'ngCookies',
     'RestServices',
     'DataServices',
-    'GraphDirectives',
+    'DashboardGraphs',
     'AuthService',
     'Utilities',
     'LicenseHelper',
@@ -95,7 +95,6 @@ angular.module('Tower', [
     'SelectionHelper',
     'HostGroupsFormDefinition',
     'DashboardCountsWidget',
-    'HostPieChartWidget',
     'HostGraphWidget',
     'DashboardJobsWidget',
     'PortalJobsWidget',

awx/ui/static/js/controllers/Home.js

@@ -25,7 +25,7 @@
  *                  Host count graph should only be loaded if the user is a super user
  *
 */
-function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, HostGraph, HostPieChart, DashboardJobs,
+function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, HostGraph, DashboardJobs,
     ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button, graphData){
 
     ClearScope('home');
@@ -84,9 +84,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
         loadedCount++;
         if (loadedCount === waitCount) {
             $(window).resize(_.debounce(function() {
-                $scope.$emit('ResizeJobGraph');
                 $scope.$emit('ResizeHostGraph');
-                $scope.$emit('ResizeHostPieGraph');
                 Wait('stop');
             }, 500));
             $(window).resize();
@@ -97,6 +95,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
         $scope.removeDashboardReady();
     }
     $scope.removeDashboardReady = $scope.$on('dashboardReady', function (e, data) {
+
         nv.dev=false;
 
 
@@ -135,11 +134,6 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
             target: 'dash-jobs-list',
             dashboard: data
         });
-        HostPieChart({
-            scope: $scope,
-            target: 'dash-host-status-graph',
-            dashboard: data
-        });
 
     });
 
@@ -172,7 +166,8 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
         Rest.setUrl(GetBasePath('dashboard'));
         Rest.get()
             .success(function (data) {
-                $scope.$emit('dashboardReady', data);
+              $scope.dashboardData = data;
+              $scope.$emit('dashboardReady', data);
             })
             .error(function (data, status) {
                 ProcessErrors($scope, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard: ' + status });
@@ -183,7 +178,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
 
 }
 
-Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'HostPieChart', 'DashboardJobs',
+Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'DashboardJobs',
     'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button', 'graphData'
 ];
 

awx/ui/static/js/directives/dashboard-graphs.js

@@ -0,0 +1 @@
+angular.module('DashboardGraphs', []);

awx/ui/static/js/directives/host-status-graph.js

@@ -0,0 +1,104 @@
+angular.module('DashboardGraphs')
+  .directive('hostStatusGraph', ['$compile', '$window',
+    function ($compile, $window) {
+      return {
+        restrict: 'E',
+        link: link,
+        templateUrl: '/static/partials/host_status_graph.html'
+      };
+
+      function link(scope, element, attr) {
+        var html, canvas, context, winHeight, available_height, host_pie_chart;
+
+        scope.$watch(attr.data, function(data) {
+          if (data && data.hosts) {
+            buildGraph(data);
+          }
+        });
+
+        function adjustGraphSize() {
+          if($($window).width()<500){
+            $('.graph-container').height(300);
+          }
+          else{
+            var winHeight = $($window).height(),
+            available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
+            $('.graph-container').height(available_height/2);
+            if(host_pie_chart){
+              host_pie_chart.update();
+            }
+          }
+        }
+
+        $window.addEventListener('resize', adjustGraphSize);
+
+        element.on('$destroy', function() {
+          $window.removeEventListener('resize', adjustGraphSize);
+        });
+
+        function buildGraph(data) {
+          if(data.hosts.total+data.hosts.failed>0){
+            data = [
+              {
+              "label": "Successful",
+              "color": "#00aa00",
+              "value" : data.hosts.total
+            } ,
+            {
+              "label": "Failed",
+              "color" : "#aa0000",
+              "value" : data.hosts.failed
+            }
+            ];
+
+            nv.addGraph(function() {
+              var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
+              height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
+              host_pie_chart = nv.models.pieChart()
+              .margin({top: 5, right: 75, bottom: 40, left: 85})
+              .x(function(d) { return d.label; })
+              .y(function(d) { return d.value; })
+              .showLabels(true)
+              .labelThreshold(0.01)
+              .tooltipContent(function(x, y) {
+                return '<b>'+x+'</b>'+ '<p>' +  Math.floor(y.replace(',','')) + ' Hosts ' +  '</p>';
+              })
+              .color(['#00aa00', '#aa0000']);
+
+              host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
+
+              d3.select(".host-pie-chart svg")
+              .datum(data)
+              .attr('width', width)
+              .attr('height', height)
+              .transition().duration(350)
+              .call(host_pie_chart)
+              .style({
+                "font-family": 'Open Sans',
+                "font-style": "normal",
+                "font-weight":400,
+                "src": "url(/static/fonts/OpenSans-Regular.ttf)"
+              });
+              // nv.utils.windowResize(host_pie_chart.update);
+              scope.$emit('WidgetLoaded');
+              return host_pie_chart;
+            });
+          }
+          else{
+            winHeight = $($window).height();
+            available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
+            $('.graph-container:eq(1)').height(available_height/2);
+            $('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="120" height="120"></canvas>');
+
+            canvas = document.getElementById("circlecanvas");
+            context = canvas.getContext("2d");
+            context.arc(55, 55, 50, 0, Math.PI * 2, false);
+            context.lineWidth = 1;
+            context.strokeStyle = '#1778c3';
+            context.stroke();
+            context.font = "12px Open Sans";
+            context.fillText("No Host data",18,55);
+          }
+        }
+      }
+  }]);

awx/ui/static/js/directives/job-status-graph.js

@@ -1,4 +1,4 @@
-angular.module('GraphDirectives', [])
+angular.module('DashboardGraphs')
   .directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'jobStatusGraphData',
         function ($rootScope, $compile , $location, $window, Wait, jobStatusGraphData) {
             return {
@@ -8,7 +8,6 @@ angular.module('GraphDirectives', [])
             };
 
           function link(scope, element, attr) {
-
             var html, url, job_status_chart,
             period="month",
             job_type="all";

awx/ui/static/js/widgets/HostPieChart.js

@@ -1,128 +0,0 @@
-/*********************************************
- *  Copyright (c) 2014 AnsibleWorks, Inc.
- */
-    /**
- * @ngdoc function
- * @name widgets.function:HostPieChart
- * @description
- * HostPieChart.js
- *
- * file for the host status pie chart
- *
- */
-
-'use strict';
-
-angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
-    .factory('HostPieChart', ['$rootScope', '$compile',
-            //'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
-        function ($rootScope, $compile){
-            //, Rest, GetBasePath, ProcessErrors) {
-            return function (params) {
-
-                var scope = params.scope,
-                    target = params.target,
-                    dashboard = params.dashboard,
-                    html, element, data,
-                    canvas, context, winHeight, available_height, host_pie_chart;
-
-                // html = "<div class=\"graph-container\">\n";
-
-                html ="<div class=\"row\">\n";
-                html += "<div id=\"job-status-title\" class=\"h6 col-xs-8 text-center\"><b>Host Status</b></div>\n";
-                html += "</div>\n";
-
-                html +="<div class=\"row\">\n";
-                html += "<div class=\"host-pie-chart text-center\"><svg></svg></div>\n";
-                html += "</div>\n";
-
-                // html += "</div>\n";
-
-                element = angular.element(document.getElementById(target));
-                element.html(html);
-                $compile(element)(scope);
-
-                if (scope.removeResizeHostPieGraph) {
-                    scope.removeResizeHostPieGraph();
-                }
-                scope.removeResizeHostPieGraph= scope.$on('ResizeHostPieGraph', function () {
-                    if($(window).width()<500){
-                        $('.graph-container').height(300);
-                    }
-                    else{
-                        var winHeight = $(window).height(),
-                        available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
-                        $('.graph-container').height(available_height/2);
-                        if(host_pie_chart){
-                            host_pie_chart.update();
-                        }
-                    }
-                });
-
-                if(dashboard.hosts.total+dashboard.hosts.failed>0){
-                    data = [
-                        {
-                            "label": "Successful",
-                            "color": "#00aa00",
-                            "value" : dashboard.hosts.total
-                        } ,
-                        {
-                            "label": "Failed",
-                            "color" : "#aa0000",
-                            "value" : dashboard.hosts.failed
-                        }
-                    ];
-
-                    nv.addGraph(function() {
-                        var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
-                        height = $('.graph-container').height()*0.7; //nv.utils.windowSize().height/5,
-                        host_pie_chart = nv.models.pieChart()
-                          .margin({top: 5, right: 75, bottom: 40, left: 85})
-                          .x(function(d) { return d.label; })
-                          .y(function(d) { return d.value; })
-                          .showLabels(true)
-                          .labelThreshold(0.01)
-                          .tooltipContent(function(x, y) {
-                                return '<b>'+x+'</b>'+ '<p>' +  Math.floor(y.replace(',','')) + ' Hosts ' +  '</p>';
-                            })
-                          .color(['#00aa00', '#aa0000']);
-
-                        host_pie_chart.pie.pieLabelsOutside(true).labelType("percent");
-
-                        d3.select(".host-pie-chart svg")
-                            .datum(data)
-                            .attr('width', width)
-                            .attr('height', height)
-                            .transition().duration(350)
-                            .call(host_pie_chart)
-                             .style({
-                            "font-family": 'Open Sans',
-                            "font-style": "normal",
-                            "font-weight":400,
-                            "src": "url(/static/fonts/OpenSans-Regular.ttf)"
-                        });
-                        // nv.utils.windowResize(host_pie_chart.update);
-                        scope.$emit('WidgetLoaded');
-                        return host_pie_chart;
-                    });
-                }
-                else{
-                    winHeight = $(window).height();
-                    available_height = winHeight - $('#main-menu-container .navbar').outerHeight() - $('#count-container').outerHeight() - 120;
-                    $('.graph-container:eq(1)').height(available_height/2);
-                    $('.host-pie-chart svg').replaceWith('<canvas id="circlecanvas" width="120" height="120"></canvas>');
-
-                    canvas = document.getElementById("circlecanvas");
-                    context = canvas.getContext("2d");
-                    context.arc(55, 55, 50, 0, Math.PI * 2, false);
-                    context.lineWidth = 1;
-                    context.strokeStyle = '#1778c3';
-                    context.stroke();
-                    context.font = "12px Open Sans";
-                    context.fillText("No Host data",18,55);
-
-                    scope.$emit('WidgetLoaded');
-                }
-            };
-        }
-    ]);

awx/ui/static/partials/home.html

@@ -12,8 +12,16 @@
          <div id="dash-counts" class="col-sm-12 col-xs-12"></div>
       </div>
       <div class="row">
-        <div class="left-side col-sm-6 col-xs-12"><div  id="dash-job-status-graph" class="graph-container"><job-status-graph data="graphData.jobStatus" period="month" job-type="all"></job-status-graph> </div></div>
+        <div class="left-side col-sm-6 col-xs-12">
-         <div  class="right-side col-sm-6 col-xs-12"><div id="dash-host-status-graph" class="graph-container"></div></div>
+          <div  id="dash-job-status-graph" class="graph-container">
+            <job-status-graph data="graphData.jobStatus" period="month" job-type="all"></job-status-graph>
+          </div>
+        </div>
+         <div  class="right-side col-sm-6 col-xs-12">
+           <div id="dash-host-status-graph" class="graph-container">
+             <host-status-graph data="dashboardData"></host-status-graph>
+           </div>
+         </div>
       </div>
       <div class="row">
          <div id="dash-jobs-list" class="left-side col-sm-6 col-xs-12"></div>

awx/ui/static/partials/host_status_graph.html

@@ -0,0 +1,8 @@
+<div class="row">
+<div id="job-status-title" class="h6 col-xs-8 text-center"><b>Host Status</b></div>
+</div>
+
+<div class="row">
+<div class="host-pie-chart text-center"><svg></svg></div>
+</div>
+

awx/ui/templates/ui/index.html

@@ -82,7 +82,9 @@
     <script src="{{ STATIC_URL }}js/controllers/Schedules.js"></script>
     <script src="{{ STATIC_URL }}js/controllers/Sockets.js"></script>
     <script src="{{ STATIC_URL }}js/services/job-status-graph-data.js"></script>
+    <script src="{{ STATIC_URL }}js/directives/dashboard-graphs.js"></script>
     <script src="{{ STATIC_URL }}js/directives/job-status-graph.js"></script>
+    <script src="{{ STATIC_URL }}js/directives/host-status-graph.js"></script>
     <script src="{{ STATIC_URL }}js/forms/Users.js"></script>
     <script src="{{ STATIC_URL }}js/forms/Organizations.js"></script>
     <script src="{{ STATIC_URL }}js/forms/Inventories.js"></script>