Applied same navigation/drop-down changes to jobs that we applied to inventory.

awx/ui/static/js/controllers/Jobs.js

@@ -275,7 +275,8 @@ function JobsEdit ($scope, $rootScope, $compile, $location, $log, $routeParams,
    Rest.get({ params: {id: id} })
        .success( function(data, status, headers, config) {
            
-           LoadBreadCrumbs({ path: '/job_templates/' + id, title: data.id + ' - ' + data.summary_fields.job_template.name });
+           //LoadBreadCrumbs({ path: '/jobs/' + id, title: data.id + ' - ' + data.summary_fields.job_template.name });
+           LoadBreadCrumbs();
            
            for (var fld in form.fields) {
               if (fld != 'variables' && data[fld] !== null && data[fld] !== undefined) {  

awx/ui/static/js/forms/Jobs.js

@@ -16,8 +16,14 @@ angular.module('JobFormDefinition', [])
         well: true,
         twoColumns: true,
 
-
         navigationLinks: {
+            details: {
+                href: "/#/jobs/{{ job_id }}",
+                label: 'Details',
+                icon: 'icon-zoom-in',
+                active: true,
+                ngShow: "job_id !== null"
+                },
             hosts: {
                 href: "/#/jobs/{{ job_id }}/job_host_summaries",
                 label: 'Hosts',
@@ -30,7 +36,6 @@ angular.module('JobFormDefinition', [])
                 }
             },
             
-
         fields: {
             name: {
                 label: 'Job Template',

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

@@ -22,12 +22,19 @@ angular.module('JobEventsListDefinition', [])
             details: {
                 href: "/#/jobs/{{ job_id }}",
                 label: 'Details',
-                icon: 'icon-zoom-in'
+                icon: 'icon-zoom-in',
+                ngShow: "job_id !== null"
                 },
-            summary: {
+            hosts: {
                 href: "/#/jobs/{{ job_id }}/job_host_summaries",
                 label: 'Hosts',
                 icon: 'icon-laptop'
+                },
+            events: {
+                href: "/#/jobs/{{ job_id }}/job_events",
+                label: 'Events',
+                active: true,
+                icon: 'icon-list-ul'
                 }
             },
         

awx/ui/static/js/lists/JobHosts.js

@@ -23,11 +23,16 @@ angular.module('JobHostDefinition', [])
                 icon: 'icon-zoom-in',
                 ngShow: "job_id !== null"
                 },
+            hosts: {
+                href: "/#/jobs/{{ job_id }}/job_host_summaries",
+                label: 'Hosts',
+                active: true,
+                icon: 'icon-laptop'
+                },
             events: {
                 href: "/#/jobs/{{ job_id }}/job_events",
                 label: 'Events',
-                icon: 'icon-list-ul',
+                icon: 'icon-list-ul'
-                ngShow: "job_id !== null"
                 }
             },
 

awx/ui/static/js/lists/Jobs.js

@@ -95,7 +95,7 @@ angular.module('JobsListDefinition', [])
                 type: 'DropDown',
                 label: 'View',
                 icon: 'icon-zoom-in',
-                'class': 'btn-xs',
+                'class': 'btn-default btn-xs',
                 options: [
                     { ngClick: "viewSummary(\{{ job.id \}\}, '\{\{ job.summary_fields.job_template.name \}\}')", label: 'Host Summary', 
                         ngHide: "job.status == 'new'" },

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

@@ -823,6 +823,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
          if (field.type == 'custom') {
             html += "<div class=\"text-right " + getLabelWidth();
             html += (field.labelClass) ? " " + field.labelClass : "";
+            html += "\" ";
             html += (field.labelNGClass) ? "ng-class=\"" + field.labelNGClass + "\" " : "";
             html += ">\n";
             html += (field.awPopOver) ? this.attr(field, 'awPopOver', fld) : "";
@@ -832,7 +833,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
             html += '</label>' + "\n";
             html += "</div>\n";
             html += "<div ";
-            html += "id=\"" + this.field.name + "_" + fld + "\" ";
+            html += "id=\"" + form.name + "_" + fld + "\" ";
             html += (field.controlNGClass) ? "ng-class=\"" + field.controlNGClass + "\" " : ""; 
             html += "class=\"" + getFieldWidth() + "\">\n"; 
             html += field.control;
@@ -864,7 +865,7 @@ angular.module('FormGenerator', ['GeneratorHelpers', 'ngCookies'])
                  break;
               }
           }
-          html += "<ul class=\"dropdown-menu pull-right\" role=\"menu\">\n";
+          html += "<ul class=\"dropdown-menu\" role=\"menu\">\n";
           for (var itm in navigation) {
               html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"" +
                   navigation[itm].href + "\" ";

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

@@ -105,14 +105,44 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
            html += "<div class=\"nav-path\">\n";
            html += "<ul class=\"breadcrumb\">\n";
            html += "<li ng-repeat=\"crumb in breadcrumbs\"><a href=\"{{ '#' + crumb.path }}\">{{ crumb.title | capitalize }}</a></li>\n";
-           html += "<li class=\"active\">";
+           
-           if (options.mode == 'select') {
+           if (list.navigationLinks) {
-              html += list.selectTitle; 
+              var navigation = list.navigationLinks;
+              html += "<li class=\"active\"> </li>\n";
+              html += "</ul>\n";
+              html += "<div class=\"dropdown\">\n";
+              for (var itm in navigation) {
+                  if (navigation[itm].active) {
+                     html += "<a href=\"\" class=\"toggle\" ";
+                     html += "data-toggle=\"dropdown\" ";
+                     html += ">" + navigation[itm].label + " <i class=\"icon-chevron-sign-down\"></i></a>";
+                     break;
+                  }
+              }
+              html += "<ul class=\"dropdown-menu\" role=\"menu\">\n";
+              for (var itm in navigation) {
+                  html += "<li role=\"presentation\"><a role=\"menuitem\" tabindex=\"-1\" href=\"" +
+                      navigation[itm].href + "\" ";
+                  html += (navigation[itm].active) ? "class=\"active\" " : "";
+                  html += ">";
+                  html += navigation[itm].label;
+                  html += (navigation[itm].active) ? " <i class=\"icon-angle-left\"></i>" : "";
+                  html += "</a></li>\n";
+              }
+              html += "</ul>\n";
+              html += "</div><!-- dropdown -->\n";
+              html += "</div><!-- nav-path -->\n";
            }
            else {
-              html += list.editTitle;
+              html += "<li class=\"active\">";
+              if (options.mode == 'select') {
+                 html += list.selectTitle; 
+              }
+              else {
+                 html += list.editTitle;
+              }
+              html += "</li>\n</ul>\n</div>\n";
            }
-           html += "</li>\n</ul>\n</div>\n";
        }
        
        if (options.mode == 'edit' && list.editInstructions) {
@@ -122,19 +152,10 @@ angular.module('ListGenerator', ['GeneratorHelpers'])
           html += "</div>\n";
        }
 
-       if (options.mode != 'lookup' && list.navigationLinks) {
-             html += "<div class=\"navigation-links text-right\">\n"; 
-             for (var link in list.navigationLinks) {
-                 html += NavigationLink(list.navigationLinks[link]);
-             }
-             html += "</div>\n";
-       }
-
        if (options.mode != 'lookup' && (list.well == undefined || list.well == 'true')) {
           html += "<div class=\"well\">\n";
        }
     
-    
        if (options.mode == 'lookup' || options.id != undefined) {
           html += SearchWidget({ iterator: list.iterator, template: list, mini: true , size: 'col-lg-8' });
        }