Merge pull request #658 from porter-dev/0.3.0-job-fe-upgrades

ExpandedJob placeholder when waiting for deploy from repo + store and apply updated image when read in live

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

@@ -29,6 +29,7 @@ type PropsType = {
 type StateType = {
   currentChart: ChartType;
   imageIsPlaceholder: boolean;
+  newestImage: string;
   loading: boolean;
   jobs: any[];
   tabOptions: any[];
@@ -46,6 +47,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   state = {
     currentChart: this.props.currentChart,
     imageIsPlaceholder: false,
+    newestImage: null as string,
     loading: true,
     jobs: [] as any[],
     tabOptions: [] as any[],
@@ -81,7 +83,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       )
       .then((res) => {
         let image = res.data?.config?.image?.repository;
-        if (image === "porterdev/hello-porter-job") {
+        if (image === "porterdev/hello-porter-job" && !this.state.newestImage) {
           this.setState(
             {
               currentChart: res.data,
@@ -104,8 +106,6 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   refreshChart = () => this.getChartData(this.state.currentChart);
 
   mergeNewJob = (newJob: any) => {
-    console.log("newJob", newJob);
-    console.log("image?", newJob.values?.image?.repository);
     let jobs = this.state.jobs;
     let exists = false;
     jobs.forEach((job: any, i: number, self: any[]) => {
@@ -179,8 +179,26 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
     let conf: string;
 
     if (!config) {
+      let values = {};
+      let imageUrl = this.state.newestImage;
+      let tag = null;
+
+      if (imageUrl.includes(":")) {
+        let splits = imageUrl.split(":");
+        imageUrl = splits[0];
+        tag = splits[1];
+      } else if (!tag) {
+        tag = "latest";
+      }
+
+      if (imageUrl) {
+        _.set(values, "image.repository", imageUrl);
+        _.set(values, "image.tag", tag);
+      }
+
       conf = yaml.dump({
         ...this.state.currentChart.config,
+        ...values,
       });
     } else {
       // Convert dotted keys to nested objects
@@ -190,6 +208,22 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
         _.set(values, key, config[key]);
       }
 
+      let imageUrl = this.state.newestImage;
+      let tag = null;
+
+      if (imageUrl.includes(":")) {
+        let splits = imageUrl.split(":");
+        imageUrl = splits[0];
+        tag = splits[1];
+      } else if (!tag) {
+        tag = "latest";
+      }
+
+      if (imageUrl) {
+        _.set(values, "image.repository", imageUrl);
+        _.set(values, "image.tag", tag);
+      }
+
       // Weave in preexisting values and convert to yaml
       conf = yaml.dump({
         ...(this.state.currentChart.config as Object),
@@ -252,8 +286,16 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
 
       return date2.getTime() - date1.getTime();
     });
-
-    this.setState({ jobs });
+    let newestImage = jobs[0]?.spec?.template?.spec?.containers[0]?.image;
+    if (
+      newestImage &&
+      newestImage !== "porterdev/hello-porter-job" &&
+      newestImage !== "porterdev/hello-porter-job:latest"
+    ) {
+      this.setState({ jobs, newestImage, imageIsPlaceholder: false });
+    } else {
+      this.setState({ jobs });
+    }
   };
 
   renderTabContents = (currentTab: string) => {

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

@@ -30,21 +30,22 @@ export default class JobResource extends Component<PropsType, StateType> {
     if (event) {
       event.stopPropagation();
     }
-    
+
     this.getPods(() => {
       this.setState({ expanded: !this.state.expanded });
     });
   };
-  
+
   stopJob = (event: MouseEvent) => {
     if (event) {
       event.stopPropagation();
     }
-    
+
     let { currentCluster, currentProject, setCurrentError } = this.context;
 
-    api.stopJob(
-      "<token>",
+    api
+      .stopJob(
+        "<token>",
         {},
         {
           id: currentProject.id,
@@ -52,9 +53,10 @@ export default class JobResource extends Component<PropsType, StateType> {
           namespace: this.props.job.metadata?.namespace,
           cluster_id: currentCluster.id,
         }
-    ).then((res) => {})
+      )
+      .then((res) => {})
       .catch((err) => setCurrentError(JSON.stringify(err)));
-  }
+  };
 
   getPods = (callback: () => void) => {
     let { currentCluster, currentProject, setCurrentError } = this.context;
@@ -224,14 +226,16 @@ export default class JobResource extends Component<PropsType, StateType> {
 
   renderStopButton = () => {
     if (!this.props.job.status?.succeeded && !this.props.job.status?.failed) {
-      // look for a sidecar container 
+      // look for a sidecar container
       if (this.props.job?.spec?.template?.spec?.containers.length == 2) {
-        return <i className="material-icons" onClick={this.stopJob}>
-          stop
-        </i>
+        return (
+          <i className="material-icons" onClick={this.stopJob}>
+            stop
+          </i>
+        );
       }
     }
-  }
+  };
 
   render() {
     let icon =

dashboard/src/main/home/launch/expanded-template/LaunchTemplate.tsx

@@ -242,7 +242,7 @@ class LaunchTemplate extends Component<PropsType, StateType> {
 
     _.set(values, "ingress.provider", provider);
     var url: string;
-
+    console.log("ok here", values);
     // check if template is docker and create external domain if necessary
     if (this.props.currentTemplate.name == "web") {
       if (values?.ingress?.enabled && !values?.ingress?.custom_domain) {

dashboard/src/shared/api.tsx

@@ -791,13 +791,12 @@ const deleteConfigMap = baseApi<
 
 const stopJob = baseApi<
   {},
-  { name: string; namespace: string; id: number, cluster_id: number }
+  { name: string; namespace: string; id: number; cluster_id: number }
 >("POST", (pathParams) => {
-  let { id, name, namespace, cluster_id } = pathParams
+  let { id, name, namespace, cluster_id } = pathParams;
   return `/api/projects/${id}/k8s/jobs/${namespace}/${name}/stop?cluster_id=${cluster_id}`;
 });
 
-
 // Bundle export to allow default api import (api.<method> is more readable)
 export default {
   checkAuth,