You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by to...@apache.org on 2018/08/16 13:57:41 UTC
[ambari] branch trunk updated: [AMBARI-24433] [Log Search UI] Reset
to default selection in the dropdowns (#2091)
This is an automated email from the ASF dual-hosted git repository.
tobiasistvan pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/ambari.git
The following commit(s) were added to refs/heads/trunk by this push:
new 56441eb [AMBARI-24433] [Log Search UI] Reset to default selection in the dropdowns (#2091)
56441eb is described below
commit 56441eb7679cd5ca15411d0c0c35f6d658187460
Author: Istvan Tobias <to...@gmail.com>
AuthorDate: Thu Aug 16 15:57:39 2018 +0200
[AMBARI-24433] [Log Search UI] Reset to default selection in the dropdowns (#2091)
---
.../service-logs-table.component.html | 6 ++-
.../dropdown-button/dropdown-button.component.html | 7 +--
.../dropdown-button/dropdown-button.component.ts | 27 ++++++----
.../dropdown-list/dropdown-list.component.html | 9 ++--
.../dropdown-list/dropdown-list.component.less | 23 +++++++-
.../dropdown-list/dropdown-list.component.ts | 61 +++++++++++++++++-----
.../ambari-logsearch-web/src/assets/i18n/en.json | 1 +
7 files changed, 102 insertions(+), 32 deletions(-)
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html
index cacee46..fb8a9b4 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html
@@ -28,8 +28,10 @@
[isRightAlign]="true"></filter-dropdown>
</form>
<dropdown-button label="{{'logs.columns' | translate}}" [options]="columns" [isRightAlign]="true"
- [isMultipleChoice]="true" (selectItem)="updateSelectedColumns($event)"
- [listItemArguments]="logsTypeMapObject.fieldsModel">
+ (selectItem)="updateSelectedColumns($event)"
+ [listItemArguments]="logsTypeMapObject.fieldsModel"
+ [isMultipleChoice]="true"
+ [useClearToDefaultSelection]="true">
</dropdown-button>
<div class="layout-btn-group">
<a *ngIf="layout==='FLEX'" class="btn" (click)="toggleShowLabels()" tooltip="{{'logs.toggleLabels' | translate}}">
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
index 396a277..7140028 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
@@ -29,7 +29,8 @@
<span *ngIf="!hideCaret" class="caret"></span>
</span>
</button>
- <ul data-component="dropdown-list" [ngClass]="{'dropdown-menu': true, 'dropdown-menu-right': isRightAlign}"
- [items]="options" [isMultipleChoice]="isMultipleChoice" (selectedItemChange)="updateSelection($event)"
- [actionArguments]="listItemArguments"></ul>
+ <ul data-component="dropdown-list" (selectedItemChange)="updateSelection($event)"
+ [ngClass]="{'dropdown-menu': true, 'dropdown-menu-right': isRightAlign}"
+ [items]="options" [actionArguments]="listItemArguments" [isMultipleChoice]="isMultipleChoice"
+ [useClearToDefaultSelection]="useClearToDefaultSelection"></ul>
</div>
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
index 837d03a..534b69d 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
@@ -31,36 +31,41 @@ export class DropdownButtonComponent {
label?: string;
@Input()
- buttonClass: string = 'btn-link';
+ buttonClass = 'btn-link';
@Input()
iconClass?: string;
@Input()
- hideCaret: boolean = false;
+ hideCaret = false;
@Input()
- showSelectedValue: boolean = true;
+ showSelectedValue = true;
- @Input() options: ListItem[] = [];
+ @Input()
+ isRightAlign = false;
@Input()
- listItemArguments: any[] = [];
+ isDropup = false;
@Input()
- isMultipleChoice: boolean = false;
+ showCommonLabelWithSelection = false;
+
+ @Output()
+ selectItem: EventEmitter<any> = new EventEmitter();
+ // PROXY PROPERTIES TO DROPDOWN LIST COMPONENT
@Input()
- isRightAlign: boolean = false;
+ options: ListItem[] = [];
@Input()
- isDropup: boolean = false;
+ listItemArguments: any[] = [];
@Input()
- showCommonLabelWithSelection: boolean = false;
+ isMultipleChoice = false;
- @Output()
- selectItem: EventEmitter<any> = new EventEmitter();
+ @Input()
+ useClearToDefaultSelection = false;
protected selectedItems?: ListItem[] = [];
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html
index 3423f54..a15b1c3 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.html
@@ -53,9 +53,12 @@
</label>
</li>
<li *ngIf="items && items.length" class="divider"></li>
- <li class="selections" *ngIf="itemsSelected.length>0">
- <span>{{'dropdown.selection' | translate:({total: itemsSelected.length})}}</span>
- <a href="#" (click)="onClearSelectionClick($event)">{{'dropdown.selection.clear' | translate}}</a>
+ <li *ngIf="itemsSelected.length>0 || (useClearToDefaultSelection && defaultSelection && defaultSelection.length)"
+ class="selections" [class.use-clear-to-default]="useClearToDefaultSelection && defaultSelection && defaultSelection.length">
+ <span class="total-selection">{{'dropdown.selection' | translate:({total: itemsSelected.length})}}</span>
+ <a *ngIf="useClearToDefaultSelection && defaultSelection && defaultSelection.length" href="#" class="clear-to-default"
+ (click)="onClearToDefaultSelectionClick($event)">{{'dropdown.selection.clearToDefault' | translate}}</a>
+ <a href="#" class="clear" (click)="onClearSelectionClick($event)">{{'dropdown.selection.clear' | translate}}</a>
</li>
<ng-container *ngFor="let item of itemsSelected">
<ng-container
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less
index 6777224..5ce1061 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.less
@@ -76,10 +76,31 @@
}
&.selections {
font-size: .75em;
- padding: .1em 20px;
+ padding: .5em 20px;
+ &.use-clear-to-default {
+ span.total-selection {
+ display: block;
+ }
+ a {
+ padding: 3px 5px;
+ &:first-of-type {
+ padding-left: 0;
+ }
+ &:last-of-type {
+ padding-right: 0;
+ }
+ }
+ }
a {
display: inline;
+ &:hover {
+ background: transparent none;
+ text-decoration: underline;
+ }
}
}
+ &.selections:hover {
+ background: transparent none;
+ }
}
}
diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts
index e20b625..12d5bc2 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts
+++ b/ambari-logsearch/ambari-logsearch-web/src/app/modules/shared/components/dropdown-list/dropdown-list.component.ts
@@ -30,23 +30,25 @@ import {ComponentGeneratorService} from '@app/services/component-generator.servi
})
export class DropdownListComponent implements OnInit, OnChanges, AfterViewChecked {
- private shouldRenderAdditionalComponents: boolean = false;
+ private shouldRenderAdditionalComponents = false;
@Input()
items: ListItem[] = [];
- private itemsSelected: ListItem[] = [];
+ itemsSelected: ListItem[] = [];
- private itemsUnSelected: ListItem[] = [];
+ itemsUnSelected: ListItem[] = [];
+
+ defaultSelection: ListItem[] = [];
@Input()
- isMultipleChoice?: boolean = false;
+ isMultipleChoice? = false;
@Input()
additionalLabelComponentSetter?: string;
@Input()
- actionArguments: any[] = [];
+ actionArguments = [];
@Output()
selectedItemChange: EventEmitter<ListItem | ListItem[]> = new EventEmitter();
@@ -59,6 +61,9 @@ export class DropdownListComponent implements OnInit, OnChanges, AfterViewChecke
@Input()
useLocalFilter = false;
+ @Input()
+ useClearToDefaultSelection = false;
+
@ViewChild('filter')
filterRef: ElementRef;
@@ -78,11 +83,17 @@ export class DropdownListComponent implements OnInit, OnChanges, AfterViewChecke
ngOnInit() {
this.separateSelections();
+ this.setDefaultSelection(this.items);
+ this.selectedItemChange.subscribe(this.separateSelections);
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.hasOwnProperty('items')) {
+ const previousItems = changes.items.previousValue;
this.separateSelections();
+ if ((!this.defaultSelection || !this.defaultSelection.length) && (!previousItems || !previousItems.length)) {
+ this.setDefaultSelection(this.items);
+ }
this.shouldRenderAdditionalComponents = true;
}
}
@@ -91,18 +102,46 @@ export class DropdownListComponent implements OnInit, OnChanges, AfterViewChecke
this.renderAdditionalComponents();
}
- private separateSelections() {
- this.itemsSelected = this.items ? this.items.filter((item: ListItem) => item.isChecked) : [];
- this.itemsUnSelected = this.items ? this.items.filter((item: ListItem) => !item.isChecked) : [];
+ getSelectedItems(): ListItem[] {
+ return this.items ? this.items.filter((item: ListItem) => item.isChecked) : [];
+ }
+
+ getUnSelectedItems(): ListItem[] {
+ return this.items ? this.items.filter((item: ListItem) => !item.isChecked) : [];
+ }
+
+ private setDefaultSelection(items) {
+ this.defaultSelection = this.getSelectedItems();
+ }
+
+ private separateSelections = () => {
+ this.itemsSelected = this.getSelectedItems();
+ this.itemsUnSelected = this.getUnSelectedItems();
this.shouldRenderAdditionalComponents = true;
}
private clearSelection() {
this.unSelectAll();
- this.separateSelections();
}
- private onClearSelectionClick = (event): void => {
+ private clearToDefaultSelection() {
+ if (this.defaultSelection && this.defaultSelection.length) {
+ this.items.forEach((item: ListItem) => {
+ item.isChecked = this.defaultSelection.findIndex((defaultItem) => defaultItem.value === item.value) !== -1;
+ if (item.onSelect && item.isChecked) {
+ item.onSelect(...this.actionArguments);
+ }
+ });
+ this.selectedItemChange.emit(this.items);
+ }
+ }
+
+ onClearToDefaultSelectionClick = (event): void => {
+ event.preventDefault();
+ event.stopPropagation();
+ this.clearToDefaultSelection();
+ }
+ onClearSelectionClick = (event): void => {
event.preventDefault();
event.stopPropagation();
this.clearSelection();
@@ -115,7 +154,6 @@ export class DropdownListComponent implements OnInit, OnChanges, AfterViewChecke
} else {
this.unSelectAll();
}
- this.separateSelections();
}
selectAll() {
@@ -172,7 +210,6 @@ export class DropdownListComponent implements OnInit, OnChanges, AfterViewChecke
if (item.onSelect) {
item.onSelect(...this.actionArguments);
}
- this.separateSelections();
this.selectedItemChange.emit(item);
}
diff --git a/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json b/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json
index 9f6c772..66b68cb 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json
+++ b/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json
@@ -12,6 +12,7 @@
"dropdown.selection": "Selected ({{total}})",
"dropdown.selection.clear": "(Clear)",
+ "dropdown.selection.clearToDefault": "(Set defaults)",
"dropdown.selection.all": "All {{listName}} ({{total}})",
"modal.submit": "OK",