From 73d80f7179041b7e6bfa1804f86e93d7b6db4d17 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Mon, 7 Mar 2016 10:32:30 -0500
Subject: [PATCH 1/2] Leveraging CodeMirror to display extra variables for
 management jobs

---
 .../standard-out-management-jobs.partial.html        |  9 ++++-----
 .../src/standard-out/standard-out.controller.js      | 12 ++++++++++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
index 3e035ddab5..73d2159fac 100644
--- a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
+++ b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
@@ -49,13 +49,12 @@
                         </div>
                     </div>
 
-                    <!-- TODO: figure out how to show the extra vars on different rows like the mockup -->
-
                     <div class="StandardOut-detailsRow" ng-show="job.extra_vars">
                         <div class="StandardOut-detailsLabel">EXTRA VARS</div>
-                        <div class="StandardOut-detailsContent">
-                            {{ job.extra_vars }}
-                        </div>
+                    </div>
+
+                    <div ng-show="job.extra_vars">
+                        <textarea rows="6" ng-model="variables" name="variables" class="StandardOut-extraVars" id="pre-formatted-variables"></textarea>
                     </div>
 
                 </div>
diff --git a/awx/ui/client/src/standard-out/standard-out.controller.js b/awx/ui/client/src/standard-out/standard-out.controller.js
index 152d2a8a5d..83345d7132 100644
--- a/awx/ui/client/src/standard-out/standard-out.controller.js
+++ b/awx/ui/client/src/standard-out/standard-out.controller.js
@@ -11,7 +11,7 @@
 */
 
 
-export function JobStdoutController ($rootScope, $scope, $state, $stateParams, ClearScope, GetBasePath, Rest, ProcessErrors, Empty, GetChoices, LookUpName) {
+export function JobStdoutController ($rootScope, $scope, $state, $stateParams, ClearScope, GetBasePath, Rest, ProcessErrors, Empty, GetChoices, LookUpName, ParseTypeChange, ParseVariableString) {
 
     ClearScope();
 
@@ -36,6 +36,9 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
         // timestamp as well as the run time.
     });
 
+    // Set the parse type so that CodeMirror knows how to display extra params YAML/JSON
+    $scope.parseType = 'yaml';
+
     // Go out and get the job details based on the job type.  jobType gets defined
     // in the data block of the route declaration for each of the different types
     // of stdout jobs.
@@ -132,6 +135,11 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
                 });
             }
 
+            if (!Empty(data.extra_vars)) {
+                $scope.variables = ParseVariableString(data.extra_vars);
+                ParseTypeChange({ scope: $scope, field_id: 'pre-formatted-variables' });
+            }
+
             // If the job isn't running we want to clear out the interval that goes out and checks for stdout updates.
             // This interval is defined in the standard out log directive controller.
             if (data.status === 'successful' || data.status === 'failed' || data.status === 'error' || data.status === 'canceled') {
@@ -158,4 +166,4 @@ export function JobStdoutController ($rootScope, $scope, $state, $stateParams, C
 
 }
 
-JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName'];
+JobStdoutController.$inject = [ '$rootScope', '$scope', '$state', '$stateParams', 'ClearScope', 'GetBasePath', 'Rest', 'ProcessErrors', 'Empty', 'GetChoices', 'LookUpName', 'ParseTypeChange', 'ParseVariableString'];

From 976d24207597037f0b0db0acc071a03f21bc0d24 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Mon, 7 Mar 2016 11:00:07 -0500
Subject: [PATCH 2/2] Reduced the space between the extra vars label and the
 code mirror instance down to 10px.

---
 .../management-jobs/standard-out-management-jobs.partial.html | 2 +-
 awx/ui/client/src/standard-out/standard-out.block.less        | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
index 73d2159fac..fec1a7b394 100644
--- a/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
+++ b/awx/ui/client/src/standard-out/management-jobs/standard-out-management-jobs.partial.html
@@ -49,7 +49,7 @@
                         </div>
                     </div>
 
-                    <div class="StandardOut-detailsRow" ng-show="job.extra_vars">
+                    <div class="StandardOut-detailsRow--extraVars" ng-show="job.extra_vars">
                         <div class="StandardOut-detailsLabel">EXTRA VARS</div>
                     </div>
 
diff --git a/awx/ui/client/src/standard-out/standard-out.block.less b/awx/ui/client/src/standard-out/standard-out.block.less
index 8d0e8a0219..86621c3536 100644
--- a/awx/ui/client/src/standard-out/standard-out.block.less
+++ b/awx/ui/client/src/standard-out/standard-out.block.less
@@ -46,6 +46,10 @@
     margin-bottom: 20px;
 }
 
+.StandardOut-detailsRow--extraVars {
+    margin-bottom: 10px;
+}
+
 .StandardOut-detailsLabel {
     width: 130px;
     flex: 0 0 130px;