[CN-2583] add page refresh delay and resolve overlapping requests (#25)

* [CN-2583] update page refresh * update console log messages * set timeout for testing * move state update inside timeout * remove console logs * reset state when new pipeline is selected * add console logs to test * refactor request to gate * add log for in progress flag * remove logs used for testing --------- Co-authored-by: Abel Rodriguez <[email protected]>
homedepot · Sep 29, 2023 · 2594ada · 2594ada
1 parent 63e2c18
commit 2594ada
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 25 deletions.
diff --git a/spin-observatory-plugin-deck/src/components/pipelines/PipelineExecutions.tsx b/spin-observatory-plugin-deck/src/components/pipelines/PipelineExecutions.tsx
@@ -36,6 +36,7 @@ export const PipelineExecutions = ({
   const [filteredExecutions, setFilteredExecutions] = useState<IExecution[]>([]);
   const [statusCount, setStatusCount] = useState<Map<string, number>>(new Map<string, number>());
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isRequestInProgress, setIsRequestInProgress] = useState<boolean>(false);
   const styles = useStyles();
 
   const getExecutionsParams = {
@@ -55,22 +56,11 @@ export const PipelineExecutions = ({
       setFilteredExecutions([]);
       setStatusCount(new Map<string, number>());
       setIsLoading(false);
+      setIsRequestInProgress(false);
       return;
     }
 
-    const requestParams = {
-      pipelineName: pipeline.name,
-      pageSize: REQUEST_PAGE_SIZE,
-      startDate: dateRange.start,
-      endDate: dateRange.end,
-    };
-
-    gate.getExecutions(appName, requestParams).then((resp) => {
-      setExecutions(resp);
-      setFilteredExecutions(filterExecutions(resp));
-      setStatusCount(getStatusCount(resp));
-      setIsLoading(false);
-    });
+    getExecutions(appName, getExecutionsParams);
   }, [pipeline, dateRange.start, dateRange.end]);
 
   useEffect(() => {
@@ -83,19 +73,28 @@ export const PipelineExecutions = ({
 
   useInterval(async () => {
     if (!pipeline) return;
-    const resp = await gate.getExecutions(appName, {
-      pipelineName: pipeline.name,
-      pageSize: REQUEST_PAGE_SIZE,
-      startDate: dateRange.start,
-      endDate: dateRange.end,
-    });
-
-    setExecutions(resp);
-    setFilteredExecutions(filterExecutions(resp));
-    setStatusCount(getStatusCount(resp));
-    setIsLoading(false);
+
+    if (isRequestInProgress) return;
+
+    getExecutions(appName, getExecutionsParams);
   }, POLL_DELAY_MS);
 
+  const getExecutions = (name, params) => {
+    setIsRequestInProgress(true);
+
+    gate.getExecutions(name, params)
+      .then((resp) => {
+        setExecutions(resp);
+        setFilteredExecutions(filterExecutions(resp));
+        setStatusCount(getStatusCount(resp));
+        setIsLoading(false);
+      })
+      .catch((e) => console.error('error retrieving executions: ', e))
+      .finally(() => {
+        setIsRequestInProgress(false);
+      });
+  };
+
   const filterExecutions = (ex: IExecution[]) => {
     const statusArr = statuses.length === 0 ? STATUSES : statuses;
 

diff --git a/spin-observatory-plugin-deck/src/components/pipelines/constants.ts b/spin-observatory-plugin-deck/src/components/pipelines/constants.ts
@@ -2,6 +2,6 @@ export const REQUEST_PAGE_SIZE = 5000;
 
 export const DEFAULT_ROWS_PER_PAGE = 10;
 
-export const POLL_DELAY_MS = 10000;
+export const POLL_DELAY_MS = 30000;
 
 export const MAX_DATE_RANGE = 9007199254740991;