adding code for carousel for dashboard

awx/ui/static/js/app.js

@@ -75,7 +75,8 @@ angular.module('Tower', [
     'License',
     'HostGroupsFormDefinition',
     'DashboardCountsWidget',
-    'DashboardChartsWidget',
+    'JobStatusGraphWidget',
+    'HostGraphWidget',
     'DashboardJobsWidget',
     'StreamWidget',
     'JobsHelper',

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

@@ -10,7 +10,7 @@
 
 'use strict';
 
-function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, DashboardCounts, DashboardCharts, DashboardJobs,
+function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, DashboardCounts, HostGraph, JobStatusGraph, DashboardJobs,
     ClearScope, Stream, Rest, GetBasePath, ProcessErrors, Button){
 
     ClearScope('home');
@@ -76,16 +76,22 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
             target: 'container1',
             dashboard: data
         });
-        DashboardCharts({
+        JobStatusGraph({
             scope: $scope,
             target: 'container2',
             dashboard: data
         });
-        DashboardJobs({
+         HostGraph({
             scope: $scope,
             target: 'container3',
             dashboard: data
         });
+
+        DashboardJobs({
+            scope: $scope,
+            target: 'container4',
+            dashboard: data
+        });
     });
 
     $scope.showActivity = function () {
@@ -112,7 +118,7 @@ function Home($scope, $compile, $routeParams, $rootScope, $location, Wait, Dashb
 
 }
 
-Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'DashboardCounts', 'DashboardCharts', 'DashboardJobs',  'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button'
+Home.$inject = ['$scope', '$compile', '$routeParams', '$rootScope', '$location', 'Wait', 'DashboardCounts', 'HostGraph','JobStatusGraph', 'DashboardJobs',  'ClearScope', 'Stream', 'Rest', 'GetBasePath', 'ProcessErrors', 'Button'
 ];
 
 

awx/ui/static/js/widgets/DashboardCounts.js

@@ -20,37 +20,174 @@ angular.module('DashboardCountsWidget', ['RestServices', 'Utilities'])
 
                     html, element;
 
-                html = "<div id=\"count-container\" class=\"panel-body\" style=\"border:none\">\n";
+                    function createHTML(html){
-                html += "<table>\n";
+                        var docw = $(window).width();
-                html += "<tr>\n";
+                        if(docw<768){
-                html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
-                html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
-                html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
-                html += "<td class=\"h1 col-lg-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
-                html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
-                html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
-                html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
-                html += "</tr>\n";
 
-                html += "<tr>\n";
+                                html = "<div id=\"dash-count-carousel\" class=\"carousel slide\" data-interval=\"1000\" data-ride=\"carousel\">\n" ;
-                html += "<td class=\"h5 col-lg-1 text-center\">Hosts</td>\n";
+                                // html += " <!-- Indicators -->\n";
-                html += "<td class=\"h5 col-lg-1 text-center\">Failed Hosts</td>\n";
+                                html += "<ol class=\"carousel-indicators\">\n";
-                html += "<td class=\"h5 col-lg-1 text-center\">Inventories</td>\n";
+                                html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"0\" class=\"active\"></li>\n";
-                html += "<td class=\"h5 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
+                                html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"1\"></li>\n";
-                html += "<td class=\"h5 col-lg-1 text-center\">Projects</td>\n";
+                                html += "<li data-target=\"#dash-count-carousel\" data-slide-to=\"2\"></li>\n";
-                html += "<td class=\"h5 col-lg-1 text-center\">Project Sync Failures</td>\n";
+                                html += "</ol>\n";
-                html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
-                html += "</tr>\n";
-                html += "</table>\n";
-                html += "</div>\n";
-                html += "<hr>\n";
 
+                                //<!-- Wrapper for slides -->
+                                //html += "<div class=\"carousel-inner\">\n" ;
+                                html += "<div class=\"carousel-inner\">\n" ;
+                                html += "<div class=\"item active\">\n" ;
+                                html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
+                                html += "<div class=\"carousel-caption\">\n" ;
+                                html += "<p>Caption text here</p>\n" ;
+                                html += "</div>\n" ;
+                                html += "</div>\n" ;
+                                html += "<div class=\"item\">\n" ;
+                                html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
+                                html += "<div class=\"carousel-caption\">\n" ;
+                                html += "<p>Caption text here</p>\n" ;
+                                html += "</div>\n" ;
+                                html += "</div>\n" ;
+                                html += "<div class=\"item\">\n" ;
+                                html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
+                                html += "<div class=\"carousel-caption\">\n" ;
+                                html += "<p>Caption text here</p>\n" ;
+                                html += "</div>\n" ;
+                                html += "</div>\n" ;
+                                html += "<div class=\"item\">\n" ;
+                                html += "<img src=\"http://placehold.it/1200x480\" alt=\"\" />\n" ;
+                                html += "<div class=\"carousel-caption\">\n" ;
+                                html += "<p>Caption text here</p>\n" ;
+                                html += "</div>\n" ;
+                                html += "</div>\n" ;
+                                html += "</div>\n" ;
+
+                               // html += \"<!-- Controls -->\n" ;
+                                html += "<a class=\" carousel-control left\"  href=\"#dash-count-carousel\" role=\"button\" data-slide=\"prev\">\n" ;
+                                html += "<span class=\"icon-prev\" onclick=\"javascript:$(\'.carousel\'').carousel(\'prev\'')\"></span>\n" ;
+                                html += "</a>\n" ;
+                                html += "<a class=\"carousel-control right\"  href=\"#dash-count-carousel\" role=\"button\" data-slide=\"next\">\n" ;
+                                html += "<span class=\"icon-next\"></span>\n" ;
+                                html += "</a>\n" ;
+                                html += "</div>\n" ;
+// <!-- Controls -->
+//   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+//     <span class="glyphicon glyphicon-chevron-left"></span>
+//   </a>
+//   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+//     <span class="glyphicon glyphicon-chevron-right"></span>
+//   </a>
+// </div>
+                                // $('.carousel').carousel({
+                                //   interval: 2000
+                                // })
+
+
+                        }
+                        else{
+                            html = "<div id=\"count-container\" class=\"panel-body\" style=\"borderBottom:thick solid #0000FF\">\n";
+                            html += "<table class=\"table-bordered\">\n";
+                            html += "<tr>\n";
+                            html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
+                            html += "<td class=\"h2 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
+                            html += "<td class=\"h2 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
+                            html += "<td class=\"h2 col-lg-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
+                            html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
+                            html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
+                            html += "<td class=\"h2 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
+                            html += "</tr>\n";
+
+                            html += "<tr>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Hosts</td>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Failed Hosts</td>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Inventories</td>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Projects</td>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Project Sync Failures</td>\n";
+                            html += "<td class=\"h6 col-lg-1 text-center\">Users</td>\n";
+                            html += "</tr>\n";
+                            html += "</table>\n";
+                            html += "</div>\n";
+                            // html += "<hr>\n";
+
+                        }
+
+
+                        return html;
+                    }
+
+
+
+
+
+
+                // html = "<div id=\"count-container\" class=\"panel-body visible-xs-block\" style=\"border:none\">\n";
+                // html += "<table>table1\n";
+                // html += "<tr>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
+                // html += "</tr>\n";
+
+                // html += "<tr>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Hosts</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Failed Hosts</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Inventories</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Projects</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Project Sync Failures</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
+                // html += "</tr>\n";
+                // html += "</table>\n";
+                // html += "</div>\n";
+                // html += "<hr>\n";
+
+//--------------------------------------------------------------------------------------------------------------------
+                // html = "<div id=\"count-container\" class=\"panel-body visible-md-block\" style=\"border:none\">\n";
+                // html += "<table>table2\n";
+                // html += "<tr>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/home/hosts>" + dashboard.hosts.total+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/home/hosts>"+dashboard.hosts.failed+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1-1 text-center\"><a href=/#/inventories>"+dashboard.inventories.total+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\" id=\"sync-failure\"><a href=/#/inventories/?inventory_sources_with_failures>"+dashboard.inventories.inventory_failed+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.total+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/projects>"+dashboard.projects.failed+"</a></td>\n";
+                // html += "<td class=\"h1 col-lg-1 text-center\"><a href=/#/users>"+dashboard.users.total+"</a></td>\n";
+                // html += "</tr>\n";
+
+                // html += "<tr>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Hosts</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Failed Hosts</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Inventories</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Inventory Sync Failures</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Projects</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Project Sync Failures</td>\n";
+                // html += "<td class=\"h5 col-lg-1 text-center\">Users</td>\n";
+                // html += "</tr>\n";
+                // html += "</table>\n";
+                // html += "</div>\n";
+                // html += "<hr>\n";
+//--------------------------------------------------------------------------------------------------------------------
                 element = angular.element(document.getElementById(target));
-                element.html(html);
+                element.html(createHTML(html));
                 $compile(element)(scope);
 
                 scope.$emit('WidgetLoaded');
 
+
+                //window.onresize = scaleForSmallDevices;
+
+                function scaleForSmallDevices(){
+                    var docw = $(window).width();
+                    if(docw<600){
+                        alert('success');
+                    }
+
+                };
+
             };
         }
     ]);

