From 5219dbbb25911cdcf9a207eabf781cc492722283 Mon Sep 17 00:00:00 2001
From: Tyler Ohlsen <ohltyler@amazon.com>
Date: Tue, 12 May 2020 13:56:40 -0700
Subject: [PATCH] Fix detector list loading state

---
 public/pages/DetectorsList/List/List.tsx | 58 +++++++++++++++---------
 public/utils/utils.tsx                   |  2 +-
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/public/pages/DetectorsList/List/List.tsx b/public/pages/DetectorsList/List/List.tsx
index 7a053fd7..ec7ae46e 100644
--- a/public/pages/DetectorsList/List/List.tsx
+++ b/public/pages/DetectorsList/List/List.tsx
@@ -33,6 +33,7 @@ import {
   GetDetectorsQueryParams,
   IndexAlias,
 } from '../../../../server/models/types';
+import { DetectorListItem } from '../../../models/interfaces';
 import { SORT_DIRECTION } from '../../../../server/utils/constants';
 import ContentPanel from '../../../components/ContentPanel/ContentPanel';
 import { AppState } from '../../../redux/reducers';
@@ -88,7 +89,11 @@ export const DetectorList = (props: ListProps) => {
     (state: AppState) => state.elasticsearch
   );
 
-  const isLoading = useSelector((state: AppState) => state.ad.requesting);
+  const isRequestingFromES = useSelector((state: AppState) => state.ad.requesting);
+
+  const [selectedDetectors, setSelectedDetectors] = useState([] as DetectorListItem[]);
+  const [detectorsToDisplay, setDetectorsToDisplay] = useState([] as DetectorListItem[]);
+  const [isLoadingFinalDetectors, setIsLoadingFinalDetectors] = useState<boolean>(true);
 
   // Getting all initial indices
   const [indexQuery, setIndexQuery] = useState('');
@@ -133,8 +138,8 @@ export const DetectorList = (props: ListProps) => {
       search: queryString.stringify(updatedParams),
     });
 
-    // get all detectors again
     dispatch(getDetectorList(GET_ALL_DETECTORS_QUERY_PARAMS));
+    setIsLoadingFinalDetectors(true);
   }, [
     state.page,
     state.queryParams,
@@ -142,6 +147,31 @@ export const DetectorList = (props: ListProps) => {
     state.selectedIndices,
   ]);
 
+  // Handle all filtering / sorting of detectors
+  useEffect(() => {
+    const curSelectedDetectors = filterAndSortDetectors(
+      Object.values(allDetectors),
+      state.queryParams.search,
+      state.selectedIndices,
+      state.selectedDetectorStates,
+      state.queryParams.sortField,
+      state.queryParams.sortDirection,
+    );
+    setSelectedDetectors(curSelectedDetectors);
+
+    const curDetectorsToDisplay = getDetectorsToDisplay(
+      curSelectedDetectors,
+      state.page,
+      state.queryParams.size
+    );
+    setDetectorsToDisplay(curDetectorsToDisplay);
+
+    setIsLoadingFinalDetectors(false);
+  },
+  [
+    allDetectors,
+  ]);
+
   const handlePageChange = (pageNumber: number) => {
     setState({ ...state, page: pageNumber });
   };
@@ -233,22 +263,6 @@ export const DetectorList = (props: ListProps) => {
     }));
   };
 
-  // get all selected detectors
-  const selectedDetectors = filterAndSortDetectors(
-    Object.values(allDetectors),
-    state.queryParams.search,
-    state.selectedIndices,
-    state.selectedDetectorStates,
-    state.queryParams.sortField,
-    state.queryParams.sortDirection,
-  );
-
-  // get detectors to display based on this page
-  const detectorsToDisplay = getDetectorsToDisplay(
-    selectedDetectors,
-    state.page,
-    state.queryParams.size
-  );
 
   const sorting = {
     sort: {
@@ -273,7 +287,7 @@ export const DetectorList = (props: ListProps) => {
     <EuiPage>
       <EuiPageBody>
         <ContentPanel
-          title={getTitleWithCount('Detectors', selectedDetectors.length)}
+          title={isLoadingFinalDetectors ? getTitleWithCount('Detectors', '...') : getTitleWithCount('Detectors', selectedDetectors.length)}
           actions={[
             <EuiButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_DETECTOR}`}>
               Create detector
@@ -283,7 +297,7 @@ export const DetectorList = (props: ListProps) => {
           <ListControls
             activePage={state.page}
             pageCount={
-              Math.ceil(selectedDetectors.length / state.queryParams.size) || 1
+              isLoadingFinalDetectors ? 0 : Math.ceil(selectedDetectors.length / state.queryParams.size) || 1
             }
             search={state.queryParams.search}
             selectedDetectorStates={state.selectedDetectorStates}
@@ -297,13 +311,13 @@ export const DetectorList = (props: ListProps) => {
           />
           <EuiHorizontalRule margin="xs" />
           <EuiBasicTable<any>
-            items={detectorsToDisplay}
+            items={isLoadingFinalDetectors ? [] : detectorsToDisplay}
             columns={staticColumn}
             onChange={handleTableChange}
             sorting={sorting}
             pagination={pagination}
             noItemsMessage={
-              isLoading ? (
+              isRequestingFromES || isLoadingFinalDetectors ? (
                 'Loading detectors...'
               ) : (
                 <EmptyDetectorMessage
diff --git a/public/utils/utils.tsx b/public/utils/utils.tsx
index 8a15960b..aff25b09 100644
--- a/public/utils/utils.tsx
+++ b/public/utils/utils.tsx
@@ -116,7 +116,7 @@ export interface Listener {
 
 const detectorCountFontColor = darkModeEnabled() ? '#98A2B3' : '#535966';
 
-export const getTitleWithCount = (title: string, count: number) => {
+export const getTitleWithCount = (title: string, count: number | string) => {
   return (
     <EuiTitle size={'s'} className={''}>
       <h3