Latest inventory hosts tab changes

awx/ui/static/js/forms/Inventories.js

@@ -104,6 +104,7 @@ angular.module('InventoryFormDefinition', [])
                 type: 'treeview',
                 title: "groupTitle",
                 iterator: 'host',
+                
                 actions: {
                     },
                 
@@ -111,49 +112,18 @@ angular.module('InventoryFormDefinition', [])
                     name: {
                         key: true,
                         label: 'Host Name',
-                        ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')"
+                        ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
+                        badgeShow: "\{\{ host.has_active_failures \}\}",
+                        badgeIcon: 'icon-exclamation-sign',
+                        badgeToolTip: 'Most recent job failed',
+                        badgePlacement: 'bottom'
                         },
                     description: {
                         label: 'Description',
                         ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')"
-                        },
-                    has_active_failures: {
-                        label: 'Failed jobs?',
-                        showValue: false,
-                        ngClick: "showEvents('\{\{ host.name \}\}', '\{\{ host.related.last_job \}\}')",
-                        ngShow: "\{\{ host.has_active_failures \}\}",
-                        icon: 'icon-exclamation-sign',
-                        "class": 'active-failures-\{\{ host.has_active_failures \}\}',
-                        text: 'View failures',
-                        searchField: 'has_active_failures',
-                        searchType: 'boolean',
-                        searchOptions: [{ name: "No", value: 0 }, { name: "Yes", value: 1 }]
                         }
                     },
-                
                 fieldActions: {
-                    edit: {
-                        ngClick: "editHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
-                        icon: 'icon-edit',
-                        label: 'Edit',
-                        awToolTip: 'Edit host',
-                        'class': 'btn-default'
-                        },
-                    "remove": {
-                        ngClick: "removeHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
-                        icon: 'icon-minus-sign',
-                        label: 'Remove',
-                        "class": 'btn-success',
-                        ngHide: "group_id === null || group_id === undefined",
-                        awToolTip: 'Remove this host from the group, but leave it as part of the inventory under All Hosts'
-                        },
-                    "delete": {
-                        ngClick: "deleteHost(\{\{ host.id \}\}, '\{\{ host.name \}\}')",
-                        icon: 'icon-trash',
-                        label: 'Delete',
-                        "class": 'btn-danger',
-                        awToolTip: 'Permanently remove this host from the inventory'
-                        }
                     }
                 }
             }

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

