From 56436e1b364f194990b5862a7c3af0a865f07b50 Mon Sep 17 00:00:00 2001
From: Yizhe Liu <59710443+yizheliu-amazon@users.noreply.github.com>
Date: Sun, 10 May 2020 13:40:57 -0700
Subject: [PATCH] Fix bugs on dashboard live chart

* Fix bug when over 10000 results are hit for dashboard live chart 1st time fetching anomalies, although 1 result is needed;
* Use fixed height for loading spinner, instead of live chart panel
---
 .../Components/AnomaliesDistribution.tsx      |  3 +-
 .../Components/AnomaliesLiveChart.tsx         | 12 ++++--
 public/pages/Dashboard/utils/utils.tsx        | 37 ++++++++++++-------
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
index 82f04699..93737689 100644
--- a/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
+++ b/public/pages/Dashboard/Components/AnomaliesDistribution.tsx
@@ -71,7 +71,8 @@ export const AnomaliesDistributionChart = (
       dispatch,
       0,
       MAX_ANOMALIES,
-      MAX_DETECTORS
+      MAX_DETECTORS,
+      false
     );
 
     const nonZeroAnomalyResult = latestAnomalyResult.filter(
diff --git a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
index 2e8a1644..41eb8689 100644
--- a/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
+++ b/public/pages/Dashboard/Components/AnomaliesLiveChart.tsx
@@ -101,7 +101,8 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
       '30m',
       dispatch,
       -1,
-      1
+      1,
+      true
     );
 
     setHasLatestAnomalyResult(!isEmpty(latestSingleLiveAnomalyResult));
@@ -114,7 +115,8 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
       dispatch,
       0,
       MAX_ANOMALIES,
-      MAX_LIVE_DETECTORS
+      MAX_LIVE_DETECTORS,
+      false
     );
 
     setLiveAnomalyData(latestLiveAnomalyResult);
@@ -227,10 +229,12 @@ export const AnomaliesLiveChart = (props: AnomaliesLiveChartProps) => {
       }
       actions={[fullScreenButton()]}
       contentPanelClassName={isFullScreen ? 'full-screen' : undefined}
-      panelStyles={{ height: !isFullScreen ? '390px' : undefined }}
     >
       {isLoadingAnomalies ? (
-        <EuiFlexGroup justifyContent="center">
+        <EuiFlexGroup
+          justifyContent="center"
+          style={{ height: '353px', paddingTop: '175px' }}
+        >
           <EuiFlexItem grow={false}>
             <EuiLoadingChart size="xl" />
           </EuiFlexItem>
diff --git a/public/pages/Dashboard/utils/utils.tsx b/public/pages/Dashboard/utils/utils.tsx
index de77cc60..0bab82cd 100644
--- a/public/pages/Dashboard/utils/utils.tsx
+++ b/public/pages/Dashboard/utils/utils.tsx
@@ -438,10 +438,13 @@ export const buildGetAnomalyResultQueryByRange = (
   timeRange: string,
   from: number,
   size: number,
-  threshold: number
+  threshold: number,
+  checkLastIndexOnly: boolean
 ) => {
   return {
-    index: `${ANOMALY_RESULT_INDEX}*`,
+    index: checkLastIndexOnly
+      ? ANOMALY_RESULT_INDEX
+      : `${ANOMALY_RESULT_INDEX}*`,
     size: size,
     from: from,
     query: {
@@ -482,11 +485,12 @@ export const getLatestAnomalyResultsByTimeRange = async (
   timeRange: string,
   dispatch: Dispatch<any>,
   threshold: number,
-  anomalySize: number
+  anomalySize: number,
+  checkLastIndexOnly: boolean
 ): Promise<object[]> => {
   let from = 0;
-  let numResults: number;
   let anomalyResults = [] as object[];
+  let numSingleBatchResults: number;
   do {
     const searchResponse = await dispatch(
       func(
@@ -494,14 +498,15 @@ export const getLatestAnomalyResultsByTimeRange = async (
           timeRange,
           from,
           anomalySize,
-          threshold
+          threshold,
+          checkLastIndexOnly
         )
       )
     );
     const searchAnomalyResponse = searchResponse.data.response;
 
-    numResults = get(searchAnomalyResponse, 'hits.total.value', 0);
-    if (numResults === 0) {
+    const numHits = get(searchAnomalyResponse, 'hits.total.value', 0);
+    if (numHits === 0) {
       break;
     }
 
@@ -517,7 +522,8 @@ export const getLatestAnomalyResultsByTimeRange = async (
     );
     anomalyResults = [...anomalyResults, ...anomalies];
     from += anomalySize;
-  } while (numResults === MAX_ANOMALIES);
+    numSingleBatchResults = anomalies.length;
+  } while (numSingleBatchResults === MAX_ANOMALIES);
 
   return anomalyResults;
 };
@@ -529,12 +535,13 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
   dispatch: Dispatch<any>,
   threshold: number,
   anomalySize: number,
-  detectorNum: number
+  detectorNum: number,
+  checkLastIndexOnly: boolean
 ): Promise<object[]> => {
   const detectorAndIdMap = buildDetectorAndIdMap(selectedDetectors);
   let from = 0;
-  let numResults: number;
   let anomalyResults = [] as object[];
+  let numSingleBatchResults: number;
   do {
     const searchResponse = await dispatch(
       func(
@@ -542,14 +549,15 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
           timeRange,
           from,
           anomalySize,
-          threshold
+          threshold,
+          checkLastIndexOnly
         )
       )
     );
     const searchAnomalyResponse = searchResponse.data.response;
 
-    numResults = get(searchAnomalyResponse, 'hits.total.value', 0);
-    if (numResults === 0) {
+    const numHits = get(searchAnomalyResponse, 'hits.total.value', 0);
+    if (numHits === 0) {
       break;
     }
 
@@ -571,7 +579,8 @@ export const getLatestAnomalyResultsForDetectorsByTimeRange = async (
     );
     anomalyResults = [...anomalyResults, ...anomalies];
     from += anomalySize;
-  } while (numResults === MAX_ANOMALIES);
+    numSingleBatchResults = anomalies.length;
+  } while (numSingleBatchResults === MAX_ANOMALIES);
 
   const filteredAnomalyResults = anomalyResults.filter(anomaly =>
     detectorAndIdMap.has(get(anomaly, AD_DOC_FIELDS.DETECTOR_ID, ''))