integrate job deletion with websocket

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

@@ -141,6 +141,14 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
     this.sortJobsAndSave(jobs);
   };
 
+  removeJob = (deletedJob: any) => {
+    let jobs = this.state.jobs.filter(job => {
+      return deletedJob.metadata?.name !== job.metadata?.name
+    });
+
+    this.sortJobsAndSave(jobs);
+  }
+
   setupJobWebsocket = (chart: ChartType) => {
     let chartVersion = `${chart.chart.metadata.name}-${chart.chart.metadata.version}`;
 
@@ -173,6 +181,20 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
         ) {
           this.mergeNewJob(event.Object);
         }
+      } else if (event.event_type == "DELETE") {
+        // filter job belonging to chart
+        let chartLabel = event.Object?.metadata?.labels["helm.sh/chart"];
+        let releaseLabel =
+          event.Object?.metadata?.labels["meta.helm.sh/release-name"];
+
+        if (
+          chartLabel &&
+          releaseLabel &&
+          chartLabel == chartVersion &&
+          releaseLabel == chart.name
+        ) {
+          this.removeJob(event.Object)
+        }
       }
     };
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobList.tsx

@@ -14,11 +14,13 @@ type PropsType = {
 
 type StateType = {
   deletionCandidate: any;
+  deletionJob: any;
 };
 
 export default class JobList extends Component<PropsType, StateType> {
   state = {
     deletionCandidate: null as any,
+    deletionJob: null as any,
   }
 
   renderJobList = () => {
@@ -38,6 +40,7 @@ export default class JobList extends Component<PropsType, StateType> {
                 key={job?.metadata?.name}
                 job={job} 
                 handleDelete={() => this.setState({ deletionCandidate: job })}
+                deleting={this.state.deletionJob?.metadata?.name == job.metadata?.name}
               />
             );
           })}
@@ -63,10 +66,10 @@ export default class JobList extends Component<PropsType, StateType> {
         }
       )
       .then((res) => {
-        let jobs = this.props.jobs.slice();
-        jobs = jobs.filter(job => job.metadata?.name !== this.state.deletionCandidate.metadata?.name);
-        this.props.setJobs(jobs);
-        this.setState({ deletionCandidate: null });
+        this.setState({
+          deletionJob: this.state.deletionCandidate,
+          deletionCandidate: null,
+        })
       })
       .catch((err) => {
         let parsedErr =

dashboard/src/main/home/cluster-dashboard/expanded-chart/jobs/JobResource.tsx

@@ -13,6 +13,7 @@ import KeyValueArray from "components/values-form/KeyValueArray";
 type PropsType = {
   job: any;
   handleDelete: () => void;
+  deleting: boolean;
 };
 
 type StateType = {
@@ -226,6 +227,10 @@ export default class JobResource extends Component<PropsType, StateType> {
   };
 
   renderStatus = () => {
+    if (this.props.deleting) {
+      return <Status color="#cc3d42">Deleting</Status>;
+    }
+
     if (this.props.job.status?.succeeded >= 1) {
       return <Status color="#38a88a">Succeeded</Status>;
     }