awx/ui/static/js/widgets/DashboardJobs.js

@@ -129,7 +129,7 @@ angular.module('DashboardJobsWidget', ['RestServices', 'Utilities'])
                 search_row = Math.max($('.search-row:eq(0)').outerHeight(), 50);
                 page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
                 header = Math.max($('#completed_jobs_table thead').height(), 41);
-                height = Math.floor(available_height) - header - page_row  - 15;
+                height = Math.floor(available_height) - header - page_row ;
                 row_height = (docw < 1415) ? 47 : 27;
                 //$('.jobs-list-container tbody tr:eq(0)').height();  <-- only works if data is loaded
                 max_rows = Math.floor(height / row_height);

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

@@ -0,0 +1,110 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ * Dashboard.js
+ *
+ * The new dashboard
+ *
+ */
+
+'use strict';
+
+angular.module('HostGraphWidget', ['RestServices', 'Utilities'])
+    .factory('HostGraph', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
+        function ($rootScope, $compile) {
+            return function (params) {
+
+                var scope = params.scope,
+                    target = params.target,
+                    //dashboard = params.dashboard,
+
+                    html, element;
+
+                // html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
+                html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n";
+
+                html += "<table class=\"table\" >\n";
+                html += "<tr> \n";
+                // html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n";
+                html += "<td class=\"h6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n";
+                html += "</tr>\n";
+                html += "<tr>\n";
+                // html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
+                html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n";
+                html += "</tr>\n";
+                html += "</table>\n";
+                html += "</div>\n";
+                // html += "</div>\n";
+
+
+
+                function makeHostCountGraph(){
+                    d3.json("static/js/hostcount.json",function(error,data) {
+
+                        data.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/4,
+                                    chart = nv.models.lineChart()
+                                        .margin({top: 15, right: 75, bottom: 40, left: 80})
+                                        .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
+                                        ;
+
+                                    chart.xAxis
+                                    .axisLabel("Time")
+                                    .tickFormat(function(d) {
+                                        var dx = data[0].values[d] && data[0].values[d].x || 0;
+                                        return dx ? d3.time.format('%m/%d')(new Date(dx)) : '';
+                                    });
+
+                                    chart.yAxis     //Chart y-axis settings
+                                  .axisLabel('Hosts')
+                                  .tickFormat(d3.format('.f'));
+
+                                    d3.select('.host-count-graph svg')
+                                  .datum(data).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)"
+                                        });
+
+                                        d3.selectAll(".nv-line").on("click", function () {
+                                            alert("clicked");
+                                        });
+
+                                    nv.utils.windowResize(chart.update);
+                                    return chart;
+                                },
+
+                        });
+                    });
+                }
+
+                element = angular.element(document.getElementById(target));
+                element.html(html);
+                $compile(element)(scope);
+                // makeJobStatusGraph();
+                makeHostCountGraph();
+                scope.$emit('WidgetLoaded');
+
+            };
+        }
+    ]);

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

