Move host count graph into directive

awx/ui/static/js/app.js

@@ -95,7 +95,6 @@ angular.module('Tower', [
     'SelectionHelper',
     'HostGroupsFormDefinition',
     'DashboardCountsWidget',
-    'HostGraphWidget',
     'DashboardJobsWidget',
     'PortalJobsWidget',
     'StreamWidget',

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, DashboardJobs,
+function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait, DashboardCounts, DashboardJobs,
     ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button, graphData){
 
     ClearScope('home');
@@ -84,7 +84,6 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
         loadedCount++;
         if (loadedCount === waitCount) {
             $(window).resize(_.debounce(function() {
-                $scope.$emit('ResizeHostGraph');
                 Wait('stop');
             }, 500));
             $(window).resize();
@@ -118,15 +117,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
 
         $scope.graphData = graphData;
 
-        if ($rootScope.user_is_superuser === true) {
-            waitCount = 5;
-            HostGraph({
-                scope: $scope,
-                target: 'dash-host-count-graph',
-                dashboard: data
-            });
-        }
-        else{
+        if ($rootScope.user_is_superuser !== true) {
             $('#dash-host-count-graph').remove(); //replaceWith("<div id='dash-host-count-graph' class='left-side col-sm-12 col-xs-12'></div>");
         }
         DashboardJobs({
@@ -178,7 +169,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, $log, Wait,
 
 }
 
-Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'HostGraph', 'DashboardJobs',
+Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', '$log','Wait', 'DashboardCounts', 'DashboardJobs',
     'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button', 'graphData'
 ];
 

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

@@ -0,0 +1,148 @@
+angular.module('DashboardGraphs').
+  directive('hostCountGraph', ['GetBasePath', 'Rest', function(getBasePath, Rest) {
+
+  return {
+    restrict: 'E',
+    templateUrl: '/static/partials/host_count_graph.html',
+    link: link
+  };
+
+  function link(scope, element, attrs) {
+    var url, license, license_graph;
+
+    url = getBasePath('config');
+
+    if (scope.removeResizeHostGraph) {
+      scope.removeResizeHostGraph();
+    }
+    scope.removeResizeHostGraph= scope.$on('ResizeHostGraph', 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);
+        license_graph.update();
+      }
+    });
+
+    Rest.setUrl(url);
+    Rest.get()
+    .success(function (data){
+      license = data.license_info.instance_count;
+      scope.$emit('licenseCountReady', license);
+    })
+    .error(function (data, status) {
+      ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                    msg: 'Failed to get: ' + url + ' GET returned: ' + status });
+    });
+
+    if (scope.removeLicenseCountReady) {
+      scope.removeLicenseCountReady();
+    }
+    scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) {
+      url = getBasePath('dashboard')+'graphs/inventory/';
+      Rest.setUrl(url);
+      Rest.get()
+      .success(function (data) {
+        scope.$emit('hostDataReady', data, license);
+      })
+      .error(function (data, status) {
+        ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                      msg: 'Failed to get: ' + url + ' GET returned: ' + status });
+      });
+
+    });
+
+    if (scope.removeHostDataReady) {
+      scope.removeHostDataReady();
+    }
+    scope.removeHostDataReady = scope.$on('hostDataReady', function (e, data, license) {
+
+      //url = getBasePath('dashboard')+'graphs/';
+      var graphData = [
+        {
+        "key" : "Hosts" ,
+        "color" : "#1778c3",
+        "values": data.hosts
+      },
+      {
+        "key" : "License" ,
+        "color" : "#171717",
+        "values": data.hosts
+      }
+      ];
+
+      graphData.map(function(series) {
+        if(series.key==="Hosts"){
+          series.values = series.values.map(function(d) {
+            return {
+              x: d[0],
+              y: d[1]
+            };
+          });
+        }
+        if(series.key==="License"){
+          series.values = series.values.map(function(d) {
+            return {
+              x: d[0],
+              y: license
+            };
+          });
+
+        }
+        return series;
+
+      });
+
+      nv.addGraph({
+        generate: function() {
+          var width = $('.graph-container').width(), // nv.utils.windowSize().width/3,
+          height = $('.graph-container').height()*0.6; //nv.utils.windowSize().height/5,
+          license_graph = nv.models.lineChart()
+          .margin({top: 15, right: 75, bottom: 40, left: 85})
+          .x(function(d,i) { return i ;})
+          .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
+          .transitionDuration(350)  //how fast do you want the lines to transition?
+          .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
+          .showYAxis(true)        //Show the y-axis
+          .showXAxis(true)        //Show the x-axis
+          ;
+
+          license_graph.xAxis
+          .axisLabel("Time")
+          .tickFormat(function(d) {
+            var dx = graphData[0].values[d] && graphData[0].values[d].x || 0;
+            return dx ? d3.time.format('%m/%d')(new Date(Number(dx+'000'))) : '';
+          });
+
+          license_graph.yAxis     //Chart y-axis settings
+          .axisLabel('Hosts')
+          .tickFormat(d3.format('.f'));
+
+          d3.select(element.find('svg')[0])
+          .datum(graphData).transition()
+          .attr('width', width)
+          .attr('height', height)
+          .duration(500)
+          .call(license_graph)
+          .style({
+            // 'width': width,
+            // 'height': height,
+            "font-family": 'Open Sans',
+            "font-style": "normal",
+            "font-weight":400,
+            "src": "url(/static/fonts/OpenSans-Regular.ttf)"
+          });
+
+
+          // nv.utils.windowResize(license_graph.update);
+          scope.$emit('WidgetLoaded');
+          return license_graph;
+
+        }
+      });
+    });
+  }
+}]);

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

