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: Improve analysis workflow. #137192

Merged
merged 4 commits into from
Jul 26, 2022
Merged

[ML] Explain log rate spikes: Improve analysis workflow. #137192

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71978b3
[ML] Adds button-badge to clear selection.
walterra Jul 26, 2022
36b1fe8
[ML] Adds empty prompt.
walterra Jul 26, 2022
ca0d4d4
[ML] Adds badges to describe brush types.
walterra Jul 26, 2022
704d2e2
[ML] Fix variable name isBrushCleared.
walterra Jul 26, 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
14 changes: 12 additions & 2 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 @@ -56,7 +56,7 @@ interface DualBrushProps {
windowParameters: WindowParameters;
min: number;
max: number;
onChange?: (windowParameters: WindowParameters) => void;
onChange?: (windowParameters: WindowParameters, windowPxParameters: WindowParameters) => void;
marginLeft: number;
width: number;
}
Expand Down Expand Up @@ -129,6 +129,12 @@ export function DualBrush({
deviationMin: px2ts(deviationSelection[0]),
deviationMax: px2ts(deviationSelection[1]),
};
const newBrushPx = {
baselineMin: baselineSelection[0],
baselineMax: baselineSelection[1],
deviationMin: deviationSelection[0],
deviationMax: deviationSelection[1],
};

if (
id === 'deviation' &&
Expand All @@ -141,6 +147,8 @@ export function DualBrush({

newWindowParameters.deviationMin = px2ts(newDeviationMin);
newWindowParameters.deviationMax = px2ts(newDeviationMax);
newBrushPx.deviationMin = newDeviationMin;
newBrushPx.deviationMax = newDeviationMax;

d3.select(this)
.transition()
Expand All @@ -158,6 +166,8 @@ export function DualBrush({

newWindowParameters.baselineMin = px2ts(newBaselineMin);
newWindowParameters.baselineMax = px2ts(newBaselineMax);
newBrushPx.baselineMin = newBaselineMin;
newBrushPx.baselineMax = newBaselineMax;

d3.select(this)
.transition()
Expand All @@ -172,7 +182,7 @@ export function DualBrush({
brushes.current[1].end = newWindowParameters.deviationMax;

if (onChange) {
onChange(newWindowParameters);
onChange(newWindowParameters, newBrushPx);
}
drawBrushes();
}
Expand Down
4 changes: 2 additions & 2 deletions x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ export const DualBrushAnnotation: FC<BrushAnnotationProps> = ({ id, min, max })
]}
id={`rect_brush_annotation_${id}`}
style={{
strokeWidth: 1,
strokeWidth: 0,
stroke: colors.lightShade,
fill: colors.lightShade,
opacity: 1,
opacity: 0.5,
}}
hideTooltips={true}
/>
Expand Down
80 changes: 67 additions & 13 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,8 +20,10 @@ 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 { getWindowParameters } from '@kbn/aiops-utils';
Expand All @@ -37,14 +39,15 @@ export interface DocumentCountChartPoint {
}

interface DocumentCountChartProps {
brushSelectionUpdateHandler: (d: WindowParameters) => void;
brushSelectionUpdateHandler: (d: WindowParameters, force: boolean) => void;
width?: number;
chartPoints: DocumentCountChartPoint[];
chartPointsSplit?: DocumentCountChartPoint[];
timeRangeEarliest: number;
timeRangeLatest: number;
interval: number;
changePoint?: ChangePoint;
isBrushedCleared: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

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

isBrushCleared might be a simpler name for this prop

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in 704d2e2.

}

const SPEC_ID = 'document_count';
Expand Down Expand Up @@ -73,6 +76,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
timeRangeLatest,
interval,
changePoint,
isBrushedCleared,
}) => {
const {
services: { data, uiSettings, fieldFormats, charts },
Expand Down Expand Up @@ -187,7 +191,7 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
);
setOriginalWindowParameters(wp);
setWindowParameters(wp);
brushSelectionUpdateHandler(wp);
brushSelectionUpdateHandler(wp, true);
}
}
};
Expand All @@ -198,10 +202,21 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
WindowParameters | undefined
>();
const [windowParameters, setWindowParameters] = useState<WindowParameters | undefined>();
const [windowParametersAsPixels, setWindowParametersAsPixels] = useState<
WindowParameters | undefined
>();

useEffect(() => {
if (isBrushedCleared && originalWindowParameters !== undefined) {
setOriginalWindowParameters(undefined);
setWindowParameters(undefined);
}
}, [isBrushedCleared, originalWindowParameters]);

function onWindowParametersChange(wp: WindowParameters) {
function onWindowParametersChange(wp: WindowParameters, wpPx: WindowParameters) {
setWindowParameters(wp);
brushSelectionUpdateHandler(wp);
setWindowParametersAsPixels(wpPx);
brushSelectionUpdateHandler(wp, false);
}

const [mlBrushWidth, setMlBrushWidth] = useState<number>();
Expand All @@ -221,17 +236,56 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = ({
<>
{isBrushVisible && (
<div className="aiopsHistogramBrushes">
<DualBrush
windowParameters={originalWindowParameters}
min={timeRangeEarliest}
max={timeRangeLatest + interval}
onChange={onWindowParametersChange}
marginLeft={mlBrushMarginLeft}
width={mlBrushWidth}
/>
<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"
Copy link
Contributor

Choose a reason for hiding this comment

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

I was wondering if Spike is a better label here, seeing as we use that term in other parts of the page, such as the title and empty state text, but maybe deviation is ok as strictly speaking you don't have to select a spike in the chart. Can always revisit in a follow-up.

/>
</EuiBadge>
</div>
<div
css={{
position: 'relative',
clear: 'both',
'padding-top': '20px',
'margin-bottom': '-4px',
}}
>
<DualBrush
windowParameters={originalWindowParameters}
min={timeRangeEarliest}
max={timeRangeLatest + interval}
onChange={onWindowParametersChange}
marginLeft={mlBrushMarginLeft}
width={mlBrushWidth}
/>
</div>
</div>
)}
<div style={{ width: width ?? '100%' }} data-test-subj="aiopsDocumentCountChart">
<div css={{ width: width ?? '100%' }} data-test-subj="aiopsDocumentCountChart">
<Chart
size={{
width: '100%',
Expand Down
56 changes: 53 additions & 3 deletions ...ublic/components/document_count_content/document_count_content/document_count_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,50 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { FC } from 'react';
import React, { useEffect, useState, FC } from 'react';

import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';

import { i18n } from '@kbn/i18n';
import type { WindowParameters } from '@kbn/aiops-utils';
import type { ChangePoint } from '@kbn/ml-agg-utils';

import { DocumentCountChart, DocumentCountChartPoint } from '../document_count_chart';
import { TotalCountHeader } from '../total_count_header';
import { DocumentCountStats } from '../../../get_document_stats';

const clearSelectionLabel = i18n.translate(
'xpack.aiops.documentCountContent.clearSelectionAriaLabel',
{
defaultMessage: 'Clear selection',
}
);

export interface DocumentCountContentProps {
brushSelectionUpdateHandler: (d: WindowParameters) => void;
clearSelectionHandler: () => void;
changePoint?: ChangePoint;
documentCountStats?: DocumentCountStats;
documentCountStatsSplit?: DocumentCountStats;
totalCount: number;
windowParameters?: WindowParameters;
}

export const DocumentCountContent: FC<DocumentCountContentProps> = ({
brushSelectionUpdateHandler,
clearSelectionHandler,
changePoint,
documentCountStats,
documentCountStatsSplit,
totalCount,
windowParameters,
}) => {
const [isBrushedCleared, setIsBrushCleared] = useState(true);

useEffect(() => {
setIsBrushCleared(windowParameters === undefined);
}, [windowParameters]);

if (documentCountStats === undefined) {
return totalCount !== undefined ? <TotalCountHeader totalCount={totalCount} /> : null;
}
Expand All @@ -48,18 +68,48 @@ export const DocumentCountContent: FC<DocumentCountContentProps> = ({
chartPointsSplit = Object.entries(buckets).map(([time, value]) => ({ time: +time, value }));
}

function brushSelectionUpdate(d: WindowParameters, force: boolean) {
if (!isBrushedCleared || force) {
brushSelectionUpdateHandler(d);
}
if (force) {
setIsBrushCleared(false);
}
}

function clearSelection() {
setIsBrushCleared(true);
clearSelectionHandler();
}

return (
<>
<TotalCountHeader totalCount={totalCount} />
<EuiFlexGroup gutterSize="xs">
<EuiFlexItem>
<TotalCountHeader totalCount={totalCount} />
</EuiFlexItem>
{!isBrushedCleared && (
<EuiFlexItem grow={false}>
<EuiButtonEmpty
onClick={clearSelection}
size="xs"
data-test-sub="aiopsClearSelectionBadge"
>
{clearSelectionLabel}
</EuiButtonEmpty>
</EuiFlexItem>
)}
</EuiFlexGroup>
{documentCountStats.interval !== undefined && (
<DocumentCountChart
brushSelectionUpdateHandler={brushSelectionUpdateHandler}
brushSelectionUpdateHandler={brushSelectionUpdate}
chartPoints={chartPoints}
chartPointsSplit={chartPointsSplit}
timeRangeEarliest={timeRangeEarliest}
timeRangeLatest={timeRangeLatest}
interval={documentCountStats.interval}
changePoint={changePoint}
isBrushedCleared={isBrushedCleared}
/>
)}
</>
Expand Down
Loading