From 97504c26dd996b865580160221ec922952628ca8 Mon Sep 17 00:00:00 2001 From: Miki Date: Fri, 16 Aug 2024 21:02:32 -0700 Subject: [PATCH] [Look&Feel] Use smaller and compressed varients of buttons and form components (#826) (cherry picked from commit 3203e43e8e8d3764e9200d4ef67e729442f2adfc) --- public/components/ConfigCell/ConfigCell.tsx | 4 +- .../CreateDetectorButtons.tsx | 12 +- .../ConfirmUnlinkDetectorModal.tsx | 12 +- .../containers/AssociatedDetectors.tsx | 10 +- .../AddAnomalyDetector.tsx | 54 +++---- .../containers/AssociateExisting.tsx | 6 +- .../EnhancedAccordion/EnhancedAccordion.tsx | 10 +- .../FormattedFormRow/FormattedFormRow.tsx | 6 +- .../components/AlertsButton/AlertsButton.tsx | 10 +- .../__snapshots__/AlertsButton.test.tsx.snap | 4 +- .../components/AlertsFlyout/AlertsFlyout.tsx | 6 +- .../components/FeatureChart/FeatureChart.tsx | 4 +- .../FeatureChart/NoFeaturePrompt.tsx | 6 +- .../containers/AnomaliesChart.tsx | 4 +- .../containers/AnomalyHeatmapChart.tsx | 10 +- .../AnomalyHeatmapChart.test.tsx.snap | 92 ++++++------ .../AnomalyCharts/utils/anomalyChartUtils.tsx | 4 +- .../AdvancedSettings/AdvancedSettings.tsx | 4 +- .../AggregationSelector.tsx | 14 +- .../AggregationSelector.test.tsx.snap | 18 +-- .../CategoryField/CategoryField.tsx | 14 +- .../__snapshots__/CategoryField.test.tsx.snap | 14 +- .../CustomAggregation/CustomAggregation.tsx | 6 +- .../CustomAggregation.test.tsx.snap | 2 +- .../FeatureAccordion/FeatureAccordion.tsx | 26 ++-- .../components/Features/Features.tsx | 6 +- .../containers/ConfigureModel.tsx | 20 +-- .../containers/SampleAnomalies.tsx | 6 +- .../ConfigureModel.test.tsx.snap | 82 +++++------ .../Components/AnomaliesDistribution.tsx | 6 +- .../Components/AnomaliesLiveChart.tsx | 12 +- .../EmptyDashboard.test.tsx.snap | 4 +- .../AnomaliesLiveCharts.test.tsx.snap | 8 +- .../Components/utils/DashboardHeader.tsx | 6 +- .../Dashboard/Container/DashboardOverview.tsx | 16 +- .../CustomResultIndex/CustomResultIndex.tsx | 36 ++--- .../components/CustomFilter.tsx | 6 +- .../DataFilterList/components/DataFilter.tsx | 23 +-- .../DataFilterList/components/FilterValue.tsx | 38 ++--- .../components/SimpleFilter.tsx | 18 +-- .../components/Datasource/DataSource.tsx | 6 +- .../NameAndDescription/NameAndDescription.tsx | 8 +- .../NameAndDescription.test.tsx.snap | 10 +- .../components/Settings/Settings.tsx | 6 +- .../__snapshots__/Settings.test.tsx.snap | 12 +- .../components/Timestamp/Timestamp.tsx | 4 +- .../__snapshots__/Timestamp.test.tsx.snap | 10 +- .../containers/DefineDetector.tsx | 18 +-- .../DefineDetector.test.tsx.snap | 138 +++++++++--------- .../containers/DetectorJobs.tsx | 6 +- .../DetectorConfig/containers/Features.tsx | 10 +- .../DetectorConfig.test.tsx.snap | 72 ++++----- .../components/ConfirmModal/ConfirmModal.tsx | 12 +- .../DetectorControls/DetectorControls.tsx | 6 +- .../DetectorControls.test.tsx.snap | 8 +- .../containers/DetectorDetail.tsx | 6 +- .../HistoricalJob/HistoricalJob.tsx | 8 +- .../__snapshots__/HistoricalJob.test.tsx.snap | 2 +- .../components/RealTimeJob/RealTimeJob.tsx | 4 +- .../__snapshots__/RealTimeJob.test.tsx.snap | 2 +- .../DetectorJobs/containers/DetectorJobs.tsx | 16 +- .../__snapshots__/DetectorJobs.test.tsx.snap | 4 +- .../DetectorState/DetectorFeatureRequired.tsx | 6 +- .../DetectorState/DetectorStopped.tsx | 6 +- .../DetectorState/DetectorUnknownState.tsx | 10 +- .../containers/AnomalyResults.tsx | 14 +- .../containers/AnomalyResultsLiveChart.tsx | 6 +- .../components/EmptyMessage/EmptyMessage.tsx | 6 +- .../__snapshots__/EmptyMessage.test.tsx.snap | 6 +- .../components/ListActions/ListActions.tsx | 6 +- .../__snapshots__/ListActions.test.tsx.snap | 4 +- .../components/ListFilters/ListFilters.tsx | 10 +- .../__snapshots__/ListFilters.test.tsx.snap | 22 +-- .../ConfirmDeleteDetectorsModal.tsx | 16 +- .../ConfirmStartDetectorsModal.tsx | 12 +- .../ConfirmStopDetectorsModal.tsx | 12 +- .../DetectorsList/containers/List/List.tsx | 14 +- .../EmptyHistoricalDetectorResults.tsx | 6 +- .../HistoricalDetectorCallout.tsx | 6 +- .../HistoricalRangeModal.tsx | 16 +- ...ptyHistoricalDetectorResults.test.tsx.snap | 2 +- .../SampleDataBox/SampleDataBox.tsx | 6 +- .../__snapshots__/SampleDataBox.test.tsx.snap | 6 +- .../containers/AnomalyDetectionOverview.tsx | 14 +- .../AnomalyDetectionOverview.test.tsx.snap | 24 +-- .../DetectorDefinitionFields.tsx | 6 +- .../DetectorScheduleFields.tsx | 6 +- .../ModelConfigurationFields.tsx | 6 +- .../DetectorDefinitionFields.test.tsx.snap | 56 +++---- .../ModelConfigurationFields.test.tsx.snap | 2 +- .../containers/ReviewAndCreate.tsx | 16 +- .../ReviewAndCreate.test.tsx.snap | 74 +++++----- 92 files changed, 702 insertions(+), 701 deletions(-) diff --git a/public/components/ConfigCell/ConfigCell.tsx b/public/components/ConfigCell/ConfigCell.tsx index 8a895443..57d81c68 100644 --- a/public/components/ConfigCell/ConfigCell.tsx +++ b/public/components/ConfigCell/ConfigCell.tsx @@ -9,11 +9,11 @@ * GitHub history for details. */ -import { EuiText, EuiFormRow, EuiFormRowProps } from '@elastic/eui'; +import { EuiText, EuiCompressedFormRow, EuiFormRowProps } from '@elastic/eui'; import React from 'react'; export const FixedWidthRow = (props: EuiFormRowProps) => ( - + ); interface ConfigCellProps { diff --git a/public/components/CreateDetectorButtons/CreateDetectorButtons.tsx b/public/components/CreateDetectorButtons/CreateDetectorButtons.tsx index 551bb709..38baf34e 100644 --- a/public/components/CreateDetectorButtons/CreateDetectorButtons.tsx +++ b/public/components/CreateDetectorButtons/CreateDetectorButtons.tsx @@ -9,7 +9,7 @@ * GitHub history for details. */ -import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui'; import React from 'react'; import { APP_PATH, PLUGIN_NAME } from '../../utils/constants'; import { useLocation } from 'react-router-dom'; @@ -23,27 +23,27 @@ export const CreateDetectorButtons = () => { const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.CREATE_DETECTOR}`, dataSourceId, false); const sampleDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.OVERVIEW}`, dataSourceId, false); - + return ( - Try a sample detector - + - Create detector - + ); diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx index 98d5d155..0ca4255a 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx @@ -7,8 +7,8 @@ import React, { useState } from 'react'; import { EuiText, EuiOverlayMask, - EuiButton, - EuiButtonEmpty, + EuiSmallButton, + EuiSmallButtonEmpty, EuiModal, EuiModalHeader, EuiModalFooter, @@ -51,14 +51,14 @@ export const ConfirmUnlinkDetectorModal = ( {isLoading ? null : ( - Cancel - + )} - {'Remove association'} - + diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx index fb983465..c2b0ff7e 100644 --- a/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx +++ b/public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx @@ -10,7 +10,7 @@ import { EuiSpacer, EuiInMemoryTable, EuiFlyoutBody, - EuiButton, + EuiSmallButton, EuiFlyout, EuiFlexItem, EuiFlexGroup, @@ -85,7 +85,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 +270,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) { getDetectorList( getAllDetectorsQueryParamsWithDataSourceId(dataSourceId) ) - ); + ); }; const handleUnlinkDetectorAction = (detector: DetectorListItem) => { @@ -371,7 +371,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
- Associate a detector - +
diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx index f750f8e2..1ff3d78f 100644 --- a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx +++ b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx @@ -9,21 +9,21 @@ import { EuiFlyoutBody, EuiFlyoutFooter, EuiTitle, - EuiButton, + EuiSmallButton, EuiFormFieldset, EuiCheckableCard, EuiSpacer, EuiIcon, EuiText, - EuiSwitch, - EuiFormRow, - EuiFieldText, - EuiCheckbox, + EuiCompressedSwitch, + EuiCompressedFormRow, + EuiCompressedFieldText, + EuiCompressedCheckbox, EuiFlexItem, EuiFlexGroup, - EuiFieldNumber, + EuiCompressedFieldNumber, EuiCallOut, - EuiButtonEmpty, + EuiSmallButtonEmpty, EuiPanel, } from '@elastic/eui'; import './styles.scss'; @@ -141,7 +141,7 @@ function AddAnomalyDetector({ 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); } @@ -167,7 +167,7 @@ function AddAnomalyDetector({ } fetchData(); createEmbeddable(); - }, [dataSourceId]); + }, [dataSourceId]); const [isShowVis, setIsShowVis] = useState(false); const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true }); @@ -311,7 +311,7 @@ function AddAnomalyDetector({ {title} - setIsShowVis(!isShowVis)} @@ -478,9 +478,9 @@ function AddAnomalyDetector({
- openAlerting(detectorId)}> + openAlerting(detectorId)}> Set up alerts - +
@@ -684,7 +684,7 @@ function AddAnomalyDetector({ isInvalid={isInvalid(field.name, form)} error={getError(field.name, form)} > - - - - ( - - - - + ) : null} @@ -960,7 +960,7 @@ function AddAnomalyDetector({ - Add another feature - + @@ -1000,20 +1000,20 @@ function AddAnomalyDetector({ - Cancel + Cancel {mode === FLYOUT_MODES.existing ? ( - handleAssociate(selectedDetector)} > Associate detector - + ) : ( - Create detector - + )} diff --git a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx index 63d53b15..2caea78d 100644 --- a/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx +++ b/public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx @@ -9,7 +9,7 @@ import { EuiSpacer, EuiIcon, EuiText, - EuiComboBox, + EuiCompressedComboBox, EuiLoadingSpinner, EuiLink, EuiFlexGroup, @@ -78,7 +78,7 @@ export function AssociateExisting( const indexPattern = await getSavedObjectsClient().get('index-pattern', associateExistingProps.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); } @@ -228,7 +228,7 @@ export function AssociateExisting( Eligible detectors don't include high-cardinality detectors. {existingDetectorsAvailableToAssociate ? ( - (
- )} {isButton && ( - + > )}
diff --git a/public/components/FormattedFormRow/FormattedFormRow.tsx b/public/components/FormattedFormRow/FormattedFormRow.tsx index 20cf8daa..043e493e 100644 --- a/public/components/FormattedFormRow/FormattedFormRow.tsx +++ b/public/components/FormattedFormRow/FormattedFormRow.tsx @@ -10,7 +10,7 @@ */ import React, { ReactElement, ReactNode } from 'react'; -import { EuiFormRow, EuiText, EuiLink, EuiIcon } from '@elastic/eui'; +import { EuiCompressedFormRow, EuiText, EuiLink, EuiIcon } from '@elastic/eui'; type FormattedFormRowProps = { title?: string; @@ -46,7 +46,7 @@ export const FormattedFormRow = (props: FormattedFormRowProps) => { const { formattedTitle, ...euiFormRowProps } = props; return ( - {formattedTitle ? formattedTitle :

{props.title}

} @@ -57,6 +57,6 @@ export const FormattedFormRow = (props: FormattedFormRowProps) => { {...euiFormRowProps} > {props.children} - + ); }; diff --git a/public/pages/AnomalyCharts/components/AlertsButton/AlertsButton.tsx b/public/pages/AnomalyCharts/components/AlertsButton/AlertsButton.tsx index 0e741eaa..d4ee0b54 100644 --- a/public/pages/AnomalyCharts/components/AlertsButton/AlertsButton.tsx +++ b/public/pages/AnomalyCharts/components/AlertsButton/AlertsButton.tsx @@ -9,7 +9,7 @@ * GitHub history for details. */ -import { EuiButton, EuiButtonProps } from '@elastic/eui'; +import { EuiSmallButton, EuiButtonProps } from '@elastic/eui'; import React, { Fragment } from 'react'; import { getAlertingCreateMonitorLink, @@ -30,14 +30,14 @@ export const AlertsButton = (props: AlertsButtonProps) => { return ( {props.monitor ? ( - Edit alert settings - + ) : ( - { {...props} > Set up alerts - + )} ); diff --git a/public/pages/AnomalyCharts/components/AlertsButton/__tests__/__snapshots__/AlertsButton.test.tsx.snap b/public/pages/AnomalyCharts/components/AlertsButton/__tests__/__snapshots__/AlertsButton.test.tsx.snap index 1cf7cf2b..a4a862f9 100644 --- a/public/pages/AnomalyCharts/components/AlertsButton/__tests__/__snapshots__/AlertsButton.test.tsx.snap +++ b/public/pages/AnomalyCharts/components/AlertsButton/__tests__/__snapshots__/AlertsButton.test.tsx.snap @@ -3,7 +3,7 @@ exports[` spec Alerts Button renders component with monitor 1`] = `
spec Alerts Button renders component with monitor 1`] exports[` spec Alerts Button renders component without monitor 1`] = `
@@ -69,7 +69,7 @@ exports[` spec AnomaliesLiveChart with Sample anomaly data >