Merge pull request #150 from ansible/jlm_414_stdout_revamp

Jlm 414 stdout revamp
2026-01-14 19:30:39 -03:30 · 2015-05-07 12:03:42 -04:00 · 2015-05-07 12:03:42 -04:00 · 7ad1b45d00
commit 7ad1b45d00
parent aff63d9480 6103f281fd
6 changed files with 194 additions and 16 deletions
--- a/awx/ui/static/js/controllers/JobDetail.js
+++ b/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;
        }
    };
--- a/awx/ui/static/js/controllers/JobStdout.js
+++ b/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;
--- a/awx/ui/static/js/helpers/EventViewer.js
+++ b/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);
                    }
--- a/awx/ui/static/js/helpers/Jobs.js
+++ b/awx/ui/static/js/helpers/Jobs.js
@ -106,8 +106,14 @@ export default
                        else {
                            $location.url('/jobs/' + job.id);
                        }
-                    }
-                    else {
+                    } else if (job.type === 'ad_hoc_command') {
+                        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
--- a/awx/ui/static/js/jobs/standard-out-details.block.less
+++ b/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 {
+}
--- a/awx/ui/static/partials/job_stdout_adhoc.html
+++ b/awx/ui/static/partials/job_stdout_adhoc.html
@ -25,21 +25,136 @@
            </div>
        </div>

-        <div class="row">
-            <div class="col-md-12">
-                <div id="job-status">
-                    <label>Job Status</label>
+        <div class="form-horizontal StandardOutDetails"
+            role="form" id="job-status-form">
+            <div class="form-group StandardOutDetails-detailRow">
+                <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"
-                lr-infinite-scroll="stdOutScrollToTop"
-                scroll-threshold="300" data-direction="up" time-threshold="500">
-                <div id="pre-container-content"></div>
+
+            <div <div class="form-group StandardOutDetails-detailRow
+                StandardOutDetails-detailRow--closable"
+                ng-show="job.started">
+                <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>