Skip to content
This repository has been archived by the owner. It is now read-only.
Permalink
Browse files
[AMBARI-25028] [Log Search UI] Populate Component Name in validator (
…#67)

* MBARI-23456. Add cloud mode documentation (#66)

* [AMBARI-25028] [Log Search UI] Populate `Component Name` in validator
  • Loading branch information
tobias-istvan committed Jan 5, 2019
1 parent f5074e7 commit b89f41f357d77d6e8e95c7a0aebc43f0f17563b2
Showing 10 changed files with 488 additions and 328 deletions.
@@ -15,25 +15,34 @@
limitations under the License.
-->

<div [ngClass]="{'dropup': isDropup, 'has-selection': hasSelection}">
<button [ngClass]="['btn', 'dropdown-toggle', buttonClass]" data-toggle="dropdown">
<div [ngClass]="{ dropup: isDropup, 'has-selection': hasSelection }">
<button [ngClass]="['btn', 'dropdown-toggle', buttonClass]" [class.disabled]="disabled" data-toggle="dropdown">
<span class="filter-label">
<span *ngIf="iconClass || label" [class.plain]="!isMultipleChoice && !hideCaret && showSelectedValue">
<span *ngIf="iconClass" [ngClass]="iconClass"></span>
<span *ngIf="label && (!hasSelection || isMultipleChoice || showCommonLabelWithSelection)"
[class.label-before-selection]="isSelectionDisplayable">
{{label}}
<span
*ngIf="label && (!hasSelection || isMultipleChoice || showCommonLabelWithSelection)"
[class.label-before-selection]="isSelectionDisplayable"
>
{{ label }}
</span>
<span *ngIf="showTotalSelection && totalSelection" class="total-selection badge">{{totalSelection}}</span>
<span *ngIf="showTotalSelection && totalSelection" class="total-selection badge">{{ totalSelection }}</span>
</span>
<span *ngIf="isSelectionDisplayable">
<span class="selected-item-label" *ngFor="let item of selectedItems">{{ item.label | translate }}</span>
</span>
<span *ngIf="!hideCaret" class="caret"></span>
</span>
</button>
<ul data-component="dropdown-list" (selectedItemChange)="updateSelection($event)"
[ngClass]="{'dropdown-menu': true, 'dropdown-menu-right': isRightAlign}" [closeOnSelection]="closeOnSelection"
[items]="options" [actionArguments]="listItemArguments" [isMultipleChoice]="isMultipleChoice"
[useClearToDefaultSelection]="useClearToDefaultSelection" [useLocalFilter]="useDropDownLocalFilter"></ul>
<ul
data-component="dropdown-list"
(selectedItemChange)="updateSelection($event)"
[ngClass]="{ 'dropdown-menu': true, 'dropdown-menu-right': isRightAlign }"
[closeOnSelection]="closeOnSelection"
[items]="options"
[actionArguments]="listItemArguments"
[isMultipleChoice]="isMultipleChoice"
[useClearToDefaultSelection]="useClearToDefaultSelection"
[useLocalFilter]="useDropDownLocalFilter"
></ul>
</div>
@@ -16,7 +16,7 @@
* limitations under the License.
*/

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { ListItem } from '@app/classes/list-item';
import { UtilsService } from '@app/services/utils.service';

@@ -25,8 +25,7 @@ import { UtilsService } from '@app/services/utils.service';
templateUrl: './dropdown-button.component.html',
styleUrls: ['./dropdown-button.component.less']
})
export class DropdownButtonComponent {

export class DropdownButtonComponent implements OnChanges {
@Input()
label?: string;

@@ -76,22 +75,29 @@ export class DropdownButtonComponent {
@Input()
closeOnSelection = true;

@Input()
disabled = false;

protected selectedItems: ListItem[] = [];

get selection(): ListItem[] {
return this.selectedItems;
}

set selection(items: ListItem[]) {
this.selectedItems = <ListItem[]>(Array.isArray(items) ? items : (items || []));
this.selectedItems = <ListItem[]>(Array.isArray(items) ? items : items || []);
if (this.selectedItems.length > 1 && !this.isMultipleChoice) {
this.selectedItems = this.selectedItems.slice(0, 1);
}
if (this.isMultipleChoice && this.options) {
this.options.forEach((option: ListItem): void => {
const selectionItem = this.selectedItems.find((item: ListItem): boolean => this.utils.isEqual(item.value, option.value));
option.isChecked = !!selectionItem;
});
this.options.forEach(
(option: ListItem): void => {
const selectionItem = this.selectedItems.find(
(item: ListItem): boolean => this.utils.isEqual(item.value, option.value)
);
option.isChecked = !!selectionItem;
}
);
}
}

@@ -113,9 +119,22 @@ export class DropdownButtonComponent {
return this.showSelectedValue && !this.isMultipleChoice && this.hasSelection;
}

constructor(
protected utils: UtilsService
) {}
get value(): any {
const values = this.selectedItems && this.selectedItems.length && this.selectedItems.map(item => item.value);
return this.isMultipleChoice ? values : values[0];
}

constructor(protected utils: UtilsService) {}

ngOnChanges(changes: SimpleChanges) {
if (changes.options) {
this.hanldeOptionsChange();
}
}

hanldeOptionsChange() {
this.filterAndSetSelection();
}

clearSelection(silent: boolean = false) {
let hasChange = false;
@@ -128,14 +147,16 @@ export class DropdownButtonComponent {
}
}

updateSelection(updates: ListItem | ListItem[], callOnChange: boolean = true): boolean {
updateSelection(updates: ListItem | ListItem[]): boolean {
let hasChange = false;
if (updates && (!Array.isArray(updates) || updates.length)) {
const items: ListItem[] = Array.isArray(updates) ? updates : [updates];
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));
const itemToUpdate: ListItem = this.options.find((option: ListItem) =>
this.utils.isEqual(option.value, item.value)
);
if (itemToUpdate) {
hasChange = hasChange || itemToUpdate.isChecked !== item.isChecked;
itemToUpdate.isChecked = item.isChecked;
@@ -151,15 +172,18 @@ export class DropdownButtonComponent {
});
}
} else {
this.options.forEach((item: ListItem) => item.isChecked = false);
this.options.forEach((item: ListItem) => (item.isChecked = false));
}
const checkedItems = this.options.filter((option: ListItem): boolean => option.isChecked);
this.selection = checkedItems;
this.filterAndSetSelection();
if (hasChange) {
const selectedValues = checkedItems.map((option: ListItem): any => option.value);
const selectedValues = this.selection.map((option: ListItem): any => option.value);
this.selectItem.emit(this.isMultipleChoice ? selectedValues : selectedValues.shift());
}
return hasChange;
}

protected filterAndSetSelection() {
const checkedItems = this.options.filter((option: ListItem): boolean => option.isChecked);
this.selection = checkedItems;
}
}
@@ -15,37 +15,41 @@
* limitations under the License.
*/

