On inventory tree widget, has_active_failures turns node text color to red. Checkbox at bottom filters nodes based on value of has_active_failures.

ansibleworks/ui/static/css/ansible-ui.css

@@ -348,6 +348,24 @@
     margin-left: 5px;
  }
 
+ .inventory-filter {
+    padding: 0 3px 3px 3px;
+    margin-top: 3px;
+    text-align: right;
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    -webkit-border-radius: 4px;
+      -moz-border-radius: 4px;
+           border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+ }
+
+ .inventory-filter label {
+    margin-right: 10px;
+ }
+
  #hosts-well {
     padding-top: 10px;
  }

ansibleworks/ui/static/js/controllers/Inventories.js

@@ -217,7 +217,7 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
                           GenerateForm, Rest, Alert, ProcessErrors, LoadBreadCrumbs, RelatedSearchInit, 
                           RelatedPaginateInit, ReturnToCaller, ClearScope, LookUpInit, Prompt,
                           OrganizationList, TreeInit, GetBasePath, GroupsList, GroupsEdit, LoadInventory,
-                          GroupsDelete, HostsList, HostsAdd, HostsEdit, HostsDelete) 
+                          GroupsDelete, HostsList, HostsAdd, HostsEdit, HostsDelete, RefreshTree) 
 {
    ClearScope('htmlTemplate');  //Garbage collection. Don't leave behind any listeners/watchers from the prior
                                 //scope.
@@ -252,6 +252,10 @@ function InventoriesEdit ($scope, $rootScope, $compile, $location, $log, $routeP
   
    LoadInventory({ scope: scope });
 
+   scope.filterInventory = function() {
+      RefreshTree({ scope: scope });
+   }
+
    // Save changes to the parent
    scope.formSave = function() {
       Rest.setUrl(defaultUrl + $routeParams.id + '/');
@@ -419,6 +423,6 @@ InventoriesEdit.$inject = [ '$scope', '$rootScope', '$compile', '$location', '$l
                             'GenerateForm', 'Rest', 'Alert', 'ProcessErrors', 'LoadBreadCrumbs', 'RelatedSearchInit', 
                             'RelatedPaginateInit', 'ReturnToCaller', 'ClearScope', 'LookUpInit', 'Prompt',
                             'OrganizationList', 'TreeInit', 'GetBasePath', 'GroupsList', 'GroupsEdit', 'LoadInventory',
-                            'GroupsDelete', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete'
+                            'GroupsDelete', 'HostsList', 'HostsAdd', 'HostsEdit', 'HostsDelete', 'RefreshTree'
                             ]; 
   

ansibleworks/ui/static/js/forms/Inventories.js

@@ -42,6 +42,11 @@ angular.module('InventoryFormDefinition', [])
                 addRequired: true,
                 editRequired: true,
                 ngClick: 'lookUpOrganization()'
+                },
+            has_active_failures: {
+                label: 'Active Failures',
+                readonly: true,
+                type: 'text'
                 }
             },
 
@@ -96,7 +101,7 @@ angular.module('InventoryFormDefinition', [])
                     has_active_failures: {
                         label: 'Failures',
                         showValue: false,
-                        ngShow: "\{\{ host.has_active_failures \}\}",
+                        ngShowIcon: "\{\{ host.has_active_failures \}\}",
                         icon: 'icon-circle',
                         "class": 'active-failures-\{\{ host.has_active_failures \}\}',
                         searchField: 'has_active_failures',

ansibleworks/ui/static/js/helpers/inventory.js

@@ -25,6 +25,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
         var inventory_name = inventory.name; 
         var inventory_url = inventory.url;
         var inventory_id = inventory.id;
+        var has_active_failures = inventory.has_active_failures;
         var inventory_descr = inventory.description;
         var idx=0;
         var treeData = [];
@@ -34,7 +35,9 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
             scope.HostLoadedRemove();
         }
         scope.HostLoadedRemove = scope.$on('hostsLoaded', function() {
-            Rest.setUrl(groups + '?order_by=name');
+            var filter = (scope.inventoryFailureFilter) ? "has_active_failures__int=1&" : ""; 
+            var url = groups + '?' + filter + 'order_by=name';
+            Rest.setUrl(url);
             Rest.get()
                 .success( function(data, status, headers, config) {    
                     for (var i=0; i < data.results.length; i++) {
@@ -52,7 +55,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                                all: data.results[i].related.all_hosts,
                                children: data.results[i].related.children,
                                hosts: data.results[i].related.hosts,
-                               variable: data.results[i].related.variable_data
+                               variable: data.results[i].related.variable_data,
+                               "data-failures": data.results[i].has_active_failures
                                },
                            state: 'closed'
                            });
@@ -81,7 +85,8 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                         'inventory_id': inventory_id,
                         hosts: hosts,
                         name: inventory_name,
-                        description: inventory_descr
+                        description: inventory_descr,
+                        "data-failures": inventory.has_active_failures
                         },
                     state: 'open',
                     children:[] 
@@ -134,6 +139,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                         headers: { 'Authorization': 'Token ' + Authorization.getToken() },
                         success: function(data) {
                             var response = [];
+                            var filter = (scope.inventoryFailureFilter) ? "has_active_failures__int=1&" : ""; 
                             for (var i=0; i < data.results.length; i++) {
                                 response.push({
                                     data: {
@@ -147,9 +153,10 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                                        description: data.results[i].description,
                                        inventory: data.results[i].inventory,
                                        all: data.results[i].related.all_hosts,
-                                       children: data.results[i].related.children + '?order_by=name',
+                                       children: data.results[i].related.children + '?' + filter + 'order_by=name',
                                        hosts: data.results[i].related.hosts,
-                                       variable: data.results[i].related.variable_data
+                                       variable: data.results[i].related.variable_data,
+                                       "data-failures": data.results[i].has_active_failures
                                        },
                                     state: 'closed'
                                     });

ansibleworks/ui/static/js/lists/Inventories.js

@@ -31,6 +31,16 @@ angular.module('InventoriesListDefinition', [])
                 ngBind: 'inventory.summary_fields.organization.name',
                 sourceModel: 'organization',
                 sourceField: 'name'
+                },
+            has_active_failures: {
+                label: 'Failures',
+                showValue: false,
+                ngShowIcon: "\{\{ inventory.has_active_failures \}\}",
+                icon: 'icon-circle',
+                "class": 'active-failures-\{\{ inventory.has_active_failures \}\}',
+                searchField: 'has_active_failures',
+                searchType: 'boolean',
+                searchOptions: [{ name: "No", value: 0 }, { name: "Yes", value: 1 }]
                 }
             },
         

ansibleworks/ui/static/lib/ansible/form-generator.js

@@ -691,6 +691,8 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                   "<i class=\"icon-remove\"></i> Delete Group</button>";
               html += "</div>\n";  
               html += "<div id=\"tree-view\"></div>\n";
+              html += "<div class=\" inventory-filter\" ng-show=\"has_active_failures == true\"><label class=\"checkbox inline\">" +
+                  "<input ng-model=\"inventoryFailureFilter\" ng-change=\"filterInventory()\" type=\"checkbox\" >Only show groups with active failures</label></div>\n";
               html += "</div>\n";
            }
            else {
@@ -757,11 +759,11 @@ angular.module('FormGenerator', ['GeneratorHelpers'])
                   html += (rfield['class']) ? 'class="'+ rfield['class'] + '"' : "";
                   html += ">";
                   if (rfield.icon) {
-                     if (rfield.ngShow) {
+                     if (rfield.ngShowIcon) {
-                        html += "<i ng-show=\"" + rfield.ngShow + "\" class=\"" + rfield.icon + "\"></i>";
+                        html += "<i ng-show=\"" + rfield.ngShowIcon + "\" class=\"" + rfield.icon + "\"></i>";
                      }
                      else {
-                        html += this.attr(rfield,'icon');
+                        html += this.icon(rfield.icon);
                      }
                   }
                   if (rfield.showValue == undefined || rfield.showValue == true) {

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

@@ -239,13 +239,23 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
                  html += "<a href=\"#/" + base + "/{{" + list.iterator + ".id }}\">";
               }
            }
-           html += (list.fields[fld].icon) ? this.icon(list.fields[fld].icon) : "";
+          
-           if (list.fields[fld].ngBind) {       
+           if (list.fields[fld].ngShowIcon) {
-              html += "{{ " + list.fields[fld].ngBind + " }}";
+              html += "<i ng-show=\"" + list.fields[fld].ngShowIcon + "\" class=\"" + list.fields[fld].icon + "\"></i>";
            }
            else {
-              html += "{{" + list.iterator + "." + fld + "}}";    
+              html += this.icon(list.fields[fld].icon);
            }
+           
+           if (list.fields[fld].showValue == undefined || list.fields[fld].showValue == true) {
+              if (list.fields[fld].ngBind) {       
+                 html += "{{ " + list.fields[fld].ngBind + " }}";
+              }
+              else {
+                 html += "{{" + list.iterator + "." + fld + "}}";    
+              }
+           }
+           
            html += ((list.fields[fld].key || list.fields[fld].link) && options.mode != 'lookup' && options.mode != 'select') ? "</a>" : "";
            html += "</td>\n";
        }

ansibleworks/ui/static/lib/jstree/themes/ansible/style.css

@@ -30,6 +30,13 @@
 
 .jstree-ansible .jstree-hovered { background:#e7f4f9; border:1px solid #e7f4f9; padding:0 2px 0 1px; }
 .jstree-ansible .jstree-clicked { background:#d9edf7; border:1px solid #3a87ad; padding:0 2px 0 1px; color: #000; }
+
+/* if data-failures=true (set usng has_active_failures on hosts, groups, inventory), link color is red */
+.jstree-ansible li[data-failures="true"] .jstree-clicked { color: #FF0000; }
+.jstree-ansible li[data-failures="false"] .jstree-clicked { color: #000; }
+.jstree-ansible li[data-failures="true"] a { color: #FF0000; }
+.jstree-ansible li[data-failures="false"] a { color: #000; }
+
 .jstree-ansible a .jstree-icon { background-position:-56px -19px; }
 .jstree-ansible .jstree-open > a .jstree-icon { background-position:-56px -36px; }
 .jstree-ansible a.jstree-loading .jstree-icon { background:url("throbber.gif") center center no-repeat !important; }
@@ -91,3 +98,4 @@
 .jstree-ansible .jstree-checked a .jstree-checkbox { _background-position:-38px -19px; }
 .jstree-ansible .jstree-unchecked a .jstree-checkbox { _background-position:-2px -19px; }
 /* IE6 END */
+