From 9c0186850dee54c8cf7bfe8e0b49ba706f36b66e Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Mon, 26 Sep 2022 15:27:59 +0200 Subject: [PATCH 1/6] Fix loading state for grouping. --- .../server/routes/explain_log_rate_spikes.ts | 53 ++++++++++++++----- 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts b/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts index 48ea2dbddb1c3..8a8a7372f80e2 100644 --- a/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts +++ b/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts @@ -52,8 +52,10 @@ import { // Overall progress is a float from 0 to 1. const LOADED_FIELD_CANDIDATES = 0.2; -const PROGRESS_STEP_P_VALUES = 0.6; -const PROGRESS_STEP_HISTOGRAMS = 0.2; +const PROGRESS_STEP_P_VALUES = 0.5; +const PROGRESS_STEP_GROUPING = 0.1; +const PROGRESS_STEP_HISTOGRAMS = 0.1; +const PROGRESS_STEP_HISTOGRAMS_GROUPS = 0.1; export const defineExplainLogRateSpikesRoute = ( router: IRouter, @@ -233,7 +235,35 @@ export const defineExplainLogRateSpikesRoute = ( undefined )) as [NumericChartData]; + function pushHistogramDataLoadingState() { + push( + updateLoadingStateAction({ + ccsWarning: false, + loaded, + loadingState: i18n.translate( + 'xpack.aiops.explainLogRateSpikes.loadingState.loadingHistogramData', + { + defaultMessage: 'Loading histogram data.', + } + ), + }) + ); + } + if (groupingEnabled) { + push( + updateLoadingStateAction({ + ccsWarning: false, + loaded, + loadingState: i18n.translate( + 'xpack.aiops.explainLogRateSpikes.loadingState.groupingResults', + { + defaultMessage: 'Transforming significant field/value pairs into groups.', + } + ), + }) + ); + // To optimize the `frequent_items` query, we identify duplicate change points by count attributes. // Note this is a compromise and not 100% accurate because there could be change points that // have the exact same counts but still don't co-occur. @@ -389,6 +419,10 @@ export const defineExplainLogRateSpikesRoute = ( push(addChangePointsGroupAction(changePointGroups)); } + loaded += PROGRESS_STEP_GROUPING; + + pushHistogramDataLoadingState(); + if (changePointGroups) { await asyncForEach(changePointGroups, async (cpg, index) => { const histogramQuery = { @@ -445,6 +479,8 @@ export const defineExplainLogRateSpikesRoute = ( } } + loaded += PROGRESS_STEP_HISTOGRAMS_GROUPS; + // time series filtered by fields if (changePoints) { await asyncForEach(changePoints, async (cp, index) => { @@ -496,18 +532,7 @@ export const defineExplainLogRateSpikesRoute = ( const { fieldName, fieldValue } = cp; loaded += (1 / changePoints.length) * PROGRESS_STEP_HISTOGRAMS; - push( - updateLoadingStateAction({ - ccsWarning: false, - loaded, - loadingState: i18n.translate( - 'xpack.aiops.explainLogRateSpikes.loadingState.loadingHistogramData', - { - defaultMessage: 'Loading histogram data.', - } - ), - }) - ); + pushHistogramDataLoadingState(); push( addChangePointsHistogramAction([ { From 1db0605c82b8c1a96812b69395e7527d7c929ceb Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Wed, 28 Sep 2022 18:47:52 +0200 Subject: [PATCH 2/6] Animated progress bar background. --- .../progress_controls/progress_controls.scss | 38 +++++++++++++++++++ .../progress_controls/progress_controls.tsx | 3 ++ 2 files changed, 41 insertions(+) create mode 100644 x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss new file mode 100644 index 0000000000000..49e8ca14a4c97 --- /dev/null +++ b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss @@ -0,0 +1,38 @@ +progress.aiopsActiveProgress[value] { + display: block; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + animation: aiopsAnimatedProgress 4s infinite linear; +} +progress.aiopsActiveProgress[value]::-webkit-progress-inner-element { + overflow: hidden; + background-position: inherit; +} +progress.aiopsActiveProgress[value]::-webkit-progress-bar { + background-color: transparent; + background-position: inherit; +} +progress.aiopsActiveProgress[value]::-webkit-progress-value { + background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), $euiColorSuccess; + background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/ + 100% 800%; + background-position: inherit; +} +progress.aiopsActiveProgress[value]::-moz-progress-bar { + background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), $euiColorSuccess; + background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/ + 100% 800%; + background-position: inherit; +} +@keyframes aiopsAnimatedProgress { + 0% { + background-position: 0 0; + } + 100% { + background-position: calc(10*(12px/0.707)) 100%; + } +} + diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx index 579c528d16dca..ae60afc9a4fac 100644 --- a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx +++ b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx @@ -17,6 +17,8 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; +import './progress_controls.scss'; + // TODO Consolidate with duplicate component `CorrelationsProgressControls` in // `x-pack/plugins/apm/public/components/app/correlations/progress_controls.tsx` @@ -53,6 +55,7 @@ export function ProgressControls({ Date: Thu, 29 Sep 2022 10:05:13 +0200 Subject: [PATCH 3/6] Migrate SCSS to emotion. --- .../packages/ml/aiops_components/BUILD.bazel | 4 ++ .../progress_controls/progress_controls.scss | 38 ----------- .../progress_controls/progress_controls.tsx | 15 +++-- .../use_animated_progress_bar_background.ts | 65 +++++++++++++++++++ .../ml/aiops_components/tsconfig.json | 3 +- 5 files changed, 82 insertions(+), 43 deletions(-) delete mode 100644 x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss create mode 100644 x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts diff --git a/x-pack/packages/ml/aiops_components/BUILD.bazel b/x-pack/packages/ml/aiops_components/BUILD.bazel index 37ed6c171c4a0..08b49643adc2f 100644 --- a/x-pack/packages/ml/aiops_components/BUILD.bazel +++ b/x-pack/packages/ml/aiops_components/BUILD.bazel @@ -55,6 +55,8 @@ RUNTIME_DEPS = [ "@npm//react", "@npm//@elastic/charts", "@npm//@elastic/eui", + "@npm//@emotion/react", + "@npm//@emotion/css", "//packages/kbn-i18n-react", "//x-pack/packages/ml/aiops_utils", ] @@ -78,6 +80,8 @@ TYPES_DEPS = [ "@npm//@types/react", "@npm//@elastic/charts", "@npm//@elastic/eui", + "@npm//@emotion/react", + "@npm//@emotion/css", "//packages/kbn-i18n-react:npm_module_types", "//x-pack/packages/ml/aiops_utils:npm_module_types", ] diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss deleted file mode 100644 index 49e8ca14a4c97..0000000000000 --- a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.scss +++ /dev/null @@ -1,38 +0,0 @@ -progress.aiopsActiveProgress[value] { - display: block; - width: 100%; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - animation: aiopsAnimatedProgress 4s infinite linear; -} -progress.aiopsActiveProgress[value]::-webkit-progress-inner-element { - overflow: hidden; - background-position: inherit; -} -progress.aiopsActiveProgress[value]::-webkit-progress-bar { - background-color: transparent; - background-position: inherit; -} -progress.aiopsActiveProgress[value]::-webkit-progress-value { - background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), $euiColorSuccess; - background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/ - 100% 800%; - background-position: inherit; -} -progress.aiopsActiveProgress[value]::-moz-progress-bar { - background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0, 0, 0, 0.1) 6px 12px), $euiColorSuccess; - background-size: calc(12px/0.707) 100%, /* 0.707 = cos(45deg)*/ - 100% 800%; - background-position: inherit; -} -@keyframes aiopsAnimatedProgress { - 0% { - background-position: 0 0; - } - 100% { - background-position: calc(10*(12px/0.707)) 100%; - } -} - diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx index ae60afc9a4fac..e71caae9e0502 100644 --- a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx +++ b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx @@ -5,7 +5,10 @@ * 2.0. */ +import React from 'react'; + import { + useEuiTheme, EuiButton, EuiFlexGroup, EuiFlexItem, @@ -13,11 +16,13 @@ import { EuiProgress, EuiText, } from '@elastic/eui'; + import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import React from 'react'; -import './progress_controls.scss'; +import { useAnimatedProgressBarBackground } from './use_animated_progress_bar_background'; + +// import './progress_controls.scss'; // TODO Consolidate with duplicate component `CorrelationsProgressControls` in // `x-pack/plugins/apm/public/components/app/correlations/progress_controls.tsx` @@ -39,6 +44,9 @@ export function ProgressControls({ isRunning, shouldRerunAnalysis, }: ProgressControlProps) { + const { euiTheme } = useEuiTheme(); + const runningProgressBarStyles = useAnimatedProgressBarBackground(euiTheme.colors.success); + return ( @@ -53,9 +61,8 @@ export function ProgressControls({ /> - + { + return useMemo( + () => css` + progress[value] { + display: block; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + animation: aiopsAnimatedProgress 4s infinite linear; + + ::-webkit-progress-inner-element { + overflow: hidden; + background-position: inherit; + } + ::-webkit-progress-bar { + background-color: transparent; + background-position: inherit; + } + ::-webkit-progress-value { + background: repeating-linear-gradient( + -45deg, + transparent 0 6px, + rgba(0, 0, 0, 0.1) 6px 12px + ), + ${color}; + background-size: calc(12px / 0.707) 100%, /* 0.707 = cos(45deg)*/ 100% 800%; + background-position: inherit; + } + ::-moz-progress-bar { + background: repeating-linear-gradient( + -45deg, + transparent 0 6px, + rgba(0, 0, 0, 0.1) 6px 12px + ), + ${color}; + background-size: calc(12px / 0.707) 100%, /* 0.707 = cos(45deg)*/ 100% 800%; + background-position: inherit; + } + } + + @keyframes aiopsAnimatedProgress { + 0% { + background-position: 0 0; + } + 100% { + background-position: calc(10 * (12px / 0.707)) 100%; + } + } + `, + [color] + ); +}; diff --git a/x-pack/packages/ml/aiops_components/tsconfig.json b/x-pack/packages/ml/aiops_components/tsconfig.json index 8bca748268ac2..cdb1c5d8d0007 100644 --- a/x-pack/packages/ml/aiops_components/tsconfig.json +++ b/x-pack/packages/ml/aiops_components/tsconfig.json @@ -12,7 +12,8 @@ "@types/d3-transition", "jest", "node", - "react" + "react", + "@emotion/react/types/css-prop" ] }, "include": [ From 7fca8de9069d7b1031acbea0ebafb8d93a4ab609 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 29 Sep 2022 10:25:37 +0200 Subject: [PATCH 4/6] Tweak CSS. --- .../use_animated_progress_bar_background.ts | 94 +++++++++---------- 1 file changed, 44 insertions(+), 50 deletions(-) diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts b/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts index 948e9b61a3124..f51fe39737ad8 100644 --- a/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts +++ b/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts @@ -10,56 +10,50 @@ import { useMemo } from 'react'; import { css } from '@emotion/react'; export const useAnimatedProgressBarBackground = (color: string) => { - return useMemo( - () => css` - progress[value] { - display: block; - width: 100%; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - animation: aiopsAnimatedProgress 4s infinite linear; + return useMemo(() => { + const progressBackground = { + background: `repeating-linear-gradient( + -45deg, + transparent 0 6px, + rgba(0, 0, 0, 0.1) 6px 12px + ), + ${color}`, + // 0.707 = cos(45deg) + backgroundSize: 'calc(12px / 0.707) 100%, 100% 800%', + backgroundPosition: 'inherit', + }; - ::-webkit-progress-inner-element { - overflow: hidden; - background-position: inherit; - } - ::-webkit-progress-bar { - background-color: transparent; - background-position: inherit; - } - ::-webkit-progress-value { - background: repeating-linear-gradient( - -45deg, - transparent 0 6px, - rgba(0, 0, 0, 0.1) 6px 12px - ), - ${color}; - background-size: calc(12px / 0.707) 100%, /* 0.707 = cos(45deg)*/ 100% 800%; - background-position: inherit; - } - ::-moz-progress-bar { - background: repeating-linear-gradient( - -45deg, - transparent 0 6px, - rgba(0, 0, 0, 0.1) 6px 12px - ), - ${color}; - background-size: calc(12px / 0.707) 100%, /* 0.707 = cos(45deg)*/ 100% 800%; - background-position: inherit; - } - } + return css({ + 'progress[value]': { + display: 'block', + width: '100%', + WebkitAppearance: 'none', + MozAppearance: 'none', + appearance: 'none', + border: 'none', + animation: 'aiopsAnimatedProgress 4s infinite linear', - @keyframes aiopsAnimatedProgress { - 0% { - background-position: 0 0; - } - 100% { - background-position: calc(10 * (12px / 0.707)) 100%; - } - } - `, - [color] - ); + '::-webkit-progress-inner-element': { + overflow: 'hidden', + backgroundPosition: 'inherit', + }, + '::-webkit-progress-bar': { + backgroundColor: 'transparent', + backgroundPosition: 'inherit', + }, + + '::-webkit-progress-value': progressBackground, + '::-moz-progress-bar': progressBackground, + + '@keyframes aiopsAnimatedProgress': { + '0%': { + backgroundPosition: '0 0', + }, + '100%': { + backgroundPosition: 'calc(10 * (12px / 0.707)) 100%', + }, + }, + }, + }); + }, [color]); }; From 69d235fa1b217713fd0bc01447741bcef523d59c Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 29 Sep 2022 10:40:17 +0200 Subject: [PATCH 5/6] Remove obsolete comment. --- .../src/progress_controls/progress_controls.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx index e71caae9e0502..af8f0ec1ad315 100644 --- a/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx +++ b/x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx @@ -22,8 +22,6 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { useAnimatedProgressBarBackground } from './use_animated_progress_bar_background'; -// import './progress_controls.scss'; - // TODO Consolidate with duplicate component `CorrelationsProgressControls` in // `x-pack/plugins/apm/public/components/app/correlations/progress_controls.tsx` From 77bca2551a552a69650d68a2d584d0b1935eb094 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 29 Sep 2022 14:33:37 +0200 Subject: [PATCH 6/6] Cleanup css. --- .../use_animated_progress_bar_background.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts b/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts index f51fe39737ad8..fcfcc25b25c30 100644 --- a/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts +++ b/x-pack/packages/ml/aiops_components/src/progress_controls/use_animated_progress_bar_background.ts @@ -25,12 +25,6 @@ export const useAnimatedProgressBarBackground = (color: string) => { return css({ 'progress[value]': { - display: 'block', - width: '100%', - WebkitAppearance: 'none', - MozAppearance: 'none', - appearance: 'none', - border: 'none', animation: 'aiopsAnimatedProgress 4s infinite linear', '::-webkit-progress-inner-element': {