Change detector out of time range modal warning into a callout warning (

opensearch-project#384) Signed-off-by: Jackie Han <[email protected]> Signed-off-by: Jackie Han <[email protected]>
jackiehanyang · Jan 4, 2023 · ecd0814 · ecd0814
1 parent 6eace81
commit ecd0814
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 108 deletions.
diff --git 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}
             />
           )}
         </EuiFlexGroup>

diff --git 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 (
       <React.Fragment>
+        {props.openOutOfRangeCallOut ? (
+          <EuiCallOut data-test-subj='outOfRangeCallOut'
+          title='Selected dates are out of the range'
+          color='primary'>            
+          {`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')}).`}
+          </EuiCallOut>
+        ) : null}
+
         <EuiFlexGroup style={{ padding: '20px' }}>
           <EuiFlexItem>
             <EuiStat

diff --git a/public/pages/DetectorResults/components/OutOfRangeModal/OutOfRangeModal.tsx b/public/pages/DetectorResults/components/OutOfRangeModal/OutOfRangeModal.tsx
diff --git a/public/pages/DetectorResults/components/OutOfRangeModal/index.ts b/public/pages/DetectorResults/components/OutOfRangeModal/index.ts
diff --git 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
@@ -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<boolean>(false);
 
   useEffect(() => {
     core.chrome.setBreadcrumbs([
@@ -417,17 +414,6 @@ export function AnomalyResults(props: AnomalyResultsProps) {
           <EuiSpacer size="l" />
           {
             <Fragment>
-              {outOfRangeModalOpen ? (
-                <EuiOverlayMask>
-                  <OutOfRangeModal
-                    onClose={() => setOutOfRangeModalOpen(false)}
-                    onConfirm={() => {
-                      props.onSwitchToHistorical();
-                    }}
-                    lastEnabledTime={get(detector, 'enabledTime') as number}
-                  />
-                </EuiOverlayMask>
-              ) : null}
               {isDetectorRunning ||
               isDetectorPaused ||
               isDetectorInitializing ||
@@ -570,7 +556,6 @@ export function AnomalyResults(props: AnomalyResultsProps) {
                     isFeatureDataMissing={isDetectorMissingData}
                     isNotSample={true}
                     isHistorical={false}
-                    openOutOfRangeModal={() => setOutOfRangeModalOpen(true)}
                   />
                 </Fragment>
               ) : detector ? (