AMBARI-22038 Log Search UI: implement application of selected text to service logs filters. (ababiichuk)

ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts

@@ -84,7 +84,7 @@ export function HttpLoaderFactory(http: Http) {
   return new TranslateHttpLoader(http, 'resources/assets/i18n/', '.json?static=true');
 }
 
-export function getXHRBackend(injector: Injector, browser: BrowserXhr, xsrf: XSRFStrategy, options: ResponseOptions): any {
+export function getXHRBackend(injector: Injector, browser: BrowserXhr, xsrf: XSRFStrategy, options: ResponseOptions): XHRBackend | InMemoryBackendService {
   if (environment.production) {
     return new XHRBackend(browser, options, xsrf);
   } else {

ambari-logsearch/ambari-logsearch-web/src/app/classes/list-item.class.ts

@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface ListItem {
+  id?: string;
+  label?: string;
+  value: any;
+  iconClass?: string;
+  isChecked?: boolean;
+}

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

@@ -17,6 +17,7 @@
  */
 
 import {Component, OnInit, Input} from '@angular/core';
+import {ListItem} from '@app/classes/list-item.class';
 import {ComponentActionsService} from '@app/services/component-actions.service';
 import {UtilsService} from '@app/services/utils.service';
 
@@ -47,7 +48,7 @@ export class DropdownButtonComponent implements OnInit {
   showSelectedValue: boolean = true;
 
   @Input()
-  options?: any[];
+  options?: ListItem[];
 
   @Input()
   defaultValue?: string;
@@ -82,7 +83,7 @@ export class DropdownButtonComponent implements OnInit {
     this.selectedValue = value;
   }
 
-  updateValue(eventOptions: any): void {
+  updateValue(eventOptions: ListItem): void {
     const value = eventOptions && eventOptions.value,
       action = this.action && this.actions[this.action];
     if (this.isMultipleChoice) {

ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.html

@@ -19,12 +19,15 @@
   <label class="list-item-label" *ngIf="isMultipleChoice">
     <input type="checkbox" [attr.id]="item.id || item.value" [attr.checked]="item.isChecked ? 'checked' : null"
            (change)="changeSelectedItem({value: item.value, isChecked: $event.currentTarget.checked})">
-    <label [attr.for]="item.id || item.value" class="label-container">{{item.label | translate}}
+    <label [attr.for]="item.id || item.value" class="label-container">
+      <span *ngIf="item.iconClass" [ngClass]="item.iconClass"></span>
+      {{item.label | translate}}
       <div #additionalComponent></div>
     </label>
   </label>
   <span class="list-item-label label-container" *ngIf="!isMultipleChoice"
         (click)="changeSelectedItem({value: item.value, label: item.label})">
+    <span *ngIf="item.iconClass" [ngClass]="item.iconClass"></span>
     {{item.label | translate}}
     <div #additionalComponent></div>
   </span>

ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.ts

@@ -17,6 +17,7 @@
  */
 
 import {Component, AfterViewInit, Input, Output, EventEmitter, ViewChildren, ViewContainerRef, QueryList} from '@angular/core';
+import {ListItem} from '@app/classes/list-item.class';
 import {ComponentGeneratorService} from '@app/services/component-generator.service';
 
 @Component({
@@ -37,7 +38,7 @@ export class DropdownListComponent implements AfterViewInit {
   }
 
   @Input()
-  items: any[];
+  items: ListItem[];
 
   @Input()
   defaultAction: Function;
@@ -49,14 +50,14 @@ export class DropdownListComponent implements AfterViewInit {
   additionalLabelComponentSetter?: string;
 
   @Output()
-  selectedItemChange: EventEmitter<any> = new EventEmitter();
+  selectedItemChange: EventEmitter<ListItem> = new EventEmitter();
 
   @ViewChildren('additionalComponent', {
     read: ViewContainerRef
   })
   containers: QueryList<ViewContainerRef>;
 
-  changeSelectedItem(options: any): void {
+  changeSelectedItem(options: ListItem): void {
     this.selectedItemChange.emit(options);
   }
 

ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.ts

@@ -18,6 +18,7 @@
 
 import {Component, Input, forwardRef} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {ListItem} from "@app/classes/list-item.class";
 import {ComponentActionsService} from '@app/services/component-actions.service';
 import {UtilsService} from '@app/services/utils.service';
 import {MenuButtonComponent} from '@app/components/menu-button/menu-button.component';
@@ -56,7 +57,7 @@ export class FilterButtonComponent extends MenuButtonComponent implements Contro
     this.onChange(newValue);
   }
 
-  updateValue(options: any): void {
+  updateValue(options: ListItem): void {
     const value = options && options.value;
     if (this.isMultipleChoice) {
       this.value = this.utils.updateMultiSelectValue(this.value, value, options.isChecked);

ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.html

@@ -21,7 +21,8 @@
                      [defaultLabel]="filters.clusters.defaultLabel" [isMultipleChoice]="true"
                      class="filter-input"></filter-dropdown>
     <search-box formControlName="query" [items]="searchBoxItemsTranslated" class="filter-input"
-                [parameterNameChangeSubject]="queryParameterNameChange"></search-box>
+                [parameterNameChangeSubject]="queryParameterNameChange"
+                [parameterAddSubject]="queryParameterAdd"></search-box>
     <time-range-picker formControlName="timeRange" [defaultLabel]="filters.timeRange.defaultLabel"
                        class="filter-input"></time-range-picker>
     <timezone-picker class="filter-input"></timezone-picker>

ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.ts

@@ -20,6 +20,8 @@ import {Component} from '@angular/core';
 import {FormGroup} from '@angular/forms';
 import {Subject} from 'rxjs/Subject';
 import {TranslateService} from '@ngx-translate/core';
+import {ListItem} from '@app/classes/list-item.class';
+import {CommonEntry} from '@app/models/common-entry.model';
 import {FilteringService} from '@app/services/filtering.service';
 import {LogsContainerService} from '@app/services/logs-container.service';
 import {AppStateService} from '@app/services/storage/app-state.service';
@@ -67,9 +69,9 @@ export class FiltersPanelComponent {
 
   private logsType: string; // TODO implement setting the parameter depending on user's navigation
 
-  searchBoxItems: any[] = [];
+  searchBoxItems: ListItem[] = [];
 
-  searchBoxItemsTranslated: any[] = [];
+  searchBoxItemsTranslated: CommonEntry[] = [];
 
   get filters(): any {
     return this.filtering.filters;
@@ -83,4 +85,8 @@ export class FiltersPanelComponent {
     return this.filtering.queryParameterNameChange;
   }
 
+  get queryParameterAdd(): Subject<any> {
+    return this.filtering.queryParameterAdd;
+  }
+
 }

ambari-logsearch/ambari-logsearch-web/src/app/components/logs-list/logs-list.component.html

@@ -46,7 +46,10 @@
           <span class="action-icon fa fa-crosshairs"></span>
         </div>
         <div class="log-content-inner-wrapper">
-          <div class="log-content" *ngIf="isColumnDisplayed('log_message')">{{log.log_message}}</div>
+          <div class="log-content" *ngIf="isColumnDisplayed('log_message')"
+               (contextmenu)="openMessageContextMenu($event)">
+            {{log.log_message}}
+          </div>
         </div>
       </div>
       <div *ngFor="let column of displayedColumns">
@@ -56,5 +59,7 @@
     </ng-template>
   </accordion-panel>
 </div>
+<ul #contextmenu data-component="dropdown-list" class="dropdown-menu context-menu" [items]="contextMenuItems"
+    (selectedItemChange)="updateQuery($event)"></ul>
 <pagination class="col-md-12" *ngIf="logs && logs.length" [totalCount]="totalCount" [filtersForm]="filtersForm"
             [filterInstance]="filters.pageSize" [currentCount]="logs.length"></pagination>

ambari-logsearch/ambari-logsearch-web/src/app/components/logs-list/logs-list.component.less

@@ -135,3 +135,7 @@
     }
   }
 }
+
+.context-menu {
+  position: fixed;
+}

ambari-logsearch/ambari-logsearch-web/src/app/components/logs-list/logs-list.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {Component, Input} from '@angular/core';
+import {Component, OnInit, Input, ViewChild, ElementRef} from '@angular/core';
 import {FormGroup} from '@angular/forms';
 import 'rxjs/add/operator/map';
 import {FilteringService} from '@app/services/filtering.service';
@@ -26,11 +26,15 @@ import {UtilsService} from '@app/services/utils.service';
   templateUrl: './logs-list.component.html',
   styleUrls: ['./logs-list.component.less']
 })
-export class LogsListComponent {
+export class LogsListComponent implements OnInit {
 
   constructor(private filtering: FilteringService, private utils: UtilsService) {
   }
 
+  ngOnInit() {
+    this.contextMenuElement = this.contextMenu.nativeElement;
+  }
+
   @Input()
   logs: any[] = [];
 
@@ -40,8 +44,32 @@ export class LogsListComponent {
   @Input()
   displayedColumns: any[] = [];
 
+  @ViewChild('contextmenu', {
+    read: ElementRef
+  })
+  contextMenu: ElementRef;
+
+  private contextMenuElement: HTMLElement;
+
+  private selectedText: string = '';
+
+  private readonly messageFilterParameterName = 'log_message';
+
   readonly customStyledColumns = ['level', 'type', 'logtime', 'log_message'];
 
+  readonly contextMenuItems = [
+    {
+      label: 'logs.addToQuery',
+      iconClass: 'fa fa-search-plus',
+      value: false // 'isExclude' is false
+    },
+    {
+      label: 'logs.excludeFromQuery',
+      iconClass: 'fa fa-search-minus',
+      value: true // 'isExclude' is true
+    }
+  ];
+
   readonly dateFormat: string = 'dddd, MMMM Do';
 
   readonly timeFormat: string = 'h:mm:ss A';
@@ -66,4 +94,33 @@ export class LogsListComponent {
     return this.displayedColumns.some(column => column.name === key);
   }
 
+  openMessageContextMenu(event: MouseEvent): void {
+    const selectedText = getSelection().toString();
+    if (selectedText) {
+      let contextMenuStyle = this.contextMenuElement.style;
+      Object.assign(contextMenuStyle, {
+        left: `${event.clientX}px`,
+        top: `${event.clientY}px`,
+        display: 'block'
+      });
+      this.selectedText = selectedText;
+      document.body.addEventListener('click', this.dismissContextMenu);
+      event.preventDefault();
+    }
+  }
+
+  updateQuery(event: any) {
+    this.filtering.queryParameterAdd.next({
+      name: this.messageFilterParameterName,
+      value: this.selectedText,
+      isExclude: event.value
+    });
+  }
+
+  private dismissContextMenu = (): void => {
+    this.selectedText = '';
+    this.contextMenuElement.style.display = 'none';
+    document.body.removeEventListener('click', this.dismissContextMenu);
+  }
+
 }

ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.spec.ts

@@ -28,6 +28,7 @@ import {HostsService, hosts} from '@app/services/storage/hosts.service';
 import {ComponentActionsService} from '@app/services/component-actions.service';
 import {FilteringService} from '@app/services/filtering.service';
 import {HttpClientService} from '@app/services/http-client.service';
+import {ListItem} from "@app/classes/list-item.class";
 
 import {MenuButtonComponent} from './menu-button.component';
 
@@ -86,7 +87,11 @@ describe('MenuButtonComponent', () => {
         title: 'empty sub-items array'
       },
       {
-        subItems: [{}],
+        subItems: [
+          {
+            value: null
+          }
+        ],
         hasSubItems: true,
         title: 'sub-items present'
       }
@@ -115,13 +120,21 @@ describe('MenuButtonComponent', () => {
         title: 'empty sub-items array'
       },
       {
-        subItems: [{}],
+        subItems: [
+          {
+            value: null
+          }
+        ],
         hideCaret: false,
         hasCaret: true,
         title: 'sub-items present, caret not hidden'
       },
       {
-        subItems: [{}],
+        subItems: [
+          {
+            value: null
+          }
+        ],
         hideCaret: true,
         hasCaret: true,
         title: 'sub-items present, caret hidden'

ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts

@@ -17,6 +17,7 @@
  */
 
 import {Component, Input, ViewChild, ElementRef} from '@angular/core';
+import {ListItem} from '@app/classes/list-item.class';
 import {ComponentActionsService} from '@app/services/component-actions.service';
 import * as $ from 'jquery';
 
@@ -46,7 +47,7 @@ export class MenuButtonComponent {
   labelClass?: string;
 
   @Input()
-  subItems?: any[];
+  subItems?: ListItem[];
 
   @Input()
   isMultipleChoice: boolean = false;
@@ -90,7 +91,7 @@ export class MenuButtonComponent {
     }
   }
   
-  updateValue(options: any) {
+  updateValue(options: ListItem) {
     // TODO implement value change behaviour
   }
 

ambari-logsearch/ambari-logsearch-web/src/app/components/search-box/search-box.component.ts

@@ -19,6 +19,7 @@
 import {Component, OnInit, OnDestroy, Input, ViewChild, ElementRef, forwardRef} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Subject} from 'rxjs/Subject';
+import {CommonEntry} from '@app/models/common-entry.model';
 import {UtilsService} from '@app/services/utils.service';
 
 @Component({
@@ -48,6 +49,7 @@ export class SearchBoxComponent implements OnInit, OnDestroy, ControlValueAccess
     this.parameterInput.addEventListener('blur', this.onParameterInputBlur);
     this.valueInput.addEventListener('blur', this.onValueInputBlur);
     this.parameterNameChangeSubject.subscribe(this.onParameterNameChange);
+    this.parameterAddSubject.subscribe(this.onParameterAdd);
   }
 
   ngOnDestroy() {
@@ -57,6 +59,7 @@ export class SearchBoxComponent implements OnInit, OnDestroy, ControlValueAccess
     this.parameterInput.removeEventListener('blur', this.onParameterInputBlur);
     this.valueInput.removeEventListener('blur', this.onValueInputBlur);
     this.parameterNameChangeSubject.unsubscribe();
+    this.parameterAddSubject.unsubscribe();
   }
 
   private currentId: number = 0;
@@ -74,22 +77,25 @@ export class SearchBoxComponent implements OnInit, OnDestroy, ControlValueAccess
   currentValue: string;
 
   @Input()
-  items: any[] = [];
+  items: CommonEntry[] = [];
 
   @Input()
   parameterNameChangeSubject: Subject<any> = this.defaultSubject;
 
+  @Input()
+  parameterAddSubject: Subject<any> = this.defaultSubject;
+
   @ViewChild('parameterInput')
   parameterInputRef: ElementRef;
 
   @ViewChild('valueInput')
   valueInputRef: ElementRef;
 
-  rootElement: HTMLElement;
+  private rootElement: HTMLElement;
 
-  parameterInput: HTMLElement;
+  private parameterInput: HTMLElement;
 
-  valueInput: HTMLElement;
+  private valueInput: HTMLElement;
 
   activeItem?: any;
 
@@ -127,13 +133,17 @@ export class SearchBoxComponent implements OnInit, OnDestroy, ControlValueAccess
     }
   };
 
+  private getItem(name: string): CommonEntry {
+    return this.items.find(field => field.value === name);
+  }
+
   clear(): void {
     this.isActive = false;
     this.activeItem = null;
     this.currentValue = null;
   }
 
-  itemsListFormatter(item: any): string {
+  itemsListFormatter(item: CommonEntry): string {
     return item.name;
   }
 
@@ -142,8 +152,7 @@ export class SearchBoxComponent implements OnInit, OnDestroy, ControlValueAccess
   }
 
   onParameterNameChange = (options: any): void => {
-    this.activeItem = typeof options.item === 'string' ?
-      this.items.find(field => field.value === options.item) : options.item;
+    this.activeItem = typeof options.item === 'string' ? this.getItem(options.item) : options.item;
     this.isExclude = options.isExclude;
     this.isActive = true;
     this.isParameterInput = false;
@@ -168,6 +177,18 @@ export class SearchBoxComponent implements OnInit, OnDestroy, ControlValueAccess
     }
   }
 
+  onParameterAdd = (options: any): void => {
+    const item = this.getItem(options.name);
+    this.parameters.push({
+      id: this.currentId++,
+      name: options.name,
+      label: item.name,
+      value: options.value,
+      isExclude: options.isExclude
+    });
+    this.updateValue();
+  }
+
   removeParameter(event: MouseEvent, id: number): void {
     this.parameters = this.parameters.filter(parameter => parameter.id !== id);
     this.updateValue();

ambari-logsearch/ambari-logsearch-web/src/app/services/filtering.service.ts

@@ -20,6 +20,7 @@ import {Injectable} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {Subject} from 'rxjs/Subject';
 import * as moment from 'moment-timezone';
+import {ListItem} from '@app/classes/list-item.class';
 import {AppSettingsService} from '@app/services/storage/app-settings.service';
 import {ClustersService} from '@app/services/storage/clusters.service';
 import {ComponentsService} from '@app/services/storage/components.service';
@@ -47,7 +48,7 @@ export class FilteringService {
     });
   }
 
-  private getListItem(name: string): any {
+  private getListItem(name: string): ListItem {
     return {
       label: name,
       value: name
@@ -403,6 +404,8 @@ export class FilteringService {
 
   queryParameterNameChange: Subject<any> = new Subject();
 
+  queryParameterAdd: Subject<any> = new Subject();
+
   loadClusters(): void {
     this.httpClient.get('clusters').subscribe(response => {
       const clusterNames = response.json();

ambari-logsearch/ambari-logsearch-web/src/assets/i18n/en.json

@@ -139,5 +139,7 @@
   "logs.stack": "Stack",
   "logs.taskId": "Task Id",
   "logs.versionNote": "Version Note",
-  "logs.versionNumber": "Version Number"
+  "logs.versionNumber": "Version Number",
+  "logs.addToQuery": "Add to Query",
+  "logs.excludeFromQuery": "Exclude from Query"
 }

ambari-logsearch/ambari-logsearch-web/src/polyfills.ts

@@ -42,7 +42,7 @@ import 'core-js/es6/object';
 // import 'core-js/es6/function';
 // import 'core-js/es6/parse-int';
 // import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
+import 'core-js/es6/number';
 // import 'core-js/es6/math';
 import 'core-js/es6/string';
 // import 'core-js/es6/date';