From 07908a0858b5fe7221d81895ee9fd8f318c5c529 Mon Sep 17 00:00:00 2001 From: Dan Dong <58446449+danieldong51@users.noreply.github.com> Date: Wed, 21 Aug 2024 13:18:56 -0700 Subject: [PATCH] [Look&Feel] Consistency and density improvements (#836) * Changed context menus to be small Signed-off-by: Dan Dong * Updated tabs to be small Signed-off-by: Dan Dong * Updated paragraph text to be EuiText size="s" Signed-off-by: Dan Dong * Updated semantic headers Signed-off-by: Dan Dong * Updated primary buttons Signed-off-by: Dan Dong * Reverted unintended changes Signed-off-by: Dan Dong * Updated snapshot testing Signed-off-by: Dan Dong * Fixed merge conflict Signed-off-by: Dan Dong * Updated snapshot tests --------- Signed-off-by: Dan Dong --- public/components/CodeModal/CodeModal.tsx | 5 +- .../ConfirmUnlinkDetectorModal.tsx | 10 +- .../EmptyAssociatedDetectorMessage.tsx | 2 +- ...ptyAssociatedDetectorMessage.test.tsx.snap | 4 +- .../containers/AssociatedDetectors.tsx | 9 +- .../AddAnomalyDetector.tsx | 12 +- .../containers/ConfigureModel.tsx | 9 +- .../containers/SampleAnomalies.tsx | 3 +- .../ConfigureModel.test.tsx.snap | 30 ++-- .../Components/AnomaliesLiveChart.tsx | 7 +- .../EmptyDashboard/EmptyDashboard.tsx | 26 +-- .../EmptyDashboard.test.tsx.snap | 80 +++++---- .../AnomaliesLiveCharts.test.tsx.snap | 6 +- .../Components/utils/DashboardHeader.tsx | 6 +- .../containers/DefineDetector.tsx | 8 +- .../DefineDetector.test.tsx.snap | 36 ++-- .../components/CodeModal/CodeModal.tsx | 5 +- .../components/ConfirmModal/ConfirmModal.tsx | 8 +- .../DetectorControls/DetectorControls.tsx | 3 + .../containers/DetectorDetail.tsx | 10 +- .../DetectorJobs/containers/DetectorJobs.tsx | 6 +- .../__snapshots__/DetectorJobs.test.tsx.snap | 10 +- .../DetectorState/DetectorFeatureRequired.tsx | 14 +- .../DetectorState/DetectorStopped.tsx | 6 +- .../containers/AnomalyHistory.tsx | 2 +- .../containers/AnomalyResults.tsx | 2 +- .../containers/AnomalyResultsLiveChart.tsx | 2 +- .../containers/AnomalyResultsTable.tsx | 2 +- .../components/EmptyMessage/EmptyMessage.tsx | 2 +- .../__snapshots__/EmptyMessage.test.tsx.snap | 4 +- .../components/ListActions/ListActions.tsx | 3 + .../ConfirmDeleteDetectorsModal.tsx | 10 +- .../ConfirmStartDetectorsModal.tsx | 8 +- .../ConfirmStopDetectorsModal.tsx | 8 +- .../EmptyHistoricalDetectorResults.tsx | 25 +-- .../HistoricalRangeModal.tsx | 11 +- ...ptyHistoricalDetectorResults.test.tsx.snap | 68 +++---- .../SampleDataBox/SampleDataBox.tsx | 35 ++-- .../__snapshots__/SampleDataBox.test.tsx.snap | 54 ++++-- .../SampleDetailsFlyout.tsx | 4 +- .../containers/AnomalyDetectionOverview.tsx | 17 +- .../AnomalyDetectionOverview.test.tsx.snap | 168 +++++++++++------- .../containers/ReviewAndCreate.tsx | 6 +- .../ReviewAndCreate.test.tsx.snap | 20 ++- 44 files changed, 451 insertions(+), 315 deletions(-) diff --git a/public/components/CodeModal/CodeModal.tsx b/public/components/CodeModal/CodeModal.tsx index 43c10c5b..3698102c 100644 --- a/public/components/CodeModal/CodeModal.tsx +++ b/public/components/CodeModal/CodeModal.tsx @@ -17,6 +17,7 @@ import { EuiModalHeaderTitle, EuiOverlayMask, EuiCodeBlock, + EuiText, } from '@elastic/eui'; interface CodeModalProps { @@ -33,7 +34,9 @@ export const CodeModal = (props: CodeModalProps) => {
-

{props.title}

+ +

{props.title}

+ {props.subtitle ? (

{props.subtitle}

) : ( diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx index 0ca4255a..aa420a7a 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx @@ -39,10 +39,16 @@ export const ConfirmUnlinkDetectorModal = ( maxWidth={450} > - {'Remove association?'} + + +

+ {'Remove association?'} +

+ + - + Removing association unlinks {props.detector.name} detector from the visualization but does not delete it. The detector association can be restored. diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx index d005e087..c093e59f 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/EmptyAssociatedDetectorMessage/EmptyAssociatedDetectorMessage.tsx @@ -20,7 +20,7 @@ export const EmptyAssociatedDetectorMessage = (props: EmptyDetectorProps) => ( data-test-subj="emptyAssociatedDetectorFlyoutMessage" style={{ maxWidth: '45em' }} body={ - +

{props.isFilterApplied ? FILTER_TEXT diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap index 15c1a6c3..dda1af69 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap @@ -22,7 +22,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli class="euiText euiText--medium" >

There are no detectors matching your search @@ -56,7 +56,7 @@ exports[`ConfirmUnlinkDetectorModal spec renders the component with filter appli class="euiText euiText--medium" >

There are no anomaly detectors associated with test-title visualization. diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx index c2b0ff7e..90dc8028 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx @@ -15,6 +15,7 @@ import { EuiFlexItem, EuiFlexGroup, EuiCallOut, + EuiText, } from '@elastic/eui'; import { get, isEmpty } from 'lodash'; import '../styles.scss'; @@ -85,7 +86,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId); const refs = indexPattern.references as References[]; const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id; - setDataSourceId(foundDataSourceId); + setDataSourceId(foundDataSourceId); } catch (error) { console.error("Error fetching index pattern:", error); } @@ -270,7 +271,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { getDetectorList( getAllDetectorsQueryParamsWithDataSourceId(dataSourceId) ) - ); + ); }; const handleUnlinkDetectorAction = (detector: DetectorListItem) => { @@ -334,11 +335,11 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { onClose={closeFlyout} > - +

Associated anomaly detectors

- + {associationLimitReached ? ( ref.type === 'data-source')?.id; - setDataSourceId(foundDataSourceId); + setDataSourceId(foundDataSourceId); } catch (error) { console.error("Error fetching index pattern:", error); } @@ -167,7 +167,7 @@ function AddAnomalyDetector({ } fetchData(); createEmbeddable(); - }, [dataSourceId]); + }, [dataSourceId]); const [isShowVis, setIsShowVis] = useState(false); const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true }); @@ -465,7 +465,7 @@ function AddAnomalyDetector({ const getEverythingSuccessfulButton = (detectorId, shingleSize) => { return ( - +

Attempting to initialize the detector with historical data. This initializing process takes approximately 1 minute if you have data in @@ -586,9 +586,9 @@ function AddAnomalyDetector({ {(formikProps) => ( <> - +

Add anomaly detector

- + {associationLimitReached ? ( @@ -669,7 +669,7 @@ function AddAnomalyDetector({ isOpen={accordionsOpen.detectorDetails} onToggle={() => onAccordionToggle('detectorDetails')} subTitle={ - +

Detector interval: {intervalValue} minute(s); Window delay: {delayValue} minute(s) diff --git a/public/pages/ConfigureModel/containers/ConfigureModel.tsx b/public/pages/ConfigureModel/containers/ConfigureModel.tsx index d67fc851..2b558973 100644 --- a/public/pages/ConfigureModel/containers/ConfigureModel.tsx +++ b/public/pages/ConfigureModel/containers/ConfigureModel.tsx @@ -17,7 +17,6 @@ import { EuiFlexGroup, EuiPage, EuiSmallButton, - EuiTitle, EuiSmallButtonEmpty, EuiSpacer, EuiText, @@ -298,8 +297,8 @@ export function ConfigureModel(props: ConfigureModelProps) { -

@@ -307,10 +306,10 @@ export function ConfigureModel(props: ConfigureModelProps) { ? 'Edit model configuration' : 'Configure model'}{' '}

- + - + Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size diff --git a/public/pages/ConfigureModel/containers/SampleAnomalies.tsx b/public/pages/ConfigureModel/containers/SampleAnomalies.tsx index 46313b7d..9954573e 100644 --- a/public/pages/ConfigureModel/containers/SampleAnomalies.tsx +++ b/public/pages/ConfigureModel/containers/SampleAnomalies.tsx @@ -205,7 +205,7 @@ export function SampleAnomalies(props: SampleAnomaliesProps) { > - + {firstPreview ? 'You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed.' : 'Use the sample data as a reference to fine tune settings. To see the latest preview with your adjustments, click "Refresh preview". Once you are done with your edits, save your changes and run the detector to see real time anomalies for the new data set.'}{' '} @@ -231,7 +231,6 @@ export function SampleAnomalies(props: SampleAnomaliesProps) { getSampleAnomalies(); } }} - fill={!firstPreview} isLoading={isLoading} > {firstPreview ? 'Preview anomalies' : 'Refresh preview'} diff --git a/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap b/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap index 7bf4541d..edd26cde 100644 --- a/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap +++ b/public/pages/ConfigureModel/containers/__tests__/__snapshots__/ConfigureModel.test.tsx.snap @@ -14,18 +14,20 @@ exports[` spec creating model configuration renders the compon
-

- Configure model - -

+

+ Configure model + +

+
Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output. @@ -910,7 +912,7 @@ exports[` spec creating model configuration renders the compon class="euiFlexItem" >
You can preview how your anomalies may look like from sample feature output and adjust the feature settings as needed. @@ -995,18 +997,20 @@ exports[` spec editing model configuration renders the compone
-

- Edit model configuration - -

+

+ Edit model configuration + +

+
Set the index fields that you want to find anomalies for by defining the model features. You can also set other model parameters such as category field and shingle size for more granular views. After you set the model features and other optional parameters, you can preview your anomalies from a sample feature output. diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx index 506d3535..bcc97bdd 100644 --- a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx +++ b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx @@ -237,9 +237,9 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => { } - subTitle={`Live anomaly results across detectors for the last 30 minutes. - 'The results refresh every 1 minute. - 'For each detector, if an anomaly occurrence is detected at the end of the detector interval, + subTitle={`Live anomaly results across detectors for the last 30 minutes. + 'The results refresh every 1 minute. + 'For each detector, if an anomaly occurrence is detected at the end of the detector interval, 'you will see a bar representing its anomaly grade.`} actions={[fullScreenButton()]} contentPanelClassName={isFullScreen ? 'full-screen' : undefined} @@ -255,6 +255,7 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => { ) : !hasLatestAnomalyResult ? ( { title={

You have no detectors

} body={ -

Create detector first to detect anomalies in your data.

-

- Dashboard will generate insights on the anomalies across all of - your detectors. -

-

- Read about{' '} - - Get started with Anomaly detection - {' '} -

+ +

Create detector first to detect anomalies in your data.

+

+ Dashboard will generate insights on the anomalies across all of + your detectors. +

+

+ Read about{' '} + + Get started with Anomaly detection + {' '} +

+ } actions={} diff --git a/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap b/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap index 88d51b90..4c0ed5be 100644 --- a/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap +++ b/public/pages/Dashboard/Components/EmptyDashboard/__tests__/__snapshots__/EmptyDashboard.test.tsx.snap @@ -19,45 +19,49 @@ exports[` spec Empty results renders component with empty messa
-

- Create detector first to detect anomalies in your data. -

-

- Dashboard will generate insights on the anomalies across all of your detectors. -

-

- Read about - - - Get started with Anomaly detection - - +

+ Create detector first to detect anomalies in your data. +

+

+ Dashboard will generate insights on the anomalies across all of your detectors. +

+

+ Read about + + - (opens in a new tab or window) - - - -

+ Get started with Anomaly detection + + + (opens in a new tab or window) + + + +

+
spec AnomaliesLiveChart with Sample anomaly data class="euiFlexItem content-panel-subTitle" style="line-height: normal; max-width: 75%;" > - Live anomaly results across detectors for the last 30 minutes. - 'The results refresh every 1 minute. - 'For each detector, if an anomaly occurrence is detected at the end of the detector interval, + Live anomaly results across detectors for the last 30 minutes. + 'The results refresh every 1 minute. + 'For each detector, if an anomaly occurrence is detected at the end of the detector interval, 'you will see a bar representing its anomaly grade.
diff --git a/public/pages/Dashboard/Components/utils/DashboardHeader.tsx b/public/pages/Dashboard/Components/utils/DashboardHeader.tsx index bb95e1b7..1df280ad 100644 --- a/public/pages/Dashboard/Components/utils/DashboardHeader.tsx +++ b/public/pages/Dashboard/Components/utils/DashboardHeader.tsx @@ -15,7 +15,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, - EuiTitle, + EuiText, } from '@elastic/eui'; import { PLUGIN_NAME, @@ -59,9 +59,9 @@ export const DashboardHeader = (props: DashboardHeaderProps) => { - +

Real-time dashboard

- + {props.hasDetectors ? ( diff --git a/public/pages/DefineDetector/containers/DefineDetector.tsx b/public/pages/DefineDetector/containers/DefineDetector.tsx index 3829f754..06a0bb09 100644 --- a/public/pages/DefineDetector/containers/DefineDetector.tsx +++ b/public/pages/DefineDetector/containers/DefineDetector.tsx @@ -31,7 +31,7 @@ import { EuiPageBody, EuiPageHeader, EuiPageHeaderSection, - EuiTitle, + EuiText, } from '@elastic/eui'; import { updateDetector, matchDetector } from '../../../redux/reducers/ad'; import { useHideSideNavBar } from '../../main/hooks/useHideSideNavBar'; @@ -323,7 +323,7 @@ export const DefineDetector = (props: DefineDetectorProps) => { componentType={'DataSourceSelectable'} componentConfig={{ fullWidth: false, - activeOption: MDSCreateState.selectedDataSourceId !== undefined + activeOption: MDSCreateState.selectedDataSourceId !== undefined ? [{ id: MDSCreateState.selectedDataSourceId }] : undefined, savedObjects: getSavedObjectsClient(), @@ -362,13 +362,13 @@ export const DefineDetector = (props: DefineDetectorProps) => { - +

{props.isEdit ? 'Edit detector settings' : 'Define detector'}{' '}

- + diff --git a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap index 8dced003..672db621 100644 --- a/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap +++ b/public/pages/DefineDetector/containers/__tests__/__snapshots__/DefineDetector.test.tsx.snap @@ -14,13 +14,15 @@ exports[` Full creating detector definition renders the compon
-

- Define detector - -

+

+ Define detector + +

+
empty creating detector definition renders the compo
-

- Define detector - -

+

+ Define detector + +

+
empty editing detector definition renders the compon
-

- Edit detector settings - -

+

+ Edit detector settings + +

+
{
-

{this.props.title}

+ +

{this.props.title}

+ {this.props.subtitle ? (

{this.props.subtitle}

) : ( diff --git a/public/pages/DetectorDetail/components/ConfirmModal/ConfirmModal.tsx b/public/pages/DetectorDetail/components/ConfirmModal/ConfirmModal.tsx index ede1ae7c..fd720255 100644 --- a/public/pages/DetectorDetail/components/ConfirmModal/ConfirmModal.tsx +++ b/public/pages/DetectorDetail/components/ConfirmModal/ConfirmModal.tsx @@ -42,7 +42,11 @@ export const ConfirmModal = (props: ConfirmModalProps) => { return ( - {props.title}  + + +

{props.title} 

+ + @@ -51,7 +55,7 @@ export const ConfirmModal = (props: ConfirmModalProps) => { ) : null} {typeof props.description === 'string' ? ( - +

{props.description}

 ) : ( diff --git a/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx b/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx index 18276379..a3e1e238 100644 --- a/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx +++ b/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx @@ -61,6 +61,7 @@ export const DetectorControls = (props: DetectorControls) => { key="editDetector" data-test-subj="editDetectorSettingsItem" onClick={props.onEditDetector} + size="s" > Edit detector settings @@ -69,6 +70,7 @@ export const DetectorControls = (props: DetectorControls) => { key="editFeatures" data-test-subj="editModelConfigurationItem" onClick={props.onEditFeatures} + size="s" > Edit model configuration @@ -78,6 +80,7 @@ export const DetectorControls = (props: DetectorControls) => { data-test-subj="deleteDetectorItem" onClick={props.onDelete} style={{ color: '#FF6666' }} + size="s" > Delete detector diff --git a/public/pages/DetectorDetail/containers/DetectorDetail.tsx b/public/pages/DetectorDetail/containers/DetectorDetail.tsx index c5503317..5434f4d7 100644 --- a/public/pages/DetectorDetail/containers/DetectorDetail.tsx +++ b/public/pages/DetectorDetail/containers/DetectorDetail.tsx @@ -15,14 +15,12 @@ import { EuiTab, EuiFlexGroup, EuiFlexItem, - EuiTitle, EuiOverlayMask, EuiCallOut, EuiSpacer, EuiText, EuiCompressedFieldText, EuiLoadingSpinner, - EuiSmallButton, } from '@elastic/eui'; import { CoreStart, MountPoint } from '../../../../../../src/core/public'; import { CoreServicesContext } from '../../../components/CoreServices/CoreServices'; @@ -444,9 +442,9 @@ export const DetectorDetail = (props: DetectorDetailProps) => { } else { return ( - +

{detector && detector.name}

- + ); } @@ -512,7 +510,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => { - + {tabs.map((tab) => ( { @@ -541,7 +539,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => { description={ - +

Detector and feature configuration will be permanently removed. This action is irreversible. To confirm deletion, diff --git a/public/pages/DetectorJobs/containers/DetectorJobs.tsx b/public/pages/DetectorJobs/containers/DetectorJobs.tsx index e348e00b..64db2ae4 100644 --- a/public/pages/DetectorJobs/containers/DetectorJobs.tsx +++ b/public/pages/DetectorJobs/containers/DetectorJobs.tsx @@ -17,7 +17,7 @@ import { EuiFlexGroup, EuiPage, EuiSmallButton, - EuiTitle, + EuiText, EuiSmallButtonEmpty, EuiSpacer, } from '@elastic/eui'; @@ -162,9 +162,9 @@ export function DetectorJobs(props: DetectorJobsProps) { - +

Set up detector jobs

- + spec configuring detector jobs renders the component 1
-

- Set up detector jobs -

+

+ Set up detector jobs +

+
Features are required to run a detector} body={ -

- Specify index fields that you want to find anomalies for by defining - features. Once you define the features, you can preview your - anomalies from a sample feature output. -

+ +

+ Specify index fields that you want to find anomalies for by defining + features. Once you define the features, you can preview your + anomalies from a sample feature output. +

+ } actions={[ diff --git a/public/pages/DetectorResults/components/DetectorState/DetectorStopped.tsx b/public/pages/DetectorResults/components/DetectorState/DetectorStopped.tsx index 84e546aa..6df35042 100644 --- a/public/pages/DetectorResults/components/DetectorState/DetectorStopped.tsx +++ b/public/pages/DetectorResults/components/DetectorState/DetectorStopped.tsx @@ -10,7 +10,7 @@ */ import React from 'react'; -import { EuiSmallButton, EuiEmptyPrompt } from '@elastic/eui'; +import { EuiSmallButton, EuiEmptyPrompt, EuiText } from '@elastic/eui'; import { Fragment } from 'react'; export interface DetectorStoppedProps { @@ -24,7 +24,9 @@ export const DetectorStopped = (props: DetectorStoppedProps) => { title={

The detector is stopped

} body={ -

Start the detector to see anomalies.

+ +

Start the detector to see anomalies.

+ } actions={[ diff --git a/public/pages/DetectorResults/containers/AnomalyHistory.tsx b/public/pages/DetectorResults/containers/AnomalyHistory.tsx index 4030340b..94e05ebd 100644 --- a/public/pages/DetectorResults/containers/AnomalyHistory.tsx +++ b/public/pages/DetectorResults/containers/AnomalyHistory.tsx @@ -948,7 +948,7 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => { , ] : null} - {renderTabs()} + {renderTabs()} {isLoading || isLoadingAnomalyResults ? ( - +

Attempting to initialize the detector with historical data. This initializing process takes approximately 1 minute if you have diff --git a/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx b/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx index 195e10cc..604a7597 100644 --- a/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx +++ b/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx @@ -396,7 +396,7 @@ export const AnomalyResultsLiveChart = ( ) : ( - + {'Not available when the detector ' + `${ props.detector.curState === DETECTOR_STATE.INIT_FAILURE || diff --git a/public/pages/DetectorResults/containers/AnomalyResultsTable.tsx b/public/pages/DetectorResults/containers/AnomalyResultsTable.tsx index 846a30ec..cc4675fb 100644 --- a/public/pages/DetectorResults/containers/AnomalyResultsTable.tsx +++ b/public/pages/DetectorResults/containers/AnomalyResultsTable.tsx @@ -170,7 +170,7 @@ export function AnomalyResultsTable(props: AnomalyResultsTableProps) { +

There are no anomalies currently.

 } diff --git a/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx b/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx index d7bac74e..ae088070 100644 --- a/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx +++ b/public/pages/DetectorsList/components/EmptyMessage/EmptyMessage.tsx @@ -30,7 +30,7 @@ export const EmptyDetectorMessage = (props: EmptyDetectorProps) => ( data-test-subj="emptyDetectorListMessage" style={{ maxWidth: '45em' }} body={ - +

{props.isFilterApplied ? FILTER_TEXT : EMPTY_TEXT}

 } diff --git a/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap b/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap index 30dbdf69..16dcd62e 100644 --- a/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap +++ b/public/pages/DetectorsList/components/EmptyMessage/__tests__/__snapshots__/EmptyMessage.test.tsx.snap @@ -13,7 +13,7 @@ exports[` spec Empty results renders component with empt class="euiText euiText--medium" >

A detector is an individual anomaly detection task. You can create multiple detectors, and all the detectors can run simultaneously, with each analyzing data from different sources. Create an anomaly detector to get started. @@ -86,7 +86,7 @@ exports[` spec Filters results message renders component class="euiText euiText--medium" >

There are no detectors matching your applied filters. Reset your filters to view all detectors. diff --git a/public/pages/DetectorsList/components/ListActions/ListActions.tsx b/public/pages/DetectorsList/components/ListActions/ListActions.tsx index 7cbf0f0d..12c5aff4 100644 --- a/public/pages/DetectorsList/components/ListActions/ListActions.tsx +++ b/public/pages/DetectorsList/components/ListActions/ListActions.tsx @@ -57,6 +57,7 @@ export const ListActions = (props: ListActionsProps) => { data-test-subj="startDetectors" disabled={props.isStartDisabled} onClick={props.onStartDetectors} + size="s" > Start real-time detectors @@ -66,6 +67,7 @@ export const ListActions = (props: ListActionsProps) => { data-test-subj="stopDetectors" disabled={props.isStopDisabled} onClick={props.onStopDetectors} + size="s" > Stop real-time detectors @@ -75,6 +77,7 @@ export const ListActions = (props: ListActionsProps) => { data-test-subj="deleteDetectors" onClick={props.onDeleteDetectors} style={{ color: '#FF6666' }} + size="s" > Delete detectors diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmDeleteDetectorsModal.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmDeleteDetectorsModal.tsx index 419ca352..2aef5f25 100644 --- a/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmDeleteDetectorsModal.tsx +++ b/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmDeleteDetectorsModal.tsx @@ -75,7 +75,11 @@ export const ConfirmDeleteDetectorsModal = ( - {'Are you sure you want to delete the selected detectors?'}  + +

+ {'Are you sure you want to delete the selected detectors?'}  +

+ @@ -95,7 +99,7 @@ export const ConfirmDeleteDetectorsModal = ( > ) : null} {containsMonitors || containsEnabled ? : null} - + The following detectors and feature configurations will be permanently removed. This action is irreversible. @@ -120,7 +124,7 @@ export const ConfirmDeleteDetectorsModal = ( marginRight: 24, }} > - +

To confirm deletion, type delete in the field.

diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStartDetectorsModal.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStartDetectorsModal.tsx index aceebb7d..f4a44df5 100644 --- a/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStartDetectorsModal.tsx +++ b/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStartDetectorsModal.tsx @@ -44,11 +44,15 @@ export const ConfirmStartDetectorsModal = ( - {'Are you sure you want to start the selected detectors?'}  + +

+ {'Are you sure you want to start the selected detectors?'}  +

+ - The following detectors will begin initializing. + The following detectors will begin initializing.
{isLoading ? ( diff --git a/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStopDetectorsModal.tsx b/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStopDetectorsModal.tsx index a39d4c4e..1e8c14b7 100644 --- a/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStopDetectorsModal.tsx +++ b/public/pages/DetectorsList/containers/ConfirmActionModals/ConfirmStopDetectorsModal.tsx @@ -57,7 +57,11 @@ export const ConfirmStopDetectorsModal = ( - {'Are you sure you want to stop the selected detectors?'}  + +

+ {'Are you sure you want to stop the selected detectors?'}  +

+ @@ -71,7 +75,7 @@ export const ConfirmStopDetectorsModal = (
) : null} - The following detectors will be stopped. + The following detectors will be stopped.
{isLoading ? ( diff --git a/public/pages/HistoricalDetectorResults/components/EmptyHistoricalDetectorResults/EmptyHistoricalDetectorResults.tsx b/public/pages/HistoricalDetectorResults/components/EmptyHistoricalDetectorResults/EmptyHistoricalDetectorResults.tsx index 07139826..a3700880 100644 --- a/public/pages/HistoricalDetectorResults/components/EmptyHistoricalDetectorResults/EmptyHistoricalDetectorResults.tsx +++ b/public/pages/HistoricalDetectorResults/components/EmptyHistoricalDetectorResults/EmptyHistoricalDetectorResults.tsx @@ -15,6 +15,7 @@ import { EuiIcon, EuiSmallButton, EuiOverlayMask, + EuiText, } from '@elastic/eui'; import React, { Fragment, useState } from 'react'; import { Detector } from '../../../../models/interfaces'; @@ -47,17 +48,19 @@ export const EmptyHistoricalDetectorResults = ( /> ) : null} -

- Historical analysis lets you apply anomaly detection models over - long historical data windows (weeks or months). You can identify - anomaly patterns, seasonality, and trends.{' '} - - Learn more - {' '} -

+ +

+ Historical analysis lets you apply anomaly detection models over + long historical data windows (weeks or months). You can identify + anomaly patterns, seasonality, and trends.{' '} + + Learn more + {' '} +

+ } actions={ diff --git a/public/pages/HistoricalDetectorResults/components/HistoricalRangeModal/HistoricalRangeModal.tsx b/public/pages/HistoricalDetectorResults/components/HistoricalRangeModal/HistoricalRangeModal.tsx index c960f33b..e2768d11 100644 --- a/public/pages/HistoricalDetectorResults/components/HistoricalRangeModal/HistoricalRangeModal.tsx +++ b/public/pages/HistoricalDetectorResults/components/HistoricalRangeModal/HistoricalRangeModal.tsx @@ -19,6 +19,7 @@ import { EuiSmallButtonEmpty, EuiSmallButton, EuiCompressedSuperDatePicker, + EuiText, } from '@elastic/eui'; import { get } from 'lodash'; import { Detector } from '../../../../models/interfaces'; @@ -51,9 +52,13 @@ export const HistoricalRangeModal = (props: HistoricalRangeModalProps) => { - {props.isEdit - ? 'Modify historical analysis' - : 'Set up historical analysis'} + +

+ {props.isEdit + ? 'Modify historical analysis' + : 'Set up historical analysis'} +

+ diff --git a/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap b/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap index b690e89e..43dcc106 100644 --- a/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap +++ b/public/pages/HistoricalDetectorResults/components/__tests__/__snapshots__/EmptyHistoricalDetectorResults.test.tsx.snap @@ -19,39 +19,43 @@ exports[` spec renders component 1`] = `
-

- Historical analysis lets you apply anomaly detection models over long historical data windows (weeks or months). You can identify anomaly patterns, seasonality, and trends. - - - Learn more - - +

+ Historical analysis lets you apply anomaly detection models over long historical data windows (weeks or months). You can identify anomaly patterns, seasonality, and trends. + + - (opens in a new tab or window) - - - -

+ Learn more + + + (opens in a new tab or window) + + + +

+
{ -

- {props.description} -

+ +

+ {props.description} +

+ { {props.isDataLoaded ? ( - - View detector and sample data - + + + View detector and sample data + + ) : null} diff --git a/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap b/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap index e4c5ac5e..35f49142 100644 --- a/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap +++ b/public/pages/Overview/components/SampleDataBox/__tests__/__snapshots__/SampleDataBox.test.tsx.snap @@ -61,11 +61,15 @@ exports[` spec Data is loaded renders component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Sample description -

+

+ Sample description +

+
spec Data is loaded renders component 1`] = `
- - View detector and sample data - + + View detector and sample data + +
@@ -184,11 +192,15 @@ exports[` spec Data is loading renders component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Sample description -

+

+ Sample description +

+
spec Data not loaded renders component 1`] = ` class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Sample description -

+

+ Sample description +

+
{ aria-labelledby="flyoutTitle" > - +

{props.title}

- + ({ queryParams, - selectedDataSourceId: queryParams.dataSourceId === undefined - ? undefined + selectedDataSourceId: queryParams.dataSourceId === undefined + ? undefined : queryParams.dataSourceId, }); @@ -150,7 +149,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) { ...location, search: queryString.stringify(updatedParams), }); - } + } fetchData(); }, [MDSOverviewState]); @@ -276,7 +275,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) { componentType={'DataSourceSelectable'} componentConfig={{ fullWidth: false, - activeOption: props.landingDataSourceId === undefined + activeOption: props.landingDataSourceId === undefined || MDSOverviewState.selectedDataSourceId === undefined ? undefined : [{ id: MDSOverviewState.selectedDataSourceId }], @@ -331,9 +330,9 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) { - +

Get started

- + - + The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm.{' '} @@ -394,7 +393,7 @@ export function AnomalyDetectionOverview(props: AnomalyDetectionOverviewProps) { + New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets. diff --git a/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap b/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap index 8d143e80..1d353a14 100644 --- a/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap +++ b/public/pages/Overview/containers/__tests__/__snapshots__/AnomalyDetectionOverview.test.tsx.snap @@ -11,12 +11,14 @@ exports[` spec No sample detectors created renders c
-

- Get started -

+

+ Get started +

+
spec No sample detectors created renders c
The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm. @@ -414,7 +416,7 @@ exports[` spec No sample detectors created renders c style="line-height: normal; max-width: 75%;" >
New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets. @@ -506,11 +508,15 @@ exports[` spec No sample detectors created renders c class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect high numbers of error response codes in an index containing HTTP response data. -

+

+ Detect high numbers of error response codes in an index containing HTTP response data. +

+
spec No sample detectors created renders c class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect any unusual increase or decrease of orders in an index containing online order data. -

+

+ Detect any unusual increase or decrease of orders in an index containing online order data. +

+
spec No sample detectors created renders c class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect increases in CPU and memory utilization in an index containing various health metrics from a host. -

+

+ Detect increases in CPU and memory utilization in an index containing various health metrics from a host. +

+
spec Some detectors created renders compon
-

- Get started -

+

+ Get started +

+
spec Some detectors created renders compon
The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm. @@ -1169,7 +1185,7 @@ exports[` spec Some detectors created renders compon style="line-height: normal; max-width: 75%;" >
New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets. @@ -1261,11 +1277,15 @@ exports[` spec Some detectors created renders compon class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect high numbers of error response codes in an index containing HTTP response data. -

+

+ Detect high numbers of error response codes in an index containing HTTP response data. +

+
spec Some detectors created renders compon class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect any unusual increase or decrease of orders in an index containing online order data. -

+

+ Detect any unusual increase or decrease of orders in an index containing online order data. +

+
spec Some detectors created renders compon class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect increases in CPU and memory utilization in an index containing various health metrics from a host. -

+

+ Detect increases in CPU and memory utilization in an index containing various health metrics from a host. +

+
spec Some detectors created renders compon
-

- Get started -

+

+ Get started +

+
spec Some detectors created renders compon
The anomaly detection plugin automatically detects anomalies in your data in near real-time using the Random Cut Forest (RCF) algorithm. @@ -1924,7 +1954,7 @@ exports[` spec Some detectors created renders compon style="line-height: normal; max-width: 75%;" >
New to anomaly detection? Get a better understanding of how it works by creating a detector with one of the sample datasets. @@ -2016,11 +2046,15 @@ exports[` spec Some detectors created renders compon class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect high numbers of error response codes in an index containing HTTP response data. -

+

+ Detect high numbers of error response codes in an index containing HTTP response data. +

+
spec Some detectors created renders compon
- - View detector and sample data - + + View detector and sample data + +
@@ -2139,11 +2177,15 @@ exports[` spec Some detectors created renders compon class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect any unusual increase or decrease of orders in an index containing online order data. -

+

+ Detect any unusual increase or decrease of orders in an index containing online order data. +

+
spec Some detectors created renders compon class="euiFlexItem euiFlexItem--flexGrowZero" style="height: 70px;" > -

- Detect increases in CPU and memory utilization in an index containing various health metrics from a host. -

+

+ Detect increases in CPU and memory utilization in an index containing various health metrics from a host. +

+
- +

Review and create

- + spec renders the component, validation loading 1`]
-

- Review and create -

+

+ Review and create +

+
-

- Review and create -

+

+ Review and create +

+