Job detail page refactoration

Expanded the available info in the less/more job parameter section

awx/ui/static/js/controllers/JobDetail.js

@@ -9,7 +9,7 @@
 
 function JobDetailController ($location, $rootScope, $scope, $compile, $routeParams, $log, ClearScope, Breadcrumbs, LoadBreadCrumbs, GetBasePath, Wait, Rest,
     ProcessErrors, SelectPlay, SelectTask, Socket, GetElapsed, DrawGraph, LoadHostSummary, ReloadHostSummaryList, JobIsFinished, SetTaskStyles, DigestEvent,
-    UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit) {
+    UpdateDOM, EventViewer, DeleteJob, PlaybookRun, HostEventsViewer, LoadPlays, LoadTasks, LoadHosts, HostsEdit, ParseVariableString) {
 
     ClearScope();
 
@@ -18,7 +18,8 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         scope = $scope,
         api_complete = false,
         refresh_count = 0,
-        lastEventId = 0;
+        lastEventId = 0,
+        verbosity_options, job_type_options;
 
     scope.plays = [];
     scope.hosts = [];
@@ -58,6 +59,17 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
 
     scope.jobData = {};
 
+    verbosity_options = [
+        { value: 0, label: 'Default' },
+        { value: 1, label: 'Verbose' },
+        { value: 3, label: 'Debug' }
+    ];
+
+    job_type_options = [
+        { value: 'run', label: 'Run' },
+        { value: 'check', label: 'Check' }
+    ];
+
     scope.eventsHelpText = "<p><i class=\"fa fa-circle successful-hosts-color\"></i> Successful</p>\n" +
         "<p><i class=\"fa fa-circle changed-hosts-color\"></i> Changed</p>\n" +
         "<p><i class=\"fa fa-circle unreachable-hosts-color\"></i> Unreachable</p>\n" +
@@ -469,7 +481,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                 });
         }
         if (data.cloud_credential) {
-            url = GetBasePath('credentials') + data.credential + '/';
+            url = GetBasePath('credentials') + data.cloud_credential + '/';
             Rest.setUrl(url);
             Rest.get()
                 .success( function(data) {
@@ -483,7 +495,6 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         }
     });
 
-
     if (scope.removeLoadJob) {
         scope.removeLoadJob();
     }
