AMBARI-22741 Log Search UI: implement graph for access logs. (ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/011e448e Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/011e448e Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/011e448e Branch: refs/heads/trunk Commit: 011e448e22acf6b5f677aaab0c41d064e4d66577 Parents: 2b9a34b Author: ababiichuk <ababiic...@hortonworks.com> Authored: Fri Jan 5 21:37:12 2018 +0200 Committer: ababiichuk <ababiic...@hortonworks.com> Committed: Fri Jan 5 21:37:12 2018 +0200 ---------------------------------------------------------------------- .../ambari-logsearch-web/src/app/app.module.ts | 4 + .../components/graph/graph.component.less | 1 + .../classes/components/graph/graph.component.ts | 75 ++++-- .../components/graph/time-graph.component.less | 48 ++++ .../components/graph/time-graph.component.ts | 250 +++++++++++++++++++ .../src/app/classes/graph.ts | 19 ++ .../src/app/classes/models/store.ts | 1 + .../audit-logs-graph-query-params.spec.ts | 203 +++++++++++++++ .../queries/audit-logs-graph-query-params.ts | 69 +++++ .../service-logs-histogram-query-params.spec.ts | 203 --------------- .../service-logs-histogram-query-params.ts | 50 +--- .../audit-logs-entries.component.html | 10 +- .../audit-logs-entries.component.spec.ts | 3 + .../audit-logs-table.component.spec.ts | 7 +- .../collapsible-panel.component.html | 6 +- .../collapsible-panel.component.spec.ts | 4 +- .../collapsible-panel.component.ts | 4 +- .../dropdown-button.component.spec.ts | 7 +- .../dropdown-list.component.spec.ts | 7 +- .../filter-button.component.spec.ts | 7 +- .../filter-dropdown.component.spec.ts | 3 + .../filters-panel.component.spec.ts | 7 +- .../horizontal-histogram.component.ts | 8 +- .../log-context/log-context.component.spec.ts | 7 +- .../logs-container.component.html | 28 ++- .../logs-container.component.spec.ts | 7 +- .../logs-container/logs-container.component.ts | 30 ++- .../menu-button/menu-button.component.spec.ts | 7 +- .../service-logs-table.component.spec.ts | 7 +- .../time-histogram.component.html | 2 +- .../time-histogram.component.less | 36 --- .../time-histogram.component.spec.ts | 1 - .../time-histogram/time-histogram.component.ts | 247 +----------------- .../time-line-graph.component.html | 27 ++ .../time-line-graph.component.less | 42 ++++ .../time-line-graph.component.spec.ts | 69 +++++ .../time-line-graph.component.ts | 111 ++++++++ .../time-range-picker.component.spec.ts | 7 +- .../timezone-picker.component.spec.ts | 7 +- .../top-menu/top-menu.component.spec.ts | 3 + .../ambari-logsearch-web/src/app/mock-data.ts | 36 ++- .../services/component-actions.service.spec.ts | 7 +- .../component-generator.service.spec.ts | 7 +- .../src/app/services/http-client.service.ts | 5 + .../app/services/logs-container.service.spec.ts | 3 + .../src/app/services/logs-container.service.ts | 61 ++--- .../storage/audit-logs-graph-data.service.ts | 32 +++ .../app/services/storage/reducers.service.ts | 2 + .../src/assets/i18n/en.json | 1 + 49 files changed, 1164 insertions(+), 624 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts ---------------------------------------------------------------------- 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 da78a71..6258c73 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/app.module.ts @@ -42,6 +42,7 @@ import {ComponentGeneratorService} from '@app/services/component-generator.servi import {AppSettingsService} from '@app/services/storage/app-settings.service'; import {AppStateService} from '@app/services/storage/app-state.service'; import {AuditLogsService} from '@app/services/storage/audit-logs.service'; +import {AuditLogsGraphDataService} from '@app/services/storage/audit-logs-graph-data.service'; import {ServiceLogsService} from '@app/services/storage/service-logs.service'; import {ServiceLogsHistogramDataService} from '@app/services/storage/service-logs-histogram-data.service'; import {ServiceLogsTruncatedService} from '@app/services/storage/service-logs-truncated.service'; @@ -92,6 +93,7 @@ import {GraphLegendComponent} from '@app/components/graph-legend/graph-legend.co import {HorizontalHistogramComponent} from '@app/components/horizontal-histogram/horizontal-histogram.component'; 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 {TimeZoneAbbrPipe} from '@app/pipes/timezone-abbr.pipe'; import {TimerSecondsPipe} from '@app/pipes/timer-seconds.pipe'; @@ -153,6 +155,7 @@ export function getXHRBackend(injector: Injector, browser: BrowserXhr, xsrf: XSR HorizontalHistogramComponent, GraphTooltipComponent, GraphLegendItemComponent, + TimeLineGraphComponent, TimeZoneAbbrPipe, TimerSecondsPipe ], @@ -182,6 +185,7 @@ export function getXHRBackend(injector: Injector, browser: BrowserXhr, xsrf: XSR AppSettingsService, AppStateService, AuditLogsService, + AuditLogsGraphDataService, ServiceLogsService, ServiceLogsHistogramDataService, ServiceLogsTruncatedService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.less ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.less index 0830193..3a57838 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.less +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.less @@ -25,6 +25,7 @@ stroke: @base-font-color; } .tick { + cursor: default; line { display: none; } http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/graph.component.ts ---------------------------------------------------------------------- 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 1bb7f92..167f478 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 @@ -19,7 +19,9 @@ import {AfterViewInit, OnChanges, SimpleChanges, ViewChild, ElementRef, Input} from '@angular/core'; import * as d3 from 'd3'; import * as d3sc from 'd3-scale-chromatic'; -import {GraphPositionOptions, GraphMarginOptions, GraphTooltipInfo, LegendItem} from '@app/classes/graph'; +import { + GraphPositionOptions, GraphMarginOptions, GraphTooltipInfo, LegendItem, GraphEventData +} from '@app/classes/graph'; import {HomogeneousObject} from '@app/classes/object'; import {ServiceInjector} from '@app/classes/service-injector'; import {UtilsService} from '@app/services/utils.service'; @@ -96,6 +98,27 @@ export class GraphComponent implements AfterViewInit, OnChanges { @Input() reverseYRange: boolean = false; + /** + * Indicates whether X axis ticks with fractional values should be displayed on chart (if any) + * @type {boolean} + */ + @Input() + allowFractionalXTicks: boolean = true; + + /** + * Indicates whether Y axis ticks with fractional values should be displayed on chart (if any) + * @type {boolean} + */ + @Input() + allowFractionalYTicks: boolean = true; + + /** + * Indicated whether Y values equal to 0 should be skipped in tooltip + * @type {boolean} + */ + @Input() + skipZeroValuesInTooltip: boolean = true; + @ViewChild('graphContainer') graphContainerRef: ElementRef; @@ -134,8 +157,8 @@ export class GraphComponent implements AfterViewInit, OnChanges { protected tooltipInfo: GraphTooltipInfo | {} = {}; /** - * This is the computed position of the tooltip relative to the @graphContainer which is the container of the histogram. - * It is set when the mousemoving over the bars in the @handleRectMouseMove method. + * This is the computed position of the tooltip relative to the @graphContainer which is the container of the graph. + * It is set when the mousemoving over the figures in the @handleRectMouseMove method. */ private tooltipPosition: GraphPositionOptions; @@ -230,8 +253,16 @@ export class GraphComponent implements AfterViewInit, OnChanges { protected populate(): void {} + /** + * Set the domain values for the x scale regarding the given data. + * @param formattedData + */ protected setXScaleDomain(formattedData?: any): void {} + /** + * Set the domain for the y scale regarding the given data. + * @param formattedData + */ protected setYScaleDomain(formattedData?: any): void {} /** @@ -271,7 +302,11 @@ export class GraphComponent implements AfterViewInit, OnChanges { * @returns {string|undefined} */ protected xAxisTickFormatter = (tick: any, index: number): string | undefined => { - return tick.toString(); + if (this.allowFractionalXTicks) { + return tick.toString(); + } else { + return Number.isInteger(tick) ? tick.toFixed(0) : undefined; + } }; /** @@ -283,45 +318,53 @@ export class GraphComponent implements AfterViewInit, OnChanges { * @returns {string|undefined} */ protected yAxisTickFormatter = (tick: any, index: number): string | undefined => { - return tick.toString(); + if (this.allowFractionalYTicks) { + return tick.toString(); + } else { + return Number.isInteger(tick) ? tick.toFixed(0) : undefined; + } }; /** - * The goal is to handle the mouse over event on the rect svg elements so that we can populate the tooltip info object + * The goal is to handle the mouse over event on the svg elements so that we can populate the tooltip info object * and set the initial position of the tooltip. So we call the corresponding methods. - * @param d The data for the currently "selected" bar + * @param {GraphEventData} d The data for the currently "selected" figure * @param {number} index The index of the current element in the selection * @param elements The selection of the elements */ - protected handleRectMouseOver = (d: {data: any, [key: string]: any}, index: number, elements: any): void => { + protected handleMouseOver = (d: GraphEventData, index: number, elements: HTMLElement[]): void => { this.setTooltipDataFromChartData(d); this.setTooltipPosition(); }; /** - * The goal is to handle the movement of the mouse over the rect svg elements, so that we can set the position of + * The goal is to handle the movement of the mouse over the svg elements, so that we can set the position of * the tooltip by calling the @setTooltipPosition method. */ - protected handleRectMouseMove = (): void => { + protected handleMouseMove = (): void => { this.setTooltipPosition(); }; /** * The goal is to reset the tooltipInfo object so that the tooltip will be hidden. */ - protected handleRectMouseOut = (): void => { + protected handleMouseOut = (): void => { this.tooltipInfo = {}; }; /** * The goal is set the tooltip - * @param d + * @param {GraphEventData} d */ - protected setTooltipDataFromChartData(d: {data: any, [key: string]: any}): void { - let {tick, ...data} = d.data; - let levelColors = this.colors; + protected setTooltipDataFromChartData(d: GraphEventData): void { + const {tick, ...data} = d.data, + levelColors = this.colors; + let tooltipKeys = Object.keys(levelColors); + if (this.skipZeroValuesInTooltip) { + tooltipKeys = tooltipKeys.filter((key: string): boolean => data[key] > 0) + } this.tooltipInfo = { - data: Object.keys(levelColors).filter((key: string): boolean => data[key] > 0).map((key: string): object => Object.assign({}, { + data: tooltipKeys.map((key: string): object => Object.assign({}, { color: this.colors[key], label: this.labels[key], value: data[key] http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less new file mode 100644 index 0000000..d616b58 --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.less @@ -0,0 +1,48 @@ +/** + * 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 '../../../components/mixins'; + +:host { + background: #ECECEC; // TODO add style according to actual design + + /deep/ svg { + cursor: crosshair; + } + + .time-gap { + color: @base-font-color; + font-size: 1.2rem; + text-align: center; + } + + footer { + .default-flex; + font-size: 1.2rem; + color: @base-font-color; + padding: 0 1em .5em; + } + + /deep/ rect.drag-area { + fill: #fff; + } + + /deep/ rect.unselected-drag-area { + fill: darken(@main-background-color, 10%); + opacity: .6; + } +} http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts new file mode 100644 index 0000000..4e0aa10 --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/components/graph/time-graph.component.ts @@ -0,0 +1,250 @@ +/** + * 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 {OnInit, Input, Output, EventEmitter} from '@angular/core'; +import * as d3 from 'd3'; +import * as moment from 'moment-timezone'; +import {AppSettingsService} from '@app/services/storage/app-settings.service'; +import {ChartTimeGap, GraphScaleItem} from '@app/classes/graph'; +import {ServiceInjector} from '@app/classes/service-injector'; +import {GraphComponent} from '@app/classes/components/graph/graph.component'; + +export class TimeGraphComponent extends GraphComponent implements OnInit { + + constructor() { + super(); + this.appSettings = ServiceInjector.injector.get(AppSettingsService); + } + + ngOnInit() { + this.appSettings.getParameter('timeZone').subscribe((value: string): void => { + this.timeZone = value; + this.createGraph(); + }); + } + + @Input() + tickTimeFormat: string = 'MM/DD HH:mm'; + + @Input() + historyStartEndTimeFormat: string = 'dddd, MMMM DD, YYYY'; + + @Output() + selectArea: EventEmitter<number[]> = new EventEmitter(); + + readonly isTimeGraph: boolean = true; + + readonly allowFractionalXTicks: boolean = false; + + protected appSettings: AppSettingsService; + + protected dragArea: d3.Selection<SVGGraphicsElement, undefined, SVGGraphicsElement, undefined>; + + protected dragStartX: number; + + protected minDragX: number; + + protected maxDragX: number; + + protected timeZone: string; + + /** + * This property holds the data structure describing the gaps between the xAxis ticks. + * The unit property can be: second, minute, hour, day + * The value is the number of the given unit. + */ + protected chartTimeGap: ChartTimeGap | null; + /** + * This is the rectangle element to represent the unselected time range on the left side of the selected time range + */ + protected leftDragArea: d3.Selection<SVGGraphicsElement, undefined, SVGGraphicsElement, undefined>; + /** + * This is the rectangle element to represent the unselected time range on the right side of the selected time range + */ + protected rightDragArea: d3.Selection<SVGGraphicsElement, undefined, SVGGraphicsElement, undefined>; + + /** + * This is a Date object holding the value of the first tick of the xAxis. It is a helper getter for the template. + */ + protected get firstDateTick(): Date | undefined { + const ticks = this.xScale && this.xScale.ticks(); + return (ticks && ticks.length && ticks[0]) || undefined; + } + + /** + * This is a Date object holding the value of the last tick of the xAxis. It is a helper getter for the template. + */ + protected get lastDateTick(): Date | undefined { + const ticks = this.xScale && this.xScale.ticks(); + return (ticks && ticks.length && ticks[ticks.length - 1]) || undefined; + } + + protected xAxisTickFormatter = (tick: Date): string => { + return moment(tick).tz(this.timeZone).format(this.tickTimeFormat); + }; + + protected setXScaleDomain(data: GraphScaleItem[]): void { + this.xScale.domain(d3.extent(data, item => item.tick)).nice(); + } + + /** + * The goal is to calculate the time gap between the given dates. It will return an object representing the unit and + * the value in the given unit. Eg.: {unit: 'minute', value: 5} + * @param {Date} startDate + * @param {Date} endDate + * @returns {ChartTimeGap} + */ + protected getTimeGap(startDate: Date, endDate: Date): ChartTimeGap { + const startDateMoment = moment(startDate); + const endDateMoment = moment(endDate); + const diffInWeek: number = endDateMoment.diff(startDateMoment, 'weeks'); + const diffInDay: number = endDateMoment.diff(startDateMoment, 'days'); + const diffInHour: number = endDateMoment.diff(startDateMoment, 'hours'); + const diffInMin: number = endDateMoment.diff(startDateMoment, 'minutes'); + const diffInSec: number = endDateMoment.diff(startDateMoment, 'seconds'); + const value = diffInWeek >= 1 ? diffInWeek : ( + diffInDay >= 1 ? diffInDay : ( + diffInHour >= 1 ? diffInHour : (diffInMin >= 1 ? diffInMin : diffInSec) + ) + ); + const unit: string = diffInWeek >= 1 ? 'week' : ( + diffInDay >= 1 ? `day` : ( + diffInHour >= 1 ? `hour` : (diffInMin >= 1 ? `minute` : `second`) + ) + ); + const label = `histogram.gap.${unit}${value > 1 ? 's' : ''}`; + return { + value, + unit, + label + }; + } + + /** + * The goal is to have a simple function to set the time gap corresponding to the xScale ticks. + * It will reset the time gap if the xScale is not set or there are no ticks. + */ + protected setChartTimeGapByXScale(): void { + let ticks = this.xScale && this.xScale.ticks(); + if (ticks && ticks.length) { + this.setChartTimeGap(ticks[0], ticks[1] || ticks[0]); + } else { + this.resetChartTimeGap(); + } + } + + /** + * Simply reset the time gap property to null. + */ + protected resetChartTimeGap(): void { + this.chartTimeGap = null; + } + + /** + * The goal is to have a single point where we set the chartTimeGap property corresponding the given timerange. + * @param {Date} startDate + * @param {Date} endDate + */ + protected setChartTimeGap(startDate: Date, endDate: Date): void { + this.chartTimeGap = this.getTimeGap(startDate, endDate); + } + + protected getTimeRangeByXRanges(startX: number, endX: number): [number, number] { + const xScaleInterval = this.xScale.domain().map((point: Date): number => point.valueOf()); + const xScaleLength = xScaleInterval[1] - xScaleInterval[0]; + const ratio = xScaleLength / this.width; + return [Math.round(xScaleInterval[0] + ratio * startX), Math.round(xScaleInterval[0] + ratio * endX)]; + } + + /** + * The goal is to create the two shadow rectangle beside the selected area. Actually we blurout the not selected + * timeranges + * @param {number} startX This is the starting position of the drag event withing the container + * @param {number} currentX This is the ending point of the drag within the container + */ + protected createInvertDragArea(startX: number, currentX: number): void { + const height: number = this.height + this.margin.top + this.margin.bottom; + this.leftDragArea = this.svg.insert('rect').attr('height', height).attr('class', 'unselected-drag-area'); + this.rightDragArea = this.svg.insert('rect').attr('height', height).attr('class', 'unselected-drag-area'); + this.setInvertDragArea(startX, currentX); + } + + /** + * Set the position and the width of the blur/shadow rectangles of the unselected area(s). + * @param {number} startX The start point of the selected area. + * @param {number} currentX The end point of the selected area. + */ + protected setInvertDragArea(startX: number, currentX: number): void { + const left: number = Math.min(startX, currentX); + const right: number = Math.max(startX, currentX); + const rightAreaWidth: number = Math.max(0, this.width - right); + const leftAreaWidth: number = Math.max(0, left); + this.leftDragArea.attr('x', 0).attr('width', leftAreaWidth); + this.rightDragArea.attr('x', right).attr('width', rightAreaWidth); + } + + /** + * The goal is to have a single point where we remove the rectangles of the blur/shadow, unselected time range(s) + */ + protected clearInvertDragArea(): void { + this.leftDragArea.remove(); + this.rightDragArea.remove(); + } + + protected setDragBehavior(): void { + this.minDragX = this.margin.left; + this.maxDragX = this.graphContainer.clientWidth; + d3.selectAll(`svg#${this.svgId}`).call(d3.drag() + .on('start', (datum: undefined, index: number, containers: d3.ContainerElement[]): void => { + if (this.dragArea) { + this.dragArea.remove(); + } + this.dragStartX = Math.max(0, this.getDragX(containers[0]) - this.margin.left); + this.dragArea = this.svg.insert('rect', ':first-child').attr('x', this.dragStartX).attr('y', 0).attr('width', 0) + .attr('height', this.height).attr('class', 'drag-area'); + }) + .on('drag', (datum: undefined, index: number, containers: d3.ContainerElement[]): void => { + const mousePos = this.getDragX(containers[0]); + const currentX = Math.max(mousePos, this.minDragX) - this.margin.left; + const startX = Math.min(currentX, this.dragStartX); + const currentWidth = Math.abs(currentX - this.dragStartX); + this.dragArea.attr('x', startX).attr('width', currentWidth); + let timeRange = this.getTimeRangeByXRanges(startX, startX + currentWidth); + this.setChartTimeGap(new Date(timeRange[0]), new Date(timeRange[1])); + }) + .on('end', (): void => { + const dragAreaDetails = this.dragArea.node().getBBox(); + const startX = Math.max(0, dragAreaDetails.x); + const endX = Math.min(this.width, dragAreaDetails.x + dragAreaDetails.width); + const dateRange: [number, number] = this.getTimeRangeByXRanges(startX, endX); + this.selectArea.emit(dateRange); + this.dragArea.remove(); + this.setChartTimeGap(new Date(dateRange[0]), new Date(dateRange[1])); + }) + ); + d3.selectAll(`svg#${this.svgId} .value, svg#${this.svgId} .axis`).call(d3.drag().on('start', (): void => { + d3.event.sourceEvent.stopPropagation(); + })); + } + + protected getDragX(element: d3.ContainerElement): number { + return d3.mouse(element)[0]; + } + + +} http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts ---------------------------------------------------------------------- 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 3992828..cc07ec8 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/graph.ts @@ -40,3 +40,22 @@ export interface GraphScaleItem { tick: number; [key: string]: number; } + +export interface ChartTimeGap { + value: number; + unit: string; + label: string; +} + +export interface GraphEventData extends Array<number> { + data: GraphScaleItem; +} + +export type GraphLinePoint = GraphScaleItem & { + color: string; +} + +export interface GraphLineData { + points: GraphScaleItem[]; + key: string; +} http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/models/store.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/models/store.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/models/store.ts index f996d92..f2d0696 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/models/store.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/models/store.ts @@ -46,6 +46,7 @@ export interface AppStore { appSettings: AppSettings; appState: AppState; auditLogs: AuditLog[]; + auditLogsGraphData: BarGraph[]; serviceLogs: ServiceLog[]; serviceLogsHistogramData: BarGraph[]; serviceLogsTruncated: ServiceLog[]; http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.spec.ts new file mode 100644 index 0000000..8951dff --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.spec.ts @@ -0,0 +1,203 @@ +/** + * 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 {AuditLogsGraphQueryParams} from './audit-logs-graph-query-params'; + +describe('AuditLogsGraphQueryParams', () => { + + describe('constructor', () => { + const cases = [ + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:00:00.100Z' + }, + unit: '+100MILLISECOND', + title: 'less than 1s' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:00:01Z' + }, + unit: '+100MILLISECOND', + title: '1s' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:00:20Z' + }, + unit: '+500MILLISECOND', + title: 'between 1s and 30s' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:00:20Z' + }, + unit: '+500MILLISECOND', + title: '30s' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:00:40Z' + }, + unit: '+2SECOND', + title: 'between 30s and 1m' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:01:00Z' + }, + unit: '+2SECOND', + title: '1m' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:20:00Z' + }, + unit: '+1MINUTE', + title: 'between 1m and 30m' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T00:30:00Z' + }, + unit: '+2MINUTE', + title: '30m' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T01:00:00Z' + }, + unit: '+2MINUTE', + title: 'between 30m and 2h' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T02:00:00Z' + }, + unit: '+5MINUTE', + title: '2h' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T04:00:00Z' + }, + unit: '+5MINUTE', + title: 'between 2h and 6h' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T06:00:00Z' + }, + unit: '+10MINUTE', + title: '6h' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T08:00:00Z' + }, + unit: '+10MINUTE', + title: 'between 6h and 10h' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T10:00:00Z' + }, + unit: '+10MINUTE', + title: '10h' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-01T22:00:00Z' + }, + unit: '+1HOUR', + title: 'between 10h and 1d' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-02T00:00:00Z' + }, + unit: '+1HOUR', + title: '1d' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-10T00:00:00Z' + }, + unit: '+8HOUR', + title: 'between 1d and 15d' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-01-16T00:00:00Z' + }, + unit: '+1DAY', + title: '15d' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-03-31T00:00:00Z' + }, + unit: '+1DAY', + title: 'between 15d and 3M' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-04-01T00:00:00Z' + }, + unit: '+1DAY', + title: '3M' + }, + { + options: { + from: '2017-01-01T00:00:00Z', + to: '2017-05-01T00:00:00Z' + }, + unit: '+1MONTH', + title: 'over 3M' + } + ]; + + cases.forEach(test => { + it(test.title, () => { + const paramsObject = new AuditLogsGraphQueryParams(test.options); + expect(paramsObject.unit).toEqual(test.unit); + }); + }); + }); + +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.ts new file mode 100644 index 0000000..7e63acf --- /dev/null +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/audit-logs-graph-query-params.ts @@ -0,0 +1,69 @@ +/** + * 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 {QueryParams} from '@app/classes/queries/query-params'; + +export class AuditLogsGraphQueryParams extends QueryParams { + constructor(options: AuditLogsGraphQueryParams) { + let unit; + const diffTimeStamp = new Date(options.to).valueOf() - new Date(options.from).valueOf(); + switch (true) { + case diffTimeStamp <= 1000: + unit = '+100MILLISECOND'; + break; + case diffTimeStamp <= 30000: + unit = '+500MILLISECOND'; + break; + case diffTimeStamp <= 60000: + unit = '+2SECOND'; + break; + case diffTimeStamp < 1800000: + unit = '+1MINUTE'; + break; + case diffTimeStamp < 7200000: + unit = '+2MINUTE'; + break; + case diffTimeStamp < 21600000: + unit = '+5MINUTE'; + break; + case diffTimeStamp <= 36000000: + unit = '+10MINUTE'; + break; + case diffTimeStamp <= 86400000: + unit = '+1HOUR'; + break; + case diffTimeStamp < 1296000000: + unit = '+8HOUR'; + break; + case diffTimeStamp <= 7776000000: + unit = '+1DAY'; + break; + default: + unit = '+1MONTH'; + break; + } + options.unit = unit; + super(options); + } + + from: string; + to: string; + unit?: string; + includeQuery?: string; + excludeQuery?: string; +} http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.spec.ts deleted file mode 100644 index eb891ed..0000000 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.spec.ts +++ /dev/null @@ -1,203 +0,0 @@ -/** - * 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 {ServiceLogsHistogramQueryParams} from './service-logs-histogram-query-params'; - -describe('ServiceLogsHistogramQueryParams', () => { - - describe('constructor', () => { - const cases = [ - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:00:00.100Z' - }, - unit: '+100MILLISECOND', - title: 'less than 1s' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:00:01Z' - }, - unit: '+100MILLISECOND', - title: '1s' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:00:20Z' - }, - unit: '+500MILLISECOND', - title: 'between 1s and 30s' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:00:20Z' - }, - unit: '+500MILLISECOND', - title: '30s' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:00:40Z' - }, - unit: '+2SECOND', - title: 'between 30s and 1m' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:01:00Z' - }, - unit: '+2SECOND', - title: '1m' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:20:00Z' - }, - unit: '+1MINUTE', - title: 'between 1m and 30m' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T00:30:00Z' - }, - unit: '+2MINUTE', - title: '30m' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T01:00:00Z' - }, - unit: '+2MINUTE', - title: 'between 30m and 2h' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T02:00:00Z' - }, - unit: '+5MINUTE', - title: '2h' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T04:00:00Z' - }, - unit: '+5MINUTE', - title: 'between 2h and 6h' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T06:00:00Z' - }, - unit: '+10MINUTE', - title: '6h' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T08:00:00Z' - }, - unit: '+10MINUTE', - title: 'between 6h and 10h' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T10:00:00Z' - }, - unit: '+10MINUTE', - title: '10h' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-01T22:00:00Z' - }, - unit: '+1HOUR', - title: 'between 10h and 1d' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-02T00:00:00Z' - }, - unit: '+1HOUR', - title: '1d' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-10T00:00:00Z' - }, - unit: '+8HOUR', - title: 'between 1d and 15d' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-01-16T00:00:00Z' - }, - unit: '+1DAY', - title: '15d' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-03-31T00:00:00Z' - }, - unit: '+1DAY', - title: 'between 15d and 3M' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-04-01T00:00:00Z' - }, - unit: '+1DAY', - title: '3M' - }, - { - options: { - from: '2017-01-01T00:00:00Z', - to: '2017-05-01T00:00:00Z' - }, - unit: '+1MONTH', - title: 'over 3M' - } - ]; - - cases.forEach(test => { - it(test.title, () => { - const paramsObject = new ServiceLogsHistogramQueryParams(test.options); - expect(paramsObject.unit).toEqual(test.unit); - }); - }); - }); - -}); http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.ts b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.ts index 148aa62..ff83a8b 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/classes/queries/service-logs-histogram-query-params.ts @@ -16,55 +16,9 @@ * limitations under the License. */ -import {QueryParams} from '@app/classes/queries/query-params'; +import {AuditLogsGraphQueryParams} from '@app/classes/queries/audit-logs-graph-query-params'; -export class ServiceLogsHistogramQueryParams extends QueryParams { - constructor(options: ServiceLogsHistogramQueryParams) { - let unit; - const diffTimeStamp = new Date(options.to).valueOf() - new Date(options.from).valueOf(); - switch (true) { - case diffTimeStamp <= 1000: - unit = '+100MILLISECOND'; - break; - case diffTimeStamp <= 30000: - unit = '+500MILLISECOND'; - break; - case diffTimeStamp <= 60000: - unit = '+2SECOND'; - break; - case diffTimeStamp < 1800000: - unit = '+1MINUTE'; - break; - case diffTimeStamp < 7200000: - unit = '+2MINUTE'; - break; - case diffTimeStamp < 21600000: - unit = '+5MINUTE'; - break; - case diffTimeStamp <= 36000000: - unit = '+10MINUTE'; - break; - case diffTimeStamp <= 86400000: - unit = '+1HOUR'; - break; - case diffTimeStamp < 1296000000: - unit = '+8HOUR'; - break; - case diffTimeStamp <= 7776000000: - unit = '+1DAY'; - break; - default: - unit = '+1MONTH'; - break; - } - options.unit = unit; - super(options); - } - from: string; - to: string; - unit?: string; +export class ServiceLogsHistogramQueryParams extends AuditLogsGraphQueryParams { clusters?: string; level?: string; - includeQuery?: string; - excludeQuery?: string; } http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.html ---------------------------------------------------------------------- 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 3c5852a..fe9f697 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 @@ -20,11 +20,13 @@ <audit-logs-table *ngSwitchCase="'logs'" [totalCount]="totalCount" [logs]="logs" [columns]="columns" [filtersForm]="filtersForm"></audit-logs-table> <div *ngSwitchCase="'summary'" class="row"> - <collapsible-panel title="{{'logs.topUsers' | translate: usersGraphTitleParams}}" class="col-md-6"> - <horizontal-histogram [data]="topUsersGraphData"></horizontal-histogram> + <collapsible-panel commonTitle="{{'logs.topUsers' | translate: usersGraphTitleParams}}" class="col-md-6"> + <horizontal-histogram [data]="topUsersGraphData" [allowFractionalXTicks]="false" + svgId="top-users-graph"></horizontal-histogram> </collapsible-panel> - <collapsible-panel title="{{'logs.topResources' | translate: resourcesGraphTitleParams}}" class="col-md-6"> - <horizontal-histogram [data]="topResourcesGraphData"></horizontal-histogram> + <collapsible-panel commonTitle="{{'logs.topResources' | translate: resourcesGraphTitleParams}}" class="col-md-6"> + <horizontal-histogram [data]="topResourcesGraphData" [allowFractionalXTicks]="false" + svgId="top-resources-graph"></horizontal-histogram> </collapsible-panel> </div> </ng-container> http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.spec.ts index 260b383..f7d0cdc 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-entries/audit-logs-entries.component.spec.ts @@ -22,6 +22,7 @@ import {StoreModule} from '@ngrx/store'; 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 @@ -63,6 +64,7 @@ describe('AuditLogsEntriesComponent', () => { auditLogs, serviceLogs, auditLogsFields, + auditLogsGraphData, serviceLogsFields, serviceLogsHistogramData, appSettings, @@ -85,6 +87,7 @@ describe('AuditLogsEntriesComponent', () => { AuditLogsFieldsService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, + AuditLogsGraphDataService, AppSettingsService, AppStateService, ClustersService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-table/audit-logs-table.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-table/audit-logs-table.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-table/audit-logs-table.component.spec.ts index b6206db..1a2f4de 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-table/audit-logs-table.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/audit-logs-table/audit-logs-table.component.spec.ts @@ -26,8 +26,11 @@ import {TranslationModules} from '@app/test-config.spec'; 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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {AppStateService, appState} from '@app/services/storage/app-state.service'; import {AppSettingsService, appSettings} from '@app/services/storage/app-settings.service'; @@ -72,6 +75,7 @@ describe('AuditLogsTableComponent', () => { auditLogs, serviceLogs, auditLogsFields, + auditLogsGraphData, serviceLogsFields, serviceLogsHistogramData, serviceLogsTruncated, @@ -93,6 +97,7 @@ describe('AuditLogsTableComponent', () => { AuditLogsService, ServiceLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, ServiceLogsTruncatedService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.html index 4d0bd39..a671946 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.html @@ -15,13 +15,13 @@ limitations under the License. --> <div [ngClass]="{'panel': true, 'panel-default': true, 'panel-collapsible': true, 'panel-collapsed': isCollapsed}"> - <div [ngClass]="{'panel-heading': true}" (click)="handleCollapseBtnClick($event)"> + <div class="panel-heading" (click)="handleCollapseBtnClick($event)"> <a [attr.aria-collapsed]="isCollapsed"> <i [ngClass]="{'fa': true, 'fa-caret-down': !isCollapsed, 'fa-caret-right': isCollapsed}"></i> - {{((isCollapsed ? collapsedTitle : openTitle) || title) | translate}} + {{((isCollapsed ? collapsedTitle : openTitle) || commonTitle) | translate}} </a> </div> - <div [ngClass]="{'panel-body': true}" [attr.aria-collapsed]="isCollapsed"> + <div class="panel-body" [attr.aria-collapsed]="isCollapsed"> <ng-content></ng-content> </div> </div> http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.spec.ts index 5f5f1b0..f92f30a 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.spec.ts @@ -120,7 +120,7 @@ describe('CollapsiblePanelComponent', () => { let title = 'Title'; let headingEl = el.querySelector('.panel-heading'); component.openTitle = ''; - component.title = title; + component.commonTitle = title; component.isCollapsed = false; fixture.detectChanges(); expect(headingEl.textContent).toContain(title); @@ -130,7 +130,7 @@ describe('CollapsiblePanelComponent', () => { let title = 'Title'; let headingEl = el.querySelector('.panel-heading'); component.collapsedTitle = ''; - component.title = title; + component.commonTitle = title; component.isCollapsed = true; fixture.detectChanges(); expect(headingEl.textContent).toContain(title); http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.ts index f82823a..5e86bfa 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/collapsible-panel/collapsible-panel.component.ts @@ -39,7 +39,7 @@ export class CollapsiblePanelComponent { * @type {string} */ @Input() - title: string = ''; + commonTitle: string = ''; /** * The panel's title for the opened state @@ -82,7 +82,7 @@ export class CollapsiblePanelComponent { /** * The goal is to simply negate the current collapse state. */ - toggleCollapsed():void { + toggleCollapsed(): void { this.isCollapsed = !this.isCollapsed; } http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-button/dropdown-button.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-button/dropdown-button.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-button/dropdown-button.component.spec.ts index 9f2bb16..b9f9540 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-button/dropdown-button.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-button/dropdown-button.component.spec.ts @@ -28,9 +28,12 @@ import {AppStateService, appState} from '@app/services/storage/app-state.service import {HostsService, hosts} from '@app/services/storage/hosts.service'; import {AuditLogsService, auditLogs} from '@app/services/storage/audit-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 {ServiceLogsService, serviceLogs} from '@app/services/storage/service-logs.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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {TabsService, tabs} from '@app/services/storage/tabs.service'; import {UtilsService} from '@app/services/utils.service'; @@ -65,6 +68,7 @@ describe('DropdownButtonComponent', () => { hosts, auditLogs, auditLogsFields, + auditLogsGraphData, serviceLogs, serviceLogsFields, serviceLogsHistogramData, @@ -81,6 +85,7 @@ describe('DropdownButtonComponent', () => { HostsService, AuditLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.spec.ts index 63824cb..dd602d7 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/dropdown-list/dropdown-list.component.spec.ts @@ -24,8 +24,11 @@ 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 { + 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'; @@ -62,6 +65,7 @@ describe('DropdownListComponent', () => { auditLogs, serviceLogs, auditLogsFields, + auditLogsGraphData, serviceLogsFields, serviceLogsHistogramData, appSettings, @@ -85,6 +89,7 @@ describe('DropdownListComponent', () => { AuditLogsService, ServiceLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, AppSettingsService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.spec.ts index 082082c..4c93cbe 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-button/filter-button.component.spec.ts @@ -28,9 +28,12 @@ import {AppStateService, appState} from '@app/services/storage/app-state.service import {HostsService, hosts} from '@app/services/storage/hosts.service'; import {AuditLogsService, auditLogs} from '@app/services/storage/audit-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 {ServiceLogsService, serviceLogs} from '@app/services/storage/service-logs.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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {TabsService, tabs} from '@app/services/storage/tabs.service'; import {ComponentActionsService} from '@app/services/component-actions.service'; @@ -65,6 +68,7 @@ describe('FilterButtonComponent', () => { hosts, auditLogs, auditLogsFields, + auditLogsGraphData, serviceLogs, serviceLogsFields, serviceLogsHistogramData, @@ -81,6 +85,7 @@ describe('FilterButtonComponent', () => { HostsService, AuditLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts index d085f3e..61d30d1 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/filter-dropdown/filter-dropdown.component.spec.ts @@ -24,6 +24,7 @@ import {AppSettingsService, appSettings} from '@app/services/storage/app-setting import {AppStateService, appState} from '@app/services/storage/app-state.service'; import {AuditLogsService, auditLogs} from '@app/services/storage/audit-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 {ServiceLogsService, serviceLogs} from '@app/services/storage/service-logs.service'; import {ServiceLogsFieldsService, serviceLogsFields} from '@app/services/storage/service-logs-fields.service'; import { @@ -79,6 +80,7 @@ describe('FilterDropdownComponent', () => { appState, auditLogs, auditLogsFields, + auditLogsGraphData, serviceLogs, serviceLogsFields, serviceLogsHistogramData, @@ -95,6 +97,7 @@ describe('FilterDropdownComponent', () => { AppStateService, AuditLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.spec.ts index c9f9b52..8df1d54 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/filters-panel/filters-panel.component.spec.ts @@ -28,8 +28,11 @@ 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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {AppStateService, appState} from '@app/services/storage/app-state.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {TabsService, tabs} from '@app/services/storage/tabs.service'; @@ -67,6 +70,7 @@ describe('FiltersPanelComponent', () => { auditLogs, serviceLogs, auditLogsFields, + auditLogsGraphData, serviceLogsFields, serviceLogsHistogramData, appState, @@ -83,6 +87,7 @@ describe('FiltersPanelComponent', () => { AuditLogsService, ServiceLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, AppStateService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/horizontal-histogram/horizontal-histogram.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/horizontal-histogram/horizontal-histogram.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/horizontal-histogram/horizontal-histogram.component.ts index 9553e2e..8cc3149 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/horizontal-histogram/horizontal-histogram.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/horizontal-histogram/horizontal-histogram.component.ts @@ -28,7 +28,7 @@ import {HomogeneousObject} from '@app/classes/object'; export class HorizontalHistogramComponent extends GraphComponent { /** - * Thickness of horizontal bar o the graph + * Thickness of horizontal bar of the graph * @type {number} */ @Input() @@ -81,9 +81,9 @@ export class HorizontalHistogramComponent extends GraphComponent { }).attr('height', item => item[0] === item[1] ? '0' : barSize.toString()) .attr('width', item => this.xScale(item[1]) - this.xScale(item[0])) .style('fill', (item, index) => this.orderedColors[index]) - .on('mouseover', this.handleRectMouseOver) - .on('mousemove', this.handleRectMouseMove) - .on('mouseout', this.handleRectMouseOut); + .on('mouseover', this.handleMouseOver) + .on('mousemove', this.handleMouseMove) + .on('mouseout', this.handleMouseOut); } protected setXScaleDomain(): void { http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/log-context/log-context.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/log-context/log-context.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/log-context/log-context.component.spec.ts index 7bd87ad..c346c9a 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/log-context/log-context.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/log-context/log-context.component.spec.ts @@ -21,8 +21,11 @@ import {StoreModule} from '@ngrx/store'; 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 { + 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'; @@ -60,6 +63,7 @@ describe('LogContextComponent', () => { auditLogs, serviceLogs, auditLogsFields, + auditLogsGraphData, serviceLogsFields, serviceLogsHistogramData, appSettings, @@ -76,6 +80,7 @@ describe('LogContextComponent', () => { AuditLogsService, ServiceLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, AppSettingsService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html index 8e507ae..412fd2c 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.html @@ -34,21 +34,31 @@ </div> <!-- TODO use plugin for singular/plural --> - <div class="logs-header col-md-12">{{ + <div *ngIf="logsType === 'serviceLogs'" class="logs-header col-md-12">{{ (!totalEventsFoundMessageParams.totalCount ? 'logs.noEventFound' : (totalEventsFoundMessageParams.totalCount === 1 ? 'logs.oneEventFound' : 'logs.totalEventFound')) | translate: totalEventsFoundMessageParams }}</div> </div> - <collapsible-panel openTitle="logs.hideGraph" collapsedTitle="logs.showGraph"> - <time-histogram [data]="histogramData" [colors]="serviceLogsHistogramColors" svgId="service-logs-histogram" - (selectArea)="setCustomTimeRange($event[0], $event[1])"></time-histogram> - </collapsible-panel> <ng-container [ngSwitch]="logsType"> - <service-logs-table *ngSwitchCase="'serviceLogs'" [totalCount]="totalCount" [logs]="serviceLogs | async" - [columns]="serviceLogsColumns | async" [filtersForm]="filtersForm"></service-logs-table> - <audit-logs-entries *ngSwitchCase="'auditLogs'" [totalCount]="totalCount" [logs]="auditLogs | async" - [columns]="auditLogsColumns | async" [filtersForm]="filtersForm"></audit-logs-entries> + <ng-container *ngSwitchCase="'serviceLogs'"> + <collapsible-panel openTitle="logs.hideGraph" collapsedTitle="logs.showGraph"> + <time-histogram (selectArea)="setCustomTimeRange($event[0], $event[1])" [data]="serviceLogsHistogramData" + [colors]="serviceLogsHistogramColors" [allowFractionalYTicks]="false" + svgId="service-logs-histogram"></time-histogram> + </collapsible-panel> + <service-logs-table [totalCount]="totalCount" [logs]="serviceLogs | async" [columns]="serviceLogsColumns | async" + [filtersForm]="filtersForm"></service-logs-table> + </ng-container> + <ng-container *ngSwitchCase="'auditLogs'"> + <collapsible-panel commonTitle="logs.duration"> + <time-line-graph (selectArea)="setCustomTimeRange($event[0], $event[1])" [data]="auditLogsGraphData" + [allowFractionalYTicks]="false" [skipZeroValuesInTooltip]="false" + svgId="audit-logs-graph"></time-line-graph> + </collapsible-panel> + <audit-logs-entries [totalCount]="totalCount" [logs]="auditLogs | async" [columns]="auditLogsColumns | async" + [filtersForm]="filtersForm"></audit-logs-entries> + </ng-container> </ng-container> <log-context *ngIf="isServiceLogContextView" [id]="activeLog.id" [hostName]="activeLog.host_name" [componentName]="activeLog.component_name"></log-context> http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.spec.ts index 2bb8731..8a3d985 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.spec.ts @@ -26,9 +26,12 @@ import {ClustersService, clusters} from '@app/services/storage/clusters.service' import {ComponentsService, components} from '@app/services/storage/components.service'; import {AuditLogsService, auditLogs} from '@app/services/storage/audit-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 {ServiceLogsService, serviceLogs} from '@app/services/storage/service-logs.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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {HostsService, hosts} from '@app/services/storage/hosts.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {TabsService, tabs} from '@app/services/storage/tabs.service'; @@ -65,6 +68,7 @@ describe('LogsContainerComponent', () => { components, auditLogs, auditLogsFields, + auditLogsGraphData, serviceLogs, serviceLogsFields, serviceLogsHistogramData, @@ -85,6 +89,7 @@ describe('LogsContainerComponent', () => { ComponentsService, AuditLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts index 6d50a17..d853bb5 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/logs-container/logs-container.component.ts @@ -16,11 +16,12 @@ * limitations under the License. */ -import {Component, ElementRef, ViewChild, HostListener} from '@angular/core'; +import {Component, OnInit, ElementRef, ViewChild, HostListener} from '@angular/core'; import {FormGroup} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; import {LogsContainerService} from '@app/services/logs-container.service'; import {ServiceLogsHistogramDataService} from '@app/services/storage/service-logs-histogram-data.service'; +import {AuditLogsGraphDataService} from '@app/services/storage/audit-logs-graph-data.service'; import {AppStateService} from '@app/services/storage/app-state.service'; import {TabsService} from '@app/services/storage/tabs.service'; import {AuditLog} from '@app/classes/models/audit-log'; @@ -38,18 +39,27 @@ import {FiltersPanelComponent} from "@app/components/filters-panel/filters-panel templateUrl: './logs-container.component.html', styleUrls: ['./logs-container.component.less'] }) -export class LogsContainerComponent { +export class LogsContainerComponent implements OnInit { constructor( - private serviceLogsHistogramStorage: ServiceLogsHistogramDataService, private appState: AppStateService, - private tabsStorage: TabsService, private logsContainer: LogsContainerService + private appState: AppStateService, private tabsStorage: TabsService, private logsContainer: LogsContainerService, + private serviceLogsHistogramStorage: ServiceLogsHistogramDataService, + private auditLogsGraphStorage: AuditLogsGraphDataService ) { + } + + ngOnInit() { this.logsContainer.loadColumnsNames(); - appState.getParameter('activeLogsType').subscribe((value: LogsType) => this.logsType = value); - serviceLogsHistogramStorage.getAll().subscribe((data: BarGraph[]): void => { - this.histogramData = this.logsContainer.getHistogramData(data); + this.appState.getParameter('activeLogsType').subscribe((value: LogsType) => this.logsType = value); + this.serviceLogsHistogramStorage.getAll().subscribe((data: BarGraph[]): void => { + this.serviceLogsHistogramData = this.logsContainer.getGraphData(data, Object.keys(this.logsContainer.colors)); + }); + this.auditLogsGraphStorage.getAll().subscribe((data: BarGraph[]): void => { + this.auditLogsGraphData = this.logsContainer.getGraphData(data); + }); + this.appState.getParameter('isServiceLogContextView').subscribe((value: boolean): void => { + this.isServiceLogContextView = value; }); - appState.getParameter('isServiceLogContextView').subscribe((value: boolean) => this.isServiceLogContextView = value); } @ViewChild('container') containerRef: ElementRef; @@ -74,7 +84,9 @@ export class LogsContainerComponent { return this.logsContainer.totalCount; } - histogramData: HomogeneousObject<HomogeneousObject<number>>; + serviceLogsHistogramData: HomogeneousObject<HomogeneousObject<number>>; + + auditLogsGraphData: HomogeneousObject<HomogeneousObject<number>>; get serviceLogsHistogramColors(): HomogeneousObject<string> { return this.logsContainer.colors; http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.spec.ts index 67d9423..3b210a3 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.spec.ts @@ -28,9 +28,12 @@ import {ComponentsService, components} from '@app/services/storage/components.se import {HostsService, hosts} from '@app/services/storage/hosts.service'; import {AuditLogsService, auditLogs} from '@app/services/storage/audit-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 {ServiceLogsService, serviceLogs} from '@app/services/storage/service-logs.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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {TabsService, tabs} from '@app/services/storage/tabs.service'; import {ComponentActionsService} from '@app/services/component-actions.service'; @@ -64,6 +67,7 @@ describe('MenuButtonComponent', () => { hosts, auditLogs, auditLogsFields, + auditLogsGraphData, serviceLogs, serviceLogsFields, serviceLogsHistogramData, @@ -80,6 +84,7 @@ describe('MenuButtonComponent', () => { HostsService, AuditLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.spec.ts index 0c323f7..05420ff 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/service-logs-table/service-logs-table.component.spec.ts @@ -26,8 +26,11 @@ import {TranslationModules} from '@app/test-config.spec'; 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 { + ServiceLogsHistogramDataService, serviceLogsHistogramData +} from '@app/services/storage/service-logs-histogram-data.service'; import {ServiceLogsTruncatedService, serviceLogsTruncated} from '@app/services/storage/service-logs-truncated.service'; import {AppStateService, appState} from '@app/services/storage/app-state.service'; import {AppSettingsService, appSettings} from '@app/services/storage/app-settings.service'; @@ -75,6 +78,7 @@ describe('ServiceLogsTableComponent', () => { auditLogs, serviceLogs, auditLogsFields, + auditLogsGraphData, serviceLogsFields, serviceLogsHistogramData, serviceLogsTruncated, @@ -96,6 +100,7 @@ describe('ServiceLogsTableComponent', () => { AuditLogsService, ServiceLogsService, AuditLogsFieldsService, + AuditLogsGraphDataService, ServiceLogsFieldsService, ServiceLogsHistogramDataService, ServiceLogsTruncatedService, http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.html b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.html index 720f55e..be68d08 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.html +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.html @@ -27,7 +27,7 @@ </div> </header> <div #graphContainer></div> -<footer *ngIf="isTimeGraph && (firstDateTick || lastDateTick)"> +<footer *ngIf="firstDateTick || lastDateTick"> <div *ngIf="firstDateTick">{{firstDateTick | amTz: timeZone | amDateFormat: historyStartEndTimeFormat}}</div> <div *ngIf="lastDateTick">{{lastDateTick | amTz: timeZone | amDateFormat: historyStartEndTimeFormat}}</div> </footer> http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.less ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.less b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.less index 364517c..e085d90 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.less +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.less @@ -19,43 +19,7 @@ @import '../mixins'; :host { - position: relative; - background: #ECECEC; // TODO add style according to actual design - - /deep/ .axis { - .tick { - cursor: default; - } - } - - /deep/ svg { - cursor: crosshair; - } - header { padding: @graph-padding; } - - .time-gap { - color: @base-font-color; - font-size: 1.2rem; - text-align: center; - } - - footer { - .default-flex; - font-size: 1.2rem; - color: @base-font-color; - padding: 0 1em .5em; - } - - /deep/ rect.drag-area { - fill: #fff; - } - - /deep/ rect.unselected-drag-area { - fill: darken(@main-background-color, 10%); - opacity: .6; - } - } http://git-wip-us.apache.org/repos/asf/ambari/blob/011e448e/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.spec.ts ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.spec.ts b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.spec.ts index 09cd5d8..b429cdc 100644 --- a/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.spec.ts +++ b/ambari-logsearch/ambari-logsearch-web/src/app/components/time-histogram/time-histogram.component.spec.ts @@ -107,7 +107,6 @@ describe('TimeHistogramComponent', () => { ], providers: [ AppSettingsService, - ServiceLogsHistogramDataService, LogsContainerService, { provide: HttpClientService,