[AMBARI-24433] [Log Search UI] Reset to default selection in the drop…

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}}">

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>

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[] = [];
 

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

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

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

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",