From ecd081416d419fb3987f1e78573d400718a61249 Mon Sep 17 00:00:00 2001 From: Jackie Han Date: Wed, 4 Jan 2023 16:12:17 -0700 Subject: [PATCH] Change detector out of time range modal warning into a callout warning (#384) Signed-off-by: Jackie Han Signed-off-by: Jackie Han --- .../containers/AnomaliesChart.tsx | 12 ++++ .../containers/AnomalyDetailsChart.tsx | 12 ++++ .../OutOfRangeModal/OutOfRangeModal.tsx | 71 ------------------- .../components/OutOfRangeModal/index.ts | 14 ---- .../containers/AnomalyHistory.tsx | 8 --- .../containers/AnomalyResults.tsx | 15 ---- 6 files changed, 24 insertions(+), 108 deletions(-) delete mode 100644 public/pages/DetectorResults/components/OutOfRangeModal/OutOfRangeModal.tsx delete mode 100644 public/pages/DetectorResults/components/OutOfRangeModal/index.ts diff --git a/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx b/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx index 901fe5f9..a380f806 100644 --- a/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx +++ b/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx @@ -84,6 +84,7 @@ export interface AnomaliesChartProps { entityAnomalySummaries?: EntityAnomalySummaries[]; selectedCategoryFields?: any[]; handleCategoryFieldsChange(selectedOptions: any[]): void; + openOutOfRangeCallOut?: boolean; } export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => { @@ -96,6 +97,8 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => { : 'now', }); + const [showOutOfRangeCallOut, setShowOutOfRangeCallOut] = useState(false); + // for each time series of results, get the anomalies, ignoring feature data let anomalyResults = [] as AnomalyData[][]; get(props, 'anomalyAndFeatureResults', []).forEach( @@ -107,6 +110,14 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => { const handleDateRangeChange = (startDate: number, endDate: number) => { props.onDateRangeChange(startDate, endDate); props.onZoomRangeChange(startDate, endDate); + if ( + !props.isHistorical && + endDate < get(props, 'detector.enabledTime') + ) { + setShowOutOfRangeCallOut(true) + } else { + setShowOutOfRangeCallOut(false) + } }; const showLoader = useDelayedLoader(props.isLoading); @@ -387,6 +398,7 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => { isHCDetector={props.isHCDetector} isHistorical={props.isHistorical} onDatePickerRangeChange={handleDatePickerRangeChange} + openOutOfRangeCallOut={showOutOfRangeCallOut} /> )} diff --git a/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx b/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx index 3ed6bfb7..0743f46c 100644 --- a/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx +++ b/public/pages/AnomalyCharts/containers/AnomalyDetailsChart.tsx @@ -31,6 +31,7 @@ import { EuiStat, EuiButtonGroup, EuiText, + EuiCallOut, } from '@elastic/eui'; import { forEach, get } from 'lodash'; import moment from 'moment'; @@ -111,6 +112,7 @@ interface AnomalyDetailsChartProps { isHistorical?: boolean; selectedHeatmapCell?: HeatmapCell; onDatePickerRangeChange?(startDate: number, endDate: number): void; + openOutOfRangeCallOut?: boolean; } export const AnomalyDetailsChart = React.memo( @@ -424,6 +426,16 @@ export const AnomalyDetailsChart = React.memo( return ( + {props.openOutOfRangeCallOut ? ( + + {`Your selected dates are not in the range from when the detector + last started streaming data + (${moment(get(props, 'detector.enabledTime')).format('MM/DD/YYYY hh:mm A')}).`} + + ) : null} + { - return ( - - - - Selected dates are out of the range - - - - - - - {`Your selected dates are not in the range from when the detector - last started streaming data (${convertTimestampToString( - props.lastEnabledTime - )}).`} - - - - - - - - Cancel - - - { - props.onConfirm(); - }} - > - Go to historical analysis - - - - ); -}; diff --git a/public/pages/DetectorResults/components/OutOfRangeModal/index.ts b/public/pages/DetectorResults/components/OutOfRangeModal/index.ts deleted file mode 100644 index 016a8464..00000000 --- a/public/pages/DetectorResults/components/OutOfRangeModal/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -/* - * SPDX-License-Identifier: Apache-2.0 - * - * The OpenSearch Contributors require contributions made to - * this file be licensed under the Apache-2.0 license or a - * compatible open source license. - * - * Modifications Copyright OpenSearch Contributors. See - * GitHub history for details. - */ - -import { OutOfRangeModal } from './OutOfRangeModal'; - -export { OutOfRangeModal }; diff --git a/public/pages/DetectorResults/containers/AnomalyHistory.tsx b/public/pages/DetectorResults/containers/AnomalyHistory.tsx index fcdbdda5..8fec0696 100644 --- a/public/pages/DetectorResults/containers/AnomalyHistory.tsx +++ b/public/pages/DetectorResults/containers/AnomalyHistory.tsx @@ -103,7 +103,6 @@ interface AnomalyHistoryProps { isHistorical?: boolean; taskId?: string; isNotSample?: boolean; - openOutOfRangeModal?(): void; } const useAsyncRef = (value: any) => { @@ -691,13 +690,6 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => { } const handleDateRangeChange = useCallback( (startDate: number, endDate: number) => { - if ( - !props.isHistorical && - startDate < get(props, 'detector.enabledTime') && - props.openOutOfRangeModal - ) { - props.openOutOfRangeModal(); - } setDateRange({ startDate: startDate, endDate: endDate, diff --git a/public/pages/DetectorResults/containers/AnomalyResults.tsx b/public/pages/DetectorResults/containers/AnomalyResults.tsx index 18aaacc4..26437278 100644 --- a/public/pages/DetectorResults/containers/AnomalyResults.tsx +++ b/public/pages/DetectorResults/containers/AnomalyResults.tsx @@ -66,7 +66,6 @@ import { detectorIsSample } from '../../Overview/utils/helpers'; import { SampleIndexDetailsCallout } from '../../Overview/components/SampleIndexDetailsCallout/SampleIndexDetailsCallout'; import { CoreStart } from '../../../../../../src/core/public'; import { CoreServicesContext } from '../../../components/CoreServices/CoreServices'; -import { OutOfRangeModal } from '../components/OutOfRangeModal'; interface AnomalyResultsProps extends RouteComponentProps { detectorId: string; @@ -83,8 +82,6 @@ export function AnomalyResults(props: AnomalyResultsProps) { const detector = useSelector( (state: AppState) => state.ad.detectors[detectorId] ); - const [outOfRangeModalOpen, setOutOfRangeModalOpen] = - useState(false); useEffect(() => { core.chrome.setBreadcrumbs([ @@ -417,17 +414,6 @@ export function AnomalyResults(props: AnomalyResultsProps) { { - {outOfRangeModalOpen ? ( - - setOutOfRangeModalOpen(false)} - onConfirm={() => { - props.onSwitchToHistorical(); - }} - lastEnabledTime={get(detector, 'enabledTime') as number} - /> - - ) : null} {isDetectorRunning || isDetectorPaused || isDetectorInitializing || @@ -570,7 +556,6 @@ export function AnomalyResults(props: AnomalyResultsProps) { isFeatureDataMissing={isDetectorMissingData} isNotSample={true} isHistorical={false} - openOutOfRangeModal={() => setOutOfRangeModalOpen(true)} /> ) : detector ? (