AC-503 Latest dashboard progress.

awx/ui/static/js/app.js

@@ -71,6 +71,8 @@ angular.module('ansible', [
     'License',
     'HostGroupsFormDefinition',
     'JobStatusWidget',
+    'InventorySyncStatusWidget',
+    'SCMSyncStatusWidget',
     'JobsHelper',
     'InventoryStatusDefinition'
      ])

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

@@ -10,20 +10,22 @@
 
 'use strict';
 
-function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, ClearScope)
+function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, InventorySyncStatus, SCMSyncStatus, ClearScope)
 {
     ClearScope('home');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                          //scope.
 
-    var waitCount = 1;
+    var waitCount = 3;
     var loadedCount = 0;
     
     if (!$routeParams['login']) {
         // If we're not logging in, start the Wait widget. Otherwise, it's already running.
         Wait('start');
     }
-
+    
     JobStatus({ target: 'container1' });
+    InventorySyncStatus({ target: 'container2' });
+    SCMSyncStatus({ target: 'container3' });
      
     $rootScope.$on('WidgetLoaded', function() {
         // Once all the widgets report back 'loaded', turn off Wait widget
@@ -34,4 +36,5 @@ function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, Cle
         });
 }
 
-Home.$inject=[ '$routeParams', '$scope', '$rootScope', '$location', 'Wait', 'JobStatus', 'ClearScope'];
+Home.$inject=[ '$routeParams', '$scope', '$rootScope', '$location', 'Wait', 'JobStatus', 'InventorySyncStatus',
+    'SCMSyncStatus', 'ClearScope'];

awx/ui/static/js/widgets/InventorySyncStatus.js

@@ -0,0 +1,141 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ * InventorySyncStatus.js 
+ *
+ * Dashboard widget showing object counts and license availability.
+ *
+ */
+
+angular.module('InventorySyncStatusWidget', ['RestServices', 'Utilities'])
+    .factory('InventorySyncStatus', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait',
+    function($rootScope, $compile, Rest, GetBasePath, ProcessErrors, Wait) {
+    return function(params) {
+        
+        var scope = $rootScope.$new();
+        var inventoryCount, inventoryFails, groupCount, groupFails, hostCount;
+        var hostFails = 0; 
+        var counts = 0;
+        var expectedCounts = 4;
+        var target = params.target;        
+        
+        if (scope.removeCountReceived) {
+           scope.removeCountReceived();
+        }
+        scope.removeCountReceived = scope.$on('CountReceived', function() {
+
+            var rowcount = 0;
+            
+            function makeRow(label, count, fail) {
+                var html = "<tr>\n";
+                html += "<td><a href=\"/#/" + label.toLowerCase() + "\">"  + label + "</a></td>\n";
+                html += "<td class=\"failed-column text-right\">";
+                html += (fail > 0) ? "<a href=\"/blah/blah\">" + fail + "</a>" : "";
+                html += "</td>\n";
+                html += "<td class=\"text-right\">";
+                html += (count > 0) ? "<a href=\"/blah/blah\">" + count + "</a>" : "";
+                html += "</td></tr>\n";
+                return html; 
+                }
+
+            counts++;
+            if (counts == expectedCounts) {
+               // all the counts came back, now generate the HTML 
+               var html = "<div class=\"panel panel-default\">\n";
+               html += "<div class=\"panel-heading\">Inventory Sync Status</div>\n";
+               html += "<div class=\"panel-body\">\n";
+               html += "<table class=\"table table-condensed table-hover\">\n";
+               html += "<thead>\n";
+               html += "<tr>\n";
+               html += "<th class=\"col-md-4 col-lg-3\"></th>\n";
+               html += "<th class=\"col-md-2 col-lg-1 text-right\">Failed</th>\n";
+               html += "<th class=\"col-md-2 col-lg-1 text-right\">Total</th>\n";
+               html += "</tr>\n";
+               html += "</thead>\n";
+               html += "<tbody>\n";
+               
+               console.log('inventory count:' + inventoryCount);
+               console.log('group count:' + groupCount);
+               console.log('host count:' + hostCount);
+
+               if (inventoryCount > 0) {
+                  html += makeRow('Inventories', inventoryCount, inventoryFails);
+                  rowcount++;
+               }
+               if (groupCount > 0) {
+                  html += makeRow('Groups', groupCount, groupFails);
+                  rowcount++;
+               }
+               if (hostCount > 0) {
+                  html += makeRow('Hosts', hostCount, hostFails);
+                  rowcount++;
+               }
+
+               if (rowcount == 0) {
+                  html += "<tr><td colspan=\"3\">No inventories configured for external sync</td></tr>\n";
+               }
+
+               html += "</tbody>\n";
+               html += "</table>\n";
+               html += "</div>\n";
+               html += "</div>\n";
+               html += "</div>\n";
+               var element = angular.element(document.getElementById(target));
+               element.html(html);
+               $compile(element)(scope);
+               $rootScope.$emit('WidgetLoaded');
+            }
+            });
+
+        var url = GetBasePath('inventory') + '?has_inventory_sources=true&page=1';
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                inventoryCount=data.count;
+                scope.$emit('CountReceived');
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, null,
+                    { hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
+                });
+        
+        inventoryFails = 0;
+        
+        url = GetBasePath('groups') + '?has_inventory_sources=true&page=1';
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                groupCount=data.count;
+                scope.$emit('CountReceived');
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, null,
+                    { hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
+                });
+
+        url = GetBasePath('groups') + '?has_inventory_sources=true&inventory_source__status=failed&page=1';
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                groupFails=data.count;
+                scope.$emit('CountReceived');
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, null,
+                    { hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
+                });
+        
+        url = GetBasePath('hosts') + '?has_inventory_sources=true&page=1';
+        Rest.setUrl(url);
+        Rest.get()
+            .success( function(data, status, headers, config) {
+                hostCount=data.count;
+                scope.$emit('CountReceived');
+                })
+            .error( function(data, status, headers, config) {
+                ProcessErrors(scope, data, status, null,
+                    { hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
+                });
+
+        }
+        }]);