@@ -9,8 +9,8 @@
 
 'use strict';
 
-angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
+angular.module('JobStatusGraphWidget', ['RestServices', 'Utilities'])
-    .factory('DashboardCharts', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
+    .factory('JobStatusGraph', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
         function ($rootScope, $compile) {
             return function (params) {
 
@@ -23,14 +23,14 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
                 // html = "<div class=\"panel panel-default\" style=\"border:none\">\n";
                 html = "<div id=\"graph-container\" class=\"panel-body \" style=\"border:none\">\n";
 
-                html += "<table class=\"table\" >\n";
+                html += "<table class=\"table table-bordered\" >\n";
                 html += "<tr> \n";
-                html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n";
+                html += "<td class=\"h6 col-lg-6 text-center\" style=\"border:none\">Job Status</td>\n";
-                html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n";
+                // html += "<td class=\"h5 col-lg-6 text-center\" style=\"border:none\">Hosts vs License Agreement</td>\n";
                 html += "</tr>\n";
                 html += "<tr>\n";
                 html += "<td class=\"job-status-graph\" style=\"border:none\"><svg></svg></td>\n";
-                html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n";
+                // html += "<td class=\"host-count-graph\" style=\"border:none\"><svg></svg></td>\n";
                 html += "</tr>\n";
                 html += "</table>\n";
                 html += "</div>\n";
@@ -148,6 +148,11 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
                                             "font-weight":400,
                                             "src": "url(/static/fonts/OpenSans-Regular.ttf)"
                                         });
+
+                                        d3.selectAll(".nv-line").on("click", function () {
+                                            alert("clicked");
+                                        });
+
                                     nv.utils.windowResize(chart.update);
                                     return chart;
                                 },
@@ -160,7 +165,7 @@ angular.module('DashboardChartsWidget', ['RestServices', 'Utilities'])
                 element.html(html);
                 $compile(element)(scope);
                 makeJobStatusGraph();
-                makeHostCountGraph();
+               // makeHostCountGraph();
                 scope.$emit('WidgetLoaded');
 
             };

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

