From 7c1b1aee966c0dea22c91976c5c3e4b843608643 Mon Sep 17 00:00:00 2001
From: Yizhe Liu <59710443+yizheliu-amazon@users.noreply.github.com>
Date: Fri, 8 May 2020 10:58:54 -0700
Subject: [PATCH] Fix live chart pulling and other minor issues(#113)

* Improve performance of fetching anomalies when there are too many anomaly results

* Fix detector stopped status message

* Fix unit test and pagination on Dashboard
---
 .../Components/AnomaliesLiveChart.tsx         | 17 ++++++-
 .../Components/AnomalousDetectorsList.tsx     |  5 ++-
 .../__tests__/DetectorConfig.test.tsx         | 45 +++++++++++++------
 .../containers/DetectorDetail.tsx             |  2 +-
 public/redux/reducers/__tests__/utils.ts      |  8 +++-
 5 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
index 68d393a0..83a9e0ad 100644
--- a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
+++ b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
@@ -91,16 +91,29 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
 
   const getLiveAnomalyResults = async () => {
     setIsLoadingAnomalies(true);
-    const latestLiveAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
+    // check if there is any anomaly result in last 30mins
+    const latestSingleLiveAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
       searchES,
       props.selectedDetectors,
       '30m',
       dispatch,
       -1,
+      1,
+      MAX_LIVE_DETECTORS
+    );
+
+    setHasLatestAnomalyResult(!isEmpty(latestSingleLiveAnomalyResult));
+
+    // get anomalies(anomaly_grade>0) in last 30mins
+    const latestLiveAnomalyResult = await getLatestAnomalyResultsForDetectorsByTimeRange(
+      searchES,
+      props.selectedDetectors,
+      '30m',
+      dispatch,
+      0,
       MAX_ANOMALIES,
       MAX_LIVE_DETECTORS
     );
-    setHasLatestAnomalyResult(!isEmpty(latestLiveAnomalyResult));
 
     const nonZeroAnomalyResult = latestLiveAnomalyResult.filter(
       anomalyData => get(anomalyData, AD_DOC_FIELDS.ANOMALY_GRADE, 0) > 0
diff --git a/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx b/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx
index f1dfb309..7da43862 100644
--- a/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx
+++ b/public/pages/Dashboard/Components/AnomalousDetectorsList.tsx
@@ -47,7 +47,10 @@ export const AnomalousDetectorsList = (props: AnomalousDetectorsListProps) => {
     pageSizeOptions: [5, 10, 20, 50],
   };
 
-  useEffect(() => {});
+  useEffect(() => {
+    setIndexOfPage(0);
+  }, [props.selectedDetectors]);
+
   const handleTableChange = ({ page: tablePage = {}, sort = {} }: any) => {
     const { index: page, size } = tablePage;
     const { field: sortField, direction: direction } = sort;
diff --git a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
index 099b9440..5d09ec55 100644
--- a/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
+++ b/public/pages/DetectorConfig/containers/__tests__/DetectorConfig.test.tsx
@@ -50,22 +50,36 @@ import { toString } from '../MetaData';
 import { DATA_TYPES } from '../../../../utils/constants';
 import { OPERATORS_MAP } from '../../../createDetector/components/DataFilters/utils/constant';
 import { displayText } from '../../../createDetector/components/DataFilters/utils/helpers';
+import { mockedStore, initialState } from '../../../../redux/utils/testUtils';
 
 const renderWithRouter = (detector: Detector) => ({
   ...render(
-    <Router>
-      <Switch>
-        <Route
-          render={(props: RouteComponentProps) => (
-            <DetectorConfig
-              detector={detector}
-              detectorId={detector.id}
-              {...props}
-            />
-          )}
-        />
-      </Switch>
-    </Router>
+    <Provider
+      store={mockedStore({
+        ...initialState,
+        ad: {
+          ...initialState.ad,
+          detectors: {
+            [detector.id]: detector,
+          },
+        },
+      })}
+    >
+      <Router>
+        <Switch>
+          <Route
+            render={(props: RouteComponentProps) => (
+              <DetectorConfig
+                detectorId={detector.id}
+                onEditDetector={jest.fn()}
+                onEditFeatures={jest.fn()}
+                {...props}
+              />
+            )}
+          />
+        </Switch>
+      </Router>
+    </Provider>
   ),
 });
 
@@ -229,7 +243,10 @@ describe('<DetectorConfig /> spec', () => {
   });
 
   describe('test 1 simple feature enabled/disabled', () => {
-    test.each([[true, 'Enabled'], [false, 'Disabled']])(
+    test.each([
+      [true, 'Enabled'],
+      [false, 'Disabled'],
+    ])(
       'renders 1 simple feature enabled/disabled',
       async (enabledInDef, enabledInRender) => {
         const randomDetector = {
diff --git a/public/pages/DetectorDetail/containers/DetectorDetail.tsx b/public/pages/DetectorDetail/containers/DetectorDetail.tsx
index cf844f4b..ceb4151e 100644
--- a/public/pages/DetectorDetail/containers/DetectorDetail.tsx
+++ b/public/pages/DetectorDetail/containers/DetectorDetail.tsx
@@ -291,7 +291,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
                         ? `Stopped at ${moment(detector.disabledTime).format(
                             'MM/DD/YY h:mm A'
                           )}`
-                        : 'Detector is not started'
+                        : 'Detector is stopped'
                       : 'Feature required to start the detector'}
                   </EuiHealth>
                 )}
diff --git a/public/redux/reducers/__tests__/utils.ts b/public/redux/reducers/__tests__/utils.ts
index b33b42f3..c372753c 100644
--- a/public/redux/reducers/__tests__/utils.ts
+++ b/public/redux/reducers/__tests__/utils.ts
@@ -10,6 +10,7 @@ import {
   Monitor,
 } from '../../../models/interfaces';
 import moment from 'moment';
+import { DETECTOR_STATE } from '../../../utils/constants';
 
 const detectorFaker = new chance('seed');
 
@@ -103,10 +104,15 @@ export const getRandomDetector = (isCreate: boolean = true): Detector => {
     disabledTime: moment(1586823218000)
       .subtract(1, 'days')
       .valueOf(),
+    curState: DETECTOR_STATE.INIT,
+    initializationError: '',
   };
 };
 
-export const getRandomMonitor = (detectorId: string, enabled: boolean = true): Monitor => {
+export const getRandomMonitor = (
+  detectorId: string,
+  enabled: boolean = true
+): Monitor => {
   return {
     id: detectorFaker.guid().slice(0, 20),
     name: detectorFaker.word({ length: 10 }),