diff --git a/awx/ui/client/features/output/_index.less b/awx/ui/client/features/output/_index.less
index 9450862bc8..8d5ac05b31 100644
--- a/awx/ui/client/features/output/_index.less
+++ b/awx/ui/client/features/output/_index.less
@@ -381,7 +381,7 @@
     flex-wrap: wrap;
 }
 
-.JobResults-resultRow #cm-variables-container {
+.JobResults-resultRow div[id$='variables-container'] {
     width: 100%;
 }
 
diff --git a/awx/ui/client/features/output/details.component.js b/awx/ui/client/features/output/details.component.js
index 896aea0a28..79b04eb8f8 100644
--- a/awx/ui/client/features/output/details.component.js
+++ b/awx/ui/client/features/output/details.component.js
@@ -572,8 +572,25 @@ function getExtraVarsDetails () {
     const tooltip = strings.get('tooltips.EXTRA_VARS');
     const value = parse(extraVars);
     const disabled = true;
+    const name = 'extra_vars';
 
-    return { label, tooltip, value, disabled };
+    return { label, tooltip, value, disabled, name };
+}
+
+function getArtifactsDetails (val) {
+    const artifacts = val || resource.model.get('artifacts');
+
+    if (!artifacts || artifacts === '{}') {
+        return null;
+    }
+
+    const label = strings.get('labels.ARTIFACTS');
+    const tooltip = strings.get('tooltips.ARTIFACTS');
+    const value = parse(artifacts);
+    const disabled = true;
+    const name = 'artifacts';
+
+    return { label, tooltip, value, disabled, name };
 }
 
 function getLabelDetails () {
@@ -781,6 +798,7 @@ function JobDetailsController (
         vm.jobTags = getJobTagDetails();
         vm.skipTags = getSkipTagDetails();
         vm.extraVars = getExtraVarsDetails();
+        vm.artifacts = getArtifactsDetails();
         vm.labels = getLabelDetails();
         vm.inventorySource = getInventorySourceDetails();
         vm.overwrite = getOverwriteDetails();
@@ -805,6 +823,7 @@ function JobDetailsController (
             scm,
             inventoryScm,
             environment,
+            artifacts,
             executionNode
         }) => {
             vm.started = getStartDetails(started);
@@ -812,6 +831,7 @@ function JobDetailsController (
             vm.projectUpdate = getProjectUpdateDetails(scm.id);
             vm.projectStatus = getProjectStatusDetails(scm.status);
             vm.environment = getEnvironmentDetails(environment);
+            vm.artifacts = getArtifactsDetails(artifacts);
             vm.executionNode = getExecutionNodeDetails(executionNode);
             vm.inventoryScm = getInventoryScmDetails(inventoryScm.id, inventoryScm.status);
             vm.status = getStatusDetails(status);
diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index b73b0c943e..0e7cc3620a 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -332,10 +332,22 @@
     ng-if="vm.extraVars"
     variables="{{ vm.extraVars.value }}"
     tooltip="{{ vm.extraVars.tooltip }}"
-    label="{{ vm.extraVars.label}}"
+    label="{{ vm.extraVars.label }}"
+    name="{{ vm.extraVars.name }}"
     disabled="{{ vm.extraVars.disabled }}">
 </at-code-mirror>
 
+<!-- ARTIFACTS DETAIL -->
+<at-code-mirror
+    class="JobResults-resultRow"
+    ng-if="vm.artifacts"
+    variables="{{ vm.artifacts.value }}"
+    tooltip="{{ vm.artifacts.tooltip }}"
+    label="{{ vm.artifacts.label }}"
+    name="{{ vm.artifacts.name }}"
+    disabled="{{ vm.artifacts.disabled }}">
+</at-code-mirror>
+
 <!-- LABELS DETAIL -->
 <div class="JobResults-resultRow" ng-show="vm.labels">
     <div class="JobResults-resultRow">
diff --git a/awx/ui/client/features/output/output.strings.js b/awx/ui/client/features/output/output.strings.js
index 67510d10d7..b47eff0ace 100644
--- a/awx/ui/client/features/output/output.strings.js
+++ b/awx/ui/client/features/output/output.strings.js
@@ -14,6 +14,7 @@ function OutputStrings (BaseString) {
     };
 
     ns.tooltips = {
+        ARTIFACTS: t.s('Read-only view of artifacts added to the job template'),
         CANCEL: t.s('Cancel'),
         COLLAPSE_OUTPUT: t.s('Collapse Output'),
         DELETE: t.s('Delete'),
@@ -49,6 +50,7 @@ function OutputStrings (BaseString) {
     };
 
     ns.labels = {
+        ARTIFACTS: t.s('Artifacts'),
         CREDENTIAL: t.s('Credential'),
         ENVIRONMENT: t.s('Environment'),
         EXECUTION_NODE: t.s('Execution Node'),
diff --git a/awx/ui/client/features/output/status.service.js b/awx/ui/client/features/output/status.service.js
index 17c3655a4f..19cad5b540 100644
--- a/awx/ui/client/features/output/status.service.js
+++ b/awx/ui/client/features/output/status.service.js
@@ -40,6 +40,7 @@ function JobStatusService (moment, message) {
             started: model.get('started'),
             finished: model.get('finished'),
             environment: model.get('custom_virtualenv'),
+            artifacts: model.get('artifacts'),
             scm: {
                 id: model.get('summary_fields.project_update.id'),
                 status: model.get('summary_fields.project_update.status')
@@ -279,6 +280,12 @@ function JobStatusService (moment, message) {
         this.state.environment = env;
     };
 
+    this.setArtifacts = val => {
+        if (!val) return;
+
+        this.state.artifacts = val;
+    };
+
     this.setExecutionNode = node => {
         if (!node) return;
 
@@ -327,6 +334,7 @@ function JobStatusService (moment, message) {
                 this.setStarted(model.get('started'));
                 this.setJobStatus(model.get('status'));
                 this.setEnvironment(model.get('custom_virtualenv'));
+                this.setArtifacts(model.get('artifacts'));
                 this.setExecutionNode(model.get('execution_node'));
 
                 this.initHostStatusCounts({ model });
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
index 0c3e908679..2783f0eaa6 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.directive.js
@@ -1,9 +1,7 @@
 const templateUrl = require('~components/code-mirror/code-mirror.partial.html');
 
-const CodeMirrorID = 'codemirror-extra-vars';
 const CodeMirrorModalID = '#CodeMirror-modal';
 const ParseVariable = 'parseType';
-const CodeMirrorVar = 'variables';
 const ParseType = 'yaml';
 
 function atCodeMirrorController (
@@ -13,19 +11,20 @@ function atCodeMirrorController (
     ParseVariableString
 ) {
     const vm = this;
-    function init (vars) {
+    const variables = `${$scope.name}_variables`;
+    function init (vars, name) {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        $scope.variables = ParseVariableString(_.cloneDeep(vars));
+        $scope[variables] = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
         const options = {
             scope: $scope,
-            variable: CodeMirrorVar,
+            variable: variables,
             parse_variable: ParseVariable,
-            field_id: CodeMirrorID,
+            field_id: name,
             readOnly: $scope.disabled
         };
         ParseTypeChange(options);
@@ -42,6 +41,9 @@ function atCodeMirrorController (
         vm.expanded = false;
     }
 
+    vm.variables = variables;
+    vm.name = $scope.name;
+    vm.modalName = `${vm.name}_modal`;
     vm.strings = strings;
     vm.expanded = false;
     vm.close = close;
@@ -49,7 +51,9 @@ function atCodeMirrorController (
     if ($scope.init) {
         $scope.init = init;
     }
-    init($scope.variables);
+    angular.element(document).ready(() => {
+        init($scope.variables, $scope.name);
+    });
 }
 
 atCodeMirrorController.$inject = [
@@ -74,6 +78,7 @@ function atCodeMirrorTextarea () {
             tooltip: '@',
             tooltipPlacement: '@',
             variables: '@',
+            name: '@',
             init: '='
         }
     };
diff --git a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
index 98349fd3a3..7d149af226 100644
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@@ -23,7 +23,7 @@
                             type="radio"
                             value="yaml"
                             ng-model="parseType"
-                            ng-change="parseTypeChange('parseType', 'variables')"
+                            ng-change="parseTypeChange('parseType', vm.variables)"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.YAML')}}
                     </label>
@@ -32,7 +32,7 @@
                             type="radio"
                             value="json"
                             ng-model="parseType"
-                            ng-change="parseTypeChange('parseType', 'variables')"
+                            ng-change="parseTypeChange('parseType', vm.variables)"
                             class="ng-pristine ng-untouched ng-valid ng-not-empty">
                                 {{ vm.strings.get('label.JSON')}}
                     </label>
@@ -47,9 +47,10 @@
         ng-model="variables"
         name="variables"
         class="form-control Form-textArea"
-        id="codemirror-extra-vars">
+        id="{{ vm.name }}">
     </textarea>
     <at-code-mirror-modal
+        name="{{ vm.modalName }}"
         ng-if="vm.expanded"
         variables="{{ variables }}"
         tooltip="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
index 317fe2749e..4d51a7b8c4 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.directive.js
@@ -1,9 +1,7 @@
 const templateUrl = require('~components/code-mirror/modal/code-mirror-modal.partial.html');
 
 const CodeMirrorModalID = '#CodeMirror-modal';
-const CodeMirrorID = 'codemirror-extra-vars-modal';
 const ParseVariable = 'parseType';
-const CodeMirrorVar = 'extra_variables';
 const ParseType = 'yaml';
 const ModalHeight = '#CodeMirror-modal .modal-dialog';
 const ModalHeader = '.atCodeMirror-label';
@@ -16,6 +14,7 @@ function atCodeMirrorModalController (
     ParseVariableString
 ) {
     const vm = this;
+    const variables = `${$scope.name}_variables`;
     function resize () {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
@@ -29,24 +28,24 @@ function atCodeMirrorModalController (
     }
 
     function toggle () {
-        $scope.parseTypeChange('parseType', 'extra_variables');
+        $scope.parseTypeChange('parseType', variables);
         setTimeout(resize, 0);
     }
 
-    function init () {
+    function init (vars, name) {
         if ($scope.disabled === 'true') {
             $scope.disabled = true;
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
         $(CodeMirrorModalID).modal('show');
-        $scope.extra_variables = ParseVariableString(_.cloneDeep($scope.variables));
+        $scope[variables] = ParseVariableString(_.cloneDeep(vars));
         $scope.parseType = ParseType;
         const options = {
             scope: $scope,
-            variable: CodeMirrorVar,
+            variable: variables,
             parse_variable: ParseVariable,
-            field_id: CodeMirrorID,
+            field_id: name,
             readOnly: $scope.disabled
         };
         ParseTypeChange(options);
@@ -59,9 +58,16 @@ function atCodeMirrorModalController (
         $(`${CodeMirrorModalID} .modal-dialog`).on('resize', resize);
     }
 
+    vm.variables = variables;
+    vm.name = $scope.name;
     vm.strings = strings;
     vm.toggle = toggle;
-    init();
+    if ($scope.init) {
+        $scope.init = init;
+    }
+    angular.element(document).ready(() => {
+        init($scope.variables, $scope.name);
+    });
 }
 
 atCodeMirrorModalController.$inject = [
@@ -85,6 +91,7 @@ function atCodeMirrorModal () {
             labelClass: '@',
             tooltip: '@',
             variables: '@',
+            name: '@',
             closeFn: '&'
         }
     };
diff --git a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
index 86dd87b5a5..9785f439f8 100644
--- a/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/modal/code-mirror-modal.partial.html
@@ -58,7 +58,7 @@
                     ng-model="extra_variables"
                     name="extra_variables"
                     class="form-control Form-textArea"
-                    id="codemirror-extra-vars-modal">
+                    id="{{ vm.name }}">
                 </textarea>
             </div>
             <div class="modal-footer">
diff --git a/awx/ui/client/src/workflow-results/workflow-results.controller.js b/awx/ui/client/src/workflow-results/workflow-results.controller.js
index fbbcaf635f..cc7709edad 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.controller.js
+++ b/awx/ui/client/src/workflow-results/workflow-results.controller.js
@@ -169,6 +169,7 @@ export default ['workflowData', 'workflowResultsService', 'workflowDataOptions',
             $scope.parseType = 'yaml';
             $scope.varsTooltip= i18n._('Read only view of extra variables added to the workflow.');
             $scope.varsLabel = i18n._('Extra Variables');
+            $scope.varsName = 'extra_vars';
 
             // Click binding for the expand/collapse button on the standard out log
             $scope.stdoutFullScreen = false;
diff --git a/awx/ui/client/src/workflow-results/workflow-results.partial.html b/awx/ui/client/src/workflow-results/workflow-results.partial.html
index 4e102f740c..03e8ce7334 100644
--- a/awx/ui/client/src/workflow-results/workflow-results.partial.html
+++ b/awx/ui/client/src/workflow-results/workflow-results.partial.html
@@ -224,6 +224,7 @@
                         tooltip="{{ varsTooltip }}"
                         label="{{ varsLabel }}"
                         label-class="WorkflowResults-extraVarsLabel"
+                        name="{{ varsName }}"
                         disabled="disabled">
                     </at-code-mirror>