added filter for job status graph widget

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

@@ -44,6 +44,10 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
         toolbar: true
     });
 
+    String.prototype.capitalize = function() {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    };
+
     e = angular.element(document.getElementById('home-list-actions'));
     e.html(html);
     $compile(e)($scope);

awx/ui/static/js/widgets/HostGraph.js

@@ -29,14 +29,16 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
                 html += "</div>\n";
 
 
-                function getLicenseNumber(){
+
+                element = angular.element(document.getElementById(target));
+                element.html(html);
+                $compile(element)(scope);
+
                 Rest.setUrl(GetBasePath('config'));
                 Rest.get()
                     .success(function (data){
-                            //$scope.$emit('dashboardReady', data);
-                            // console.log(data);
                         license = data.license_info.available_instances;
-                            createGraph(license);
+                        scope.$emit('licenseCountReady', license);
 
                     })
                     .error(function (data, status) {
@@ -44,36 +46,31 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
                     ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
                 });
 
-                        //return license;
-                }
 
-                function createGraph(license){
+                if (scope.removeLicenseCountReady) {
+                    scope.removeLicenseCountReady();
+                }
+                scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) {
                     Rest.setUrl(GetBasePath('dashboard')+'graphs/');
                     Rest.get()
                         .success(function (data) {
-                            //$scope.$emit('dashboardReady', data);
+                            scope.$emit('hostDataReady', data, license);
-                            // console.log(data);
-                            //license = data.license_info.available_instances;
-
-                            makeHostCountGraph(license, data);
 
                         })
                         .error(function (data, status) {
                             //Wait('stWaitop');
-                            ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
+                            ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get license info ' + status });
                         });
 
-                        //return license;
+                });
+
+                if (scope.removeHostDataReady) {
+                    scope.removeHostDataReady();
                 }
+                scope.removeHostDataReady = scope.$on('hostDataReady', function (e, data, license) {
 
-                function makeHostCountGraph(license, data){
                         url = GetBasePath('dashboard')+'graphs/';
-                        var graphData = [];
+                        var graphData = [
-
-                     //d3.json("static/js/jobstatusdata.json",function(error,data) {
-                        //d3.json(url, function(error,data) {
-
-                        graphData = [
                                 {
                                     "key" : "Hosts" ,
                                     "color" : "#1778c3",
@@ -153,19 +150,15 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
                                     });
 
                                     nv.utils.windowResize(chart.update);
+                                    scope.$emit('WidgetLoaded');
                                     return chart;
                                 },
 
                             });
                         //});
-                    }
+                    });
+
 
-                element = angular.element(document.getElementById(target));
-                element.html(html);
-                $compile(element)(scope);
-                getLicenseNumber();
-               // makeHostCountGraph(license);
-                scope.$emit('WidgetLoaded');
 
             };
         }

awx/ui/static/js/widgets/JobStatusGraph.js

@@ -17,12 +17,14 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 var scope = params.scope,
                     target = params.target,
                     // dashboard = params.dashboard,
-                    html, element, url;
+                    html, element, url,
+                    period="month",
+                    job_type="all";
 
                 html = "<div class=\"graph-container\">\n";
 
                 html +="<div class=\"row\">\n";
-                html += "<div class=\"h6 col-xs-8 text-center\"><b>Job Status</b></div>\n";
+                html += "<div id=\"job-status-title\" class=\"h6 col-xs-8 text-center\"><b>Job Status for All Jobs, Past Month</b></div>\n";
 
                 html += "<div class=\"h6 col-xs-2 \">\n";
                 html += "<div class=\"dropdown\">\n";
@@ -30,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 html += "Job Type<span class=\"caret\"></span>\n";
                 html += "  </a>\n";
 
-                html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
+                html += "<ul class=\"dropdown-menu status-dropdown\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
-                html += "<li><a href=\"#\">All</a></li>\n";
+                html += "<li><div class=\"m\" id=\"all\">All</span></div></li>\n";
-                html += "<li><a href=\"#\">Inventory Sync</a></li>\n";
+                html += "<li><div class=\"m\" id=\"inv_sync\">Inventory Sync</div></li>\n";
-                html += "<li><a href=\"#\">SCM Update</a></li>\n";
+                html += "<li><div class=\"m\" id=\"scm_update\">SCM Update</div></li>\n";
-                html += "<li><a href=\"#\">Playbook Runs</a></li>\n";
+                html += "<li><div class=\"m\" id=\"playbook_run\">Playbook Run</div></li>\n";
                 html += "</ul>\n";
                 html += "</div>\n";
 