@@ -493,6 +504,7 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
         Rest.setUrl(GetBasePath('jobs') + job_id + '/');
         Rest.get()
             .success(function(data) {
+                var i;
                 scope.job = data;
                 scope.job_template_name = data.name;
                 scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
@@ -500,7 +512,8 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                 scope.job_template_url = '/#/job_templates/' + data.unified_job_template;
                 scope.inventory_url = (scope.inventory_name && data.inventory) ? '/#/inventories/' + data.inventory : '';
                 scope.project_url = (scope.project_name && data.project) ? '/#/projects/' + data.project : '';
-                scope.job_type = data.job_type;
+                scope.credential_url = (data.credential) ? '/#/credentials/' + data.credential : '';
+                scope.cloud_credential_url = (data.cloud_credential) ? '/#/credentials/' + data.cloud_credential : '';
                 scope.playbook = data.playbook;
                 scope.credential = data.credential;
                 scope.cloud_credential = data.cloud_credential;
@@ -508,6 +521,19 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
                 scope.limit = data.limit;
                 scope.verbosity = data.verbosity;
                 scope.job_tags = data.job_tags;
+                scope.variables = ParseVariableString(data.extra_vars);
+
+                for (i=0; i < verbosity_options.length; i++) {
+                    if (verbosity_options[i].value === data.verbosity) {
+                        scope.verbosity = verbosity_options[i].label;
+                    }
+                }
+
+                for (i=0; i < job_type_options.length; i++) {
+                    if (job_type_options[i].value === data.job_type) {
+                        scope.job_type = job_type_options[i].label;
+                    }
+                }
 
                 // In the case the job is already completed, or an error already happened,
                 // populate scope.job_status info
@@ -1124,5 +1150,5 @@ function JobDetailController ($location, $rootScope, $scope, $compile, $routePar
 JobDetailController.$inject = [ '$location', '$rootScope', '$scope', '$compile', '$routeParams', '$log', 'ClearScope', 'Breadcrumbs', 'LoadBreadCrumbs', 'GetBasePath',
     'Wait', 'Rest', 'ProcessErrors', 'SelectPlay', 'SelectTask', 'Socket', 'GetElapsed', 'DrawGraph', 'LoadHostSummary', 'ReloadHostSummaryList',
     'JobIsFinished', 'SetTaskStyles', 'DigestEvent', 'UpdateDOM', 'EventViewer', 'DeleteJob', 'PlaybookRun', 'HostEventsViewer', 'LoadPlays', 'LoadTasks',
-    'LoadHosts', 'HostsEdit'
+    'LoadHosts', 'HostsEdit', 'ParseVariableString'
 ];

awx/ui/static/less/job-details.less

@@ -506,6 +506,18 @@
         font-weight: bold;
     }
 
+    #pre-formatted-variables {
+        border-radius: 4px;
+        border: 1px solid @well-border;
+        overflow: auto;
+        white-space: pre;
+        word-break: break-all;
+        word-wrap: break-word;
+        padding: 9.5px;
+        ont-family: Fixed, monospace;
+        max-height: 200px;
+    }
+
     .footer-row {
         height: 20px;
     }

awx/ui/static/partials/job_detail.html

@@ -43,28 +43,80 @@
 
                         <div class="form-group toggle-show" style="display:none;">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Template</label>
-                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ job_template_url }}" aw-tool-tip="Edit the job template" data-placement="top">{{ job_template_name }}</a>
                             </div>
                         </div>
 
+                        <div class="form-group toggle-show" style="display:none;">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Type</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job_type }}</div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                                <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
+                            </div>
+                        </div>
+
                         <div class="form-group toggle-show" style="display:none;">
                             <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Project</label>
-                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
                                 <a href="{{ project_url }}" aw-tool-tip="Edit the project" data-placement="top">{{ project_name }}</a>
                             </div>
                         </div>
 
                         <div class="form-group toggle-show" style="display:none;">
-                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Inventory</label>
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Playbook</label>
-                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9">
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.playbook }}</div>
-                                <a href="{{ inventory_url }}" aw-tool-tip="Edit the inventory" data-placement="top">{{ inventory_name }}</a>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="credential_name">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Machine Credential</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                                <a href="{{ credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ credential_name }}</a>
+                            </div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="cloud_credential_name">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Cloud Credential</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                                <a href="{{ cloud_credential_url }}" aw-tool-tip="Edit the credential" data-placement="top">{{ cloud_credential_name }}</a>
+                            </div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="job.forms">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Forks</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.forks }}</div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="job.limit">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Limit</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.limit }}</div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="job.verbosity">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Verbosity</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ verbosity }}</div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="job.job_tags">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Job Tags</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">{{ job.job_tags }}</div>
+                        </div>
+
+                        <div class="form-group toggle-show" style="display:none;" ng-show="job.extra_vars">
+                            <label class="col-lg-2 col-md-2 col-sm-2 col-xs-3 control-label">Extra Variables</label>
+                            <div class="col-lg-10- col-md-10 col-sm-10 col-xs-9">
+                                <div id="pre-formatted-variables">{{ variables }}</div>
+                                <!-- <pre>{{ variables }}</pre> -->
                             </div>
                         </div>
 
                         <div class="row">
                             <div class="col-sm-12 more-or-less">
-                                <a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more...</a>
+                                <a ng-show="lessStatus" href="" ng-click="toggleLessStatus()">more <i class="fa fa-angle-down"></i></a>
                                 <a ng-show="!lessStatus" href="" ng-click="toggleLessStatus()">less <i class="fa fa-angle-up"></i></a>
                             </div>
                         </div>