From 6a0d0295013c5655967f759927c54e79732785cc Mon Sep 17 00:00:00 2001 From: rbrtj Date: Wed, 11 Dec 2024 15:33:47 +0100 Subject: [PATCH 01/25] anomaly timeline use eui button for add to actions popover --- .../application/explorer/anomaly_timeline.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx index b64afb345f5bc..0760859ba2bdd 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx @@ -13,8 +13,8 @@ import type { EuiContextMenuPanelItemDescriptor, } from '@elastic/eui'; import { + EuiButton, EuiButtonEmpty, - EuiButtonIcon, EuiContextMenu, EuiFlexGroup, EuiFlexItem, @@ -418,16 +418,19 @@ export const AnomalyTimeline: FC = React.memo( > + > + + } isOpen={isMenuOpen} closePopover={setIsMenuOpen.bind(null, false)} From 28d27b0b1bec6bc8d4ac5e44af0992aee6182754 Mon Sep 17 00:00:00 2001 From: rbrtj Date: Wed, 11 Dec 2024 15:39:16 +0100 Subject: [PATCH 02/25] timeseries explorer controls layout update --- .../timeseriesexplorer_controls.tsx | 192 ++++++++++++------ .../timeseriesexplorer/timeseriesexplorer.js | 58 +++--- 2 files changed, 153 insertions(+), 97 deletions(-) diff --git a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_controls/timeseriesexplorer_controls.tsx b/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_controls/timeseriesexplorer_controls.tsx index 898ef65812d29..7bc9a132e5e9f 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_controls/timeseriesexplorer_controls.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseriesexplorer_controls/timeseriesexplorer_controls.tsx @@ -9,11 +9,12 @@ import type { FC } from 'react'; import React, { useCallback, useState } from 'react'; import type { EuiContextMenuPanelDescriptor } from '@elastic/eui'; import { - EuiButtonIcon, + EuiButton, EuiCheckbox, EuiContextMenu, EuiFlexGroup, EuiFlexItem, + EuiFormRow, EuiPopover, htmlIdGenerator, } from '@elastic/eui'; @@ -25,6 +26,8 @@ import { withSuspense, } from '@kbn/presentation-util-plugin/public'; import { useTimeRangeUpdates } from '@kbn/ml-date-picker'; +import type { MlJobState } from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; +import type { CombinedJobWithStats } from '../../../../../server/shared'; import type { JobId } from '../../../../../common/types/anomaly_detection_jobs/job'; import { useMlKibana } from '../../../contexts/kibana'; import { useCasesModal } from '../../../contexts/kibana/use_cases_modal'; @@ -32,12 +35,13 @@ import { getDefaultSingleMetricViewerPanelTitle } from '../../../../embeddables/ import type { MlEntity } from '../../../../embeddables'; import { ANOMALY_SINGLE_METRIC_VIEWER_EMBEDDABLE_TYPE } from '../../../../embeddables/constants'; import type { SingleMetricViewerEmbeddableState } from '../../../../embeddables/types'; +import { ForecastingModal } from '../forecasting_modal/forecasting_modal'; +import type { Entity } from '../entity_control/entity_control'; interface Props { forecastId?: string; selectedDetectorIndex: number; selectedEntities?: MlEntity; - selectedJobId: JobId; showAnnotationsCheckbox: boolean; showAnnotations: boolean; showForecastCheckbox: boolean; @@ -47,6 +51,17 @@ interface Props { onShowModelBoundsChange: () => void; onShowAnnotationsChange: () => void; onShowForecastChange: () => void; + fullRefresh: boolean; + loading: boolean; + hasResults: boolean; + selectedJob: CombinedJobWithStats; + selectedJobId: string; + jobs: CombinedJobWithStats[]; + setForecastId: (forecastId: string) => void; + entities: Entity[]; + jobState: MlJobState; + earliestRecordTimestamp: number; + latestRecordTimestamp: number; } const SavedObjectSaveModalDashboard = withSuspense(LazySavedObjectSaveModalDashboard); @@ -74,6 +89,16 @@ export const TimeSeriesExplorerControls: FC = ({ onShowAnnotationsChange, onShowModelBoundsChange, onShowForecastChange, + fullRefresh, + loading, + hasResults, + setForecastId, + selectedJob, + entities, + jobs, + jobState, + earliestRecordTimestamp, + latestRecordTimestamp, }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [createInDashboard, setCreateInDashboard] = useState(false); @@ -102,6 +127,9 @@ export const TimeSeriesExplorerControls: FC = ({ const openCasesModalCallback = useCasesModal(ANOMALY_SINGLE_METRIC_VIEWER_EMBEDDABLE_TYPE); + const showControls = + (fullRefresh === false || loading === false) && hasResults === true && jobs.length > 0; + const menuPanels: EuiContextMenuPanelDescriptor[] = [ { id: 0, @@ -175,74 +203,104 @@ export const TimeSeriesExplorerControls: FC = ({ return ( <> - - {showModelBoundsCheckbox && ( - - - - )} + + {showControls && ( + <> + {showModelBoundsCheckbox && ( + + + + + + )} - {showAnnotationsCheckbox && ( - - - - )} + {showAnnotationsCheckbox && ( + + + + + + )} - {showForecastCheckbox && ( - - - {i18n.translate('xpack.ml.timeSeriesExplorer.showForecastLabel', { - defaultMessage: 'show forecast', - })} - - } - checked={showForecast} - onChange={onShowForecastChange} - /> - - )} + {showForecastCheckbox && ( + + + + {i18n.translate('xpack.ml.timeSeriesExplorer.showForecastLabel', { + defaultMessage: 'show forecast', + })} + + } + checked={showForecast} + onChange={onShowForecastChange} + /> + + + )} - {canEditDashboards ? ( - - - } - isOpen={isMenuOpen} - closePopover={setIsMenuOpen.bind(null, false)} - panelPaddingSize="none" - anchorPosition="downLeft" - > - - - - ) : null} + {canEditDashboards ? ( + + + + + + } + isOpen={isMenuOpen} + closePopover={setIsMenuOpen.bind(null, false)} + panelPaddingSize="none" + anchorPosition="downLeft" + > + + + + + ) : null} + + )} + + + {createInDashboard ? ( {arePartitioningFieldsProvided && ( - - - - + + )} @@ -1182,22 +1196,6 @@ export class TimeSeriesExplorer extends React.Component { - - Date: Wed, 11 Dec 2024 15:43:54 +0100 Subject: [PATCH 03/25] log rate analysis use eui button for add to actions popover --- .../log_rate_analysis_attachments_menu.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx index d7e68ae42799c..f9efa5c0383f9 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx @@ -212,15 +212,21 @@ export const LogRateAnalysisAttachmentsMenu = ({ setIsActionMenuOpen(!isActionMenuOpen)} - /> + > + + } isOpen={isActionMenuOpen} closePopover={() => setIsActionMenuOpen(false)} From a3b20301f87b1ee89803ada3dc62b827f56f12bf Mon Sep 17 00:00:00 2001 From: rbrtj Date: Wed, 11 Dec 2024 15:47:35 +0100 Subject: [PATCH 04/25] log rate analysis use eui button for add to actions popover & auto sampling menu --- .../log_categorization/attachments_menu.tsx | 11 +++++++---- .../sampling_menu/sampling_menu.tsx | 9 +++++---- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx index 409b489ff4510..e5349b629d3d7 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx @@ -210,7 +210,7 @@ export const AttachmentsMenu = ({ setIsActionMenuOpen(!isActionMenuOpen)} - /> + > + + } isOpen={isActionMenuOpen} closePopover={() => setIsActionMenuOpen(false)} diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx index d2dd9591e76f7..c1e979aa6affd 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx @@ -8,7 +8,7 @@ import type { FC } from 'react'; import { useMemo } from 'react'; import React, { useState } from 'react'; -import { EuiPopover, EuiButtonEmpty, EuiPanel } from '@elastic/eui'; +import { EuiPopover, EuiPanel, EuiButton } from '@elastic/eui'; import useObservable from 'react-use/lib/useObservable'; import type { RandomSampler } from './random_sampler'; @@ -34,14 +34,15 @@ export const SamplingMenu: FC = ({ randomSampler, reload }) => { data-test-subj="aiopsRandomSamplerOptionsPopover" id="aiopsSamplingOptions" button={ - setShowSamplingOptionsPopover(!showSamplingOptionsPopover)} iconSide="right" - iconType="arrowDown" + isSelected={showSamplingOptionsPopover} + iconType={showSamplingOptionsPopover ? 'arrowUp' : 'arrowDown'} > {buttonText} - + } isOpen={showSamplingOptionsPopover} closePopover={() => setShowSamplingOptionsPopover(false)} From 02aa1f3648264d0f5d6d39d26c07e0d4a1831e6f Mon Sep 17 00:00:00 2001 From: rbrtj Date: Wed, 11 Dec 2024 15:48:36 +0100 Subject: [PATCH 05/25] remove unused import --- .../public/components/log_categorization/attachments_menu.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx index e5349b629d3d7..f1261c6fccea1 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx @@ -8,7 +8,6 @@ import type { EuiContextMenuProps } from '@elastic/eui'; import { EuiButton, - EuiButtonIcon, EuiContextMenu, EuiFlexItem, EuiForm, From 3ae73e898ca318c41678c11ed35017f830bc816b Mon Sep 17 00:00:00 2001 From: rbrtj Date: Wed, 11 Dec 2024 15:50:57 +0100 Subject: [PATCH 06/25] change point detection use eui button for add to actions popover --- .../change_point_detection/fields_config.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx b/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx index 90d356809acf5..039c6395e252a 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx @@ -557,7 +557,7 @@ const FieldPanel: FC = ({ = ({ defaultMessage: 'Context menu', } )} - iconType="boxesHorizontal" - color="text" + iconSide="right" + isSelected={isActionMenuOpen} + iconType={isActionMenuOpen ? 'arrowUp' : 'arrowDown'} onClick={setIsActionMenuOpen.bind(null, !isActionMenuOpen)} - /> + > + + } isOpen={isActionMenuOpen} closePopover={setIsActionMenuOpen.bind(null, false)} From 0e0f1de6650bce9cfc22a15b1c565ab1c61c2327 Mon Sep 17 00:00:00 2001 From: rbrtj Date: Thu, 12 Dec 2024 11:44:44 +0100 Subject: [PATCH 07/25] update button colors to text --- .../public/components/change_point_detection/fields_config.tsx | 1 + .../public/components/log_categorization/attachments_menu.tsx | 1 + .../log_categorization/sampling_menu/sampling_menu.tsx | 1 + .../log_rate_analysis_attachments_menu.tsx | 2 +- .../shared/ml/public/application/explorer/anomaly_timeline.tsx | 1 + .../components/forecasting_modal/forecast_button.tsx | 1 + .../timeseriesexplorer_controls/timeseriesexplorer_controls.tsx | 1 + 7 files changed, 7 insertions(+), 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx b/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx index 039c6395e252a..79a2da67fc894 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx @@ -565,6 +565,7 @@ const FieldPanel: FC = ({ defaultMessage: 'Context menu', } )} + color="text" iconSide="right" isSelected={isActionMenuOpen} iconType={isActionMenuOpen ? 'arrowUp' : 'arrowDown'} diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx index f1261c6fccea1..0a23167509136 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx @@ -217,6 +217,7 @@ export const AttachmentsMenu = ({ defaultMessage: 'Attachments', } )} + color="text" iconSide="right" isSelected={isActionMenuOpen} iconType={isActionMenuOpen ? 'arrowUp' : 'arrowDown'} diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx index c1e979aa6affd..7da2736fdd453 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_categorization/sampling_menu/sampling_menu.tsx @@ -37,6 +37,7 @@ export const SamplingMenu: FC = ({ randomSampler, reload }) => { setShowSamplingOptionsPopover(!showSamplingOptionsPopover)} + color="text" iconSide="right" isSelected={showSamplingOptionsPopover} iconType={showSamplingOptionsPopover ? 'arrowUp' : 'arrowDown'} diff --git a/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx b/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx index f9efa5c0383f9..b111cec179a1e 100644 --- a/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx +++ b/x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_attachments_menu.tsx @@ -16,7 +16,6 @@ import { i18n } from '@kbn/i18n'; import type { EuiContextMenuProps } from '@elastic/eui'; import { EuiButton, - EuiButtonIcon, EuiContextMenu, EuiFlexItem, EuiForm, @@ -217,6 +216,7 @@ export const LogRateAnalysisAttachmentsMenu = ({ aria-label={i18n.translate('xpack.aiops.logRateAnalysis.attachmentsMenuAriaLabel', { defaultMessage: 'Attachments', })} + color="text" iconSide="right" isSelected={isActionMenuOpen} iconType={isActionMenuOpen ? 'arrowUp' : 'arrowDown'} diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx b/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx index 0760859ba2bdd..355ddef7343cd 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx @@ -423,6 +423,7 @@ export const AnomalyTimeline: FC = React.memo( aria-label={i18n.translate('xpack.ml.explorer.swimlaneActions', { defaultMessage: 'Actions', })} + color="text" iconSide="right" isSelected={isMenuOpen} iconType={isMenuOpen ? 'arrowUp' : 'arrowDown'} diff --git a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx b/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx index c989bb6ebd38d..19bd4611c19db 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/forecasting_modal/forecast_button.tsx @@ -20,6 +20,7 @@ export const ForecastButton: FC = ({ isDisabled, onClick, mode = 'full' } const Button = mode === 'full' ? EuiButton : EuiButtonEmpty; return (