From 5ada6f6db20e4b9af33f28006e565df4a8876582 Mon Sep 17 00:00:00 2001
From: Jake McDermott <jmcdermott@ansible.com>
Date: Thu, 3 May 2018 14:33:05 -0400
Subject: [PATCH 1/2] show job and skip tags as collapsable label lists

---
 .../features/output/details.directive.js      | 70 ++++++++++++++++---
 .../features/output/details.partial.html      | 66 +++++++++++++----
 2 files changed, 111 insertions(+), 25 deletions(-)

diff --git a/awx/ui/client/features/output/details.directive.js b/awx/ui/client/features/output/details.directive.js
index 36a0d5c16b..4808798ffe 100644
--- a/awx/ui/client/features/output/details.directive.js
+++ b/awx/ui/client/features/output/details.directive.js
@@ -367,25 +367,49 @@ function getInstanceGroupDetails () {
 }
 
 function getJobTagDetails () {
-    const label = 'Job Tags';
-    const value = resource.model.get('job_tags');
+    const tagString = resource.model.get('job_tags');
 
-    if (!value) {
+    let jobTags;
+
+    if (tagString) {
+        jobTags = tagString.split(',');
+    } else {
+        jobTags = [];
+    }
+
+    if (jobTags.length < 1) {
         return null;
     }
 
-    return { label, value };
+    const label = 'Job Tags';
+    const more = false;
+
+    const value = jobTags.map($filter('sanitize'));
+
+    return { label, more, value };
 }
 
 function getSkipTagDetails () {
-    const label = 'Skip Tags';
-    const value = resource.model.get('skip_tags');
+    const tagString = resource.model.get('skip_tags');
 
-    if (!value) {
+    let skipTags;
+
+    if (tagString) {
+        skipTags = tagString.split(',');
+    } else {
+        skipTags = [];
+    }
+
+    if (skipTags.length < 1) {
         return null;
     }
 
-    return { label, value };
+    const label = 'Skip Tags';
+    const more = false;
+
+    const value = skipTags.map($filter('sanitize'));
+
+    return { label, more, value };
 }
 
 function getExtraVarsDetails () {
@@ -428,19 +452,41 @@ function createErrorHandler (path, action) {
 }
 
 const ELEMENT_LABELS = '#job-results-labels';
+const ELEMENT_JOB_TAGS = '#job-results-job-tags';
+const ELEMENT_SKIP_TAGS = '#job-results-skip-tags';
 const ELEMENT_PROMPT_MODAL = '#prompt-modal';
-const LABELS_SLIDE_DISTANCE = 200;
+const TAGS_SLIDE_DISTANCE = 200;
 
 function toggleLabels () {
     if (!this.labels.more) {
-        $(ELEMENT_LABELS).slideUp(LABELS_SLIDE_DISTANCE);
+        $(ELEMENT_LABELS).slideUp(TAGS_SLIDE_DISTANCE);
         this.labels.more = true;
     } else {
-        $(ELEMENT_LABELS).slideDown(LABELS_SLIDE_DISTANCE);
+        $(ELEMENT_LABELS).slideDown(TAGS_SLIDE_DISTANCE);
         this.labels.more = false;
     }
 }
 
+function toggleJobTags () {
+    if (!this.jobTags.more) {
+        $(ELEMENT_JOB_TAGS).slideUp(TAGS_SLIDE_DISTANCE);
+        this.jobTags.more = true;
+    } else {
+        $(ELEMENT_JOB_TAGS).slideDown(TAGS_SLIDE_DISTANCE);
+        this.jobTags.more = false;
+    }
+}
+
+function toggleSkipTags () {
+    if (!this.skipTags.more) {
+        $(ELEMENT_SKIP_TAGS).slideUp(TAGS_SLIDE_DISTANCE);
+        this.skipTags.more = true;
+    } else {
+        $(ELEMENT_SKIP_TAGS).slideDown(TAGS_SLIDE_DISTANCE);
+        this.skipTags.more = false;
+    }
+}
+
 function cancelJob () {
     const actionText = strings.get('cancelJob.CANCEL_JOB');
     const hdr = strings.get('cancelJob.HEADER');
@@ -562,6 +608,8 @@ function AtJobDetailsController (
         vm.cancelJob = cancelJob;
         vm.deleteJob = deleteJob;
         vm.toggleLabels = toggleLabels;
+        vm.toggleJobTags = toggleJobTags;
+        vm.toggleSkipTags = toggleSkipTags;
 
         const observe = (getter, transform, key) => {
             $scope.$watch(getter, value => { vm[key] = transform(value); });
diff --git a/awx/ui/client/features/output/details.partial.html b/awx/ui/client/features/output/details.partial.html
index 5eb4f5b146..65e35278b0 100644
--- a/awx/ui/client/features/output/details.partial.html
+++ b/awx/ui/client/features/output/details.partial.html
@@ -237,18 +237,6 @@
     </div>
 </div>
 
-<!-- TAGS DETAIL -->
-<div class="JobResults-resultRow" ng-if="vm.jobTags">
-    <label class="JobResults-resultRowLabel">{{ vm.jobTags.label }}</label>
-    <div class="JobResults-resultRowText">{{ vm.jobTags.value }}</div>
-</div>
-
-<!-- SKIP TAGS DETAIL -->
-<div class="JobResults-resultRow" ng-if="vm.skipTags">
-    <label class="JobResults-resultRowLabel">{{ vm.skipTags.label }}</label>
-    <div class="JobResults-resultRowText"> {{ vm.skipTags.value }}</div>
-</div>
-
 <!-- EXTRA VARIABLES DETAIL -->
 <at-code-mirror
     class="JobResults-resultRow"
@@ -267,14 +255,14 @@
             ng-show="vm.labels.more"
             href=""
             ng-click="vm.toggleLabels()">
-            <span translate>Labels</span>
+            <span translate>{{ vm.labels.label }}</span>
             <i class="JobResults-expandArrow fa fa-caret-right"></i>
         </a>
         <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
             ng-show="!vm.labels.more"
             href=""
             ng-click="vm.toggleLabels()">
-            <span translate>Labels</span>
+            <span translate>{{ vm.labels.label }}</span>
             <i class="JobResults-expandArrow fa fa-caret-down"></i>
         </a>
     </div>
@@ -284,3 +272,53 @@
         </div>
     </div>
 </div>
+
+<!-- TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.jobTags">
+    <div class="JobResults-resultRow">
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="vm.jobTags.more"
+            href=""
+            ng-click="vm.toggleJobTags()">
+            <span translate>{{ vm.jobTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-right"></i>
+        </a>
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="!vm.jobTags.more"
+            href=""
+            ng-click="vm.toggleJobTags()">
+            <span translate>{{ vm.jobTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-down"></i>
+        </a>
+    </div>
+    <div id="job-results-job-tags" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+        <div ng-repeat="tag in vm.jobTags.value" class="LabelList-tagContainer">
+            <div class="LabelList-tag"><div class="LabelList-name">{{ tag }}</div></div>
+        </div>
+    </div>
+</div>
+
+<!-- SKIP TAGS DETAIL -->
+<div class="JobResults-resultRow" ng-show="vm.skipTags">
+    <div class="JobResults-resultRow">
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="vm.skipTags.more"
+            href=""
+            ng-click="vm.toggleSkipTags()">
+            <span translate>{{ vm.skipTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-right"></i>
+        </a>
+        <a class="JobResults-resultRowLabel JobResults-resultRowLabel--fullWidth"
+            ng-show="!vm.skipTags.more"
+            href=""
+            ng-click="vm.toggleSkipTags()">
+            <span translate>{{ vm.skipTags.label }}</span>
+            <i class="JobResults-expandArrow fa fa-caret-down"></i>
+        </a>
+    </div>
+    <div id="job-results-skip-tags" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+        <div ng-repeat="tag in vm.skipTags.value" class="LabelList-tagContainer">
+            <div class="LabelList-tag"><div class="LabelList-name">{{ tag }}</div></div>
+        </div>
+    </div>
+</div>

From 3d752997eeb834c9af1cbadd30f865e21a2f0a72 Mon Sep 17 00:00:00 2001
From: Jake McDermott <jmcdermott@ansible.com>
Date: Fri, 4 May 2018 12:24:01 -0400
Subject: [PATCH 2/2] filter empty tags

---
 awx/ui/client/features/output/details.directive.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/awx/ui/client/features/output/details.directive.js b/awx/ui/client/features/output/details.directive.js
index 4808798ffe..f13de2821b 100644
--- a/awx/ui/client/features/output/details.directive.js
+++ b/awx/ui/client/features/output/details.directive.js
@@ -384,7 +384,7 @@ function getJobTagDetails () {
     const label = 'Job Tags';
     const more = false;
 
-    const value = jobTags.map($filter('sanitize'));
+    const value = jobTags.filter(tag => tag !== '').map($filter('sanitize'));
 
     return { label, more, value };
 }
@@ -406,8 +406,7 @@ function getSkipTagDetails () {
 
     const label = 'Skip Tags';
     const more = false;
-
-    const value = skipTags.map($filter('sanitize'));
+    const value = skipTags.filter(tag => tag !== '').map($filter('sanitize'));
 
     return { label, more, value };
 }