Fixes for AC-389, 391, 392, 397

awx/ui/static/js/controllers/Hosts.js

@@ -29,6 +29,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
    scope['hostAddHide'] = true;
    scope['hostCreateHide'] = true;
    scope['hosts'] = null;
+   scope['helpCount'] = 0;
 
    if (scope.loadBreadCrumbsRemove) {
       scope.loadBreadCrumbsRemove();
@@ -114,6 +115,7 @@ function InventoryHosts ($scope, $rootScope, $compile, $location, $log, $routePa
   scope.refreshHostRemove = scope.$on('refreshHost', function(e, group, title) {
       scope.groupTitle = title;
       scope.group_id = group;
+      scope.helpCount++;
       if (scope.group_id == null) {
          scope.hostAddHide = true;
          scope.hostCreateHide = true; 

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

@@ -15,6 +15,19 @@ angular.module('InventoryFormDefinition', [])
         name: 'inventory',
         parseTypeName: 'inventoryParseType',
         well: true,
+        
+        navigationLinks: {
+            hosts: {
+                href: "/#/inventories/{{ inventory_id }}/hosts",
+                label: 'Hosts',  
+                icon: 'icon-laptop'
+                },
+            Groups: {
+                href: "/#/inventories/{{ inventory_id }}/groups",
+                label: 'Groups',  
+                icon: 'icon-sitemap'
+                }
+            },
 
         fields: {
             inventory_name: {

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

@@ -630,7 +630,7 @@ angular.module('InventoryHelper', [ 'RestServices', 'Utilities', 'OrganizationLi
     .factory('SetShowGroupHelp', ['Rest', 'ProcessErrors', 'GetBasePath', function(Rest, ProcessErrors, GetBasePath) {
     return function(params) {
         // Check if inventory has groups. If not, turn on hints to let user know groups are required
-        // before we can 
+        // before hosts can be added
         var scope = params.scope;
         var url = GetBasePath('inventory') + scope.inventory_id + '/groups/';
         Rest.setUrl(url);

awx/ui/static/js/lists/Projects.js

@@ -13,7 +13,7 @@ angular.module('ProjectsListDefinition', [])
         name: 'projects',
         iterator: 'project',
         selectTitle: 'Add Project',
-        editTitle: '{{ name }}',
+        editTitle: 'Projects',
         selectInstructions: '<p>Select existing projects by clicking each project or checking the related checkbox. When finished, click the blue ' +
             '<em>Select</em> button, located bottom right.</p> <p>Create a brand new project by clicking the green <em>Create New</em> button.</p>', 
         index: true,

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

@@ -407,23 +407,6 @@ select.field-mini-height {
   margin-left: 10px;
 }
 
-.tree-container {
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  border-radius: 6px;
-}
-
-.tree-controls {
-  padding: 10px;
-  border-bottom: 1px solid #e3e3e3;
-
-  .title {
-    display: inline-block;
-    font-weight: bold; 
-    margin-right: 25px;
-  }
-}
-
 .no-padding {
   padding: 0;
   margin: 0;
@@ -600,75 +583,48 @@ select.field-mini-height {
      overflow: hidden;
   }
 
+/* Inventory nav links */ 
+  .navigation-links {
+    
+    padding: 0;
+    margin-top: -10px;
 
-/* Inventory Detail Groups tab */
+    a { 
+      margin-right: 15px;
+    }
+
+    a:last-child {
+      margin-right: 20px;
+    }
+  }
+
+/* Inventory-> Groups */
+  
   .inventory-content {
     padding: 15px;
     border: 1px solid #ddd;
     border-radius: 6px;
   }
 
-  .groups-menu, .hosts-menu {
+  .tree-container {
-    min-height: 30px;
     background-color: #f5f5f5;
     border: 1px solid #e3e3e3;
     border-radius: 6px;
-    
-    .nav a {
-       color: @blue-link;
-       font-size: 12px;
-       i {
-         font-size: 14px;
-       }
-    }
-
-    a.disabled {
-       color: @grey;
-    }
-
-    .navbar-form {
-       display: inline-block;
-       float: right;
-       margin-top: 13px;
-       margin-left: 20px;
-       margin-right: 10px;
-
-       label {
-          font-size: 12px;
-          line-height: normal;
-       }
-       input[type="checkbox"] {
-          margin-top: 0;
-       }
-    }
-
-    /* the brand is't really a link */
-    .navbar-brand {
-       color: @black;
-       text-align: left;
-       font-size: 14px;
-       max-width: 100%;
-       i {
-         color: @red;
-       }
-    }
-    .navbar-brand:hover {
-       color: @black; 
-       cursor: default;
-    }
-    
-    /* neither is the status spinner */
-    .nav .status {
-       color: @black;
-    }
-    .nav .status:hover {
-       color: @black; 
-       cursor: default;
-    }
-
   }
 
-/* Inventory Detail Hosts tab */
+  .tree-controls {
+    padding: 10px;
+    border-bottom: 1px solid #e3e3e3;
+
+    .title {
+      display: inline-block;
+      color: #555;
+      font-size: 14px;
+      font-weight: normal; 
+    }
+  }
+
+/* Inventory-> Hosts */
 
   .hosts-well {
     padding-top: 5px;
@@ -710,7 +666,8 @@ select.field-mini-height {
   }
 
   .search-tree { 
-    
+
+    margin-top: 10px;
     padding: 10px 3px 10px 3px;
 
     .title {

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

@@ -270,6 +270,10 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        return html;
     },
 
+    navigationLink: function(link) {
+       return "<a href=\"" + link.href + "\">" + this.attr(link, 'icon') + ' ' + link.label + "</a>\n";  
+    },
+
     buildField: function(fld, field, options, form) {
 
        function getFieldWidth() {
@@ -768,6 +772,14 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
              }
              html += "</div>\n";
           }
+
+          if (this.form.navigationLinks) {
+             html += "<div class=\"navigation-links text-right\">\n"; 
+             for (var link in this.form.navigationLinks) {
+                 html += this.navigationLink(this.form.navigationLinks[link]);
+             }
+             html += "</div>\n";
+          }
           
           // Start the well
           if ( this.has('well') ) {
@@ -951,6 +963,22 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        //
        // Used to create the inventory detail view
        //
+
+       
+       function navigationLinks(page) {
+           // Returns html for navigation links
+           var html = "<div class=\"navigation-links text-right\">\n";
+           html += "<a href=\"/#/inventories/{{ inventory_id }}\"><i class=\"icon-edit\"></i> Inventory Properties</a>\n";
+           if (page == 'group') {
+              html += "<a href=\"/#/inventories/{{ inventory_id }}/hosts\"><i class=\"icon-laptop\"></i> Hosts</a>\n";
+           }
+           else {
+              html += "<a href=\"/#/inventories/{{ inventory_id }}/groups\"><i class=\"icon-sitemap\"></i> Groups</a>\n";    
+           }
+           html += "</div>\n";
+           return html;
+           }
+
        var form = this.form;
        var itm = "groups";
 
@@ -966,17 +994,20 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
               "use the <a href=\"/#/inventories/\{\{ inventory_id \}\}/hosts\"><em>Inventories->Hosts</em></a> page to " +
               "add hosts to the group.</p>";
           html += "</div>\n";
-          html += "<div class=\"tree-container\">\n";
+
+          html += navigationLinks('group');
+
+          html += "<div class=\"tree-container\">\n";      
           html += "<div class=\"tree-controls\">\n";
-          html += "<div class=\"title\" ng-bind=\"selectedNodeName\"></div>\n";
+          html += "<div class=\"title col-lg-2\" ng-bind=\"selectedNodeName\"></div>\n";
-          html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editInventory()\" ng-hide=\"inventoryEditHide\" " +
+          //html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editInventory()\" ng-hide=\"inventoryEditHide\" " +
-              "aw-tool-tip=\"Edit inventory properties\"  data-placement=\"bottom\"><i class=\"icon-edit\"></i> " +
+          //    "aw-tool-tip=\"Edit inventory properties\"  data-placement=\"bottom\"><i class=\"icon-edit\"></i> " +
-              "Inventory Properties</button>\n";
+          //    "Inventory Properties</button>\n";
           html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editGroup()\" ng-hide=\"groupEditHide\" " +
               "aw-tool-tip=\"Edit the selected group\" data-placement=\"bottom\"><i class=\"icon-edit\"></i> " +
-              "Group Properties</button>\n";
+              "Properties</button>\n";
-          html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editHosts()\" ng-hide=\"showGroupHelp\" " +
+          //html += "<button type=\"button\" class=\"btn btn-default btn-xs\" ng-click=\"editHosts()\" ng-hide=\"showGroupHelp\" " +
-              "aw-tool-tip=\"Modify and create inventory hosts\" data-placement=\"bottom\"><i class=\"icon-laptop\"></i> Hosts</button>\n";
+          //    "aw-tool-tip=\"Modify and create inventory hosts\" data-placement=\"bottom\"><i class=\"icon-laptop\"></i> Hosts</button>\n";
           html += "<button type=\"button\" class=\"btn btn-success btn-xs\" ng-click=\"addGroup()\" ng-hide=\"groupAddHide\" " +
               "aw-tool-tip=\"Add an existing group\" data-placement=\"bottom\"><i class=\"icon-check\"></i> Add Existing Group</button>\n";
           html += "<button type=\"button\" class=\"btn btn-success btn-xs\" ng-click=\"createGroup()\" ng-hide=\"groupCreateHide\" " +
@@ -989,24 +1020,35 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
        }
        else {
           // build the hosts page      
+          
+          // Hint text
           html += "<div ng-show=\"showGroupHelp\" class=\"alert alert-dismissable alert-info\">\n";
           html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>\n";
           html += "<p><strong>Hint:</strong> Get started building your inventory by adding a group on the " + 
               "<a href=\"/#/inventories/\{\{ inventory_id \}\}/groups\"><em>Inventories->Groups</em></a> page. After creating a group, " +
               "return here and add hosts to the group.</p>";
           html += "</div>\n";
+
+          html += "<div ng-show=\"group_id == null && !showGroupHelp && helpCount < 2\" class=\"alert alert-dismissable alert-info\">\n";
+          html += "<button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-hidden=\"true\">&times;</button>\n";
+          html += "<p><strong>Hint:</strong> To add hosts to the inventory, select a group using the Group Selector.</p>";
+          html += "</div>\n";
+
           html += "<div class=\"row\">\n";
           html += "<div class=\"col-lg-3\" id=\"search-tree-target\">\n";
           html += "<div class=\"search-tree well\">\n";
           html += "<div id=\"search-tree-container\">\n</div><!-- search-tree-container -->\n";
-          html += "<div class=\"text-right pad-right-sm\"><button type=\"button\" class=\"btn btn-default btn-xs\" " +
+          //html += "<div class=\"text-right pad-right-sm\"><button type=\"button\" class=\"btn btn-default btn-xs\" " +
-              "ng-click=\"editGroups()\" aw-tool-tip=\"Modify and create inventory groups\" data-placement=\"left\"> " +
+          //    "ng-click=\"editGroups()\" aw-tool-tip=\"Modify and create inventory groups\" data-placement=\"left\"> " +
-              "<i class=\"icon-sitemap\"></i> Groups</button></div>\n";
+          //    "<i class=\"icon-sitemap\"></i> Groups</button></div>\n";
           html += "</div><!-- search-tree well -->\n";
           html += "</div><!-- col-lg-3 -->\n";
           html += "<div class=\"col-lg-9\">\n"; 
-          html += "<div class=\"hosts-well well\">\n";
+
+          html += navigationLinks('host');
           
+          html += "<div class=\"hosts-well well\">\n";
+
           html += SearchWidget({ iterator: form.iterator, template: form, mini: true, size: 'col-md-6 col-lg-6'});
           html += "<div class=\"col-md-6 col-lg-6\">\n"
           html += "<div class=\"pull-right\">\n";

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

@@ -171,7 +171,8 @@ angular.module('Utilities',[])
                        break;
                     }
                 }
-                if (paths[i] == 'hosts' && $rootScope.crumbCache[j].altPath) {
+                if ($rootScope.crumbCache[j] && $rootScope.crumbCache[j]['altPath'] !== undefined) {
+                   // Use altPath to override default path construction
                    $rootScope.breadcrumbs.push({ title: child, path: $rootScope.crumbCache[j].altPath });
                 }
                 else {