changed url for new graph endpoints in api

awx/ui/static/js/app.js

@@ -76,6 +76,7 @@ angular.module('Tower', [
     'HostGroupsFormDefinition',
     'DashboardCountsWidget',
     'JobStatusGraphWidget',
+    'HostPieChartWidget',
     'HostGraphWidget',
     'DashboardJobsWidget',
     'StreamWidget',

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

@@ -76,6 +76,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
             target: 'container1',
             dashboard: data
         });
+
         JobStatusGraph({
             scope: $scope,
             target: 'container2',

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

@@ -49,7 +49,7 @@ angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
                     scope.removeLicenseCountReady();
                 }
                 scope.removeLicenseCountReady = scope.$on('licenseCountReady', function (e, license) {
-                    url = GetBasePath('dashboard')+'graphs/';
+                    url = GetBasePath('dashboard')+'graphs/inventory/';
                     Rest.setUrl(url);
                     Rest.get()
                         .success(function (data) {

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

@@ -0,0 +1,214 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ * HostPieChart.js
+ *
+ * file for the host status pie chart
+ *
+ */
+
+'use strict';
+
+angular.module('HostPieChartWidget', ['RestServices', 'Utilities'])
+    .factory('HostPieChart', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
+        function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors) {
+            return function (params) {
+
+                var scope = params.scope,
+                    target = params.target,
+                    // dashboard = params.dashboard,
+                    html, element, url,
+                    period="month",
+                    job_type="all";
+
+                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 class=\"h6 col-xs-2 \">\n";
+                // html += "<div class=\"dropdown\">\n";
+                // html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
+                // html += "Job Type<span class=\"caret\"></span>\n";
+                // html += "  </a>\n";
+
+                // html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
+                // html += "<li><a class=\"m\" id=\"all\">All</a></li>\n";
+                // html += "<li><a class=\"m\" id=\"inv_sync\">Inventory Sync</a></li>\n";
+                // html += "<li><a class=\"m\" id=\"scm_update\">SCM Update</a></li>\n";
+                // html += "<li><a class=\"m\" id=\"playbook_run\">Playbook Run</a></li>\n";
+                // html += "</ul>\n";
+                // html += "</div>\n";
+
+                // html += "</div>\n"; //end of filter div
+
+                // html += "<div class=\"h6 col-xs-2 \">\n";
+                // html += "<div class=\"dropdown\">\n";
+                // html += "<a id=\"dLabel\" role=\"button\" data-toggle=\"dropdown\" data-target=\"#\" href=\"/page.html\">\n";
+                // html += "Period<span class=\"caret\"></span>\n";
+                // html += "  </a>\n";
+
+                // html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
+                // html += "<li><a class=\"n\" id=\"day\" >Past 24 Hours </a></li>\n";
+                // html += "<li><a class=\"n\" id=\"week\">Past Week</a></li>\n";
+                // html += "<li><a class=\"n\" id=\"month\">Past Month</a></li>\n";
+                // html += "</ul>\n";
+                // html += "</div>\n";
+                // html += "</div>\n"; //end of filter div
+
+                // html += "</div>\n"; // end of row
+
+                html +="<div class=\"row\">\n";
+                html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
+                html += "</div>\n";
+
+                // function success(){
+                //     alert('success');
+                // }
+                // //
+                // // html += "</div>\n";
+
+                // html += "</div>\n";
+
+                // function createGraph(){
+
+                //     url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type;
+                //     Rest.setUrl(url);
+                //     Rest.get()
+                //         .success(function (data){
+                //             scope.$emit('graphDataReady', data);
+                //             return job_type, period;
+
+                //         })
+                //         .error(function (data, status) {
+                //             ProcessErrors(scope, data, status, null, { hdr: 'Error!',
+                //                 msg: 'Failed to get: ' + url + ' GET returned: ' + status });
+                //         });
+                // }
+
+                element = angular.element(document.getElementById(target));
+                element.html(html);
+                $compile(element)(scope);
+
+                // createGraph();
+
+
+                // if (scope.removeGraphDataReady) {
+                //     scope.removeGraphDataReady();
+                // }
+                // scope.removeGraphDataReady = scope.$on('graphDataReady', function (e, data) {
+                //     var timeFormat, graphData = [
+                //         {
+                //             "color": "#1778c3",
+                //             "key": "Successful",
+                //             "values": data.jobs.successful
+                //         },
+                //         {
+                //             "key" : "Failed" ,
+                //             "color" : "#aa0000",
+                //             "values": data.jobs.failed
+                //         }
+                //     ];
+
+                //     if(period==="day"){
+                //         timeFormat="%H:%M";
+                //     }
+                //     else {
+                //         timeFormat = '%m/%d';
+                //     }
+                //     graphData.map(function(series) {
+                //         series.values = series.values.map(function(d) {
+                //             return {
+                //                 x: d[0],
+                //                 y: d[1]
+                //             };
+                //         });
+                //         return series;
+                //     });
+
+                //     nv.addGraph({
+                //         generate: function() {
+                //                     var width = nv.utils.windowSize().width/3,
+                //                         height = nv.utils.windowSize().height/5,
+                //                         chart = nv.models.lineChart()
+                //                             .margin({top: 5, right: 75, bottom: 40, left: 85})  //Adjust chart margins to give the x-axis some breathing room.
+                //                             .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
+                //                             // .width(width)
+                //                             // .height(height)
+                //                             ;
+
+                //                     chart.xAxis
+                //                         .axisLabel("Time").showMaxMin(true)
+                //                         .tickFormat(function(d) {
+                //                         var dx = graphData[0].values[d] && graphData[0].values[d].x || 0;
+                //                         return dx ? d3.time.format(timeFormat)(new Date(Number(dx+'000'))) : '';
+                //                     });
+
+                //                     chart.yAxis     //Chart y-axis settings
+                //                       .axisLabel('Jobs')
+                //                       .tickFormat(d3.format('.f'));
+
+                //                     // d3.select('.job-status-graph svg')
+                //                     //   .attr('width', width)
+                //                     //   .attr('height', height)
+                //                     //   .datum(data)
+                //                     //   .call(chart);
+
+                //                     d3.select('.job-status-graph svg')
+                //                             .datum(graphData).transition()
+                //                             .attr('width', width)
+                //                             .attr('height', height)
+                //                             .duration(500)
+                //                             .call(chart)
+                //                             .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(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;
+
+                              //  },
+
+                  //  });
+
+               // });
+
+            };
+        }
+    ]);

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

@@ -32,11 +32,11 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 html += "Job Type<span class=\"caret\"></span>\n";
                 html += "  </a>\n";
 
-                html += "<ul class=\"dropdown-menu status-dropdown\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
+                html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
-                html += "<li><div class=\"m\" id=\"all\">All</span></div></li>\n";
+                html += "<li><a class=\"m\" id=\"all\">All</a></li>\n";
-                html += "<li><div class=\"m\" id=\"inv_sync\">Inventory Sync</div></li>\n";
+                html += "<li><a class=\"m\" id=\"inv_sync\">Inventory Sync</a></li>\n";
-                html += "<li><div class=\"m\" id=\"scm_update\">SCM Update</div></li>\n";
+                html += "<li><a class=\"m\" id=\"scm_update\">SCM Update</a></li>\n";
-                html += "<li><div class=\"m\" id=\"playbook_run\">Playbook Run</div></li>\n";
+                html += "<li><a class=\"m\" id=\"playbook_run\">Playbook Run</a></li>\n";
                 html += "</ul>\n";
                 html += "</div>\n";
 
@@ -48,10 +48,10 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 html += "Period<span class=\"caret\"></span>\n";
                 html += "  </a>\n";
 
-                html += "<ul class=\"dropdown-menu period-dropdown\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
+                html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dLabel\">\n";
-                html += "<li><div class=\"n\" id=\"day\" >Past 24 Hours </div></li>\n";
+                html += "<li><a class=\"n\" id=\"day\" >Past 24 Hours </a></li>\n";
-                html += "<li><div class=\"n\" id=\"week\">Past Week</div></li>\n";
+                html += "<li><a class=\"n\" id=\"week\">Past Week</a></li>\n";
-                html += "<li><div class=\"n\" id=\"month\">Past Month</div></li>\n";
+                html += "<li><a class=\"n\" id=\"month\">Past Month</a></li>\n";
                 html += "</ul>\n";
                 html += "</div>\n";
                 html += "</div>\n"; //end of filter div
@@ -62,6 +62,9 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
                 html += "<div class=\"job-status-graph\"><svg></svg></div>\n";
                 html += "</div>\n";
 
+                function success(){
+                    alert('success');
+                }
                 //
                 // html += "</div>\n";
 
@@ -69,7 +72,7 @@ angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
 
                 function createGraph(){
 
-                    url = GetBasePath('dashboard')+'graphs/?period='+period+'&type='+job_type;
+                    url = GetBasePath('dashboard')+'graphs/jobs/?period='+period+'&job_type='+job_type;
                     Rest.setUrl(url);
                     Rest.get()
                         .success(function (data){

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

@@ -86,5 +86,5 @@
   cursor:pointer;
 }
 .m, .n{
-  padding-bottom: 5px;
+  cursor:pointer;
 }

awx/ui/static/lib/novus-nvd3/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "nvd3",
+  "version": "0.0.1",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.3.0",
+    "grunt-contrib-watch": "~0.3.1",
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-concat": "~0.2.0",
+    "grunt-contrib-copy": "~0.4.1",
+    "grunt-contrib-cssmin": "~0.6.2"
+  }
+}

awx/ui/templates/ui/index.html

@@ -164,6 +164,7 @@
   <script src="{{ STATIC_URL }}js/helpers/HostEventsViewer.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/JobStatus.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/DashboardCounts.js"></script>
+  <script src="{{ STATIC_URL }}js/widgets/HostPIeChart.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/HostGraph.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/JobStatusGraph.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/DashboardJobs.js"></script>