import {NO_ERRORS_SCHEMA} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MockHttpRequestModules, TranslationModules} from '@app/test-config.spec';
import {StoreModule} from '@ngrx/store';
import {AppSettingsService, appSettings} from '@app/services/storage/app-settings.service';
import {AppStateService, appState} from '@app/services/storage/app-state.service';
import {AuditLogsService, auditLogs} from '@app/services/storage/audit-logs.service';
import {AuditLogsFieldsService, auditLogsFields} from '@app/services/storage/audit-logs-fields.service';
import {AuditLogsGraphDataService, auditLogsGraphData} from '@app/services/storage/audit-logs-graph-data.service';
import {ServiceLogsService, serviceLogs} from '@app/services/storage/service-logs.service';
import {ServiceLogsFieldsService, serviceLogsFields} from '@app/services/storage/service-logs-fields.service';
import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MockHttpRequestModules, TranslationModules } from '@app/test-config.spec';
import { StoreModule } from '@ngrx/store';
import { AppSettingsService, appSettings } from '@app/services/storage/app-settings.service';
import { AppStateService, appState } from '@app/services/storage/app-state.service';
import { AuditLogsService, auditLogs } from '@app/services/storage/audit-logs.service';
import { AuditLogsFieldsService, auditLogsFields } from '@app/services/storage/audit-logs-fields.service';
import { AuditLogsGraphDataService, auditLogsGraphData } from '@app/services/storage/audit-logs-graph-data.service';
import { ServiceLogsService, serviceLogs } from '@app/services/storage/service-logs.service';
import { ServiceLogsFieldsService, serviceLogsFields } from '@app/services/storage/service-logs-fields.service';
import {
ServiceLogsHistogramDataService, serviceLogsHistogramData
ServiceLogsHistogramDataService,
serviceLogsHistogramData
} from '@app/services/storage/service-logs-histogram-data.service';
import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service';
import {TabsService, tabs} from '@app/services/storage/tabs.service';
import {ClustersService, clusters} from '@app/services/storage/clusters.service';
import {ComponentsService, components} from '@app/services/storage/components.service';
import {HostsService, hosts} from '@app/services/storage/hosts.service';
import {UtilsService} from '@app/services/utils.service';
import {LogsContainerService} from '@app/services/logs-container.service';
import {AuthService} from '@app/services/auth.service';
import {
ServiceLogsTruncatedService,
serviceLogsTruncated
} from '@app/services/storage/service-logs-truncated.service';
import { TabsService, tabs } from '@app/services/storage/tabs.service';
import { ClustersService, clusters } from '@app/services/storage/clusters.service';
import { ComponentsService, components } from '@app/services/storage/components.service';
import { HostsService, hosts } from '@app/services/storage/hosts.service';
import { UtilsService } from '@app/services/utils.service';
import { LogsContainerService } from '@app/services/logs-container.service';
import { AuthService } from '@app/services/auth.service';