@@ -1,6 +1,6 @@
 angular.module('DashboardGraphs')
-  .directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'jobStatusGraphData',
-        function ($rootScope, $compile , $location, $window, Wait, jobStatusGraphData) {
+  .directive('jobStatusGraph', ['$rootScope', '$compile', '$location' , '$window', 'Wait', 'adjustGraphSize', 'jobStatusGraphData',
+        function ($rootScope, $compile , $location, $window, Wait, adjustGraphSize, jobStatusGraphData) {
             return {
               restrict: 'E',
               templateUrl: '/static/partials/job_status_graph.html',
@@ -35,43 +35,10 @@ angular.module('DashboardGraphs')
 
             var w = angular.element($window);
 
-            function adjustGraphSize() {
-              var parentHeight = element.parent().parent().height();
-              var toolbarHeight = element.find('.toolbar').height();
-              var container = element.find('svg').parent();
-              var margins = job_status_chart.margin();
 
-              var newHeight = parentHeight - toolbarHeight - margins.bottom;
-
-              $(container).height(newHeight);
-
-              var graph = d3.select(element.find('svg')[0]);
-              var width = parseInt(graph.style('width')) - margins.left - margins.right;
-              var height = parseInt(graph.style('height')) - margins.top - margins.bottom;
-
-
-              job_status_chart.xRange([0, width]);
-              job_status_chart.yRange([height, 0]);
-
-              job_status_chart.xAxis.ticks(Math.max(width / 75, 2));
-              job_status_chart.yAxis.ticks(Math.max(height / 50, 2));
-
-              if (height < 160) {
-                graph.select('.y.axis').select('.domain').style('display', 'none');
-                graph.select('.y.axis').select('.domain').style('display', 'initial');
-              }
-
-              graph.select('.x.axis')
-                .attr('transform', 'translate(0, ' + height + ')')
-                .call(job_status_chart.xAxis);
-
-              graph.selectAll('.line')
-                    .attr('d', job_status_chart.lines)
-
-              job_status_chart.update();
-            }
-
-            $window.addEventListener('resize', adjustGraphSize);
+            $window.addEventListener('resize', function() {
+              adjustGraphSize(job_status_chart, element);
+            });
 
             if (scope.removeGraphDataReady) {
               scope.removeGraphDataReady();
@@ -168,7 +135,7 @@ angular.module('DashboardGraphs')
                 createGraph(period, job_type);
               });
 
-              adjustGraphSize();
+              adjustGraphSize(job_status_chart, element);
 
               return job_status_chart;
 

awx/ui/static/js/services/adjust-graph-size.js

@@ -0,0 +1,38 @@
+angular.module('DashboardGraphs').
+  factory('adjustGraphSize', function() {
+      return function adjustGraphSize(chartModel, element) {
+        var parentHeight = element.parent().parent().height();
+        var toolbarHeight = element.find('.toolbar').height();
+        var container = element.find('svg').parent();
+        var margins = chartModel.margin();
+
+        var newHeight = parentHeight - toolbarHeight - margins.bottom;
+
+        $(container).height(newHeight);
+
+        var graph = d3.select(element.find('svg')[0]);
+        var width = parseInt(graph.style('width')) - margins.left - margins.right;
+        var height = parseInt(graph.style('height')) - margins.top - margins.bottom;
+
+
+        chartModel.xRange([0, width]);
+        chartModel.yRange([height, 0]);
+
+        chartModel.xAxis.ticks(Math.max(width / 75, 2));
+        chartModel.yAxis.ticks(Math.max(height / 50, 2));
+
+        if (height < 160) {
+          graph.select('.y.axis').select('.domain').style('display', 'none');
+          graph.select('.y.axis').select('.domain').style('display', 'initial');
+        }
+
+        graph.select('.x.axis')
+          .attr('transform', 'translate(0, ' + height + ')')
+          .call(chartModel.xAxis);
+
+        graph.selectAll('.line')
+              .attr('d', chartModel.lines)
+
+        chartModel.update();
+      }
+});

awx/ui/static/partials/home.html

@@ -25,7 +25,11 @@
       </div>
       <div class="row">
          <div id="dash-jobs-list" class="left-side col-sm-6 col-xs-12"></div>
-         <div class="right-side col-sm-6 col-xs-12"><div id="dash-host-count-graph" class="graph-container"></div></div>
+         <div class="right-side col-sm-6 col-xs-12">
+           <div id="dash-host-count-graph" class="graph-container">
+             <host-count-graph></host-count-graph>
+           </div>
+         </div>
       </div>
    </div>
 </div>

awx/ui/static/partials/host_count_graph.html

@@ -0,0 +1,12 @@
+<div class="graph-wrapper">
+  <div class="clearfix toolbar">
+    <div class="h6 pull-left">
+      <b>Host Count</b>
+    </div>
+  </div>
+
+  <div class="graph">
+    <svg width="100%" height="100%"></svg>
+  </div>
+</div>
+

awx/ui/templates/ui/index.html

@@ -83,6 +83,7 @@
     <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/services/adjust-graph-size.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>