Merge pull request #3182 from kialam/artifacts-code-mirror

Artifacts Code Mirror Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]
2026-01-12 18:40:01 -03:30 · 2019-02-07 16:46:20 +00:00 · 2019-02-07 16:46:20 +00:00 · 463c4c1f7e
commit 463c4c1f7e
parent d99c9c8dce 76a16b329e
11 changed files with 79 additions and 22 deletions
--- 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%;
 }

--- 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);
--- 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">
--- 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'),
--- 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 });
--- 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: '='
        }
    };
--- 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') }}"
--- 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: '&'
        }
    };
--- 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">
--- 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;
--- 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>