@@ -448,7 +448,7 @@ angular.module('HostsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', 'H
 
         var relatedSets = { hosts: { url: url, iterator: 'host' } };
         RelatedSearchInit({ scope: params.scope, form: InventoryForm, relatedSets: relatedSets });
-        RelatedPaginateInit({ scope: params.scope, relatedSets: relatedSets });
+        RelatedPaginateInit({ scope: params.scope, relatedSets: relatedSets, pageSize: 40 });
         
         if (scope['hostFailureFilter']) {
            // If the user checked 'show only hosts with failures', filter for hosts with failed jobs

awx/ui/static/js/helpers/inventory.js

@@ -43,8 +43,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                 .success( function(data, status, headers, config) {    
                     for (var i=0; i < data.results.length; i++) {
                         title = data.results[i].name;
-                        title += (data.results[i].has_active_failures) ? ' <span class="tree-badge" title="Contains hosts with failed jobs">' +
-                            '<i class="icon-exclamation-sign"></i></span>' : ''; 
                         treeData[0].children.push({
                            data: {
                                title: title
@@ -148,8 +146,6 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
                             var filter = (scope.inventoryFailureFilter) ? "has_active_failures=true&" : ""; 
                             for (var i=0; i < data.results.length; i++) {
                                 title = data.results[i].name;
-                                title += (data.results[i].has_active_failures) ? ' <span class="tree-badge" title="Contains hosts with failed jobs">' +
-                                    '<i class="icon-exclamation-sign"></i></span>' : ''; 
                                 response.push({
                                     data: {
                                        title: title

awx/ui/static/js/helpers/related-paginate.js

@@ -20,6 +20,7 @@ angular.module('RelatedPaginateHelper', ['RefreshRelatedHelper', 'ngCookies'])
         
         var scope = params.scope;
         var relatedSets = params.relatedSets; 
+        var pageSize = (params.pageSize) ? params.pageSize : 10;
 
         for (var key in relatedSets){ 
             cookieSize = $cookieStore.get(relatedSets[key].iterator + 'PageSize');
@@ -29,7 +30,7 @@ angular.module('RelatedPaginateHelper', ['RefreshRelatedHelper', 'ngCookies'])
             }
             else {
               scope[relatedSets[key].iterator + 'Page'] = 0;
-              scope[relatedSets[key].iterator + 'PageSize'] = 10;
+              scope[relatedSets[key].iterator + 'PageSize'] = pageSize;
             }
         }
 

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

@@ -176,6 +176,8 @@ a:hover {
   text-decoration: none;
 }
 
+
+
 .site-footer {
   width: 100%;
   padding-top: 20px;
@@ -184,6 +186,33 @@ a:hover {
   color: @grey;
   text-align: center;
   background-color: @black;
+
+  .inner-container {
+      max-width: 1170px;
+      margin: 0 auto;
+      padding: 0 10px;
+  }
+  
+  a,
+  a:active,
+  a:hover,
+  a:visited {
+    margin-right: 15px;
+    font-size: 18px;
+    color: @grey;
+  }
+
+  .social {
+    display: inline-block;
+  }
+
+  .logo {
+    display: inline-block;
+  }
+
+  .logo img {
+    max-width: 125px; 
+  }
 }
 
 .copyright {
@@ -193,28 +222,9 @@ a:hover {
   text-align: center;
 }
 
-.site-footer a,
-.site-footer a:active,
-.site-footer a:hover,
-.site-footer a:visited {
-  margin-right: 15px;
-  font-size: 18px;
-  color: @grey;
-}
 
-.site-footer .social {
-  display: inline-block;
-  margin-left: 50px;
-}
 
-.site-footer .logo {
-  display: inline-block;
-  margin-right: 35px;
-}
 
-.site-footer .logo img {
-  max-width: 125px;
-}
 
 .login-header {
   text-align: center;
@@ -602,7 +612,7 @@ input[type="text"].job-successful {
 
   }
 
-  .tree-badge {
+  .host-badge {
     color: @red;
     font-size: 12px;
   }

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

@@ -477,7 +477,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                 /* For reasons unknown calling Rest fails. It just dies with no errors
                    or any info */
                 $.ajax({
-                    url: url, 
+                    url: url + '?order_by=name', 
                     headers: { 'Authorization': 'Token ' + token },
                     dataType: 'json',
                     success: function(data) {
@@ -494,11 +494,17 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                             html += "data-name=\"" + data.results[i].name + "\" ";
                             html += "data-group-id=\"" + data.results[i].id + "\">";
                             html += "<a href=\"\" class=\"expand\"><i class=\"icon-caret-right\"></i></a> ";
-                            html += "<a href=\"\" class=\"activate\">" + data.results[i].name + "</a></li>\n";
+                            html += "<a href=\"\" class=\"activate\">" + data.results[i].name + "</a> ";
+                            html += "<a href=\"\" aw-tool-tip=\"Contains hosts with failed jobs\" ng-show=\"" +
+                                data.results[i].has_active_failures + "\" data-placement=\"bottom\">" +
+                                "<i class=\"host-badge icon-exclamation-sign\"></i></a></li>\n";
                         }
                         html = (html !== '') ? "<ul>" + html + "</ul>\n" : "";
                         var compiled = $compile(html)(scope);
                         parent.append(compiled);  //append the new list to the parent <li>
+                        if (!scope.$$phase) {
+                           scope.$digest();
+                        }
                         scope.$emit('childrenLoaded');
                         },
                     error: function(data, status) {
@@ -532,7 +538,10 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Hos
                    "data-failures=\"{{ treeData[0].failures }}\" " +
                    "data-groups=\"{{ treeData[0].groups }}\" " + 
                    "data-name=\"{{ treeData[0].name }}\" " +
-                   "><a href=\"\" class=\"expand\"><i class=\"icon-caret-right\"></i></a> <a href=\"\" class=\"activate active\">{{ treeData[0].name }}</a>" +
+                   "><a href=\"\" class=\"expand\"><i class=\"icon-caret-right\"></i></a> " +
+                   "<a href=\"\" class=\"activate active\">{{ treeData[0].name }}</a> " +
+                   "<a href=\"\" aw-tool-tip=\"Contains hosts with failed jobs\" ng-show=\"\{\{ treeData[0].failures \}\}\" data-placement=\"bottom\">" +
+                   "<i class=\"host-badge icon-exclamation-sign\"></i></a>" +
                    "</li>\n" +
                    "</ul>\n";
                var compiled = $compile(html)(scope);

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

@@ -76,18 +76,18 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           }
        }
 
-       // Remove any lingering tooltip <div> elements
+       // Remove any lingering tooltip and popover <div> elements
        $('.tooltip').each( function(index) {
            $(this).remove();
            });
+       $('.popover').each(function(index) {
+              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+              $(this).remove();
+              });
 
        if (options.modal) {
           this.scope.formHeader = (options.mode == 'add') ? form.addTitle : form.editTitle;  //Default title for default modal
           this.scope.formModalInfo = false  //Disable info button for default modal
-          $('.popover').each(function(index) {
-              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
-              $(this).remove();
-              });
           if (options.modal_selector) {
              $(options.modal_selector).modal({ show: true, backdrop: 'static', keyboard: true });
              $(options.modal_selector).on('shown.bs.modal', function() {
@@ -988,9 +988,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        html += "<table class=\"" + form.related[itm].iterator + " table table-condensed table-hover\">\n";
        html += "<thead>\n";
        html += "<tr>\n";
-       html += "<th>#</th>\n";
+       //html += "<th>#</th>\n";
        html += "<th><input type=\"checkbox\" ng-model=\"toggleAllFlag\" ng-change=\"toggleAllHosts()\" aw-tool-tip=\"Select all hosts\" data-placement=\"top\"></th>\n";
-       
        for (var fld in form.related[itm].fields) {
            html += "<th class=\"list-header\" id=\"" + form.related[itm].iterator + '-' + fld + "-header\" " +
                "ng-click=\"sort('" + form.related[itm].iterator + "', '" + fld + "')\">" +
@@ -1018,8 +1017,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
       html += "<tr ng-repeat=\"" + form.related[itm].iterator + " in " + itm + "\" >\n";
       
       // Row counter
-      html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " + 
+      //html += "<td>{{ $index + (" + form.related[itm].iterator + "Page * " + 
-       form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
+      // form.related[itm].iterator + "PageSize) + 1 }}.</td>\n";
       
       // Select checkbox
       html += "<td><input type=\"checkbox\" ng-model=\"" + form.related[itm].iterator + ".selected\" ng-change=\"toggleOneHost()\" ></td>";
@@ -1035,6 +1034,8 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
       }
 
       // Row level actions
+     
+      /*
       html += "<td class=\"actions\">";
       for (action in form.related[itm].fieldActions) {
           html += "<button class=\"btn btn-mini"; 
@@ -1049,6 +1050,22 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
           html += "</button> ";
       }
       html += "</td>";
+      */
+
+      html += "<td>";
+      html += "<div class=\"btn-group\">\n";
+      html += "<button type=\"button\" class=\"btn btn-default btn-mini dropdown-toggle\" data-toggle=\"dropdown\">";
+      html += "View <span class=\"caret\"></span></button>\n";
+      html += "<ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"dropdownMenu1\">\n";
+      html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Action</a></li>\n";
+      html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Another action</a></li>\n";
+      html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Something else here</a></li>\n";
+      html += "<li role=\"presentation\" class=\"divider\"></li>\n";
+      html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"#\">Separated link</a></li>\n";
+      html += "</ul>\n";
+      html += "</div>\n";
+      html += "</td>\n";
+
       html += "</tr>\n";
 
       // Message for when a related collection is empty

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

@@ -101,7 +101,6 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
         var field = list['fields'][fld];
         var html = '';
         
-        //html += "<td ";
         html += "<td class=\"" + fld + "-column";
         html += (field['class']) ? " " + field['class'] : "";
         html += (field['columnClass']) ? " " + field['columnClass'] : "";
@@ -177,6 +176,20 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers'])
             "class=\"level-\{\{ " + list.iterator + ".event_level \}\}-detail\" " +
             "></div>\n" : "";
         
+        // Badge
+        if (field.badgeIcon) {
+           if (field.badgeToolTip) {
+              html += "<a href=\"\" aw-tool-tip=\"Most recent job failed\"";
+              html += (field.badgePlacement) ? " data-placement=\"" + field.badgePlacement + "\"" : "";
+              html += " ng-show=\"" + field.badgeShow + "\">";
+              html += " <i class=\"host-badge " + field.badgeIcon + "\"></i></a>\n";
+           }
+           else {
+              html += " <i class=\"host-badge " + field.badgeIcon + "\" ";
+              html += "ng-show=\"" + field.badgeShow + "\"></i>\n";
+          }
+        }
+
         return html += "</td>\n";
     
         }

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

@@ -85,18 +85,18 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
        this.scope[list.name] = null;
        this.scope[list.iterator] = null;
 
-       // Remove any lingering tooltip <div> elements
+       // Remove any lingering tooltip and popover <div> elements
        $('.tooltip').each( function(index) {
            $(this).remove();
            });
+       $('.popover').each(function(index) {
+              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
+              $(this).remove();
+              });
 
        if (options.mode == 'lookup') {
           // options should include {hdr: <dialog header>, action: <function...> }
           this.scope.lookupHeader = options.hdr;
-          $('.popover').each(function(index) {
-              // remove lingering popover <div>. Seems to be a bug in TB3 RC1
-              $(this).remove();
-              });
           $('#lookup-modal').modal({ backdrop: 'static', keyboard: true });
           $(document).bind('keydown', function(e) {
               if (e.keyCode === 27) {

awx/ui/templates/ui/index.html

@@ -325,7 +325,7 @@
   <div class="spinny"><i class="icon-cog icon-spin icon-2x"></i> <p>working...</p></div>
    
   <div class="site-footer">
-    <div>
+    <div class="inner-container">
       <div class="social pull-left">
         <a href="https://github.com/ansible" target="_blank"><i class="icon-github"></i></a>
         <a href="https://www.facebook.com/pages/Ansibleworks/258737970923512?ref=hl" target="_blanck"><i class="icon-facebook"></i></a>