import {FilterDropdownComponent} from './filter-dropdown.component';
import {ClusterSelectionService} from '@app/services/storage/cluster-selection.service';
import {LogsStateService} from '@app/services/storage/logs-state.service';
import {RoutingUtilsService} from '@app/services/routing-utils.service';
import {LogsFilteringUtilsService} from '@app/services/logs-filtering-utils.service';
import {RouterTestingModule} from '@angular/router/testing';
import {NotificationService} from '@modules/shared/services/notification.service';
import {NotificationsService} from 'angular2-notifications/src/notifications.service';
import { FilterDropdownComponent } from './filter-dropdown.component';
import { ClusterSelectionService } from '@app/services/storage/cluster-selection.service';
import { LogsStateService } from '@app/services/storage/logs-state.service';
import { RoutingUtilsService } from '@app/services/routing-utils.service';
import { LogsFilteringUtilsService } from '@app/services/logs-filtering-utils.service';
import { RouterTestingModule } from '@angular/router/testing';
import { NotificationService } from '@modules/shared/services/notification.service';
import { NotificationsService } from 'angular2-notifications/src/notifications.service';

import * as auth from '@app/store/reducers/auth.reducers';
import { EffectsModule } from '@ngrx/effects';
@@ -77,8 +81,7 @@ describe('FilterDropdownComponent', () => {
const httpClient = {
get: () => {
return {
subscribe: () => {
}
subscribe: () => {}
};
}
};
@@ -136,9 +139,8 @@ describe('FilterDropdownComponent', () => {
NotificationsService,
NotificationService
],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
}).compileComponents();
}));

beforeEach(() => {
@@ -150,5 +152,4 @@ describe('FilterDropdownComponent', () => {
it('should create component', () => {
expect(component).toBeTruthy();
});

});
@@ -15,10 +15,10 @@
* limitations under the License.
*/

import {Component, forwardRef} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {DropdownButtonComponent} from '@modules/shared/components/dropdown-button/dropdown-button.component';
import {ListItem} from '@app/classes/list-item';
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DropdownButtonComponent } from '@modules/shared/components/dropdown-button/dropdown-button.component';
import { ListItem } from '@app/classes/list-item';

@Component({
selector: 'filter-dropdown',
@@ -33,7 +33,6 @@ import {ListItem} from '@app/classes/list-item';
]
})
export class FilterDropdownComponent extends DropdownButtonComponent implements ControlValueAccessor {

private onChange;

private _onChange(value) {
@@ -42,6 +41,9 @@ export class FilterDropdownComponent extends DropdownButtonComponent implements
}
}

@Input()
options: ListItem[] = [];

updateSelection(updates: ListItem | ListItem[], callOnChange: boolean = true): boolean {
const hasChange = super.updateSelection(updates);
if (hasChange && callOnChange) {
@@ -50,15 +52,18 @@ export class FilterDropdownComponent extends DropdownButtonComponent implements
return hasChange;
}

hanldeOptionsChange() {
super.hanldeOptionsChange();
this._onChange(this.selection);
}

writeValue(items: ListItem[]) {
this.selection = items ? (Array.isArray(items) ? items : [items] ) : [];
this.selection = items ? (Array.isArray(items) ? items : [items]) : [];
}

registerOnChange(callback: any): void {
this.onChange = callback;
}

registerOnTouched() {
}

registerOnTouched() {}
}

0 comments on commit b89f41f

Please sign in to comment.