From 71978b34f15c4fbe2f2a31e182c6d33c27f5ae5a Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 26 Jul 2022 14:56:49 +0200 Subject: [PATCH 1/4] [ML] Adds button-badge to clear selection. --- .../document_count_chart.tsx | 15 ++++- .../document_count_content.tsx | 56 ++++++++++++++++++- .../explain_log_rate_spikes_page.tsx | 8 +++ 3 files changed, 73 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx index 09253f3881df7..98e7930c3111f 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx @@ -37,7 +37,7 @@ export interface DocumentCountChartPoint { } interface DocumentCountChartProps { - brushSelectionUpdateHandler: (d: WindowParameters) => void; + brushSelectionUpdateHandler: (d: WindowParameters, force: boolean) => void; width?: number; chartPoints: DocumentCountChartPoint[]; chartPointsSplit?: DocumentCountChartPoint[]; @@ -45,6 +45,7 @@ interface DocumentCountChartProps { timeRangeLatest: number; interval: number; changePoint?: ChangePoint; + isBrushedCleared: boolean; } const SPEC_ID = 'document_count'; @@ -73,6 +74,7 @@ export const DocumentCountChart: FC = ({ timeRangeLatest, interval, changePoint, + isBrushedCleared, }) => { const { services: { data, uiSettings, fieldFormats, charts }, @@ -187,7 +189,7 @@ export const DocumentCountChart: FC = ({ ); setOriginalWindowParameters(wp); setWindowParameters(wp); - brushSelectionUpdateHandler(wp); + brushSelectionUpdateHandler(wp, true); } } }; @@ -199,9 +201,16 @@ export const DocumentCountChart: FC = ({ >(); const [windowParameters, setWindowParameters] = useState(); + useEffect(() => { + if (isBrushedCleared && originalWindowParameters !== undefined) { + setOriginalWindowParameters(undefined); + setWindowParameters(undefined); + } + }, [isBrushedCleared, originalWindowParameters]); + function onWindowParametersChange(wp: WindowParameters) { setWindowParameters(wp); - brushSelectionUpdateHandler(wp); + brushSelectionUpdateHandler(wp, false); } const [mlBrushWidth, setMlBrushWidth] = useState(); diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx index cf43cc17421b6..5bb371ff3eacf 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx @@ -4,8 +4,11 @@ * 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'; @@ -13,21 +16,38 @@ import { DocumentCountChart, DocumentCountChartPoint } from '../document_count_c 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 = ({ brushSelectionUpdateHandler, + clearSelectionHandler, changePoint, documentCountStats, documentCountStatsSplit, totalCount, + windowParameters, }) => { + const [isBrushedCleared, setIsBrushCleared] = useState(true); + + useEffect(() => { + setIsBrushCleared(windowParameters === undefined); + }, [windowParameters]); + if (documentCountStats === undefined) { return totalCount !== undefined ? : null; } @@ -48,18 +68,48 @@ export const DocumentCountContent: FC = ({ 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 ( <> - + + + + + {!isBrushedCleared && ( + + + {clearSelectionLabel} + + + )} + {documentCountStats.interval !== undefined && ( )} diff --git a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx index e00612a4a6574..e675ee50b21ef 100644 --- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx +++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx @@ -159,6 +159,12 @@ export const ExplainLogRateSpikesPage: FC = ({ }); }, [dataService, searchQueryLanguage, searchString]); + function clearSelection() { + setWindowParameters(undefined); + setPinnedChangePoint(null); + setSelectedChangePoint(null); + } + return ( @@ -211,12 +217,14 @@ export const ExplainLogRateSpikesPage: FC = ({ )} From 36b1fe8f98b0281f09e45daec0ac6a66e1102b65 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 26 Jul 2022 15:19:10 +0200 Subject: [PATCH 2/4] [ML] Adds empty prompt. --- .../explain_log_rate_spikes_page.tsx | 80 ++++++++++++------- 1 file changed, 53 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx index e675ee50b21ef..3da8917bd1fa9 100644 --- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx +++ b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_page.tsx @@ -7,6 +7,7 @@ import React, { useCallback, useEffect, useMemo, useState, FC } from 'react'; import { + EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, @@ -14,7 +15,7 @@ import { EuiPageContentBody, EuiPageContentHeader, EuiPageContentHeaderSection, - EuiSpacer, + EuiPanel, EuiTitle, } from '@elastic/eui'; @@ -22,6 +23,7 @@ import type { DataView } from '@kbn/data-views-plugin/public'; import type { WindowParameters } from '@kbn/aiops-utils'; import type { ChangePoint } from '@kbn/ml-agg-utils'; import { Filter, Query } from '@kbn/es-query'; +import { FormattedMessage } from '@kbn/i18n-react'; import { SavedSearch } from '@kbn/discover-plugin/public'; import { useAiOpsKibana } from '../../kibana_context'; @@ -215,34 +217,58 @@ export const ExplainLogRateSpikesPage: FC = ({ {overallDocStats?.totalCount !== undefined && ( - - - )} - - {earliest !== undefined && latest !== undefined && windowParameters !== undefined && ( - - + + + )} + + + {earliest !== undefined && latest !== undefined && windowParameters !== undefined && ( + + )} + {windowParameters === undefined && ( + + + + } + titleSize="xs" + body={ +

+ +

+ } + /> + )} + + From ca0d4d409c64181e1d7351422a4d6213897bbb27 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Tue, 26 Jul 2022 16:13:56 +0200 Subject: [PATCH 3/4] [ML] Adds badges to describe brush types. --- .../src/dual_brush/dual_brush.tsx | 14 +++- .../src/dual_brush/dual_brush_annotation.tsx | 4 +- .../document_count_chart.tsx | 65 ++++++++++++++++--- 3 files changed, 69 insertions(+), 14 deletions(-) diff --git a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx index bb44f4ac16a89..1c03b909ded1c 100644 --- a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx +++ b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush.tsx @@ -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; } @@ -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' && @@ -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() @@ -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() @@ -172,7 +182,7 @@ export function DualBrush({ brushes.current[1].end = newWindowParameters.deviationMax; if (onChange) { - onChange(newWindowParameters); + onChange(newWindowParameters, newBrushPx); } drawBrushes(); } diff --git a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx index 54e2c204acfa9..a689ab340224b 100644 --- a/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx +++ b/x-pack/packages/ml/aiops_components/src/dual_brush/dual_brush_annotation.tsx @@ -35,10 +35,10 @@ export const DualBrushAnnotation: FC = ({ 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} /> diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx index 98e7930c3111f..8efb15dd9c02d 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx @@ -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'; @@ -200,6 +202,9 @@ export const DocumentCountChart: FC = ({ WindowParameters | undefined >(); const [windowParameters, setWindowParameters] = useState(); + const [windowParametersAsPixels, setWindowParametersAsPixels] = useState< + WindowParameters | undefined + >(); useEffect(() => { if (isBrushedCleared && originalWindowParameters !== undefined) { @@ -208,8 +213,9 @@ export const DocumentCountChart: FC = ({ } }, [isBrushedCleared, originalWindowParameters]); - function onWindowParametersChange(wp: WindowParameters) { + function onWindowParametersChange(wp: WindowParameters, wpPx: WindowParameters) { setWindowParameters(wp); + setWindowParametersAsPixels(wpPx); brushSelectionUpdateHandler(wp, false); } @@ -230,17 +236,56 @@ export const DocumentCountChart: FC = ({ <> {isBrushVisible && (
- +
+ + + +
+
+ + + +
+
+ +
)} -
+
Date: Tue, 26 Jul 2022 17:50:31 +0200 Subject: [PATCH 4/4] [ML] Fix variable name isBrushCleared. --- .../document_count_chart/document_count_chart.tsx | 8 ++++---- .../document_count_content/document_count_content.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx index 8efb15dd9c02d..4f2c723791e1c 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_chart/document_count_chart.tsx @@ -47,7 +47,7 @@ interface DocumentCountChartProps { timeRangeLatest: number; interval: number; changePoint?: ChangePoint; - isBrushedCleared: boolean; + isBrushCleared: boolean; } const SPEC_ID = 'document_count'; @@ -76,7 +76,7 @@ export const DocumentCountChart: FC = ({ timeRangeLatest, interval, changePoint, - isBrushedCleared, + isBrushCleared, }) => { const { services: { data, uiSettings, fieldFormats, charts }, @@ -207,11 +207,11 @@ export const DocumentCountChart: FC = ({ >(); useEffect(() => { - if (isBrushedCleared && originalWindowParameters !== undefined) { + if (isBrushCleared && originalWindowParameters !== undefined) { setOriginalWindowParameters(undefined); setWindowParameters(undefined); } - }, [isBrushedCleared, originalWindowParameters]); + }, [isBrushCleared, originalWindowParameters]); function onWindowParametersChange(wp: WindowParameters, wpPx: WindowParameters) { setWindowParameters(wp); diff --git a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx b/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx index 5bb371ff3eacf..7ef57daefd27a 100644 --- a/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx +++ b/x-pack/plugins/aiops/public/components/document_count_content/document_count_content/document_count_content.tsx @@ -42,7 +42,7 @@ export const DocumentCountContent: FC = ({ totalCount, windowParameters, }) => { - const [isBrushedCleared, setIsBrushCleared] = useState(true); + const [isBrushCleared, setIsBrushCleared] = useState(true); useEffect(() => { setIsBrushCleared(windowParameters === undefined); @@ -69,7 +69,7 @@ export const DocumentCountContent: FC = ({ } function brushSelectionUpdate(d: WindowParameters, force: boolean) { - if (!isBrushedCleared || force) { + if (!isBrushCleared || force) { brushSelectionUpdateHandler(d); } if (force) { @@ -88,7 +88,7 @@ export const DocumentCountContent: FC = ({ - {!isBrushedCleared && ( + {!isBrushCleared && ( = ({ timeRangeLatest={timeRangeLatest} interval={documentCountStats.interval} changePoint={changePoint} - isBrushedCleared={isBrushedCleared} + isBrushCleared={isBrushCleared} /> )}