[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

ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html

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

ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts

@@ -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;
+  }
 }

ambari-logsearch-web/src/app/modules/shared/components/filter-dropdown/filter-dropdown.component.spec.ts

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

ambari-logsearch-web/src/app/modules/shared/components/filter-dropdown/filter-dropdown.component.ts

@@ -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() {}
 }