shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 23:51:09 +03:00
Code Releases Activity

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

Browse Source 
Add show more/less to job details labels
This commit is contained in:
Marliana Lara 2018-06-22 13:15:07 -04:00 committed by GitHub
commit a6837343a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
awx/ui/client/features/output/details.component.js
View File

@ -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);

23
awx/ui/client/features/output/details.partial.html
View File

@ -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 ng-repeat="label in vm.labels.value" class="LabelList-tagContainer">
<div class="LabelList-tag"><div class="LabelList-name">{{ label }}</div></div>
<div id="job-results-labels">
<div ng-show="vm.labels.truncate" class="LabelList JobResults-resultRowText JobResults-resultRowText--fullWidth">
<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>