awx/ui/static/js/widgets/JobStatus.js

@@ -18,13 +18,24 @@ angular.module('JobStatusWidget', ['RestServices', 'Utilities'])
         var expectedCounts = 8;
         var target = params.target;        
 
-        scope.$on('CountReceived', function() {
+        if (scope.removeCountReceived) {
+           scope.removeCountReceived();
+        }
+        scope.removeCountReceived = scope.$on('CountReceived', function() {
+
+            var rowcount = 0;
 
             function makeRow(label, count, fail) {
-                return "<tr><td><a href=\"/#/" + label.toLowerCase() + "\">"  + label + 
+                var html = '';
-                   "</a></td><td class=\"failed-column text-right\"><a href=\"/blah/blah\">" + 
+                html += "<tr>\n";
-                   fail + "</a></td><td class=\"text-right\"><a href=\"/blah/blah\">" + 
+                html += "<td><a href=\"/#/" + label.toLowerCase() + "\">"  + label + "</a></td>\n";
-                   count + "</a></td></tr>";  
+                html += "<td class=\"failed-column text-right\">";
+                html += (fail > 0) ? "<a href=\"/blah/blah\">" + fail + "</a>" : ""; 
+                html += "</td>\n";
+                html += "<td class=\"text-right\">"
+                html += (count > 0) ? "<a href=\"/blah/blah\">" + count + "</a>" : "";
+                html += "</td></tr>\n";
+                return html; 
                 }
 
             counts++;
@@ -36,27 +47,45 @@ angular.module('JobStatusWidget', ['RestServices', 'Utilities'])
                html += "<table class=\"table table-condensed table-hover\">\n";
                html += "<thead>\n";
                html += "<tr>\n";
-               html += "<th></th>\n";
+               html += "<th class=\"col-md-4 col-lg-3\"></th>\n";
-               html += "<th class=\"text-right\">Failed</th>\n";
+               html += "<th class=\"col-md-2 col-lg-1 text-right\">Failed</th>\n";
-               html += "<th class=\"text-right\">Total</th>\n";
+               html += "<th class=\"col-md-2 col-lg-1 text-right\">Total</th>\n";
                html += "</tr>\n";
                html += "</thead>\n";
                html += "<tbody>\n";
-               html += makeRow('Jobs', jobCount, jobFails);
+
-               html += makeRow('Inventories', inventoryCount, inventoryFails);
+               if (jobCount > 0) {
-               html += makeRow('Groups', groupCount, groupFails);
+                  html += makeRow('Jobs', jobCount, jobFails);
-               html += makeRow('Hosts', hostCount, hostFails);
+                  rowcount++;
+               }
+               if (inventoryCount > 0) {
+                  html += makeRow('Inventories', inventoryCount, inventoryFails);
+                  rowcount++;
+               }
+               if (groupCount > 0) {
+                  html += makeRow('Groups', groupCount, groupFails);
+                  rowcount++;
+               }
+               if (hostCount > 0) {
+                  html += makeRow('Hosts', hostCount, hostFails);
+                  rowcount++;
+               }
+              
+               if (rowcount == 0) {
+                  html += "<tr><td colspan=\"3\">No job data found</td></tr>\n";
+               }
+
                html += "</tbody>\n";
                html += "</table>\n";
                html += "</div>\n";
                html += "</div>\n";
                html += "</div>\n";
-            }
 
-            var element = angular.element(document.getElementById(target));
+               var element = angular.element(document.getElementById(target));
-            element.html(html);
+               element.html(html);
-            $compile(element)(scope);
+               $compile(element)(scope);
-            $rootScope.$emit('WidgetLoaded');
+               $rootScope.$emit('WidgetLoaded');
+            }
             });
 
         var url = GetBasePath('jobs') + '?page=1';

