Inventory refactoring: removed text labels from actions, added animation on sync status, fixed collapse and expand. Fixed expand and collapse on job events as well.

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

@@ -95,7 +95,7 @@ Home.$inject=['$scope', '$compile', '$routeParams', '$rootScope', '$location', '
 
 
 function HomeGroups ($location, $routeParams, HomeGroupList, GenerateList, ProcessErrors, LoadBreadCrumbs, ReturnToCaller, ClearScope, 
-    GetBasePath, SearchInit, PaginateInit, FormatDate, HostsStatusMsg, UpdateStatusMsg, ViewUpdateStatus, Stream) {
+    GetBasePath, SearchInit, PaginateInit, FormatDate, HostsStatusMsg, GetSyncStatusMsg, ViewUpdateStatus, Stream) {
 
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
@@ -129,7 +129,7 @@ function HomeGroups ($location, $routeParams, HomeGroupList, GenerateList, Proce
                 group_id: scope.home_groups[i].id
                 });
             
-            update_status = UpdateStatusMsg({ status: scope.home_groups[i].summary_fields.inventory_source.status });
+            update_status = GetSyncStatusMsg({ status: scope.home_groups[i].summary_fields.inventory_source.status });
 
             scope.home_groups[i].failed_hosts_tip = msg['tooltip']; 
             scope.home_groups[i].failed_hosts_link = msg['url'];
@@ -210,7 +210,7 @@ function HomeGroups ($location, $routeParams, HomeGroupList, GenerateList, Proce
     }
 
 HomeGroups.$inject = [ '$location', '$routeParams', 'HomeGroupList', 'GenerateList', 'ProcessErrors', 'LoadBreadCrumbs', 'ReturnToCaller', 
-    'ClearScope', 'GetBasePath', 'SearchInit', 'PaginateInit', 'FormatDate', 'HostsStatusMsg', 'UpdateStatusMsg', 'ViewUpdateStatus', 'Stream'
+    'ClearScope', 'GetBasePath', 'SearchInit', 'PaginateInit', 'FormatDate', 'HostsStatusMsg', 'GetSyncStatusMsg', 'ViewUpdateStatus', 'Stream'
     ];
 
 

awx/ui/static/js/controllers/Inventories.js

@@ -317,7 +317,8 @@ InventoriesAdd.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$lo
 
 
 function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateList, ClearScope, InventoryGroups, InventoryHosts, BuildTree, Wait, 
-                          UpdateStatusMsg, InjectHosts, HostsReload, GroupsAdd, GroupsEdit, Breadcrumbs, LoadBreadCrumbs) 
+                          GetSyncStatusMsg, InjectHosts, HostsReload, GroupsAdd, GroupsEdit, Breadcrumbs, LoadBreadCrumbs, Empty, Rest,
+                          ProcessErrors, InventoryUpdate, Alert, ToggleChildren) 
 {
     ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                  //scope.
@@ -335,12 +336,15 @@ function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateLis
     }
     $scope.removeSearchTreeReady = $scope.$on('searchTreeReady', function(e, inventory_name, groups) {
         // After the tree data loads, generate the groups list
+        // Add breadcrumbs
         var e = angular.element(document.getElementById('breadcrumbs'));
         e.html(Breadcrumbs({ list: list, mode: 'edit' }));
         $compile(e)($scope);
+        // Add groups
         generator.inject(list, { mode: 'edit', id: 'groups-container', breadCrumbs: false, searchSize: 'col-lg-5 col-md-5 col-sm-5' });
         $scope.groups = groups;
         $scope.inventory_name = inventory_name;
+        // Add hosts
         InjectHosts({ scope: $scope, inventory_id: $scope.inventory_id }); 
         Wait('stop');
         });
@@ -361,18 +365,62 @@ function InventoriesEdit ($scope, $location, $routeParams, $compile, GenerateLis
         }
 
     $scope.createGroup = function() {
-        GroupsAdd({ scope: $scope, inventory_id: $scope.inventory_id, group_id: null });
+        GroupsAdd({ scope: $scope, inventory_id: $scope.inventory_id, group_id: $scope.selected_group_id  });
         }
         
     $scope.editGroup = function(group_id) {
         GroupsEdit({ scope: $scope, inventory_id: $scope.inventory_id, group_id: group_id });
         }
 
