Merge pull request #450 from porter-dev/beta.3.doks-redirect

Provisioning redirect and refresh

dashboard/src/main/home/dashboard/ClusterList.tsx

@@ -9,7 +9,9 @@ import Helper from "components/values-form/Helper";
 import Loading from "components/Loading";
 import { RouteComponentProps, withRouter } from "react-router";
 
-type PropsType = RouteComponentProps;
+type PropsType = RouteComponentProps & {
+  currentCluster: ClusterType;
+};
 
 type StateType = {
   loading: boolean;
@@ -25,6 +27,16 @@ class Templates extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
+    this.updateClusterList();
+  }
+
+  componentDidUpdate(prevProps: PropsType) {
+    if (prevProps.currentCluster?.name != this.props.currentCluster?.name) {
+      this.updateClusterList();
+    }
+  }
+
+  updateClusterList = () => {
     api
       .getClusters("<token>", {}, { id: this.context.currentProject.id })
       .then(res => {
@@ -35,7 +47,7 @@ class Templates extends Component<PropsType, StateType> {
         }
       })
       .catch(err => this.setState(err));
-  }
+  };
 
   renderIcon = () => {
     return (

dashboard/src/main/home/dashboard/ClusterPlaceholder.tsx

@@ -61,7 +61,7 @@ export default class ClusterPlaceholder extends Component<
         </>
       );
     } else {
-      return <ClusterList />;
+      return <ClusterList currentCluster={this.props.currentCluster} />;
     }
   }
 }

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

@@ -134,6 +134,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     selectedInfras.forEach((option: { value: string; label: string }) => {
       redirectUrl += `&infras=${option.value}`;
     });
+    redirectUrl += "&tab=provisioner";
     window.location.href = redirectUrl;
   };
 

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

@@ -9,6 +9,8 @@ import Loading from "components/Loading";
 import InfraStatuses from "./InfraStatuses";
 import ProvisionerLogs from "./ProvisionerLogs";
 import { RouteComponentProps, withRouter } from "react-router";
+import { stringify } from "qs";
+import { forEach } from "lodash";
 
 type PropsType = RouteComponentProps & {};
 
@@ -44,6 +46,46 @@ class Provisioner extends Component<PropsType, StateType> {
   };
 
   componentDidMount() {
+    this.updateInfras();
+  }
+
+  componentDidUpdate(prevProps: PropsType, prevState: StateType) {
+    // Check that an infra that was previously in a non-created state, and
+    // which was a cluster, is now in a created state. If so, propagate update
+    // so that cluster can be refreshed.
+    let prevInfraStates: Record<number, string> = {};
+
+    prevState.infras.forEach((infra, i) => {
+      prevInfraStates[infra.id] = infra.status;
+    });
+
+    this.state.infras.forEach((infra, i) => {
+      if (
+        prevInfraStates[infra.id] &&
+        infra.status == "created" &&
+        prevInfraStates[infra.id] != "created"
+      ) {
+        api
+          .getClusters("<token>", {}, { id: this.context.currentProject.id })
+          .then(res => {
+            this.context.setCurrentCluster(res.data[0]);
+          })
+          .catch(err => {
+            this.context.setCurrentError(err);
+          });
+      }
+    });
+  }
+
+  refresh = () => {
+    this.updateInfras();
+  };
+
+  updateInfras = () => {
+    this.setState({
+      loading: true
+    });
+
     let { currentProject } = this.state;
 
     api
@@ -67,7 +109,7 @@ class Provisioner extends Component<PropsType, StateType> {
         });
       })
       .catch();
-  }
+  };
 
   render() {
     if (this.state.loading) {
@@ -92,6 +134,7 @@ class Provisioner extends Component<PropsType, StateType> {
           <ProvisionerLogs
             key={this.state.selectedInfra?.id}
             selectedInfra={this.state.selectedInfra}
+            updateInfras={this.updateInfras}
           />
         </StyledProvisioner>
       );
@@ -99,7 +142,8 @@ class Provisioner extends Component<PropsType, StateType> {
 
     return (
       <StyledProvisioner>
-        You have not provisioned any resources for this project through Porter.
+        You have not provisioned any resources for this project through Porter.{" "}
+        <RefreshText onClick={this.refresh}>Refresh</RefreshText>
       </StyledProvisioner>
     );
   }
@@ -128,3 +172,10 @@ const TabWrapper = styled.div`
   height: 100%;
   overflow-y: auto;
 `;
+
+const RefreshText = styled.div`
+  display: inline;
+  margin-left: 4px;
+  color: #8590ff;
+  cursor: pointer;
+`;

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

@@ -10,6 +10,7 @@ import warning from "assets/warning.png";
 
 type PropsType = RouteComponentProps & {
   selectedInfra: InfraType;
+  updateInfras: () => void;
 };
 
 type StateType = {
@@ -170,6 +171,13 @@ class ProvisionerLogs extends Component<PropsType, StateType> {
           this.scrollToBottom();
         }
       );
+
+      if (
+        validEvents.length >=
+        parseInt(validEvents[validEvents.length - 1]["total_resources"])
+      ) {
+        this.props.updateInfras();
+      }
     };
 
     this.ws.onerror = (err: ErrorEvent) => {