Implemented save status and loading for job list

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -57,6 +57,8 @@ export const ExpandedJobChartFC: React.FC<{
   const {
     jobs,
     hasPorterImageTemplate,
+    status: jobsStatus,
+    triggerRunStatus,
     runJob,
     selectedJob,
     setSelectedJob,
@@ -138,7 +140,7 @@ export const ExpandedJobChartFC: React.FC<{
               onClick={() => {
                 runJob();
               }}
-              status={"saveValuesStatus"}
+              status={triggerRunStatus}
               makeFlush={true}
               clearPosition={true}
               rounded={true}
@@ -147,17 +149,22 @@ export const ExpandedJobChartFC: React.FC<{
               <i className="material-icons">play_arrow</i> Run Job
             </SaveButton>
           </ButtonWrapper>
-          <JobList
-            jobs={jobs}
-            setJobs={() => {}}
-            expandJob={(job: any) => {
-              setSelectedJob(job);
-            }}
-            isDeployedFromGithub={!!chart?.git_action_config?.git_repo}
-            repositoryUrl={chart?.git_action_config?.git_repo}
-            currentChartVersion={Number(chart.version)}
-            latestChartVersion={Number(chart.latest_version)}
-          />
+
+          {jobsStatus === "loading" ? (
+            <Loading></Loading>
+          ) : (
+            <JobList
+              jobs={jobs}
+              setJobs={() => {}}
+              expandJob={(job: any) => {
+                setSelectedJob(job);
+              }}
+              isDeployedFromGithub={!!chart?.git_action_config?.git_repo}
+              repositoryUrl={chart?.git_action_config?.git_repo}
+              currentChartVersion={Number(chart.version)}
+              latestChartVersion={Number(chart.latest_version)}
+            />
+          )}
         </TabWrapper>
       );
     }

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/useJobs.ts

@@ -21,6 +21,10 @@ export const useJobs = (chart: ChartType) => {
   const jobsRef = useRef([]);
   const [hasPorterImageTemplate, setHasPorterImageTemplate] = useState(true);
   const [selectedJob, setSelectedJob] = useState(null);
+  const [status, setStatus] = useState<"loading" | "ready">("loading");
+  const [triggerRunStatus, setTriggerRunStatus] = useState<
+    "loading" | "successful" | string
+  >("");
 
   const {
     newWebsocket,
@@ -199,7 +203,7 @@ export const useJobs = (chart: ChartType) => {
         closeAllWebsockets();
       };
     }
-
+    setStatus("loading");
     const newestImage = chart?.config?.image?.repository;
 
     setHasPorterImageTemplate(PORTER_IMAGE_TEMPLATES.includes(newestImage));
@@ -218,6 +222,7 @@ export const useJobs = (chart: ChartType) => {
       .then((res) => {
         if (isSubscribed) {
           sortJobsAndSave(res.data);
+          setStatus("ready");
           setupJobWebsocket();
           setupCronJobWebsocket();
         }
@@ -229,6 +234,7 @@ export const useJobs = (chart: ChartType) => {
   }, [chart]);
 
   const runJob = () => {
+    setTriggerRunStatus("loading");
     const config = chart.config;
     const values = {};
 
@@ -259,8 +265,8 @@ export const useJobs = (chart: ChartType) => {
         }
       )
       .then((res) => {
-        // this.setState({ saveValuesStatus: "successful" });
-        // this.refreshChart(0);
+        setTriggerRunStatus("successful");
+        setTimeout(() => setTriggerRunStatus(""), 500);
       })
       .catch((err) => {
         let parsedErr = err?.response?.data?.error;
@@ -272,7 +278,7 @@ export const useJobs = (chart: ChartType) => {
         // this.setState({
         //   saveValuesStatus: parsedErr,
         // });
-
+        setTriggerRunStatus("Couldn't trigger a new run for this job.");
         setCurrentError(parsedErr);
       });
   };
@@ -280,6 +286,8 @@ export const useJobs = (chart: ChartType) => {
   return {
     jobs,
     hasPorterImageTemplate,
+    status,
+    triggerRunStatus,
     runJob,
     selectedJob,
     setSelectedJob,