You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by ab...@apache.org on 2018/04/12 10:38:18 UTC
[ambari] branch trunk updated: AMBARI-23512 Log Search UI: search
box fixes
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 <to...@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
ababiichuk@apache.org.