Merge pull request #2275 from marshmalien/fix/see-more-see-less

Add show more/less to job details labels

awx/ui/client/features/output/details.component.js

@@ -525,10 +525,12 @@ function getLabelDetails () {
 
     const label = strings.get('labels.LABELS');
     const more = false;
-
     const value = jobLabels.map(({ name }) => name).map($filter('sanitize'));
+    const truncate = true;
+    const truncateLength = 5;
+    const hasMoreToShow = jobLabels.length > truncateLength;
 
-    return { label, more, value };
+    return { label, more, hasMoreToShow, value, truncate, truncateLength };
 }
 
 function createErrorHandler (path, action) {
@@ -546,6 +548,32 @@ const ELEMENT_SKIP_TAGS = '#job-results-skip-tags';
 const ELEMENT_PROMPT_MODAL = '#prompt-modal';
 const TAGS_SLIDE_DISTANCE = 200;
 
+function showLabels () {
+    this.labels.truncate = !this.labels.truncate;
+
+    const jobLabelsCount = _.get(resource.model.get('summary_fields.labels'), 'count');
+    const maxCount = 50;
+
+    if (this.labels.value.length === jobLabelsCount || this.labels.value.length >= maxCount) {
+        return;
+    }
+
+    const config = {
+        params: {
+            page_size: maxCount
+        }
+    };
+
+    wait('start');
+    resource.model.extend('get', 'labels', config)
+        .then((model) => {
+            const jobLabels = _.get(model.get('related.labels'), 'results', []);
+            this.labels.value = jobLabels.map(({ name }) => name).map($filter('sanitize'));
+        })
+        .catch(createErrorHandler('get labels', 'GET'))
+        .finally(() => wait('stop'));
+}
+
 function toggleLabels () {
     if (!this.labels.more) {
         $(ELEMENT_LABELS).slideUp(TAGS_SLIDE_DISTANCE);
@@ -705,6 +733,7 @@ function JobDetailsController (
         vm.toggleJobTags = toggleJobTags;
         vm.toggleSkipTags = toggleSkipTags;
         vm.toggleLabels = toggleLabels;
+        vm.showLabels = showLabels;
 
         unsubscribe = subscribe(({ status, started, finished, scm }) => {
             vm.started = getStartDetails(started);

awx/ui/client/features/output/details.partial.html

@@ -315,9 +315,26 @@
             <i class="JobResults-expandArrow fa fa-caret-down"></i>
         </a>
     </div>
-    <div id="job-results-labels" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+    <div id="job-results-labels">
-        <div ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
+        <div ng-show="vm.labels.truncate" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
-            <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
+            <div ng-repeat="label in vm.labels.value | limitTo: vm.labels.truncateLength" class="LabelList-tagContainer">
+                <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
+            </div>
+            <span ng-show="vm.labels.hasMoreToShow"
+                class="JobResults-seeMoreLess"
+                ng-click="vm.showLabels()">
+                {{:: vm.strings.get('details.SHOW_MORE') }}
+            </span>
+        </div>
+        <div ng-show="!vm.labels.truncate" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
+            <div ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
+                <div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
+            </div>
+            <span ng-show="vm.labels.hasMoreToShow"
+                class="JobResults-seeMoreLess"
+                ng-click="vm.showLabels()">
+                {{:: vm.strings.get('details.SHOW_LESS') }}
+            </span>
         </div>
     </div>
 </div>