awx/ui/static/js/widgets/SCMSyncStatus.js

@@ -0,0 +1,152 @@
+/*********************************************
+ *  Copyright (c) 2013 AnsibleWorks, Inc.
+ *
+ * SCMSyncStatus.js 
+ *
+ * Dashboard widget showing object counts and license availability.
+ *
+ */
+
+angular.module('SCMSyncStatusWidget', ['RestServices', 'Utilities'])
+    .factory('SCMSyncStatus', ['$rootScope', '$compile', 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', 'GetChoices',
+    function($rootScope, $compile, Rest, GetBasePath, ProcessErrors, Wait, GetChoices) {
+    return function(params) {
+        
+        var scope = $rootScope.$new();
+        var target = params.target;
+        var expected = 0;
+        var results = [];
+        var scm_choices;
+        
+        if (scope.removeCountReceived) {
+           scope.removeCountReceived();
+        }
+        scope.removeCountReceived = scope.$on('CountReceived', function(e, label, count, fail) {
+            
+            var rowcount = 0;
+
+            function makeRow(label, count, fail) {
+                var value; 
+                for (var i=0; i < scm_choices.length; i++) {
+                    if (scm_choices[i][1] == label) {
+                       value = scm_choices[i][0];
+                       break;
+                    }
+                }
+                var html = ''
+                html += "<tr><td><a href=\"/#/projects/?source_type=" + value + "\">"  + label + "</a></td>\n";
+                html += "<td class=\"failed-column text-right\">";
+                html += (fail > 0) ? "<a href=\"/blah/blah\">" + fail + "</a>" : "";
+                html += "</td>\n"; 
+                html += "<td class=\"text-right\">";
+                html += (count > 0) ? "<a href=\"/blah/blah\">" + count + "</a>" : "";
+                html += "</td>\n";
+                html += "</tr>\n";
+                return html; 
+                }
+            
+            results.push({ label: label, count: count, fail: fail });
+            
+            if (results.length == expected) {
+               // all the counts came back, now generate the HTML 
+               
+               var html = "<div class=\"panel panel-default\">\n";
+               html += "<div class=\"panel-heading\">Project SCM Status</div>\n";
+               html += "<div class=\"panel-body\">\n";
+               html += "<table class=\"table table-condensed table-hover\">\n";
+               html += "<thead>\n";
+               html += "<tr>\n";
+               html += "<th class=\"col-md-4 col-lg-3\"></th>\n";
+               html += "<th class=\"col-md-2 col-lg-1 text-right\">Failed</th>\n";
+               html += "<th class=\"col-md-2 col-lg-1 text-right\">Total</th>\n";
+               html += "</tr>\n";
+               html += "</thead>\n";
+               html += "<tbody>\n";
+
+               for (var i=0; i < results.length; i++) {
+                   if (results[i].count > 0) {
+                      html += makeRow(results[i].label, results[i].count, results[i].fail);
+                      rowcount++;
+                   }
+               }
+               if (rowcount == 0) {
+                  html += "<tr><td colspan=\"3\">No projects conigured for SCM sync</td></tr>\n";
+               }
+
+               html += "</tbody>\n";
+               html += "</table>\n";
+               html += "</div>\n";
+               html += "</div>\n";
+               html += "</div>\n";
+
+               var element = angular.element(document.getElementById(target));
+               element.html(html);
+               $compile(element)(scope);
+               $rootScope.$emit('WidgetLoaded');
+            }
+            });
+      
+
+        scope.removeCountProjects = scope.$on('CountProjects', function(e, choices) {
+            
+            scm_choices = choices; 
+
+            function getScmLabel(config) {
+                var url = config.url; 
+                var scm_type = url.match(/scm_type=.*\&/)[0].replace(/scm_type=/,'').replace(/\&/,'');
+                var label;
+                for (var i=0; i < choices.length; i++) {
+                   if (choices[i][0] == scm_type) {
+                      label = choices[i][1];
+                      break;
+                   }
+                }
+                return label;   
+                }
+            
+            // Remove ---- option from list of choices
+            for (var i=0; i < choices.length; i++) {
+                if (choices[i][1].match(/^---/)) {
+                   choices.splice(i,1);
+                   break;
+                }
+            }
+            // Remove Manual option from list of choices
+            for (var i=0; i < choices.length; i++) {
+                if (choices[i][1].match(/Manual/)) {
+                   choices.splice(i,1);
+                   break;
+                }
+            }
+            
+            expected = choices.length; 
+
+            for (var i=0; i < choices.length; i++) {
+                if (!choices[i][1].match(/^---/)) {
+                   var url = GetBasePath('projects') + '?scm_type=' + choices[i][0] + '&page=1';
+                   Rest.setUrl(url);
+                   Rest.get()
+                       .success( function(data, status, headers, config) {
+                           // figure out the scm_type we're looking at and its label
+                           var label = getScmLabel(config);
+                           var count = data.count; 
+                           var fail = 0;
+                           for (var i=0; i < data.results.length; i++) {
+                               if (data.results[i].status == 'failed') {
+                                  fail++;
+                               }
+                           }
+                           scope.$emit('CountReceived', label, count, fail);
+                           })
+                       .error( function(data, status, headers, config) {
+                           ProcessErrors(scope, data, status, null,
+                               { hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status });
+                           });
+                }
+            }
+            });
+
+        GetChoices({ scope: scope, url: GetBasePath('projects'), field: 'scm_type', emit: 'CountProjects'});
+
+        }
+        }]);