@@ -8,7 +8,7 @@
  */
 
 #sync-failure {
-	color:red;  
+	color:red;
 }
 
 .job-status-graph, .host-count-graph{
@@ -27,4 +27,25 @@
   stroke: steelblue;
   stroke-width: 1.5px;
 }
+.jobs-list-container {
+        border: 1px solid @grey;
+        border-radius: 4px;
+        padding: 5px;
+    }
 
+.carousel-control.left, .carousel-control.right {
+    background-image: none
+}
+
+    .custon-carousel{
+        width:150px;
+      height:200px;
+      min-width:150px;
+      min-height:100px;
+      max-width:200px;
+      max-height:100px;
+      overflow:hidden;
+      display:block;
+      border:1px solid black;
+      background-color: #A9A9A9;
+    }

awx/ui/static/partials/home.html

@@ -1,6 +1,6 @@
 
 <div class="tab-pane" id="home">
-   <div ng-cloak id="htmlTemplate">
+   <div ng-cloak id="htmlTemplate" style="padding:20px">
       <!--<div id="refresh-row" class="row">
          <div class="col-lg-12">
             <div id="home-list-actions" class="list-actions pull-right"></div>
@@ -11,10 +11,11 @@
          <div id="container1" class="col-lg-12"></div>
       </div>
       <div class="row">
-         <div id="container2" class="col-lg-12"></div>
+         <div id="container2" class="col-lg-6"></div>
+         <div id="container3" class="col-lg-6"></div>
       </div>
       <div class="row">
-         <div id="container3" class="col-lg-12"></div>
+         <div id="container4" class="col-lg-6 "></div>
       </div>
    </div>
 </div>

awx/ui/templates/ui/index.html

@@ -163,7 +163,8 @@
   <script src="{{ STATIC_URL }}js/helpers/JobTemplates.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/DashboardCharts.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>
   <script src="{{ STATIC_URL }}js/widgets/Stream.js"></script>
   <script src="{{ STATIC_URL }}js/help/InventoryGroups.js"></script>