+    // Launch inventory sync
+    $scope.updateGroup = function(id) {
+        for (var i=0; i < $scope.groups.length; i++) {
+            if ($scope.groups[i].id == id) {
+                if (Empty($scope.groups[i].source)) {
+                    // if no source, do nothing. 
+                }
+                else if ($scope.groups[i].status == 'updating') {
+                    Alert('Update in Progress', 'The inventory update process is currently running for group <em>' +
+                        $scope.groups[i].name + '</em>. Use the Refresh button to monitor the status.', 'alert-info'); 
+                }
+                else {
+                    Wait('start');
+                    Rest.setUrl($scope.groups[i].related.inventory_source);
+                    Rest.get()
+                        .success( function(data, status, headers, config) {
+                            InventoryUpdate({
+                                scope: $scope, 
+                                url: data.related.update,
+                                group_name: data.summary_fields.group.name, 
+                                group_source: data.source
+                                });
+                            })
+                        .error( function(data, status, headers, config) {
+                            Wait('stop');
+                            ProcessErrors(scope, data, status, form,
+                                { hdr: 'Error!', msg: 'Failed to retrieve inventory source: ' + $scope.groups[i].related.inventory_source + 
+                                ' POST returned status: ' + status });
+                            });
+                }
+                break;
+            }
+        }
+        }
+    
+    // Expand/collapse nodes
+    $scope.toggle = function(id) {
+        ToggleChildren({
+            scope: $scope, 
+            list: list,
+            id: id,
+            });
+        }
+
     BuildTree({ scope: $scope, inventory_id: $scope.inventory_id });
 }
 
 InventoriesEdit.$inject = [ '$scope', '$location', '$routeParams', '$compile', 'GenerateList', 'ClearScope', 'InventoryGroups', 'InventoryHosts', 
-                            'BuildTree', 'Wait', 'UpdateStatusMsg', 'InjectHosts', 'HostsReload', 'GroupsAdd', 'GroupsEdit', 'Breadcrumbs',
+                            'BuildTree', 'Wait', 'GetSyncStatusMsg', 'InjectHosts', 'HostsReload', 'GroupsAdd', 'GroupsEdit', 'Breadcrumbs',
-                            'LoadBreadCrumbs'
+                            'LoadBreadCrumbs', 'Empty', 'Rest', 'ProcessErrors', 'InventoryUpdate', 'Alert', 'ToggleChildren'
                             ]; 
   

awx/ui/static/js/controllers/JobEvents.js

@@ -132,7 +132,7 @@ function JobEventsList ($scope, $rootScope, $location, $log, $routeParams, Rest,
             set[i].event_display = set[i].event_display.replace(/^\u00a0*/g,'');
             if (set[i].event_level < 3 ) {
                set[i]['ngclick'] = "toggleChildren(" + set[i].id + ", \"" + set[i].related.children + "\")";
-               set[i]['ngicon'] = 'icon-collapse-alt';
+               set[i]['ngicon'] = 'fa fa-minus-square-o';
                set[i]['class'] = 'parentNode';
             }
             else {

awx/ui/static/js/helpers/Children.js

@@ -17,11 +17,10 @@ angular.module('ChildrenHelper', ['RestServices', 'Utilities'])
         var scope = params.scope;
         var list = params.list;
         var id = params.id; 
-        var children = params.children; 
         var set = scope[list.name];   // set is now a pointer to scope[list.name]
         
         function expand(node) {
-           set[node]['ngicon'] = 'icon-collapse-alt'; 
+           set[node]['ngicon'] = 'fa fa-minus-square-o'; 
            for (var i = node + 1; i < set.length; i++) {
                if (set[i].parent == set[node].id) {
                   set[i]['show'] = true;
@@ -33,12 +32,12 @@ angular.module('ChildrenHelper', ['RestServices', 'Utilities'])
         }
 
         function collapse(node) {
-           set[node]['ngicon'] = 'icon-expand-alt';
+           set[node]['ngicon'] = 'fa fa-plus-square-o';
            for (var i = node + 1; i < set.length; i++) {
                if (set[i].parent == set[node].id) {
                   set[i]['show'] = false;
                   if (set[i]['related']['children']) {
-                     collapse(i);
+                      collapse(i);
                   }
                }
            }
@@ -54,7 +53,7 @@ angular.module('ChildrenHelper', ['RestServices', 'Utilities'])
             }
         }
         // Expand or collapse children based on clicked element's icon
-        if (set[clicked]['ngicon'] == 'icon-expand-alt') {
+        if (set[clicked]['ngicon'] == 'fa fa-plus-square-o') {
            // Expand: lookup and display children
            expand(clicked);
         }

awx/ui/static/js/helpers/Groups.js

@@ -130,43 +130,45 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         }
         }])
     