awx/ui/static/lib/ansible/Utilities.js

@@ -5,7 +5,7 @@
  *  Utility functions
  *
  */
-angular.module('Utilities',[])
+angular.module('Utilities',['RestServices'])
    
    .factory('ClearScope', function() {
    return function(id) {
@@ -314,6 +314,27 @@ angular.module('Utilities',[])
        }
        }])
 
+   .factory('GetChoices', [ 'Rest', 'ProcessErrors', function(Rest, ProcessErrors) {
+   return function(params) {
+       // Get dropdown options
+
+       var scope = params.scope;
+       var url = params.url; 
+       var field = params.field;
+       var emit_callback = params.emit;
+
+       Rest.setUrl(url);
+       Rest.options()
+           .success( function(data, status, headers, config) {
+               scope.$emit(emit_callback, data.actions['GET'][field].choices);
+               })
+           .error(  function(data, status, headers, config) {
+               ProcessErrors(scope, data, status, null,
+                    { hdr: 'Error!', msg: 'Failed to get ' + url + '. GET status: ' + status }); 
+               });
+       }
+       }])
+
    /* DeugForm(form_name)
     *
     * Use to log the $pristine and $invalid properties of each form element. Helpful when form

awx/ui/static/partials/home.html

@@ -1,10 +1,10 @@
 <div class="tab-pane" id="home">
    <div class="row">
       <div id="container1" class="col-lg-6"></div>
-      <div id="conatiner2" class="col-lg-6"></div>
+      <div id="container2" class="col-lg-6"></div>
    </div>
    <div class="row">
       <div id="container3" class="col-lg-6"></div>
-      <div id="conatiner4" class="col-lg-6"></div>
+      <div id="container4" class="col-lg-6"></div>
    </div>  
 </div>

awx/ui/templates/ui/index.html

@@ -109,7 +109,8 @@
   <script src="{{ STATIC_URL }}js/helpers/Users.js"></script>
   <script src="{{ STATIC_URL }}js/helpers/Jobs.js"></script>
   <script src="{{ STATIC_URL }}js/widgets/JobStatus.js"></script>
-  
+  <script src="{{ STATIC_URL }}js/widgets/InventorySyncStatus.js"></script>
+  <script src="{{ STATIC_URL }}js/widgets/SCMSyncStatus.js"></script>
   <script src="{{ STATIC_URL }}lib/less/less-1.4.1.min.js"></script>
 
   {% endif %}