From 8f5a197cd9420c2d2dc15f7aa83b32d665c8bef3 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Fri, 9 Oct 2015 14:33:47 -0400
Subject: [PATCH] made standard out container fixed height on standard out
 views

---
 awx/ui/client/src/controllers/JobStdout.js    |   2 +
 awx/ui/client/src/partials/job_stdout.html    |  63 ++--
 .../client/src/partials/job_stdout_adhoc.html | 338 +++++++++---------
 3 files changed, 198 insertions(+), 205 deletions(-)

diff --git a/awx/ui/client/src/controllers/JobStdout.js b/awx/ui/client/src/controllers/JobStdout.js
index dee0dc1cce..3e1857be44 100644
--- a/awx/ui/client/src/controllers/JobStdout.js
+++ b/awx/ui/client/src/controllers/JobStdout.js
@@ -158,6 +158,8 @@ export function JobStdoutController ($location, $log, $rootScope, $scope, $compi
         }
     };
 
+    $(".StandardOut").height($("body").height() - 60);
+
     // Note: could be ad_hoc_commands or jobs
     var jobType = $location.path().replace(/^\//, '').split('/')[0];
     Rest.setUrl(GetBasePath(jobType) + job_id + '/');
diff --git a/awx/ui/client/src/partials/job_stdout.html b/awx/ui/client/src/partials/job_stdout.html
index 9ec92b6706..7175cc8608 100644
--- a/awx/ui/client/src/partials/job_stdout.html
+++ b/awx/ui/client/src/partials/job_stdout.html
@@ -1,47 +1,42 @@
 <div class="tab-pane" id="jobs-stdout">
     <div ng-cloak id="htmlTemplate">
 
-        <div class="row">
-            <div id="breadcrumb-container" class="col-md-6" style="position: relative;">
-                <ul class="ansible-breadcrumb" id="breadcrumb-list">
-                    <li><a href="/#/jobs">Jobs</a></li>
-                    <li><a href="/#/jobs/{{ job.id }}">{{ job.id }} - {{ job.name }}</a></li>
-                    <li class="active"><a href="">Standard Out</a></li>
-                </ul>
-            </div>
-            <div id="home-list-actions" class="list-actions pull-right col-md-6">
-                <button type="button" class="btn btn-xs btn-primary ng-hide" ng-click="refresh()" id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" ng-show="socketStatus == 'error'" data-original-title="" title=""><i class="fa fa-refresh fa-lg"></i> </button></div>
+        <div class="StandardOut">
+        <div class="StandardOut-heading">
+
+            <div class="row StandardOut-breadcrumbs">
+                <div id="breadcrumb-container" class="col-md-6" style="position: relative;">
+                    <ul class="ansible-breadcrumb" id="breadcrumb-list">
+                        <li><a href="/#/jobs">Jobs</a></li>
+                        <li><a href="/#/jobs/{{ job.id }}">{{ job.id }} - {{ job.name }}</a></li>
+                        <li class="active"><a href="">Standard Out</a></li>
+                    </ul>
+                </div>
+                <div id="home-list-actions" class="list-actions pull-right col-md-6">
+                    <button type="button" class="btn btn-xs btn-primary ng-hide" ng-click="refresh()" id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" ng-show="socketStatus == 'error'" data-original-title="" title=""><i class="fa fa-refresh fa-lg"></i> </button></div>
+                </div>
+            <div class="row StandardOut-form">
+                <div class="col-md-12">
+                    <div id="job-status"><label>Job Status</label> <i class="fa icon-job-{{ job.status }}"></i> {{ job.status }}</div>
+                </div>
             </div>
         </div>
-        <div class="row">
-            <div class="col-md-12">
-                <div id="job-status"><label>Job Status</label> <i class="fa icon-job-{{ job.status }}"></i> {{ job.status }}</div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="panel panel-default job-stdout-panel">
-              <div class="panel-heading">
+            <div class="panel panel-default job-stdout-panel StandardOut-panel">
+              <div class="panel-heading StandardOut-panelHeading">
                 <h3 class="panel-title">Standard Output
                 <a href="/api/v1/jobs/{{ job.id }}/stdout?format=txt_download&token={{ token }}" class="btn btn-primary btn-xs DownloadStandardOut DownloadStandardOut--onStandardOutPage" id="download-stdout-button" type="button" aw-tool-tip="Download standard out as a .txt file" data-placement="top" ng-show="job.status === 'cancelled' || job.status === 'failed' || job.status === 'error' || job.status === 'successful'">
                         <i class="fa fa-download DownloadStandardOut-icon DownloadStandardOut-icon--withText"></i>Download
                 </a>
               </div>
-              <div class="panel-body stdout-panel-body">
-                  <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>
-                      </div>
+              <div class="panel-body stdout-panel-body StandardOut-panelBody">
+                  <div id="pre-container" class="body_background
+                      body_foreground pre mono-space StandardOut-preContainer"
+                      lr-infinite-scroll="stdOutScrollToTop"
+                      scroll-threshold="300" data-direction="up" time-threshold="500">
+                      <div id="pre-container-content"  class="StandardOut-preContent"></div>
+                  </div>
+                  <div class="scroll-spinner" id="stdoutMoreRowsBottom">
+                      <i class="fa fa-cog fa-spin"></i>
                   </div>
               </div>
             </div>
diff --git a/awx/ui/client/src/partials/job_stdout_adhoc.html b/awx/ui/client/src/partials/job_stdout_adhoc.html
index 52b51565d7..f4e48648f8 100644
--- a/awx/ui/client/src/partials/job_stdout_adhoc.html
+++ b/awx/ui/client/src/partials/job_stdout_adhoc.html
@@ -1,187 +1,183 @@
 <div class="tab-pane" id="jobs-stdout">
     <div ng-cloak id="htmlTemplate">
-
-        <div class="row">
-            <div id="breadcrumb-container" class="col-md-6"
-                style="position: relative;">
-                <ul class="ansible-breadcrumb" id="breadcrumb-list">
-                    <li><a href="/#/jobs">Jobs</a></li>
-                    <li class="active">
-                        <a href="/#/ad_hoc_commands/{{ job.id }}">
-                            {{ job.id }} - {{ job.name }}
-                        </a>
-                    </li>
-                </ul>
+    <div class="StandardOut">
+        <div class="row StandardOut-heading">
+            <div class="row StandardOut-breadcrumbs">
+                <div id="breadcrumb-container" class="col-md-6"
+                    style="position: relative;">
+                    <ul class="ansible-breadcrumb" id="breadcrumb-list">
+                        <li><a href="/#/jobs">Jobs</a></li>
+                        <li class="active">
+                            <a href="/#/ad_hoc_commands/{{ job.id }}">
+                                {{ job.id }} - {{ job.name }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div id="home-list-actions"
+                    class="list-actions pull-right col-md-6">
+                    <button type="button" class="btn btn-xs btn-primary ng-hide"
+                        ng-click="refresh()" id="refresh_btn"
+                        aw-tool-tip="Refresh the page"
+                        data-placement="top" ng-show="socketStatus == 'error'"
+                        data-original-title="" title="">
+                        <i class="fa fa-refresh fa-lg"></i>
+                    </button>
+                </div>
             </div>
-            <div id="home-list-actions"
-                class="list-actions pull-right col-md-6">
-                <button type="button" class="btn btn-xs btn-primary ng-hide"
-                    ng-click="refresh()" id="refresh_btn"
-                    aw-tool-tip="Refresh the page"
-                    data-placement="top" ng-show="socketStatus == 'error'"
-                    data-original-title="" title="">
-                    <i class="fa fa-refresh fa-lg"></i>
-                </button>
+
+            <div class="StandardOut-form 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>
+
+                <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="The inventory this command ran on."
+                            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="The credential used to run this command."
+                            data-placement="top">{{ credential_name }}</a>
+                    </div>
+                </div>
+
+                <div class="form-group StandardOutDetails-detailRow
+                    StandardOutDetails-detailRow--closable"
+                    ng-show="created_by">
+                    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
+                        StandardOutDetails-detailContent">Launched By</label>
+                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9
+                        StandardOutDetails-detailContent">
+                        <a href="/#/users/{{ created_by.id }}"
+                            aw-tool-tip="The user who ran this command."
+                            data-placement="top">{{ created_by.username }}</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 <i class="fa fa-angle-down"></i>
+                    </a>
+                    <a class="col-sm-12 StandardOutDetails-closedToggleLink"
+                        ng-show="!isClosed" href="javascript:;"
+                        ng-click="toggleClosedStatus()"> less <i class="fa fa-angle-up"></i>
+                    </a>
+                </div>
             </div>
         </div>
 
-        <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>
-
-            <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="The inventory this command ran on."
-                        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="The credential used to run this command."
-                        data-placement="top">{{ credential_name }}</a>
-                </div>
-            </div>
-
-            <div class="form-group StandardOutDetails-detailRow
-                StandardOutDetails-detailRow--closable"
-                ng-show="created_by">
-                <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12
-                    StandardOutDetails-detailContent">Launched By</label>
-                <div class="col-lg-10 col-md-10 col-sm-10 col-xs-9
-                    StandardOutDetails-detailContent">
-                    <a href="/#/users/{{ created_by.id }}"
-                        aw-tool-tip="The user who ran this command."
-                        data-placement="top">{{ created_by.username }}</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 <i class="fa fa-angle-down"></i>
-                </a>
-                <a class="col-sm-12 StandardOutDetails-closedToggleLink"
-                    ng-show="!isClosed" href="javascript:;"
-                    ng-click="toggleClosedStatus()"> less <i class="fa fa-angle-up"></i>
-                </a>
-            </div>
-        </div>
-
-        <div class="panel panel-default">
-          <div class="panel-heading">
+        <div class="panel panel-default StandardOut-panel">
+          <div class="panel-heading StandardOut-panelHeading">
             <h3 class="panel-title">Standard Output
             <a ng-href="/api/v1/ad_hoc_commands/{{ job.id }}/stdout?format=txt_download&token={{ token }}" class="btn btn-primary btn-xs DownloadStandardOut DownloadStandardOut--onStandardOutPage" id="download-stdout-button" type="button" aw-tool-tip="Download standard out as a .txt file" data-placement="top" ng-show="job.status === 'cancelled' || job.status === 'failed' || job.status === 'error' || job.status === 'successful'"><i class="fa fa-download DownloadStandardOut-icon DownloadStandardOut-icon--withText"></i>Download</a>
             </h3>
           </div>
-          <div class="panel-body stdout-panel-body">
-              <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>
-                  </div>
+          <div class="panel-body stdout-panel-body StandardOut-panelBody">
+              <div id="pre-container" class="body_background
+                  body_foreground pre mono-space StandardOut-preContainer"
+                  lr-infinite-scroll="stdOutScrollToTop"
+                  scroll-threshold="300" data-direction="up" time-threshold="500">
+                  <div id="pre-container-content"  class="StandardOut-preContent"></div>
+              </div>
+              <div class="scroll-spinner" id="stdoutMoreRowsBottom">
+                  <i class="fa fa-cog fa-spin"></i>
               </div>
           </div>
         </div>
 
     </div>
+    </div>
 </div>