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 e16bdec  AMBARI-23512 Log Search UI: search box fixes
e16bdec is described below

commit e16bdec9b875213dedca1556d22fb1a6b602a95e
Author: Istvan Tobias <tobias.ist...@gmail.com>
AuthorDate: Thu Apr 12 12:38:15 2018 +0200

    AMBARI-23512 Log Search UI: search box fixes
---
 .../filters-panel/filters-panel.component.html     |  2 +-
 .../search-box/search-box.component.html           | 10 ++--
 .../search-box/search-box.component.less           | 16 +++++-
 .../components/search-box/search-box.component.ts  | 63 +++++++++++++++-------
 .../ambari-logsearch-web/src/assets/i18n/en.json   |  2 +
 5 files changed, 69 insertions(+), 24 deletions(-)

diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.html
 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.html
index 397603b..1ff8e62 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.html
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.html
@@ -19,7 +19,7 @@
   <div class="form-inline filter-input-container col-md-8">
     <search-box [parameterAddSubject]="queryParameterAdd" 
[parameterNameChangeSubject]="queryParameterNameChange"
                 class="filter-input" formControlName="query" 
[items]="searchBoxItems$ | async" [itemsOptions]="options"
-                [updateValueImmediately]="false" 
[updateValueSubject]="searchBoxValueUpdate"
+                [updateValueImmediately]="true" 
[updateValueSubject]="searchBoxValueUpdate"
                 defaultParameterName="log_message"></search-box>
     <time-range-picker *ngIf="isFilterConditionDisplayed('timeRange')" 
formControlName="timeRange"
                        class="filter-input"></time-range-picker>
diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.html
 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.html
index 786c130..2b462bf 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.html
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.html
@@ -18,12 +18,15 @@
 <ng-template #listItemTemplate let-item="item">
   {{item.label | translate}}
 </ng-template>
-<label class="parameter-label" *ngFor="let parameter of parameters">
-  <span *ngIf="parameter.isExclude" class="fa fa-search-minus"></span>
+<ng-container *ngFor="let parameter of parameters">
+<label class="parameter-label" [class.exclude]="parameter.isExclude" 
[class.include]="!parameter.isExclude">
   {{parameter.label | translate}}:
   <span class="parameter-value">{{parameter.value}}</span>
-  <span class="fa fa-times remove-parameter" (click)="removeParameter($event, 
parameter.id)"></span>
+  <span class="fa toggle-parameter action-icon" [ngClass]="{'fa-search-minus': 
parameter.isExclude, 'fa-search-plus': !parameter.isExclude}"
+        (click)="toggleParameter($event, parameter.id)" 
tooltip="{{('filter.toggleTo.' + (parameter.isExclude ? 'include' : 'exclude')) 
| translate}}"></span>
+  <span class="fa fa-times remove-parameter action-icon" 
(click)="removeParameter($event, parameter.id)"></span>
 </label>
+</ng-container>
 <span class="active-parameter-label" *ngIf="isActive && 
activeItem">{{activeItem.label | translate}}:</span>
 <div [ngClass]="{'search-item-container': true, 'active': isActive, 'value': 
isValueInput}">
   <input #parameterInput [(ngModel)]="currentValue" [typeahead]="items" 
typeaheadOptionField="value"
@@ -36,3 +39,4 @@
          (typeaheadOnSelect)="onParameterValueChange($event.value)" 
(keydown)="onParameterValueKeyDown($event)"
          (keyup)="onParameterValueKeyUp($event)" class="search-item-input 
value-input form-control">
 </div>
+<span *ngIf="parameters && parameters.length" class="fa fa-times-circle-o 
clear-all-btn" (click)="onClearButtonClick($event)"></span>
diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.less
 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.less
index 1b54e83..b99f6aa 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.less
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.less
@@ -42,9 +42,15 @@
       font-weight: normal;
     }
 
-    .remove-parameter {
+    .action-icon {
       cursor: pointer;
     }
+    .fa-search-plus {
+      color: @form-success-color;
+    }
+    .fa-search-minus {
+      color: @form-error-color;
+    }
   }
 
   .active-parameter-label {
@@ -56,6 +62,7 @@
     position: relative;
     min-width: @inactive-input-width;
     height: @input-height;
+    flex-grow: 1;
 
     .search-item-input {
       border: none;
@@ -104,4 +111,11 @@
       }
     }
   }
+
+  .clear-all-btn {
+    color: @unknown-color;
+    cursor: pointer;
+    height: 1em;
+    width: 1em;
+  }
 }
diff --git 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.ts
 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.ts
