This is an automated email from the ASF dual-hosted git repository.
ababiichuk 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 e0b6824 [AMBARI-23757] - [Logsearch UI] Component filter 'All' not
refreshing logs after selecting an individual component
e0b6824 is described below
commit e0b682420559de568275e382bbd70d60f3c3f7f1
Author: Istvan Tobias <tobias.ist...@gmail.com>
AuthorDate: Thu May 10 21:53:18 2018 +0200
[AMBARI-23757] - [Logsearch UI] Component filter 'All' not refreshing logs
after selecting an individual component
---
.../filter-button/filter-button.component.ts | 43 +++++++++++++++-------
.../menu-button/menu-button.component.html | 2 +-
.../menu-button/menu-button.component.ts | 19 +++++++---
.../dropdown-button/dropdown-button.component.ts | 41 ++++++++++++---------
.../dropdown-list/dropdown-list.component.ts | 42 +++++++++++++++------
5 files changed, 96 insertions(+), 51 deletions(-)
diff --git
a/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts
b/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts
index ffe5440..c5e0c2c 100644
---
a/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts
+++
b/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts
@@ -55,28 +55,43 @@ export class FilterButtonComponent extends
MenuButtonComponent implements Contro
}
}
- updateSelection(item: ListItem): void {
- if (this.isMultipleChoice) {
- const itemIndex = this.subItems.findIndex((option: ListItem): boolean =>
{
- return this.utils.isEqual(option.value, item.value);
- });
- if (itemIndex > -1) {
- this.subItems[itemIndex].isChecked = item.isChecked;
- this.selection = this.subItems.filter((option: ListItem): boolean =>
option.isChecked);
+ updateSelection(updatedItem: ListItem | ListItem[]): void {
+ if (updatedItem) {
+ const items: ListItem[] = Array.isArray(updatedItem) ? updatedItem :
[updatedItem];
+ if (this.isMultipleChoice) {
+ items.forEach((item: ListItem) => {
+ if (this.subItems && this.subItems.length) {
+ const itemToUpdate: ListItem = this.subItems.find((option:
ListItem) => this.utils.isEqual(option.value, item.value));
+ if (itemToUpdate) {
+ itemToUpdate.isChecked = item.isChecked;
+ }
+ }
+ });
+ } else {
+ const selectedItem: ListItem = items.find((item: ListItem) =>
item.isChecked);
+ this.subItems.forEach((item: ListItem) => {
+ item.isChecked = !!selectedItem && this.utils.isEqual(item.value,
selectedItem.value);
+ });
}
- } else if (!this.utils.isEqual(this.selection[0], item)) {
- this.selection = [item];
+ } else {
+ this.subItems.forEach((item: ListItem) => item.isChecked = false);
+ this.selection = [];
}
+ const checkedItems = this.subItems.filter((option: ListItem): boolean =>
option.isChecked);
+ this.selection = checkedItems;
+ this.selectItem.emit(checkedItems.map((option: ListItem): any =>
option.value));
+ this.dropdownList.doItemsCheck();
}
writeValue(items: ListItem[]) {
if (items && items.length) {
- items.forEach((item) => {
- this.updateSelection({
+ const listItems: ListItem[] = items.map((item: ListItem) => {
+ return {
...item,
- isChecked: true
- });
+ isChecked: true
+ };
});
+ this.updateSelection(listItems);
}
}
diff --git
a/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
b/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
index 111127c..7061def 100644
---
a/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
+++
b/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
@@ -27,6 +27,6 @@
(selectedItemChange)="onDropdownItemChange($event)"
[isMultipleChoice]="isMultipleChoice"
[additionalLabelComponentSetter]="additionalLabelComponentSetter"
[ngClass]="'dropdown-menu' + (isRightAlign ? ' dropdown-menu-right' :
'') + (listClass ? ' ' + listClass : '')"
- [useLocalFilter]="useDropDownLocalFilter"
+ [useLocalFilter]="useDropDownLocalFilter" #dropdownList
></ul>
</div>
diff --git
a/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
b/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
index ae27851..788494c 100644
---
a/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
+++
b/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
@@ -18,6 +18,7 @@
import {Component, Input, Output, ViewChild, ElementRef, EventEmitter} from
'@angular/core';
import {ListItem} from '@app/classes/list-item';
+import {DropdownListComponent} from
'@modules/shared/components/dropdown-list/dropdown-list.component';
@Component({
selector: 'menu-button',
@@ -29,6 +30,9 @@ export class MenuButtonComponent {
@ViewChild('dropdown')
dropdown: ElementRef;
+ @ViewChild('dropdownList')
+ dropdownList: DropdownListComponent;
+
@Input()
label?: string;
@@ -88,7 +92,7 @@ export class MenuButtonComponent {
buttonClick: EventEmitter<void> = new EventEmitter();
@Output()
- selectItem: EventEmitter<ListItem> = new EventEmitter();
+ selectItem: EventEmitter<ListItem | ListItem[]> = new EventEmitter();
/**
* This is a private property to indicate the mousedown timestamp, so that
we can check it when teh click event
@@ -211,17 +215,20 @@ export class MenuButtonComponent {
/**
* The main goal if this function is tho handle the item change event on the
child dropdown list.
* Should update the value and close the dropdown if it is not multiple
choice type.
- * @param {ListItem} options The selected item(s) from the dropdown list.
+ * @param {ListItem} item The selected item(s) from the dropdown list.
*/
- onDropdownItemChange(options: ListItem) {
- this.updateSelection(options);
+ onDropdownItemChange(item: ListItem | ListItem[]) {
+ this.updateSelection(item);
if (!this.isMultipleChoice) {
this.closeDropdown();
}
}
- updateSelection(options: ListItem) {
- this.selectItem.emit(options);
+ updateSelection(item: ListItem | ListItem[]) {
+ this.selectItem.emit(item);
+ if (this.dropdownList) {
+ this.dropdownList.doItemsCheck();
+ }
}
}
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 8ed1ab3..cd426a9 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
@@ -85,26 +85,31 @@ export class DropdownButtonComponent {
constructor(protected utils: UtilsService) {}
- updateSelection(item: ListItem): void {
- if (this.isMultipleChoice) {
- this.options.find((option: ListItem): boolean => {
- return this.utils.isEqual(option.value, item.value);
- }).isChecked = item.isChecked;
- const checkedItems = this.options.filter((option: ListItem): boolean =>
option.isChecked);
- this.selection = checkedItems;
- this.selectItem.emit(checkedItems.map((option: ListItem): any =>
option.value));
- } else {
- if (item) {
- item.isChecked = true;
- }
- if (!this.utils.isEqual(this.selection[0], item)) {
- if (this.selection && this.selection.length) {
- this.selection[0].isChecked = false;
- }
- this.selection = item ? [item] : [];
- this.selectItem.emit(item ? item.value : undefined);
+ updateSelection(updatedItem: ListItem | ListItem[]): void {
+ if (updatedItem) {
+ const items: ListItem[] = Array.isArray(updatedItem) ? updatedItem :
[updatedItem];
+ if (this.isMultipleChoice) {
+ items.forEach((item: ListItem) => {
+ if (this.options && this.options.length) {
+ const itemToUpdate: ListItem = this.options.find((option:
ListItem) => this.utils.isEqual(option.value, item.value));
+ if (itemToUpdate) {
+ itemToUpdate.isChecked = item.isChecked;
+ }
+ }
+ });
+ } else {
+ const selectedItem: ListItem = items.find((item: ListItem) =>
item.isChecked);
+ this.options.forEach((item: ListItem) => {
+ item.isChecked = !!selectedItem && this.utils.isEqual(item.value,
selectedItem.value);
+ });
}
+ } else {
+ this.options.forEach((item: ListItem) => item.isChecked = false);
+ this.selection = [];
}
+ const checkedItems = this.options.filter((option: ListItem): boolean =>
option.isChecked);
+ this.selection = checkedItems;
+ this.selectItem.emit(checkedItems.map((option: ListItem): any =>
option.value));
}
}
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 8ceb51c..a3e03ac 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
@@ -18,19 +18,17 @@
import {
Component, OnChanges, AfterViewChecked, SimpleChanges, Input, Output,
EventEmitter, ViewChildren, ViewContainerRef,
- QueryList, ChangeDetectorRef, ElementRef, ViewChild
+ QueryList, ChangeDetectorRef, ElementRef, ViewChild, OnInit
} from '@angular/core';
import {ListItem} from '@app/classes/list-item';
import {ComponentGeneratorService} from
'@app/services/component-generator.service';
-import {TranslateService} from '@ngx-translate/core';
-import {Observable} from 'rxjs/Observable';
@Component({
selector: 'ul[data-component="dropdown-list"]',
templateUrl: './dropdown-list.component.html',
styleUrls: ['./dropdown-list.component.less']
})
-export class DropdownListComponent implements OnChanges, AfterViewChecked {
+export class DropdownListComponent implements OnInit, OnChanges,
AfterViewChecked {
private shouldRenderAdditionalComponents: boolean = false;
@@ -51,7 +49,7 @@ export class DropdownListComponent implements OnChanges,
AfterViewChecked {
actionArguments: any[] = [];
@Output()
- selectedItemChange: EventEmitter<ListItem> = new EventEmitter();
+ selectedItemChange: EventEmitter<ListItem | ListItem[]> = new EventEmitter();
@ViewChildren('additionalComponent', {
read: ViewContainerRef
@@ -78,6 +76,10 @@ export class DropdownListComponent implements OnChanges,
AfterViewChecked {
private changeDetector: ChangeDetectorRef
) {}
+ ngOnInit() {
+ this.separateSelections();
+ }
+
ngOnChanges(changes: SimpleChanges): void {
if (changes.hasOwnProperty('items')) {
this.separateSelections();
@@ -96,7 +98,7 @@ export class DropdownListComponent implements OnChanges,
AfterViewChecked {
}
private clearSelection() {
- this.items.forEach((item: ListItem) => item.isChecked = false);
+ this.unSelectAll();
this.separateSelections();
}
@@ -117,11 +119,23 @@ export class DropdownListComponent implements OnChanges,
AfterViewChecked {
}
selectAll() {
- this.items.forEach((item: ListItem) => item.isChecked = true);
+ this.items.forEach((item: ListItem) => {
+ item.isChecked = true;
+ if (item.onSelect) {
+ item.onSelect(...this.actionArguments);
+ }
+ });
+ this.selectedItemChange.emit(this.items);
}
unSelectAll() {
- this.items.forEach((item: ListItem) => item.isChecked = false);
+ this.items.forEach((item: ListItem) => {
+ item.isChecked = false;
+ if (item.onSelect) {
+ item.onSelect(...this.actionArguments);
+ }
+ });
+ this.selectedItemChange.emit(this.items);
}
private onFilterInputKeyUp(event) {
@@ -154,16 +168,20 @@ export class DropdownListComponent implements OnChanges,
AfterViewChecked {
}
}
- changeSelectedItem(options: ListItem, event?: MouseEvent): void {
- if (options.onSelect) {
- options.onSelect(...this.actionArguments);
+ changeSelectedItem(item: ListItem, event?: MouseEvent): void {
+ if (item.onSelect) {
+ item.onSelect(...this.actionArguments);
}
this.separateSelections();
- this.selectedItemChange.emit(options);
+ this.selectedItemChange.emit(item);
if (event) {
event.preventDefault();
event.stopPropagation();
}
}
+ doItemsCheck() {
+ this.separateSelections();
+ }
+
}
--
To stop receiving notification emails like this one, please contact
ababiic...@apache.org.
