From issues-return-65308-archive-asf-public=cust-asf.ponee.io@ambari.apache.org Wed Jan 10 19:55:10 2018 Return-Path: X-Original-To: archive-asf-public@eu.ponee.io Delivered-To: archive-asf-public@eu.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by mx-eu-01.ponee.io (Postfix) with ESMTP id A1A6518072F for ; Wed, 10 Jan 2018 19:55:10 +0100 (CET) Received: by cust-asf.ponee.io (Postfix) id 90F39160C2E; Wed, 10 Jan 2018 18:55:10 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id 37791160C1E for ; Wed, 10 Jan 2018 19:55:09 +0100 (CET) Received: (qmail 11640 invoked by uid 500); 10 Jan 2018 18:55:08 -0000 Mailing-List: contact issues-help@ambari.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@ambari.apache.org Delivered-To: mailing list issues@ambari.apache.org Received: (qmail 11631 invoked by uid 99); 10 Jan 2018 18:55:08 -0000 Received: from pnap-us-west-generic-nat.apache.org (HELO spamd2-us-west.apache.org) (209.188.14.142) by apache.org (qpsmtpd/0.29) with ESMTP; Wed, 10 Jan 2018 18:55:08 +0000 Received: from localhost (localhost [127.0.0.1]) by spamd2-us-west.apache.org (ASF Mail Server at spamd2-us-west.apache.org) with ESMTP id E733E1A0152 for ; Wed, 10 Jan 2018 18:55:07 +0000 (UTC) X-Virus-Scanned: Debian amavisd-new at spamd2-us-west.apache.org X-Spam-Flag: NO X-Spam-Score: -99.911 X-Spam-Level: X-Spam-Status: No, score=-99.911 tagged_above=-999 required=6.31 tests=[KAM_ASCII_DIVIDERS=0.8, RCVD_IN_DNSWL_LOW=-0.7, SPF_PASS=-0.001, T_RP_MATCHES_RCVD=-0.01, USER_IN_WHITELIST=-100] autolearn=disabled Received: from mx1-lw-eu.apache.org ([10.40.0.8]) by localhost (spamd2-us-west.apache.org [10.40.0.9]) (amavisd-new, port 10024) with ESMTP id 99-IbklyhoI9 for ; Wed, 10 Jan 2018 18:55:02 +0000 (UTC) Received: from mailrelay1-us-west.apache.org (mailrelay1-us-west.apache.org [209.188.14.139]) by mx1-lw-eu.apache.org (ASF Mail Server at mx1-lw-eu.apache.org) with ESMTP id C02925FAEA for ; Wed, 10 Jan 2018 18:55:01 +0000 (UTC) Received: from jira-lw-us.apache.org (unknown [207.244.88.139]) by mailrelay1-us-west.apache.org (ASF Mail Server at mailrelay1-us-west.apache.org) with ESMTP id C1CAAE0F13 for ; Wed, 10 Jan 2018 18:55:00 +0000 (UTC) Received: from jira-lw-us.apache.org (localhost [127.0.0.1]) by jira-lw-us.apache.org (ASF Mail Server at jira-lw-us.apache.org) with ESMTP id 73E6A274D5 for ; Wed, 10 Jan 2018 18:55:00 +0000 (UTC) Date: Wed, 10 Jan 2018 18:55:00 +0000 (UTC) From: "ASF GitHub Bot (JIRA)" To: issues@ambari.apache.org Message-ID: In-Reply-To: References: Subject: [jira] [Commented] (AMBARI-22757) Log Search UI: implement query manipulation from resources diagram MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 7bit X-JIRA-FingerPrint: 30527f35849b9dde25b450d4833f0394 [ https://issues.apache.org/jira/browse/AMBARI-22757?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16320845#comment-16320845 ] ASF GitHub Bot commented on AMBARI-22757: ----------------------------------------- aBabiichuk closed pull request #81: [AMBARI-22757] Log Search UI: implement query manipulation from resources diagram URL: https://github.com/apache/ambari/pull/81 This is a PR merged from a forked repository. As GitHub hides the original diff on merge, it is displayed below for the sake of provenance: As this is a foreign pull request (from a fork), the diff is supplied below (as it won't show otherwise due to GitHub magic): diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts b/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts index 6258c73c753..bbf7935c816 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts @@ -94,6 +94,7 @@ import {HorizontalHistogramComponent} from '@app/components/horizontal-histogram import {GraphTooltipComponent} from '@app/components/graph-tooltip/graph-tooltip.component'; import {GraphLegendItemComponent} from '@app/components/graph-legend-item/graph-legend-item.component'; import {TimeLineGraphComponent} from '@app/components/time-line-graph/time-line-graph.component'; +import {ContextMenuComponent} from '@app/components/context-menu/context-menu.component'; import {TimeZoneAbbrPipe} from '@app/pipes/timezone-abbr.pipe'; import {TimerSecondsPipe} from '@app/pipes/timer-seconds.pipe'; @@ -156,6 +157,7 @@ export function getXHRBackend(injector: Injector, browser: BrowserXhr, xsrf: XSR GraphTooltipComponent, GraphLegendItemComponent, TimeLineGraphComponent, + ContextMenuComponent, TimeZoneAbbrPipe, TimerSecondsPipe ], diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts index 167f4780fa2..0cfe69af470 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts @@ -16,11 +16,13 @@ * limitations under the License. */ -import {AfterViewInit, OnChanges, SimpleChanges, ViewChild, ElementRef, Input} from '@angular/core'; +import { + AfterViewInit, OnChanges, SimpleChanges, ViewChild, ElementRef, Input, Output, EventEmitter +} from '@angular/core'; import * as d3 from 'd3'; import * as d3sc from 'd3-scale-chromatic'; import { - GraphPositionOptions, GraphMarginOptions, GraphTooltipInfo, LegendItem, GraphEventData + GraphPositionOptions, GraphMarginOptions, GraphTooltipInfo, LegendItem, GraphEventData, GraphEmittedEvent } from '@app/classes/graph'; import {HomogeneousObject} from '@app/classes/object'; import {ServiceInjector} from '@app/classes/service-injector'; @@ -119,6 +121,42 @@ export class GraphComponent implements AfterViewInit, OnChanges { @Input() skipZeroValuesInTooltip: boolean = true; + /** + * Indicates whether context menu for X axis ticks is available + * @type {boolean} + */ + @Input() + hasXTickContextMenu: boolean = false; + + /** + * Indicates whether context menu for Y axis ticks is available + * @type {boolean} + */ + @Input() + hasYTickContextMenu: boolean = false; + + /** + * Indicates whether X axis event should be emitted with formatted string values that are displayed + * (instead of raw values) + * @type {boolean} + */ + @Input() + emitFormattedXTick: boolean = false; + + /** + * Indicates whether Y axis event should be emitted with formatted string values that are displayed + * (instead of raw values) + * @type {boolean} + */ + @Input() + emitFormattedYTick: boolean = false; + + @Output() + xTickContextMenu: EventEmitter> = new EventEmitter(); + + @Output() + yTickContextMenu: EventEmitter> = new EventEmitter(); + @ViewChild('graphContainer') graphContainerRef: ElementRef; @@ -127,6 +165,10 @@ export class GraphComponent implements AfterViewInit, OnChanges { }) tooltipRef: ElementRef; + private readonly xAxisClassName: string = 'axis-x'; + + private readonly yAxisClassName: string = 'axis-y'; + protected utils: UtilsService; protected graphContainer: HTMLElement; @@ -276,7 +318,16 @@ export class GraphComponent implements AfterViewInit, OnChanges { axis.ticks(ticksCount); } this.xAxis = axis; - this.svg.append('g').attr('class', 'axis axis-x').attr('transform', `translate(0,${this.height})`).call(this.xAxis); + this.svg.append('g').attr('class', `axis ${this.xAxisClassName}`).attr('transform', `translate(0,${this.height})`) + .call(this.xAxis); + if (this.hasXTickContextMenu) { + this.svg.selectAll(`.${this.xAxisClassName} .tick`).on('contextmenu', (tickValue: any, index: number): void => { + const tick = this.emitFormattedXTick ? this.xAxisTickFormatter(tickValue, index) : tickValue, + nativeEvent = d3.event; + this.xTickContextMenu.emit({tick, nativeEvent}); + event.preventDefault(); + }); + } } /** @@ -290,7 +341,15 @@ export class GraphComponent implements AfterViewInit, OnChanges { axis.ticks(ticksCount); } this.yAxis = axis; - this.svg.append('g').attr('class', 'axis axis-y').call(this.yAxis).append('text'); + this.svg.append('g').attr('class', `axis ${this.yAxisClassName}`).call(this.yAxis); + if (this.hasYTickContextMenu) { + this.svg.selectAll(`.${this.yAxisClassName} .tick`).on('contextmenu', (tickValue: any, index: number): void => { + const tick = this.emitFormattedYTick ? this.yAxisTickFormatter(tickValue, index): tickValue, + nativeEvent = d3.event; + this.yTickContextMenu.emit({tick, nativeEvent}); + event.preventDefault(); + }); + } }; /** diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts index cc07ec86b3f..9690dbcfec7 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts @@ -59,3 +59,8 @@ export interface GraphLineData { points: GraphScaleItem[]; key: string; } + +export interface GraphEmittedEvent { + tick: any; + nativeEvent: EventType; +} diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.html index fe9f6977faf..22deef112ea 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.html @@ -25,8 +25,12 @@ svgId="top-users-graph"> - + diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.ts index 44786f1fc51..98542d64cbc 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.ts @@ -17,6 +17,7 @@ import {Component, Input} from '@angular/core'; import {FormGroup} from '@angular/forms'; +import {GraphEmittedEvent} from '@app/classes/graph'; import {ListItem} from '@app/classes/list-item'; import {HomogeneousObject} from '@app/classes/object'; import {AuditLog} from '@app/classes/models/audit-log'; @@ -63,6 +64,18 @@ export class AuditLogsEntriesComponent { */ activeTab: string = 'summary'; + /** + * 'left' CSS property value for context menu dropdown + * @type {number} + */ + contextMenuLeft: number = 0; + + /** + * 'top' CSS property value for context menu dropdown + * @type {number} + */ + contextMenuTop: number = 0; + readonly usersGraphTitleParams = { number: this.logsContainer.topUsersCount }; @@ -71,6 +84,14 @@ export class AuditLogsEntriesComponent { number: this.logsContainer.topResourcesCount }; + private readonly resourceFilterParameterName: string = 'resource'; + + /** + * Text for filtering be resource type (set from Y axis tick of Resources chart) + * @type {string} + */ + private selectedResource: string = ''; + get topResourcesGraphData(): HomogeneousObject> { return this.logsContainer.topResourcesGraphData; } @@ -79,8 +100,34 @@ export class AuditLogsEntriesComponent { return this.logsContainer.topUsersGraphData; } + get isContextMenuDisplayed(): boolean { + return Boolean(this.selectedResource); + } + + get contextMenuItems(): ListItem[] { + return this.logsContainer.queryContextMenuItems; + } + setActiveTab(tab: Tab): void { this.activeTab = tab.id; } + showContextMenu(event: GraphEmittedEvent): void { + this.contextMenuLeft = event.nativeEvent.clientX; + this.contextMenuTop = event.nativeEvent.clientY; + this.selectedResource = event.tick; + } + + updateQuery(event: ListItem): void { + this.logsContainer.queryParameterAdd.next({ + name: this.resourceFilterParameterName, + value: this.selectedResource, + isExclude: event.value + }); + } + + onContextMenuDismiss(): void { + this.selectedResource = ''; + } + } diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.html new file mode 100644 index 00000000000..b17cda6102e --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.html @@ -0,0 +1,19 @@ + + +
    diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.less new file mode 100644 index 00000000000..aea7274b188 --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.less @@ -0,0 +1,21 @@ +/** + * 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. + */ + +ul.dropdown-menu { + position: fixed; +} diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.spec.ts new file mode 100644 index 00000000000..1c5154bae83 --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.spec.ts @@ -0,0 +1,123 @@ +/** + * 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. + */ + +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {FormsModule} from '@angular/forms'; +import {StoreModule} from '@ngrx/store'; +import {TranslationModules} from '@app/test-config.spec'; +import {HostsService, hosts} from '@app/services/storage/hosts.service'; +import {AuditLogsService, auditLogs} from '@app/services/storage/audit-logs.service'; +import {ServiceLogsService, serviceLogs} from '@app/services/storage/service-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 {ServiceLogsFieldsService, serviceLogsFields} from '@app/services/storage/service-logs-fields.service'; +import { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; +import {AppSettingsService, appSettings} from '@app/services/storage/app-settings.service'; +import {AppStateService, appState} from '@app/services/storage/app-state.service'; +import {ClustersService, clusters} from '@app/services/storage/clusters.service'; +import {ComponentsService, components} from '@app/services/storage/components.service'; +import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; +import {TabsService, tabs} from '@app/services/storage/tabs.service'; +import {ComponentGeneratorService} from '@app/services/component-generator.service'; +import {LogsContainerService} from '@app/services/logs-container.service'; +import {HttpClientService} from '@app/services/http-client.service'; +import {ComponentActionsService} from '@app/services/component-actions.service'; +import {AuthService} from '@app/services/auth.service'; +import {DropdownListComponent} from '@app/components/dropdown-list/dropdown-list.component'; + +import {ContextMenuComponent} from './context-menu.component'; + +describe('ContextMenuComponent', () => { + let component: ContextMenuComponent; + let fixture: ComponentFixture; + + const httpClient = { + get: () => { + return { + subscribe: () => { + } + } + } + }; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + ContextMenuComponent, + DropdownListComponent + ], + imports: [ + ...TranslationModules, + StoreModule.provideStore({ + hosts, + auditLogs, + serviceLogs, + auditLogsFields, + auditLogsGraphData, + serviceLogsFields, + serviceLogsHistogramData, + appSettings, + appState, + clusters, + components, + serviceLogsTruncated, + tabs + }), + FormsModule + ], + providers: [ + ComponentGeneratorService, + LogsContainerService, + { + provide: HttpClientService, + useValue: httpClient + }, + ComponentActionsService, + HostsService, + AuditLogsService, + ServiceLogsService, + AuditLogsFieldsService, + AuditLogsGraphDataService, + ServiceLogsFieldsService, + ServiceLogsHistogramDataService, + AppSettingsService, + AppStateService, + ClustersService, + ComponentsService, + ServiceLogsTruncatedService, + TabsService, + AuthService + ], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContextMenuComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create component', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.ts new file mode 100644 index 00000000000..05414ec1b2e --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/context-menu/context-menu.component.ts @@ -0,0 +1,72 @@ +/** + * 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. + */ + +import {Component, OnChanges, SimpleChanges, Input, Output, EventEmitter, HostBinding} from '@angular/core'; +import {ListItem} from '@app/classes/list-item'; + +@Component({ + selector: 'context-menu', + templateUrl: './context-menu.component.html', + styleUrls: ['./context-menu.component.less'] +}) +export class ContextMenuComponent implements OnChanges { + + ngOnChanges (changes: SimpleChanges): void { + if (changes.isDisplayed && changes.isDisplayed.currentValue) { + document.body.addEventListener('click', this.dismissContextMenu); + } + } + + @Input() + @HostBinding('class.open') + isDisplayed: boolean = false; + + @Input() + contextMenuItems: ListItem[] = []; + + /** + * 'left' CSS property value + * @type {number} + */ + @Input() + leftPosition: number = 0; + + /** + * 'top' CSS property value + * @type {number} + */ + @Input() + topPosition: number = 0; + + @Output() + contextMenuDismiss: EventEmitter = new EventEmitter(); + + @Output() + itemSelect: EventEmitter = new EventEmitter(); + + private dismissContextMenu = (): void => { + this.isDisplayed = false; + this.contextMenuDismiss.emit(); + document.body.removeEventListener('click', this.dismissContextMenu); + }; + + selectItem(event: ListItem): void { + this.itemSelect.emit(event); + } + +} diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.html index df564e5dd55..64e4b8eb736 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.html @@ -25,8 +25,7 @@
    - + {{item.label | translate}}
    diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html index 7f9c6d7231e..23de664b481 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.html @@ -71,7 +71,8 @@ -
      + diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.ts index 84a59b96bfa..141c1ab6cf0 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import {Component, AfterViewInit, ViewChild, ElementRef} from '@angular/core'; +import {Component} from '@angular/core'; import {ListItem} from '@app/classes/list-item'; import {LogsTableComponent} from '@app/classes/components/logs-table/logs-table-component'; import {LogsContainerService} from '@app/services/logs-container.service'; @@ -27,23 +27,12 @@ import {UtilsService} from '@app/services/utils.service'; templateUrl: './service-logs-table.component.html', styleUrls: ['./service-logs-table.component.less'] }) -export class ServiceLogsTableComponent extends LogsTableComponent implements AfterViewInit { +export class ServiceLogsTableComponent extends LogsTableComponent { constructor(private logsContainer: LogsContainerService, private utils: UtilsService) { super(); } - ngAfterViewInit() { - if (this.contextMenu) { - this.contextMenuElement = this.contextMenu.nativeElement; - } - } - - @ViewChild('contextmenu', { - read: ElementRef - }) - contextMenu: ElementRef; - readonly dateFormat: string = 'dddd, MMMM Do'; readonly timeFormat: string = 'h:mm:ss A'; @@ -68,25 +57,16 @@ export class ServiceLogsTableComponent extends LogsTableComponent implements Aft readonly customStyledColumns: string[] = ['level', 'type', 'logtime', 'log_message']; - readonly contextMenuItems: ListItem[] = [ - { - 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 - } - ]; - private readonly messageFilterParameterName: string = 'log_message'; private contextMenuElement: HTMLElement; private selectedText: string = ''; + get contextMenuItems(): ListItem[] { + return this.logsContainer.queryContextMenuItems; + } + get timeZone(): string { return this.logsContainer.timeZone; } @@ -99,6 +79,22 @@ export class ServiceLogsTableComponent extends LogsTableComponent implements Aft return this.logsContainer.logsTypeMap.serviceLogs; } + get isContextMenuDisplayed(): boolean { + return Boolean(this.selectedText); + }; + + /** + * 'left' CSS property value for context menu dropdown + * @type {number} + */ + contextMenuLeft: number = 0; + + /** + * 'top' CSS property value for context menu dropdown + * @type {number} + */ + contextMenuTop: number = 0; + isDifferentDates(dateA, dateB): boolean { return this.utils.isDifferentDates(dateA, dateB, this.timeZone); } @@ -106,14 +102,9 @@ export class ServiceLogsTableComponent extends LogsTableComponent implements Aft 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.contextMenuLeft = event.clientX; + this.contextMenuTop = event.clientY; this.selectedText = selectedText; - document.body.addEventListener('click', this.dismissContextMenu); event.preventDefault(); } } @@ -126,10 +117,8 @@ export class ServiceLogsTableComponent extends LogsTableComponent implements Aft }); } - private dismissContextMenu = (): void => { + onContextMenuDismiss(): void { this.selectedText = ''; - this.contextMenuElement.style.display = 'none'; - document.body.removeEventListener('click', this.dismissContextMenu); - }; + } } diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts b/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts index 4c8f2a3db20..baa39720621 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/services/logs-container.service.ts @@ -537,6 +537,19 @@ export class LogsContainerService { private readonly defaultTimeZone = moment.tz.guess(); + readonly queryContextMenuItems: ListItem[] = [ + { + 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 + } + ]; + timeZone: string = this.defaultTimeZone; totalCount: number = 0; ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: users@infra.apache.org > Log Search UI: implement query manipulation from resources diagram > ------------------------------------------------------------------ > > Key: AMBARI-22757 > URL: https://issues.apache.org/jira/browse/AMBARI-22757 > Project: Ambari > Issue Type: Task > Components: ambari-logsearch > Affects Versions: 3.0.0 > Reporter: Andrii Babiichuk > Assignee: Andrii Babiichuk > Fix For: 3.0.0 > > Attachments: AMBARI-22757.patch > > > User should be able to add or exclude resources from access logs query from diagram on Summary tab. -- This message was sent by Atlassian JIRA (v6.4.14#64029)