live refresh after provisioning is finished

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 => {

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/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 & {};
 
@@ -47,6 +49,30 @@ class Provisioner extends Component<PropsType, StateType> {
     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()
   }
@@ -104,6 +130,7 @@ class Provisioner extends Component<PropsType, StateType> {
           <ProvisionerLogs
             key={this.state.selectedInfra?.id}
             selectedInfra={this.state.selectedInfra}
+            updateInfras={this.updateInfras}
           />
         </StyledProvisioner>
       );

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,10 @@ 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) => {