Latest dashboard changes.

awx/ui/static/js/app.js

@@ -73,6 +73,7 @@ angular.module('ansible', [
     'JobStatusWidget',
     'InventorySyncStatusWidget',
     'SCMSyncStatusWidget',
+    'ObjectCountWidget',
     'JobsHelper',
     'InventoryStatusDefinition'
      ])

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

@@ -10,12 +10,13 @@
 
 'use strict';
 
-function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, InventorySyncStatus, SCMSyncStatus, ClearScope)
+function Home ($routeParams, $scope, $rootScope, $location, Wait, ObjectCount, JobStatus, InventorySyncStatus, SCMSyncStatus, 
+    ClearScope)
 {
     ClearScope('home');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                          //scope.
 
-    var waitCount = 3;
+    var waitCount = 4;
     var loadedCount = 0;
     
     if (!$routeParams['login']) {
@@ -25,7 +26,8 @@ function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, Inv
     
     JobStatus({ target: 'container1' });
     InventorySyncStatus({ target: 'container2' });
-    SCMSyncStatus({ target: 'container3' });
+    SCMSyncStatus({ target: 'container4' });
+    ObjectCount({ target: 'container3' });
      
     $rootScope.$on('WidgetLoaded', function() {
         // Once all the widgets report back 'loaded', turn off Wait widget
@@ -36,5 +38,5 @@ function Home ($routeParams, $scope, $rootScope, $location, Wait, JobStatus, Inv
         });
 }
 
-Home.$inject=[ '$routeParams', '$scope', '$rootScope', '$location', 'Wait', 'JobStatus', 'InventorySyncStatus',
+Home.$inject=[ '$routeParams', '$scope', '$rootScope', '$location', 'Wait', 'ObjectCount', 'JobStatus', 'InventorySyncStatus',
     'SCMSyncStatus', 'ClearScope'];

awx/ui/static/js/widgets/ObjectCount.js

@@ -15,20 +15,25 @@ angular.module('ObjectCountWidget', ['RestServices', 'Utilities'])
         
         var current_version; 
         var scope = $rootScope.$new();
-        var counts = [];
+        var counts = {};
         var target = params.target;
+        var expected;
         
-        scope.$on('countReady', function(e, obj, count) {
+        if (scope.removeCountReady) {
+           scope.removeCountReady();
+        }
+        scope.removeCountReady = scope.$on('countReady', function(e, obj, count) {
             var keys=[];
-            var hash = {};
+            var html, itm;
-            if (counts.length == 10) {
+            var cnt = 0;
+            for (itm in counts) {
+                cnt++;
+            }
+            if (cnt == expected) {
                // sort the list of objs
-               for (var i=0; i < counts.length; i++) {
+               for (var key in counts) {
-                   for (var key in counts[i]) {
+                   if (key !== 'hosts' && key !== 'groups') {
-                       if (key !== 'hosts' && key !== 'groups') {
+                      keys.push(key);
-                          keys.push(key);
-                       }
-                       hash[key] = counts[i][key];
                    }
                }
                // sort the keys, forcing groups and hosts to appear directlry after inventory
@@ -45,43 +50,43 @@ angular.module('ObjectCountWidget', ['RestServices', 'Utilities'])
                    }
                }
                keys = new_keys; 
-
+               html = "<div class=\"panel panel-default\">\n";
-               var html = "<div class=\"panel panel-primary\">\n";
                html += "<div class=\"panel-heading\">System Summary</div>\n";
                html += "<div class=\"panel-body\">\n";
-               html += "<ul class=\"list-group grey-txt\">\n";
+               html += "<table class=\"table table-condensed table-hover\">\n";
+               html += "<thead>\n";
+               html += "<tr>\n";
+               html += "<th class=\"col-md-5 col-lg-4\"></th>\n";
+               html += "<th class=\"col-md-1 col-lg-1 text-right\">Total</th>\n";
+               html += "</tr>\n";
+               html += "</thead>\n";
+               html += "<tbody>\n";
                for (var i=0; i < keys.length; i++) {
-                   html += "<li class=\"list-group-item";
+                   html += "<tr><td ";
-                   html += (keys[i] == 'hosts' || keys[i] == 'groups') ? ' pad-left-md' : ''; 
+                   html += (keys[i] == 'hosts' || keys[i] == 'groups') ? "class=\"pad-left-md\"" : ''; 
-                   html += "\">\n";
+                   html += ">\n";
-                   html += "<span class=\"badge success-badge\">" + hash[keys[i]] + "</span>\n";
+                   html += "<a href=\"/#/";
-                   
+                   html += (keys[i] == 'inventory') ? 'inventories' : keys[i];
-                   if (keys[i] !== 'hosts' && keys[i] !== 'groups') {
+                   html += "\">";
-                      html += "<a href=\"/#/";
-                      html += (keys[i] == 'inventory') ? 'inventories' : keys[i];
-                      html += "\">";
-                   }
-                   
                    if (keys[i] == 'inventory') {
                       html += 'Inventories';
                    }
-                   else if (keys[i] == 'job_templates') {
-                      html += 'Job Templates';
-                   }
                    else {
-                      html += keys[i].substring(0,1).toUpperCase() + keys[i].substring(1);
+                      var txt = keys[i].replace(/\_/g,' ');
+                      html += txt.substring(0,1).toUpperCase() + txt.substring(1);
                    }
-                   html += (keys[i] !== 'hosts' && keys[i] !== 'groups') ? "</a>" : "";
+                   html += "</a></td>\n"
-                   html += "</li>\n";
+                   html += "<td class=\"text-right\"><a href=\"/#/";
+                   html += (keys[i] == 'inventory') ? 'inventories' : keys[i];
+                   html += "\">";
+                   html += counts[keys[i]] + "</a></td></tr>\n";
                }
-               html += "</ul>\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);
-               //scope = element.scope();   // Set scope specific to the element we're compiling, avoids circular reference
-                                          // From here use 'scope' to manipulate the form, as the form is not in '$scope'
                $compile(element)(scope);
                $rootScope.$emit('WidgetLoaded');
             }
@@ -93,9 +98,7 @@ angular.module('ObjectCountWidget', ['RestServices', 'Utilities'])
             Rest.setUrl(url);
             Rest.get()
                 .success( function(data, status, headers, config) {
-                    var count = {};
+                    counts[obj] = data.count;
-                    count[obj] = data.count;
-                    counts.push(count);
                     scope.$emit('countReady');
                     })
                 .error( function(data, status, headers, config) {
@@ -113,11 +116,18 @@ angular.module('ObjectCountWidget', ['RestServices', 'Utilities'])
                 Rest.setUrl(current_version);
                 Rest.get()
                     .success( function(data, status, headers, config) {
-                        for (obj in data) {
+                        for (var obj in data) {
-                            if (obj !== 'me' && obj !== 'authtoken' && obj !== 'config') {
+                            if (obj == 'me' || obj == 'authtoken' || obj == 'config' || obj == 'inventory_sources') {
-                               getCount(obj);
+                               delete data[obj]; 
                             }
                         }
+                        expected = 0;
+                        for (var obj in data) {
+                            expected++;
+                        }
+                        for (obj in data) {
+                            getCount(obj);
+                        }
                         })
                     .error( function(data, status, headers, config) {
                         ProcessErrors(scope, data, status, null,

awx/ui/static/less/ansible-ui.less

@@ -231,13 +231,11 @@ dd {
   text-align: justify;
 }
 
-
-
 .navbar-collapse {
   padding-right: 0;  
 }
 
-.nav >li >a:last-child {
+.main-menu .nav >li >a:last-child {
   padding-right: 0;
   padding-left: 20px;
 }
@@ -1201,6 +1199,10 @@ tr td button i {
   }
 }
 
+#home #refresh-row {
+  margin-bottom: 5px;
+}
+
 
 /* Large desktop */
 

awx/ui/static/partials/home.html

@@ -1,4 +1,11 @@
 <div class="tab-pane" id="home">
+   <div id="refresh-row" class="row">
+      <div class="col-lg-12">
+        <div class="refresh-grp pull-right">
+          <button type="button" class="btn btn-primary btn-xs refresh-btn" ng-click="refreshCnt = 10; refresh()" id="refresh_btn" aw-tool-tip="Refresh page" data-placement="top" data-original-title="" title=""><i class="icon-refresh"></i></button>
+        </div>
+      </div>
+   </div>
    <div class="row">
       <div id="container1" class="col-lg-6"></div>
       <div id="container2" class="col-lg-6"></div>

awx/ui/templates/ui/index.html

@@ -111,6 +111,7 @@
   <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 }}js/widgets/ObjectCount.js"></script>
   <script src="{{ STATIC_URL }}lib/less/less-1.4.1.min.js"></script>
 
   {% endif %}