-    .factory('HostsStatusMsg', [ function() {
+    .factory('GetHostsStatusMsg', [ function() {
     return function(params) {  
+        
         var active_failures = params.active_failures; 
         var total_hosts = params.total_hosts;
         var inventory_id = params.inventory_id;
         var group_id = params.group_id;
-        var tips, link, html_class;
+
+        var tip, link, html_class;
 
         // Return values for use on host status indicator
         
         if (active_failures > 0) {
-           tip = "Contains " + active_failures +
+            tip = "Contains " + active_failures +
-               [ (active_failures == 1) ? ' host' : ' hosts' ] + ' with failed jobs. Click to view the offending ' +
+                [ (active_failures == 1) ? ' host' : ' hosts' ] + ' with failed jobs. Click to view the offending ' +
-               [ (active_failures == 1) ? ' host' : ' hosts' ] + '.';
+                [ (active_failures == 1) ? ' host' : ' hosts' ] + '.';
-           link = '/#/inventories/' + inventory_id + '/hosts?group=' + group_id + '&has_active_failures=true';
+            link = '/#/inventories/' + inventory_id + '/hosts?group=' + group_id + '&has_active_failures=true';
-           html_class = 'true';
+            html_class = 'true';
         }
         else {
            if (total_hosts == 0) {
-              // no hosts
+               // no hosts
-              tip = "There are no hosts in this group. It's a sad empty shell. Click to view the hosts page and add a host.";
+               tip = "There are no hosts in this group. It's a sad empty shell. Click to view the hosts page and add a host.";
-              link = '/#/inventories/' + inventory_id + '/hosts/?group=' + group_id;
+               link = '/#/inventories/' + inventory_id + '/hosts/?group=' + group_id;
-              html_class = 'na';
+               html_class = 'na';
            }
            else if (total_hosts == 1) {
-              // on host with 0 failures
+               // on host with 0 failures
-              tip = "The 1 host in this group is happy! It does not have a job failure. " + 
+               tip = "The 1 host in this group is happy! It does not have a job failure. " + 
-                  " Click to view the host.";
+                   " Click to view the host.";
-              link = '/#/inventories/' + inventory_id + '/hosts/?group=' + group_id;
+               link = '/#/inventories/' + inventory_id + '/hosts/?group=' + group_id;
-              html_class = 'false';
+               html_class = 'false';
            }
            else {
-              // many hosts with 0 failures
+               // many hosts with 0 failures
-              tip = "All " + total_hosts + " hosts in this group are happy! None of them have " + 
+               tip = "All " + total_hosts + " hosts in this group are happy! None of them have " + 
-                  " a recent job failure. Click to view the hosts.";
+                   " a recent job failure. Click to view the hosts.";
-              links = '/#/inventories/' + inventory_id + '/hosts/?group=' + group_id;
+               links = '/#/inventories/' + inventory_id + '/hosts/?group=' + group_id;
-              html_class = 'false';
+               html_class = 'false';
            }
         }
 
@@ -175,39 +177,50 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
         }
         }])
 
-    .factory('UpdateStatusMsg', [ function() {
+    .factory('GetSyncStatusMsg', [ function() {
     return function(params) {  
         
-        var status = params.status; 
+        var status = params.status;
+
+        var launch_class = '';
+        var launch_tip = 'Start sync process';        
         var stat, stat_class, status_tip;
         stat = status;
-        stat_class = stat;
+        stat_class = 'icon-cloud-' + stat;
-        
+      
         switch (status) {
             case 'never updated':
                 stat = 'never';
-                stat_class = 'never';
+                stat_class = 'icon-cloud-na disabled';
-                status_tip = 'Inventory update has not been performed. Click the Update button to start it now.';
+                status_tip = 'Sync not performed. Click <i class="fa fa-rocket"></i> to start it now.';
                 break;
             case 'none':
             case '':
+                launch_class = 'btn-disabled',
                 stat = 'n/a';
-                stat_class = 'na';
+                stat_class = 'icon-cloud-na disabled';
-                status_tip = 'Not configured for inventory update.';
+                status_tip = 'Group source not configured. Click <i class="fa fa-pencil"></i> to update.';
+                launch_tip = status_tip;
                 break;
             case 'failed':
-                status_tip = 'Inventory update completed with errors. Click to view process output.';
+                status_tip = 'Failed with errors. Click to view log.';
                 break;
             case 'successful':
-                status_tip = 'Inventory update completed with no errors. Click to view process output.';
+                status_tip = 'Success! Click to view log.';
                 break; 
             case 'updating':
-                status_tip = 'Inventory update process running now.';
+                status_tip = 'Running';
                 break;
             }
 
-        return { 'class': stat_class, tooltip: status_tip, status: stat }
+        return { 
-        
+            'class': stat_class, 
+            tooltip: status_tip,
+            status: stat,
+            'launch_class': launch_class, 
+            'launch_tip': launch_tip
+            }
+
         }
         }])
 
@@ -317,10 +330,10 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
 
     .factory('InventoryStatus', [ '$rootScope', '$routeParams', 'Rest', 'Alert', 'ProcessErrors', 'GetBasePath', 'FormatDate', 'InventorySummary',
         'GenerateList', 'ClearScope', 'SearchInit', 'PaginateInit', 'Refresh', 'InventoryUpdate', 'GroupsEdit', 'HelpDialog',
-        'InventorySummaryHelp', 'ClickNode', 'HostsStatusMsg', 'UpdateStatusMsg', 'ViewUpdateStatus', 'Wait',
+        'InventorySummaryHelp', 'ClickNode', 'GetHostsStatusMsg', 'GetSyncStatusMsg', 'ViewUpdateStatus', 'Wait',
     function($rootScope, $routeParams, Rest, Alert, ProcessErrors, GetBasePath, FormatDate, InventorySummary, GenerateList, ClearScope, 
         SearchInit, PaginateInit, Refresh, InventoryUpdate, GroupsEdit, HelpDialog, InventorySummaryHelp, ClickNode,
-        HostsStatusMsg, UpdateStatusMsg, ViewUpdateStatus, Wait) {
+        GetHostsStatusMsg, GetSyncStatusMsg, ViewUpdateStatus, Wait) {
     return function(params) {
         //Build a summary of a given inventory
         
@@ -345,14 +358,14 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', '
                 // Set values for Failed Hosts column
                 scope.groups[i].failed_hosts = scope.groups[i].hosts_with_active_failures + ' / ' + scope.groups[i].total_hosts;
                 
-                msg = HostsStatusMsg({
+                msg = GetHostsStatusMsg({
                     active_failures: scope.groups[i].hosts_with_active_failures,
                     total_hosts: scope.groups[i].total_hosts,
                     inventory_id: scope['inventory_id'],
                     group_id: scope['groups'][i]['id']
                     });
                 
-                update_status = UpdateStatusMsg({ status: scope.groups[i].summary_fields.inventory_source.status });
+                update_status = GetSyncStatusMsg({ status: scope.groups[i].summary_fields.inventory_source.status });
 
                 scope.groups[i].failed_hosts_tip = msg['tooltip']; 
                 scope.groups[i].failed_hosts_link = msg['url'];

awx/ui/static/js/helpers/Hosts.js

@@ -189,7 +189,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
         }])
 
 
-    .factory('HostsAdd', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostForm', 'GenerateForm', 
+    .factory('HostsCreate', ['$rootScope', '$location', '$log', '$routeParams', 'Rest', 'Alert', 'HostForm', 'GenerateForm', 
         'Prompt', 'ProcessErrors', 'GetBasePath', 'HostsReload', 'ParseTypeChange', 'Wait',
     function($rootScope, $location, $log, $routeParams, Rest, Alert, HostForm, GenerateForm, Prompt, ProcessErrors,
         GetBasePath, HostsReload, ParseTypeChange, Wait) {

awx/ui/static/js/helpers/JobSubmission.js

@@ -412,7 +412,6 @@ angular.module('JobSubmissionHelper', [ 'RestServices', 'Utilities', 'Credential
         var scope = params.scope; 
         var inventory_id = params.inventory_id;
         var url = params.url;
-        var group_id = params.group_id; 
         var group_name = params.group_name;
         var group_source = params.group_source; 
 

awx/ui/static/js/lists/InventoryGroups.js

@@ -18,6 +18,7 @@ angular.module('InventoryGroupsDefinition', [])
         index: false,
         hover: true,
         hasChildren: true,
+        filterBy: '\{ show: true \}',
         'class': 'table-condensed',
         
         fields: {
@@ -26,40 +27,8 @@ angular.module('InventoryGroupsDefinition', [])
                 key: true,
                 ngClick: "\{\{ 'showHosts(' + group.id + ',' + group.group_id + ')' \}\}",
                 ngClass: "group.selected_class",
-                hasChildren: true
+                hasChildren: true,
-                },
+                columnClass: 'col-lg-9'
-            status: {
-                label: 'Sync Status',
-                ngClick: "viewUpdateStatus(\{\{ group.id \}\})",
-                searchType: 'select',
-                badgeIcon: "\{\{ 'fa icon-cloud-' + group.status_badge_class \}\}",
-                badgeToolTip: "\{\{ group.status_badge_tooltip \}\}",
-                awToolTip: "\{\{ group.status_badge_tooltip \}\}",
-                dataPlacement: 'top',
-                badgeTipPlacement: 'top',
-                badgePlacement: 'left',
-                searchOptions: [
-                    { name: "failed", value: "failed" },
-                    { name: "never", value: "never updated" },
-                    { name: "n/a", value: "none" },
-                    { name: "successful", value: "successful" },
-                    { name: "updating", value: "updating" }],
-                sourceModel: 'inventory_source',
-                sourceField: 'status'
-                },
-            failed_hosts: {
-                label: 'Failed Hosts',
-                ngHref: "\{\{ group.failed_hosts_link \}\}",
-                badgeIcon: "\{\{ 'fa icon-failures-' + group.failed_hosts_class \}\}",
-                badgeNgHref: "\{\{ group.failed_hosts_link \}\}",
-                badgePlacement: 'left',
-                badgeToolTip: "\{\{ group.failed_hosts_tip \}\}",
-                badgeTipPlacement: 'top',
-                awToolTip: "\{\{ group.failed_hosts_tip \}\}",
-                dataPlacement: "top",
-                searchable: false,
-                excludeModal: true,
-                sortField: "hosts_with_active_failures"
                 },
             source: {
                 label: 'Source',
@@ -99,6 +68,9 @@ angular.module('InventoryGroupsDefinition', [])
             },
 
         actions: {
+            
+            columnClass: 'col-lg-3',
+            
             create: {
                 mode: 'all',
                 ngClick: "createGroup()",
@@ -135,29 +107,46 @@ angular.module('InventoryGroupsDefinition', [])
             },
 
         fieldActions: {
+            sync_status: {
+                mode: 'all',
+                ngClick: "viewUpdateStatus(\{\{ group.id \}\})",
+                awToolTip: "\{\{ group.status_tooltip \}\}",
+                ngClass: "group.status_class",
+                dataPlacement: "top"
+                },
+            failed_hosts: {
+                mode: 'all',
+                awToolTip: "\{\{ group.hosts_status_tip \}\}",
+                dataPlacement: "top",
+                ngClick: "viewFailedHosts(\{\{ group.id \}\})",
+                iconClass: "\{\{ 'fa icon-failures-' + group.hosts_status_class \}\}"
+                },
             group_update: {
-                label: 'Sync',
+                //label: 'Sync',
-                ngClick: 'updateGroup(\{\{ group.group_id \}\})',
+                ngClick: 'updateGroup(\{\{ group.id \}\})',
-                awToolTip: "\{\{ group.update_tooltip \}\}",
+                awToolTip: "\{\{ group.launch_tooltip \}\}",
-                ngClass: "group.update_class",
+                ngClass: "group.launch_class",
-                awToolTip: "Start inventory sync"
+                dataPlacement: "top"
                 },
             cancel: {
-                label: 'Cancel',
+                //label: 'Cancel',
-                ngClick: "cancelUpdate(\{\{ group.group_id \}\}, '\{\{ group.name \}\}')",
+                ngClick: "cancelUpdate(\{\{ group.id \}\}, '\{\{ group.name \}\}')",
-                awToolTip: "\{\{ group.cancel_tooltip \}\}",
+                awToolTip: "Cancel sync process",
                 ngClass: "group.cancel_class",
-                ngShow: "group.status == 'running' || group.status == 'pending'"
+                ngShow: "group.status == 'running' || group.status == 'pending'",
+                dataPlacement: "top"
                 },
             edit: {
-                label: 'Edit',
+                //label: 'Edit',
                 ngClick: "editGroup(\{\{ group.group_id \}\})",
-                awToolTip: 'Edit group'
+                awToolTip: 'Edit group',
+                dataPlacement: "top"
                 },
             "delete": {
-                label: 'Delete',
+                //label: 'Delete',
                 ngClick: "deleteGroup(\{\{ group.group_id \}\},'\{\{ group.name \}\}')",
-                awToolTip: 'Delete group'
+                awToolTip: 'Delete group',
+                dataPlacement: "top"
                 }
             }
     });

awx/ui/static/js/lists/InventoryHosts.js

@@ -102,9 +102,9 @@ angular.module('InventoryHostsDefinition', [])
         actions: {
             create: {
                 mode: 'all',
-                ngClick: "createGroup()",
+                ngClick: "createHost()",
-                ngHide: "groupCreateHide", 
+                ngHide: "hostCreateHide", 
-                ngDisabled: 'grpBtnDisabled',
+                ngDisabled: 'BtnDisabled',
                 awToolTip: "Create a new host"
                 },
             stream: {

awx/ui/static/js/lists/JobEvents.js

@@ -70,7 +70,8 @@ angular.module('JobEventsListDefinition', [])
                 nosort: true,
                 searchable: false,
                 ngClass: '\{\{ jobevent.class \}\}',
-                appendHTML: 'jobevent.event_detail'
+                appendHTML: 'jobevent.event_detail',
+                'columnClass': 'col-lg-4'
                 },
             host: {
                 label: 'Host',
@@ -80,7 +81,7 @@ angular.module('JobEventsListDefinition', [])
                 nosort: true,
                 searchOnly: false,
                 id: 'job-event-host-header',
-                columnClass: 'hidden-sm'
+                columnClass: 'col-lg-3 hidden-sm hidden-xs'
                 }
             },
         

awx/ui/static/less/animations.less

@@ -0,0 +1,27 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *  
+ *  animations.css
+ *  
+ *  custom animation mixins for ansible-ui
+ *
+ */
+
+
+.pulsate(@duration: 1.5s) {
+    -webkit-animation:pulsate @duration linear infinite alternate;
+    -moz-animation:pulsate @duration linear infinite alternate;
+    animation:pulsate @duration linear infinite alternate;
+}
+@-webkit-keyframes pulsate { 
+    0% { -moz-transform: scale(.3); opacity: .2; }
+    100% { -moz-transform: scale(1.1); opacity: 1; } 
+}
+@-webkit-keyframes pulsate { 
+    0% { -webkit-transform: scale(.3); opacity: .2; }
+    100% { -webkit-transform: scale(1.1); opacity: 1; } 
+}
+@keyframes pulsate { 
+    0% { -webkit-transform: scale(.3); transform:scale(.3); opacity: .2;}
+    100% { -webkit-transform: scale(1.1); transform:scale(1.1); opacity: 1;} 
+}

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

@@ -7,6 +7,9 @@
  *
  */
 
+@import "animations.less";
+
+
 @black:       #171717;
 @white:       #FFF;
 @warning:     #FF9900;
@@ -79,6 +82,10 @@ a:focus {
    box-shadow: none;
 }
 
+.btn-disabled {
+   cursor: not-allowed; 
+}
+
 /* Bring primary (blue) buttons in line with link colors */
 .btn-primary {
    background-color: @blue;
@@ -801,6 +808,13 @@ input[type="checkbox"].checkbox-no-label {
     content: "\f111";
   }
 
+  .icon-failures-none,
+  .icon-failures-na,
+  .icon-failures-true,
+  .icon-failures-false {
+    font-size: 12px;
+  }
+
   .badge {
     padding: 2px 3px 3px 4px;
     font-size: 10px;
@@ -821,16 +835,18 @@ input[type="checkbox"].checkbox-no-label {
 
 /* Cloud inventory status. i.e. inventory_source.status values */
   
+  /*
   .icon-cloud-na:before,
   .icon-cloud-never:before,
   .icon-cloud-updating:before,
   .icon-cloud-successful:before {
     content: "\f111";
   }
-  
+
   .icon-cloud-failed:before {
     content: "\f06a";
   }
+  */
 
   .icon-cloud-na,
   .icon-cloud-never {
@@ -846,6 +862,10 @@ input[type="checkbox"].checkbox-no-label {
     color: @red;
   }
 
+  .icon-cloud-updating {
+    .pulsate();
+  }
+
   .icon-enabled-true:before {
     content: "\f046";
   }
@@ -983,8 +1003,20 @@ input[type="checkbox"].checkbox-no-label {
   font-weight: bold;  
 }
 
+.inv-group-toggle {
+  margin-right: 3px;  
+}
+
 .disabled {
+  color: @grey;
+}
+
+a.disabled:hover {
   color: @grey; 
+  cursor: not-allowed;  
+}
+a.btn-disabled:hover {
+  cursor: not-allowed;  
 }
 
 .parse-selection {
@@ -1291,6 +1323,7 @@ tr td button i {
  
 }
 
+
 /* Landscape phone to portrait tablet */
 
 @media (max-width: 767px) {

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

@@ -171,8 +171,8 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             }
             }])
 
-    .factory('BuildTree', ['Rest', 'GetBasePath', 'ProcessErrors', 'SortNodes', 'Wait', 'UpdateStatusMsg', 
+    .factory('BuildTree', ['Rest', 'GetBasePath', 'ProcessErrors', 'SortNodes', 'Wait', 'GetSyncStatusMsg', 'GetHostsStatusMsg',
-        function(Rest, GetBasePath, ProcessErrors, SortNodes, Wait, UpdateStatusMsg) {
+        function(Rest, GetBasePath, ProcessErrors, SortNodes, Wait, GetSyncStatusMsg, GetHostsStatusMsg) {
         return function(params) {
             
             var inventory_id = params.inventory_id;
@@ -185,32 +185,50 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
             function buildGroups(tree_data, parent, level) {
                 var sorted = SortNodes(tree_data);
                 for (var i=0; i < sorted.length; i++) {
-                    var currentId = id;
-                    var stat = UpdateStatusMsg({ status: sorted[i].summary_fields.inventory_source.status });
-                    var group = {
-                       name: sorted[i].name,
-                       has_active_failures: sorted[i].has_active_failures,
-                       total_hosts: sorted[i].total_hosts,
-                       hosts_with_active_failures: sorted[i].hosts_with_active_failures,
-                       total_groups: sorted[i].total_groups,
-                       groups_with_active_failures: sorted[i].groups_with_active_failures,
-                       parent: parent, 
-                       has_children: (sorted[i].children.length > 0) ? true : false,
-                       has_inventory_sources: sorted[i].has_inventory_sources,
-                       id: id,
-                       group_id: sorted[i].id,
-                       event_level: level,
-                       ngicon: (sorted[i].children.length > 0) ? 'icon-collapse-alt' : null,
-                       related: { children: (sorted[i].children.length > 0) ? sorted[i].related.children : '' },
-                       status: sorted[i].summary_fields.inventory_source.status,
-                       status_badge_class: stat['class'],
-                       status_badge_tooltip: stat['tooltip'],
-                       selected_class: ''
-                       }
-                    groups.push(group);
                     id++;
+                    var stat = GetSyncStatusMsg({ 
+                        status: sorted[i].summary_fields.inventory_source.status
+                        });   // from helpers/Groups.js
+                    var hosts_status = GetHostsStatusMsg({ 
+                        active_failures: sorted[i].hosts_with_active_failures,
+                        total_hosts: sorted[i].total_hosts,
+                        inventory_id: inventory_id, 
+                        group_id: sorted[i].id
+                        });   // from helpers/Groups.js
+                    var group = {
+                        name: sorted[i].name,
+                        has_active_failures: sorted[i].has_active_failures,
+                        total_hosts: sorted[i].total_hosts,
+                        hosts_with_active_failures: sorted[i].hosts_with_active_failures,
+                        total_groups: sorted[i].total_groups,
+                        groups_with_active_failures: sorted[i].groups_with_active_failures,
+                        parent: parent, 
+                        has_children: (sorted[i].children.length > 0) ? true : false,
+                        has_inventory_sources: sorted[i].has_inventory_sources,
+                        id: id,
+                        source: sorted[i].summary_fields.inventory_source.source,
+                        group_id: sorted[i].id,
+                        event_level: level,
+                        ngicon: (sorted[i].children.length > 0) ? 'fa  fa-minus-square-o inv-group-toggle' : null,
+                        ngclick: 'toggle(' + id + ')',
+                        related: { 
+                            children: (sorted[i].children.length > 0) ? sorted[i].related.children : '', 
+                            inventory_source: sorted[i].related.inventory_source
+                          },
+                        status: sorted[i].summary_fields.inventory_source.status,
+                        status_class: stat['class'],
+                        status_tooltip: stat['tooltip'],
+                        launch_tooltip: stat['launch_tip'],
+                        launch_class: stat['launch_class'],
+                        hosts_status_tip: hosts_status['tooltip'],
+                        hosts_status_link: hosts_status['link'],
+                        hosts_status_class: hosts_status['class'],
+                        selected_class: '',
+                        show: true
+                        }
+                    groups.push(group);
                     if (sorted[i].children.length > 0) {
-                        buildGroups(sorted[i].children, currentId, level + 1);
+                        buildGroups(sorted[i].children, id, level + 1);
                     }
                 }
             }
@@ -224,6 +242,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper'])
                 Rest.get()
                     .success( function(data, status, headers, config) {
                         buildGroups(data, 0, 0);
+                        //console.log(groups);
                         scope.$emit('searchTreeReady', inventory_name, groups);
                         })
                     .error( function(data, status, headers, config) {

awx/ui/static/lib/ansible/generator-helpers.js

@@ -119,8 +119,9 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
             case 'delete':
                 icon = "fa-trash-o"; 
                 break; 
-            case 'update':
             case 'group_update':
+                icon = 'fa-exchange';
+                break;
             case 'scm_update': 
                 icon = 'fa-cloud-download';
                 break;
@@ -152,7 +153,10 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
                 break;
             case 'view':
                 icon="fa-search-plus";
-                break;   
+                break;
+            case 'sync_status':
+                icon="fa-cloud";
+                break; 
             }
         icon += (size) ? " " + size : "";
         return Icon(icon);

awx/ui/static/lib/ansible/list-generator.js

@@ -285,7 +285,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
            html += "<th>Select</th>";
        }
        else if (options.mode == 'edit') {
-           html += "<th class=\"actions-column\">Actions</th>\n";
+           html += "<th class=\"actions-column";
+           html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : ""; 
+           html += "\">Actions</th>\n";
        }
        html += "</tr>\n";
        html += "</thead>\n";
@@ -319,7 +321,9 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
               "ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
        }
        else if (options.mode == 'edit' || options.mode == 'summary') {
+          
           // Row level actions
+          
           html += "<td class=\"actions\">";
           for (action in list.fieldActions) {
               if (list.fieldActions[action].type && list.fieldActions[action].type == 'DropDown') {
@@ -336,11 +340,18 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                  var fAction = list.fieldActions[action];
                  html += "<a ";
                  html += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
-                 html += (fAction.ngClick) ?  this.attr(fAction,'ngClick') : "";
+                 for (itm in fAction) {
-                 html += (fAction.ngHref) ?  this.attr(fAction,'ngHref') : "";
+                     if (itm != 'href' && itm != 'label' && itm != 'icon' && itm != 'class' && itm != 'iconClass') {
-                 html += (fAction.ngShow) ?  this.attr(fAction,'ngShow') : "";
+                         html += Attr(fAction, itm);
+                     }
+                 }
                  html += ">";
-                 html += SelectIcon({ action: action });
+                 if (fAction.iconClass) {
+                     html += "<i class=\"" + fAction.iconClass + "\"></i>"; 
+                 }
+                 else {
+                     html += SelectIcon({ action: action });
+                 }
                  html += (fAction.label) ? " " + list.fieldActions[action]['label'] : "";
                  html += "</a>"; 
               }