@@ -47,9 +49,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 html += "  </a>\n";
 
                 html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
-                html += "<li><a href=\"#\">Past 24 Hours</a></li>\n";
+                html += "<li><div class=\"n\" id=\"day\" >Past 24 Hours </div></li>\n";
-                html += "<li><a href=\"#\">Past Week</a></li>\n";
+                html += "<li><div class=\"n\" id=\"week\">Past Week</div></li>\n";
-                html += "<li><a href=\"#\">Past Month</a></li>\n";
+                html += "<li><div class=\"n\" id=\"month\">Past Month</div></li>\n";
                 html += "</ul>\n";
                 html += "</div>\n";
                 html += "</div>\n"; //end of filter div
@@ -66,35 +68,36 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 html += "</div>\n";
 
                 function createGraph(){
-                        url = GetBasePath('dashboard')+'graphs/';
+
+                    url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type;
                     Rest.setUrl(url);
                     Rest.get()
                     .success(function (data){
-                            //$scope.$emit('dashboardReady', data);
+                        scope.$emit('graphDataReady', data);
-                            // console.log(data);
+                        return job_type, period;
-                           // license = data.license_info.available_instances;
-                            makeJobStatusGraph(data);
 
                     })
                     .error(function (data, status) {
                         //Wait('stWaitop');
                         ProcessErrors(null, data, status, null, { hdr: 'Error!', msg: 'Failed to get dashboard graph data: ' + status });
                     });
-
-                        //return license;
                 }
 
+                element = angular.element(document.getElementById(target));
+                element.html(html);
+                $compile(element)(scope);
 
-                //function makeHostCountGraph(license){
+                createGraph();
 
-                function makeJobStatusGraph(data){
 
-                    var graphData = [];
 
-                    //d3.json("static/js/jobstatusdata.json",function(error,data) {
+
-                  //  d3.json(url, function(error,data) {
+
-                       //console.log(data);
+                if (scope.removeGraphDataReady) {
-                    graphData = [
+                    scope.removeGraphDataReady();
+                }
+                scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) {
+                    var timeFormat, graphData = [
                         {
                             "color": "#1778c3",
                             "key": "Successful",
@@ -107,6 +110,12 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                         }
                     ];
 
+                    if(period==="day"){
+                        timeFormat="%H:%M";
+                    }
+                    else {
+                        timeFormat = '%m/%d';
+                    }
                     graphData.map(function(series) {
                         series.values = series.values.map(function(d) {
                             return {
@@ -137,7 +146,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                                         .axisLabel("Time").showMaxMin(true)
                                         .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'))) : '';
+                                        return dx ? d3.time.format(timeFormat)(new Date(Number(dx+'000'))) : '';
                                     });
 
                                     chart.yAxis     //Chart y-axis settings
@@ -167,20 +176,38 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
 
 
                                     nv.utils.windowResize(chart.update);
+
+
+                                    //On click, update with new data
+                                    d3.selectAll(".n")
+                                        .on("click", function() {
+                                            period = this.getAttribute("id");
+                                           // console.log(period);
+                                            var title = $('#job-status-title').text(),
+                                            str = title.slice(0,title.search(","))+", "+this.innerHTML;
+                                            $('#job-status-title').html("<b>"+str+" </b>");
+                                            createGraph();
+                                        });
+
+                                         //On click, update with new data
+                                    d3.selectAll(".m")
+                                        .on("click", function() {
+                                            job_type = this.getAttribute("id");
+                                            //console.log(job_type);
+                                            var title = $('#job-status-title').text(),
+                                            str = title.slice(title.search(","));
+                                            $('#job-status-title').html("<b>Job Status for "+this.innerHTML+" Jobs"+str+" </b>");
+                                            createGraph();
+                                        });
+
+                                    scope.$emit('WidgetLoaded');
                                     return chart;
+
                                 },
 
                     });
-                  //  });
-                }
 
-
+                });
-                element = angular.element(document.getElementById(target));
-                element.html(html);
-                $compile(element)(scope);
-                createGraph();
-                //makeJobStatusGraph();
-                scope.$emit('WidgetLoaded');
 
             };
         }

awx/ui/static/less/new-dashboard.less

@@ -85,3 +85,16 @@
       border:1px solid black;
       background-color: #A9A9A9;
 }
+
+.dropdown-menu {
+  cursor: pointer;
+  padding-left: 7px;
+  height: 75px;
+  width: 100px;
+}
+.status-dropdown{
+  height: 100px;
+}
+.m, .n{
+  padding-bottom: 5px;
+}