synced job rerun button w/ form state + added refresh button to logs

dashboard/src/components/values-form/FormWrapper.tsx

@@ -14,7 +14,8 @@ type PropsType = {
   saveValuesStatus?: string | null;
 
   // Handle additional non-form tabs
-  renderTabContents?: (currentTab: string) => any;
+  // TODO: find cleaner way to share submitValues w/ rerun jobs button
+  renderTabContents?: (currentTab: string, submitValues?: any) => any;
   tabOptions?: any[];
   tabOptionsOnly?: boolean;
 
@@ -302,7 +303,16 @@ export default class FormWrapper extends Component<PropsType, StateType> {
 
     // If no form tabs match, check against external tabs
     if (this.props.renderTabContents) {
-      return this.props.renderTabContents(this.state.currentTab);
+      // TODO: find a cleaner way to share submissionValues w/ rerun button
+      let submissionValues: any = {};
+      Object.keys(this.state.metaState)?.forEach((key: string, i: number) => {
+        submissionValues[key] = this.state.metaState[key]?.value;
+      });
+
+      return this.props.renderTabContents(
+        this.state.currentTab,
+        submissionValues
+      );
     }
     return <div>No matched tabs found.</div>;
   };

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

@@ -83,7 +83,11 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       )
       .then((res) => {
         let image = res.data?.config?.image?.repository;
-        if ((image === "porterdev/hello-porter-job" || image === "public.ecr.aws/o1j4x7p4/hello-porter-job") && !this.state.newestImage) {
+        if (
+          (image === "porterdev/hello-porter-job" ||
+            image === "public.ecr.aws/o1j4x7p4/hello-porter-job") &&
+          !this.state.newestImage
+        ) {
           this.setState(
             {
               currentChart: res.data,
@@ -190,10 +194,15 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
       object.metadata.kind = event.Kind;
 
       // if imageIsPlaceholder is true, update the newestImage and imageIsPlaceholder fields
-      if ((event.event_type == "ADD" || event.event_type == "UPDATE") && this.state.imageIsPlaceholder) {
-        let newestImage = event.Object?.spec?.jobTemplate?.spec?.template?.spec?.containers[0]?.image;
+      if (
+        (event.event_type == "ADD" || event.event_type == "UPDATE") &&
+        this.state.imageIsPlaceholder
+      ) {
+        let newestImage =
+          event.Object?.spec?.jobTemplate?.spec?.template?.spec?.containers[0]
+            ?.image;
 
-        this.setState({ newestImage, imageIsPlaceholder: false })
+        this.setState({ newestImage, imageIsPlaceholder: false });
       }
     };
 
@@ -207,7 +216,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
     };
 
     return ws;
-  }
+  };
 
   handleSaveValues = (config?: any) => {
     let { currentCluster, setCurrentError, currentProject } = this.context;
@@ -337,7 +346,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
     }
   };
 
-  renderTabContents = (currentTab: string) => {
+  renderTabContents = (currentTab: string, submitValues?: any) => {
     switch (currentTab) {
       case "jobs":
         if (this.state.imageIsPlaceholder) {
@@ -358,7 +367,7 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
             <JobList jobs={this.state.jobs} />
             <SaveButton
               text="Rerun Job"
-              onClick={() => this.handleSaveValues()}
+              onClick={() => this.handleSaveValues(submitValues)}
               status={this.state.saveValuesStatus}
               makeFlush={true}
             />
@@ -381,10 +390,9 @@ export default class ExpandedJobChart extends Component<PropsType, StateType> {
   updateTabs() {
     let formData = this.state.currentChart.form;
     if (formData) {
-      this.setState(
-        {
-          formData,
-        });
+      this.setState({
+        formData,
+      });
     }
     let tabOptions = [] as any[];
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/Logs.tsx

@@ -61,7 +61,15 @@ export default class Logs extends Component<PropsType, StateType> {
     }
 
     if (this.state.logs.length == 0) {
-      return <Message>No logs to display from this pod.</Message>;
+      return (
+        <Message>
+          No logs to display from this pod.
+          <Highlight onClick={this.refreshLogs}>
+            <i className="material-icons">autorenew</i>
+            Refresh
+          </Highlight>
+        </Message>
+      );
     }
 
     return this.state.logs.map((log, i) => {
@@ -177,6 +185,20 @@ export default class Logs extends Component<PropsType, StateType> {
 
 Logs.contextType = Context;
 
+const Highlight = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  color: #8590ff;
+  cursor: pointer;
+
+  > i {
+    font-size: 16px;
+    margin-right: 3px;
+  }
+`;
+
 const Scroll = styled.div`
   align-items: center;
   display: flex;

dashboard/src/main/home/provisioner/Provisioner.tsx

@@ -146,6 +146,7 @@ class Provisioner extends Component<PropsType, StateType> {
             this.refresh();
           }}
         >
+          <i className="material-icons">autorenew</i>
           Refresh
         </RefreshText>
       </StyledProvisioner>
@@ -178,8 +179,15 @@ const TabWrapper = styled.div`
 `;
 
 const RefreshText = styled.div`
-  display: inline;
-  margin-left: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
   color: #8590ff;
   cursor: pointer;
+
+  > i {
+    font-size: 16px;
+    margin-right: 3px;
+  }
 `;