Merge pull request #150 from ansible/jlm_414_stdout_revamp

Jlm 414 stdout revamp

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

@@ -876,11 +876,11 @@ export function JobDetailController ($location, $rootScope, $scope, $compile, $r
 
     scope.toggleLessStatus = function() {
         if (!scope.lessStatus) {
-            $('#job-status-form .toggle-show').hide(400);
+            $('#job-status-form .toggle-show').slideUp(200);
             scope.lessStatus = true;
         }
         else {
-            $('#job-status-form .toggle-show').show(400);
+            $('#job-status-form .toggle-show').slideDown(200);
             scope.lessStatus = false;
         }
     };

awx/ui/static/js/controllers/JobStdout.js

@@ -31,6 +31,8 @@ export function JobStdoutController ($location, $log, $rootScope, $scope, $compi
         st,
         direction;
 
+    $scope.isClosed = true;
+
 
     function openSockets() {
         status_socket = Socket({
@@ -152,12 +154,39 @@ export function JobStdoutController ($location, $log, $rootScope, $scope, $compi
         }
     });
 
+    $scope.toggleClosedStatus = function() {
+        if (!$scope.isClosed) {
+            $('.StandardOutDetails-detailRow--closable').slideUp(200);
+            $scope.isClosed = true;
+        }
+        else {
+            $('.StandardOutDetails-detailRow--closable').slideDown(200);
+            $scope.isClosed = false;
+        }
+    };
+
     // Note: could be ad_hoc_commands or jobs
     var jobType = $location.path().replace(/^\//, '').split('/')[0];
     Rest.setUrl(GetBasePath(jobType) + job_id + '/');
     Rest.get()
         .success(function(data) {
             $scope.job = data;
+            $scope.job_template_name = data.name;
+            $scope.project_name = (data.summary_fields.project) ? data.summary_fields.project.name : '';
+            $scope.inventory_name = (data.summary_fields.inventory) ? data.summary_fields.inventory.name : '';
+            $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.credential_name = (data.summary_fields.credential) ? data.summary_fields.credential.name : '';
+            $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;
+            $scope.forks = data.forks;
+            $scope.limit = data.limit;
+            $scope.verbosity = data.verbosity;
+            $scope.job_tags = data.job_tags;
             stdout_url = data.related.stdout;
             if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
                 live_event_processing = false;

awx/ui/static/js/helpers/EventViewer.js

@@ -31,7 +31,7 @@ export default
                 }
                 scope.removeShowNextEvent = scope.$on('ShowNextEvent', function(e, data, show_event) {
                     scope.events = data;
-                    $('#event-next-spinner').hide(400);
+                    $('#event-next-spinner').slideUp(200);
                     if (show_event === 'prev') {
                         showEvent(scope.events.length - 1);
                     }

awx/ui/static/js/helpers/Jobs.js

@@ -106,8 +106,14 @@ export default
                         else {
                             $location.url('/jobs/' + job.id);
                         }
-                    }
+                    } else if (job.type === 'ad_hoc_command') {
-                    else {
+                        if(scope.$parent.portalMode===true){
+                            $window.open('/#/ad_hoc_commands/' + job.id, '_blank');
+                        }
+                        else {
+                            $location.url('/ad_hoc_commands/' + job.id);
+                        }
+                    } else {
                         LogViewer({
                             scope: scope,
                             url: job.url

awx/ui/static/js/jobs/standard-out-details.block.less

@@ -0,0 +1,28 @@
+/** @define StandardOutDetails */
+
+// Some of these are left empty as a helpful measure so that you can see how the new
+// SuitCSS styling should work.  They can be removed once we've done more
+// SuitCSS
+about
+.StandardOutDetails {
+}
+
+.StandardOutDetails-detailRow {
+    margin-bottom: 15px;
+}
+
+.StandardOutDetails-detailRow--closable {
+    display: none;
+}
+
+.StandardOutDetails-detailLabel {
+}
+
+.StandardOutDetails-detailContent {
+}
+
+.StandardOutDetails-closedToggle {
+}
+
+.StandardOutDetails-closedToggleLink {
+}

awx/ui/static/partials/job_stdout_adhoc.html

@@ -25,21 +25,136 @@
             </div>
         </div>
 
-        <div class="row">
+        <div class="form-horizontal StandardOutDetails"
-            <div class="col-md-12">
+            role="form" id="job-status-form">
-                <div id="job-status">
+            <div class="form-group StandardOutDetails-detailRow">
-                    <label>Job Status</label>
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Status</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">
                     <i class="fa icon-job-{{ job.status }}"></i> {{ job.status }}
                 </div>
-            <div class="scroll-spinner" id="stdoutMoreRowsTop">
-                <i class="fa fa-cog fa-spin"></i>
             </div>
-            <div id="pre-container" class="body_background
+
-                body_foreground pre mono-space"
+            <div <div class="form-group StandardOutDetails-detailRow
-                lr-infinite-scroll="stdOutScrollToTop"
+                StandardOutDetails-detailRow--closable"
-                scroll-threshold="300" data-direction="up" time-threshold="500">
+                ng-show="job.started">
-                <div id="pre-container-content"></div>
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Timing</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">
+                    <div ng-show="job.started" id="started-time">
+                        Started &nbsp;{{ job.started | date:'MM/dd/yy HH:mm:ss' }}
+                    </div>
+                    <div ng-show="job.finished" id="finished-time">
+                        Finished &nbsp;{{ job.finished | date:'MM/dd/yy HH:mm:ss' }}
+                    </div>
+                    <div ng-show="job.finished" id="elapsed-time">
+                        Elapsed &nbsp;{{ job.elapsed }} seconds
+                    </div>
+                </div>
             </div>
+
+            <div <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="job.module_name">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Module Name</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">{{ job.module_name }}
+                </div>
+            </div>
+
+            <div <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="job.module_args">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Module Args</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent mono-space">{{ job.module_args }}
+                </div>
+            </div>
+
+            <div <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="inventory_name">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Inventory</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                StandardOutDetails-detailContent">
+                    <a href="{{ inventory_url }}"
+                        aw-tool-tip="Edit the inventory"
+                        data-placement="top">{{ inventory_name }}</a>
+                </div>
+            </div>
+
+            <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="credential_name">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Credential</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">
+                    <a href="{{ credential_url }}"
+                        aw-tool-tip="Edit the inventory"
+                        data-placement="top">{{ credential_name }}</a>
+                </div>
+            </div>
+
+            <!-- since zero is a falsy value, you need ng-show such that
+            the number is >= 0 -->
+            <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="forks >= 0">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Forks</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">{{ forks }}</div>
+            </div>
+
+            <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="limit">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Limit</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">{{ limit }}</div>
+            </div>
+
+            <!-- since zero is a falsy value, you need ng-show such that
+            the number is >= 0 -->
+            <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="verbosity >= 0">
+                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                    StandardOutDetails-detailLabel">Verbosity</label>
+                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12
+                    StandardOutDetails-detailContent">{{ verbosity }}</div>
+            </div>
+
+            <div class="form-group StandardOutDetails-closedToggle">
+                <a class="col-sm-12 StandardOutDetails-closedToggleLink"
+                    ng-show="isClosed" href="javascript:;"
+                    ng-click="toggleClosedStatus()"> more details <i class="fa fa-angle-down"></i>
+                </a>
+                <a class="col-sm-12 StandardOutDetails-closedToggleLink"
+                    ng-show="!isClosed" href="javascript:;"
+                    ng-click="toggleClosedStatus()"> less details <i class="fa fa-angle-up"></i>
+                </a>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-12">
+                <div class="scroll-spinner" id="stdoutMoreRowsTop">
+                    <i class="fa fa-cog fa-spin"></i>
+                </div>
+                <div id="pre-container" class="body_background
+                    body_foreground pre mono-space"
+                    lr-infinite-scroll="stdOutScrollToTop"
+                    scroll-threshold="300" data-direction="up" time-threshold="500">
+                    <div id="pre-container-content"></div>
+                </div>
             </div>
             <div class="scroll-spinner" id="stdoutMoreRowsBottom">
                 <i class="fa fa-cog fa-spin"></i>