index ade57e5..b9a43df 100644
--- 
a/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.ts
+++ 
b/ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.ts
@@ -38,23 +38,6 @@ import {UtilsService} from '@app/services/utils.service';
 })
 export class SearchBoxComponent implements OnInit, OnDestroy, 
ControlValueAccessor {
 
-  constructor(private utils: UtilsService) {
-  }
-
-  ngOnInit(): void {
-    this.parameterInput = this.parameterInputRef.nativeElement;
-    this.valueInput = this.valueInputRef.nativeElement;
-    this.parameterNameChangeSubject.subscribe(this.onParameterNameChange);
-    this.parameterAddSubject.subscribe(this.onParameterAdd);
-    this.updateValueSubject.subscribe(this.updateValue);
-  }
-
-  ngOnDestroy(): void {
-    this.parameterNameChangeSubject.unsubscribe();
-    this.parameterAddSubject.unsubscribe();
-    this.updateValueSubject.unsubscribe();
-  }
-
   private currentId: number = 0;
 
   private isExclude: boolean = false;
@@ -137,6 +120,22 @@ export class SearchBoxComponent implements OnInit, 
OnDestroy, ControlValueAccess
    */
   parameters: SearchBoxParameterProcessed[] = [];
 
+  constructor(private utils: UtilsService) {}
+
+  ngOnInit(): void {
+    this.parameterInput = this.parameterInputRef.nativeElement;
+    this.valueInput = this.valueInputRef.nativeElement;
+    this.parameterNameChangeSubject.subscribe(this.onParameterNameChange);
+    this.parameterAddSubject.subscribe(this.onParameterAdd);
+    this.updateValueSubject.subscribe(this.updateValue);
+  }
+
+  ngOnDestroy(): void {
+    this.parameterNameChangeSubject.unsubscribe();
+    this.parameterAddSubject.unsubscribe();
+    this.updateValueSubject.unsubscribe();
+  }
+
   /**
    * Available options for value of currently active search query parameter
    * @returns {ListItem[]}
@@ -190,6 +189,14 @@ export class SearchBoxComponent implements OnInit, 
OnDestroy, ControlValueAccess
     this.valueInput.value = '';
   }
 
+  onClearButtonClick = (event: MouseEvent): void => {
+    this.clear();
+    this.parameters = [];
+    this.updateValueSubject.next();
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
   changeParameterName(options: SearchBoxParameterTriggered): void {
     this.parameterNameChangeSubject.next(options);
   }
@@ -246,7 +253,7 @@ export class SearchBoxComponent implements OnInit, 
OnDestroy, ControlValueAccess
       this.updateValueSubject.next();
     }
     this.switchToParameterInput();
-  };
+  }
 
   onParameterKeyUp(event: KeyboardEvent): void {
     if (this.utils.isEnterPressed(event)) {
@@ -263,6 +270,24 @@ export class SearchBoxComponent implements OnInit, 
OnDestroy, ControlValueAccess
   }
 
   /**
+   * Toggle the parameter isExclude property value
+   * @param event {MouseEvent} - event that triggered this action
+   * @param id {number} - id of parameter
+   */
+  toggleParameter(event: MouseEvent, id: number): void {
+    this.parameters = this.parameters.map((parameter: 
SearchBoxParameterProcessed): SearchBoxParameterProcessed => {
+      if (parameter.id === id) {
+        parameter.isExclude = !parameter.isExclude;
+      }
+      return parameter;
+    });
+    if (this.updateValueImmediately) {
+      this.updateValueSubject.next();
+    }
+    event.stopPropagation();
+  }
+
+  /**
    * Removing parameter from search query
    * @param event {MouseEvent} - event that triggered this action
    * @param id {number} - id of parameter
@@ -280,7 +305,7 @@ export class SearchBoxComponent implements OnInit, 
OnDestroy, ControlValueAccess
     if (this.onChange) {
       this.onChange(this.parameters.slice());
     }
-  };
+  }
 
   /**
    * Update flag that indicates presence of autocomplete matches in preset 
options for search query parameter name
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 e95c78a..4cb08cc 100644
--- a/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json
+++ b/ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json
@@ -79,6 +79,8 @@
   "filter.timeRange.custom": "Custom",
   "filter.timeRange.from": "from",
   "filter.timeRange.to": "to",
+  "filter.toggleTo.exclude": "Toggle to exclude",
+  "filter.toggleTo.include": "Toggle to include",
 
   "levels.fatal": "Fatal",
   "levels.error": "Error",

-- 
To stop receiving notification emails like this one, please contact
ababiic...@apache.org.

Reply via email to