[
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<GraphEmittedEvent<MouseEvent>> = new
EventEmitter();
+
+ @Output()
+ yTickContextMenu: EventEmitter<GraphEmittedEvent<MouseEvent>> = 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<EventType> {
+ 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"></horizontal-histogram>
</collapsible-panel>
<collapsible-panel commonTitle="{{'logs.topResources' | translate:
resourcesGraphTitleParams}}" class="col-md-6">
- <horizontal-histogram [data]="topResourcesGraphData"
[allowFractionalXTicks]="false"
+ <horizontal-histogram [data]="topResourcesGraphData"
[allowFractionalXTicks]="false" [hasYTickContextMenu]="true"
+ [emitFormattedYTick]="true"
(yTickContextMenu)="showContextMenu($event)"
svgId="top-resources-graph"></horizontal-histogram>
+ <context-menu [isDisplayed]="isContextMenuDisplayed"
[contextMenuItems]="contextMenuItems"
+ [leftPosition]="contextMenuLeft"
[topPosition]="contextMenuTop" (itemSelect)="updateQuery($event)"
+
(contextMenuDismiss)="onContextMenuDismiss()"></context-menu>
</collapsible-panel>
</div>
</ng-container>
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<HomogeneousObject<number>> {
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<MouseEvent>): 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 @@
+<!--
+ 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 data-component="dropdown-list" [items]="contextMenuItems"
(selectedItemChange)="selectItem($event)"
+ class="dropdown-menu" [style.left]="leftPosition + 'px'"
[style.top]="topPosition + 'px'"></ul>
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<ContextMenuComponent>;
+
+ 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<void> = new EventEmitter();
+
+ @Output()
+ itemSelect: EventEmitter<ListItem> = 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 @@
<div #additionalComponent></div>
</label>
</label>
- <span class="list-item-label label-container" *ngIf="!isMultipleChoice"
- (click)="changeSelectedItem(item)">
+ <span class="list-item-label label-container" *ngIf="!isMultipleChoice"
(click)="changeSelectedItem(item)">
<span *ngIf="item.iconClass" [ngClass]="item.iconClass"></span>
{{item.label | translate}}
<div #additionalComponent></div>
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 @@
</tr>
</tfoot>
</table>
- <ul #contextmenu data-component="dropdown-list" class="dropdown-menu
context-menu" [items]="contextMenuItems"
- (selectedItemChange)="updateQuery($event)"></ul>
+ <context-menu [isDisplayed]="isContextMenuDisplayed"
[contextMenuItems]="contextMenuItems"
+ [leftPosition]="contextMenuLeft"
[topPosition]="contextMenuTop" (itemSelect)="updateQuery($event)"
+ (contextMenuDismiss)="onContextMenuDismiss()"></context-menu>
</div>
</div>
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:
us...@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)
