Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Explain log rate spikes: Fix brush issues. #138113

Merged
merged 3 commits into from
Aug 4, 2022
Merged

[ML] Explain log rate spikes: Fix brush issues. #138113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0dae8c1
[ML] Fix badge overlap.
walterra Aug 4, 2022
7ed53db
[ML] Adds tooltips to badges.
walterra Aug 4, 2022
68c5466
Merge branch 'main' into ml-aiops-brush-fixes
walterra Aug 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,10 @@ export function DualBrush({
const xMax = x(max) ?? 0;
const minExtentPx = Math.round((xMax - xMin) / 100);

const baselineBrush = d3.select('#brush-baseline');
const baselineBrush = d3.select('#aiops-brush-baseline');
const baselineSelection = d3.brushSelection(baselineBrush.node() as SVGGElement);

const deviationBrush = d3.select('#brush-deviation');
const deviationBrush = d3.select('#aiops-brush-deviation');
const deviationSelection = d3.brushSelection(deviationBrush.node() as SVGGElement);

if (!isBrushXSelection(deviationSelection) || !isBrushXSelection(baselineSelection)) {
Expand Down Expand Up @@ -221,7 +221,7 @@ export function DualBrush({
.insert('g', '.brush')
.attr('class', 'brush')
.attr('id', (b: DualBrush) => {
return 'brush-' + b.id;
return 'aiops-brush-' + b.id;
})
.each((brushObject: DualBrush, i, n) => {
const x = d3.scaleLinear().domain([min, max]).rangeRound([0, widthRef.current]);
Expand Down
64 changes: 64 additions & 0 deletions ...ugins/aiops/public/components/document_count_content/document_count_chart/brush_badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React, { FC } from 'react';

import { EuiBadge, EuiText, EuiToolTip } from '@elastic/eui';
// @ts-ignore
import { formatDate } from '@elastic/eui/lib/services/format';

const DATE_FORMAT = 'YYYY-MM-DD';
const TIME_FORMAT = 'HH:mm:ss';
Comment on lines +11 to +15
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is a Kibana plugin fieldFormats that we should use, it takes into account Kibana settings

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to avid an extra refactoring in a bugfix PR, decided to postpone this change with the fieldFormats plugin for 8.5

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added an item to the 8.5 meta issue: #138117


interface BrushBadgeProps {
label: string;
marginLeft: number;
timestampFrom: number;
timestampTo: number;
width: number;
}

export const BrushBadge: FC<BrushBadgeProps> = ({
label,
marginLeft,
timestampFrom,
timestampTo,
width,
}) => {
// If "from" and "to" are on the same day, we skip displaying the date twice.
const dateFrom = formatDate(timestampFrom, DATE_FORMAT);
const dateTo = formatDate(timestampTo, DATE_FORMAT);
const timeFrom = formatDate(timestampFrom, TIME_FORMAT);
const timeTo = formatDate(timestampTo, TIME_FORMAT);

return (
<div
css={{
position: 'absolute',
'margin-left': `${marginLeft}px`,
}}
>
<EuiToolTip
content={
<EuiText size="xs">
{dateFrom} {timeFrom} -{' '}
{dateFrom !== dateTo && (
<>
<br />
{dateTo}{' '}
</>
)}
{timeTo}
</EuiText>
}
position="top"
>
<EuiBadge css={{ width, 'text-align': 'center' }}>{label}</EuiBadge>
</EuiToolTip>
</div>
);
};
84 changes: 49 additions & 35 deletions ...ps/public/components/document_count_content/document_count_chart/document_count_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ import {
XYChartElementEvent,
XYBrushEvent,
} from '@elastic/charts';
import { EuiBadge } from '@elastic/eui';

import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { IUiSettingsClient } from '@kbn/core/public';
import { DualBrush, DualBrushAnnotation } from '@kbn/aiops-components';
import { getSnappedWindowParameters, getWindowParameters } from '@kbn/aiops-utils';
Expand All @@ -33,6 +31,8 @@ import type { ChangePoint } from '@kbn/ml-agg-utils';

import { useAiOpsKibana } from '../../../kibana_context';

import { BrushBadge } from './brush_badge';

export interface DocumentCountChartPoint {
time: number | string;
value: number;
Expand All @@ -52,6 +52,9 @@ interface DocumentCountChartProps {

const SPEC_ID = 'document_count';

const BADGE_HEIGHT = 20;
const BADGE_WIDTH = 75;

enum VIEW_MODE {
ZOOM = 'zoom',
BRUSH = 'brush',
Expand All @@ -67,6 +70,19 @@ function getTimezone(uiSettings: IUiSettingsClient) {
}
}

function getBaselineBadgeOverflow(
windowParametersAsPixels: WindowParameters,
baselineBadgeWidth: number
) {
const { baselineMin, baselineMax, deviationMin } = windowParametersAsPixels;

const baselineBrushWidth = baselineMax - baselineMin;
const baselineBadgeActualMax = baselineMin + baselineBadgeWidth;
return deviationMin < baselineBadgeActualMax
? Math.max(0, baselineBadgeWidth - baselineBrushWidth)
: 0;
}

export const DocumentCountChart: FC<DocumentCountChartProps> = ({
brushSelectionUpdateHandler,
width,
Expand Down Expand Up @@ -239,47 +255,45 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
}, [viewMode]);

const isBrushVisible =
originalWindowParameters && mlBrushMarginLeft && mlBrushWidth && mlBrushWidth > 0;
originalWindowParameters &&
windowParameters &&
mlBrushMarginLeft &&
mlBrushWidth &&
mlBrushWidth > 0;

// Avoid overlap of brush badges when the brushes are quite narrow.
const baselineBadgeOverflow = windowParametersAsPixels
? getBaselineBadgeOverflow(windowParametersAsPixels, BADGE_WIDTH)
: 0;
const baselineBadgeMarginLeft =
(mlBrushMarginLeft ?? 0) + (windowParametersAsPixels?.baselineMin ?? 0);

return (
<>
{isBrushVisible && (
<div className="aiopsHistogramBrushes">
<div
css={{
position: 'absolute',
'margin-left': `${
mlBrushMarginLeft + (windowParametersAsPixels?.baselineMin ?? 0)
}px`,
}}
>
<EuiBadge>
<FormattedMessage
id="xpack.aiops.documentCountChart.baselineBadgeContent"
defaultMessage="Baseline"
/>
</EuiBadge>
</div>
<div
css={{
position: 'absolute',
'margin-left': `${
mlBrushMarginLeft + (windowParametersAsPixels?.deviationMin ?? 0)
}px`,
}}
>
<EuiBadge>
<FormattedMessage
id="xpack.aiops.documentCountChart.deviationBadgeContent"
defaultMessage="Deviation"
/>
</EuiBadge>
<div css={{ height: BADGE_HEIGHT }}>
<BrushBadge
label={i18n.translate('xpack.aiops.documentCountChart.baselineBadgeLabel', {
defaultMessage: 'Baseline',
})}
marginLeft={baselineBadgeMarginLeft - baselineBadgeOverflow}
timestampFrom={windowParameters.baselineMin}
timestampTo={windowParameters.baselineMax}
width={BADGE_WIDTH}
/>
<BrushBadge
label={i18n.translate('xpack.aiops.documentCountChart.deviationBadgeLabel', {
defaultMessage: 'Deviation',
})}
marginLeft={mlBrushMarginLeft + (windowParametersAsPixels?.deviationMin ?? 0)}
timestampFrom={windowParameters.deviationMin}
timestampTo={windowParameters.deviationMax}
width={BADGE_WIDTH}
/>
</div>
<div
css={{
position: 'relative',
clear: 'both',
'padding-top': '20px',
'margin-bottom': '-4px',
}}
>
Expand Down