Merge pull request #2 from nirupama-dev/vertex-schedule-listing

API call updation vertex listing and execution

Author: vysakhviswama

src/scheduler/vertex/ListVertexScheduler.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTable, usePagination } from 'react-table';
 import TableData from '../../utils/TableData';
 import { PaginationComponent } from '../../utils/PaginationComponent';
@@ -80,7 +80,9 @@ function ListVertexScheduler({
   setGcsPath,
   handleDagIdSelection,
   setIsApiError,
-  setApiError
+  setApiError,
+  abortControllers,
+  abortApiCall
 }: {
   region: string;
   setRegion: (value: string) => void;
@@ -121,6 +123,8 @@ function ListVertexScheduler({
   handleDagIdSelection: (scheduleId: any, scheduleName: string) => void;
   setIsApiError: (value: boolean) => void;
   setApiError: (value: string) => void;
+  abortControllers: any;
+  abortApiCall: () => void;
 }) {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [vertexScheduleList, setScheduleList] = useState<IVertexScheduleList[]>(
@@ -152,7 +156,6 @@ function ListVertexScheduler({
   const [nextPageToken, setNextPageToken] = useState<string | null>(null);
   const [fetchPreviousPage, setFetchPreviousPage] = useState<boolean>(false);
   const [fetchCurrentPage, setFetchCurrentPage] = useState<boolean>(false);
-  const abortControllers = useRef<any>([]); // Array of API signals to abort
 
   const columns = useMemo(
     () => [
@@ -362,14 +365,16 @@ function ListVertexScheduler({
         scheduleId,
         region,
         displayName,
-        setResumeLoading
+        setResumeLoading,
+        abortControllers
       );
     } else {
       await VertexServices.handleUpdateSchedulerResumeAPIService(
         scheduleId,
         region,
         displayName,
-        setResumeLoading
+        setResumeLoading,
+        abortControllers
       );
     }
     handleCurrentPageRefresh();
@@ -390,9 +395,12 @@ function ListVertexScheduler({
         region,
         scheduleId,
         displayName,
-        setTriggerLoading
+        setTriggerLoading,
+        abortControllers
       );
     }
+
+    handleCurrentPageRefresh();
   };
 
   /**
@@ -461,6 +469,7 @@ function ListVertexScheduler({
     event: React.MouseEvent,
     displayName: string
   ) => {
+    abortApiCall();
     const job_id = event.currentTarget.getAttribute('data-jobid');
     if (job_id) {
       setJobId(job_id);
@@ -493,7 +502,8 @@ function ListVertexScheduler({
         setMaxRuns,
         setEditMode,
         setJobNameSelected,
-        setGcsPath
+        setGcsPath,
+        abortControllers
       );
     }
   };
@@ -690,7 +700,8 @@ function ListVertexScheduler({
           {...cell.getCellProps()}
           className="clusters-table-data table-cell-overflow"
         >
-          {cell.row.original.status === 'COMPLETED' ? (
+          {cell.row.original.status === 'COMPLETED' ||
+          cell.row.original.status === 'PAUSED' ? (
             <iconDash.react tag="div" />
           ) : (
             dayjs(cell.row.original.nextRunTime).format('lll')
@@ -915,11 +926,6 @@ function ListVertexScheduler({
       });
   }, [projectId]);
 
-  const abortApiCall = () => {
-    abortControllers.current.forEach((controller: any) => controller.abort());
-    abortControllers.current = [];
-  };
-
   return (
     <div>
       <div className="select-text-overlay-scheduler">

src/scheduler/vertex/VertexExecutionHistory.tsx

@@ -35,7 +35,9 @@ const VertexExecutionHistory = ({
   scheduleName,
   handleBackButton,
   setExecutionPageFlag,
-  setExecutionPageListFlag
+  setExecutionPageListFlag,
+  abortControllers,
+  abortApiCall
 }: {
   region: string;
   setRegion: (value: string) => void;
@@ -44,6 +46,8 @@ const VertexExecutionHistory = ({
   handleBackButton: () => void;
   setExecutionPageFlag: (value: boolean) => void;
   setExecutionPageListFlag: (value: boolean) => void;
+  abortControllers: any;
+  abortApiCall: () => void;
 }): JSX.Element => {
   const today = dayjs();
 
@@ -83,6 +87,7 @@ const VertexExecutionHistory = ({
 
     return () => {
       setExecutionPageListFlag(false);
+      abortApiCall();
     };
   }, []);
 
@@ -304,9 +309,7 @@ const VertexExecutionHistory = ({
           <div className="execution-history-main-wrapper">
             <div
               className={
-                isLoading
-                  ? 'execution-history-left-wrapper execution-wrapper-border-none'
-                  : 'execution-history-left-wrapper text-enable-warning execution-wrapper-border-none'
+                'execution-history-left-wrapper calender-top execution-wrapper-border-none'
               }
             >
               <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -351,6 +354,8 @@ const VertexExecutionHistory = ({
                 isLoading={isLoading}
                 vertexScheduleRunsList={vertexScheduleRunsList}
                 setVertexScheduleRunsList={setVertexScheduleRunsList}
+                abortControllers={abortControllers}
+                abortApiCall={abortApiCall}
               />
             </div>
           </div>

src/scheduler/vertex/VertexJobRuns.tsx

@@ -43,7 +43,9 @@ const VertexJobRuns = ({
   setIsLoading,
   isLoading,
   vertexScheduleRunsList,
-  setVertexScheduleRunsList
+  setVertexScheduleRunsList,
+  abortControllers,
+  abortApiCall
 }: {
   region: string;
   schedulerData: ISchedulerData | undefined;
@@ -64,6 +66,8 @@ const VertexJobRuns = ({
   isLoading: boolean;
   vertexScheduleRunsList: IVertexScheduleRunList[];
   setVertexScheduleRunsList: (value: IVertexScheduleRunList[]) => void;
+  abortControllers: any;
+  abortApiCall: () => void;
 }): JSX.Element => {
   const [jobDownloadLoading, setJobDownloadLoading] = useState(false);
   const [
@@ -305,13 +309,18 @@ const VertexJobRuns = ({
         data.jobRunId,
         data.fileName,
         setIsLoading,
-        setFileExists
+        setFileExists,
+        abortControllers
       );
     };
     useEffect(() => {
       if (data.state === 'failed') {
         outPutFileExistsApi();
       }
+
+      return () => {
+        abortApiCall();
+      };
     }, []);
 
     return (
@@ -361,7 +370,8 @@ const VertexJobRuns = ({
       setOrangeListDates,
       setRedListDates,
       setGreenListDates,
-      setDarkGreenListDates
+      setDarkGreenListDates,
+      abortControllers
     );
   };
 

src/scheduler/vertex/VertexScheduleJobs.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { SchedulerWidget } from '../../controls/SchedulerWidget';
 import { JupyterLab } from '@jupyterlab/application';
 import { IThemeManager } from '@jupyterlab/apputils';
@@ -108,13 +108,15 @@ const VertexScheduleJobs = ({
     useState<boolean>(false);
   const [schedulerData, setScheduleData] = useState<ISchedulerData>();
   const [scheduleName, setScheduleName] = useState('');
+  const abortControllers = useRef<any>([]); // Array of API signals to abort
 
   /**
    * Handles the back button click event.
    */
   const handleBackButton = () => {
     setShowExecutionHistory(false);
     setExecutionPageFlag(true);
+    abortApiCall();
   };
 
   /**
@@ -128,6 +130,11 @@ const VertexScheduleJobs = ({
     setScheduleData(schedulerData);
   };
 
+  const abortApiCall = () => {
+    abortControllers.current.forEach((controller: any) => controller.abort());
+    abortControllers.current = [];
+  };
+
   return (
     <>
       {showExecutionHistory ? (
@@ -139,6 +146,8 @@ const VertexScheduleJobs = ({
           handleBackButton={handleBackButton}
           setExecutionPageFlag={setExecutionPageFlag}
           setExecutionPageListFlag={setExecutionPageListFlag}
+          abortControllers={abortControllers}
+          abortApiCall={abortApiCall}
         />
       ) : (
         <ListVertexScheduler
@@ -175,6 +184,8 @@ const VertexScheduleJobs = ({
           handleDagIdSelection={handleDagIdSelection}
           setIsApiError={setIsApiError}
           setApiError={setApiError}
+          abortControllers={abortControllers}
+          abortApiCall={abortApiCall}
         />
       )}
     </>