integrated aws provisioning

dashboard/src/main/home/new-project/NewProject.tsx

@@ -193,9 +193,66 @@ export default class NewProject extends Component<PropsType, StateType> {
     return false;
   }
 
+  provisionECR = (proj: ProjectType, callback: (proj: ProjectType, ecr: any) => void) => {
+    let { awsAccessId, awsSecretKey, awsRegion } = this.state;
+
+    api.createAWSIntegration('<token>', {
+      aws_region: awsRegion,
+      aws_access_key_id: awsAccessId,
+      aws_secret_access_key: awsSecretKey,
+    }, { id: proj.id }, (err: any, res: any) => {
+      if (err) {
+        console.log(err);
+        return;
+      }
+
+      api.provisionECR('<token>', {
+        aws_integration_id: res.data.id,
+        ecr_name: `${proj.name}-registry`
+      }, {id: proj.id}, (err: any, ecr:any) => {
+        if (err) {
+          console.log(err)
+          return;
+        }
+
+        callback(proj, ecr);
+      })
+      
+    });
+  }
+
+  provisionEKS = (proj: ProjectType, ecr: any) => {
+    let { awsAccessId, awsSecretKey, awsRegion } = this.state;
+
+    api.createAWSIntegration('<token>', {
+      aws_region: awsRegion,
+      aws_access_key_id: awsAccessId,
+      aws_secret_access_key: awsSecretKey,
+    }, { id: proj.id }, (err: any, res: any) => {
+      if (err) {
+        console.log(err)
+        return;
+      }
+
+      api.provisionEKS('<token>', {
+        aws_integration_id: res.data.id,
+        eks_name: `${proj.name}-cluster`,
+      }, { id: proj.id}, (err: any, eks: any) => {
+        if (err) {
+          console.log(err)
+          return;
+        }
+
+        this.props.setCurrentView('provisioner', [
+          {infra_id: ecr?.data?.id, kind: ecr?.data?.kind},
+          {infra_id: eks?.data?.id, kind: eks?.data?.kind},
+        ]);
+      })
+    })
+  }
+
   createProject = () => {
     this.setState({ status: 'loading' });
-    let { awsAccessId, awsSecretKey, awsRegion } = this.state;
 
     api.createProject('<token>', {
       name: this.state.projectName
@@ -212,32 +269,9 @@ export default class NewProject extends Component<PropsType, StateType> {
             if (res.data.length > 0) {
               let proj = res.data.find((el: ProjectType) => el.name === this.state.projectName);
               this.context.setCurrentProject(proj);
-
+              
               if (this.state.selectedProvider === 'aws') {
-                let clusterName = `${proj.name}-cluster`
-
-                api.createAWSIntegration('<token>', {
-                  aws_region: awsRegion,
-                  aws_cluster_id: clusterName,
-                  aws_access_key_id: awsAccessId,
-                  aws_secret_access_key: awsSecretKey,
-                }, { id: proj.id }, (err2: any, res2: any) => {
-                  if (err2) {
-                    console.log(err2);
-                  } else {
-                    api.provisionEKS('<token>', {
-                      aws_integration_id: res2.data.id,
-                      eks_name: clusterName,
-                    }, {id: proj.id}, (err3: any, res3:any) => {
-                      if (err3) {
-                        console.log(err3)
-                      } else {
-                        this.props.setCurrentView('provisioner', {infra_id: res3.data.id, kind: res3.data.kind});
-                      }
-                    })
-                  }
-                });
-
+                this.provisionECR(proj, this.provisionEKS)
               } else {
                 this.props.setCurrentView('dashboard', null);
               }

dashboard/src/main/home/new-project/Provisioner.tsx

@@ -14,15 +14,17 @@ type PropsType = {
 
 type StateType = {
   logs: string[],
-  ws: any
+  websockets: any[],
+  maxStep : Record<string, number>,
+  currentStep: Record<string, number>,
 };
 
-const loadMax = 40;
-
 export default class Provisioner extends Component<PropsType, StateType> {
   state = {
     logs: [] as string[],
-    ws : null as any
+    websockets : [] as any[],
+    maxStep: {} as Record<string, any>,
+    currentStep: {} as Record<string, number>,
   }
 
   scrollToBottom = () => {
@@ -32,36 +34,56 @@ export default class Provisioner extends Component<PropsType, StateType> {
   componentDidMount() {
     let { currentProject } = this.context;
     let protocol = process.env.NODE_ENV == 'production' ? 'wss' : 'ws'
-    let ws = new WebSocket(`${protocol}://${process.env.API_SERVER}/api/projects/${currentProject.id}/provision/${this.props.viewData.kind}/${this.props.viewData.infra_id}/logs`)
 
-    this.setState({ ws }, () => {
-      if (!this.state.ws) return;
-  
-      this.state.ws.onopen = () => {
+    let websockets = this.props.viewData.forEach((infra: any) => {
+      let ws = new WebSocket(`${protocol}://${process.env.API_SERVER}/api/projects/${currentProject.id}/provision/${infra.kind}/${infra.infra_id}/logs`)
+      
+      ws.onopen = () => {
         console.log('connected to websocket')
       }
-  
-      this.state.ws.onmessage = (evt: MessageEvent) => {
+
+      ws.onmessage = (evt: MessageEvent) => {
         let event = JSON.parse(evt.data)
-        let data = event.map((msg: any) => { return msg["Values"]["data"]})
-        this.setState({ logs: [...this.state.logs, ...data] }, () => {
+        let data = event.map((msg: any) => { return `${infra.kind}: ${msg["Values"]["data"]}` })
+        
+        if (!this.state.maxStep[infra.kind]) {
+          this.setState({
+            maxStep: {
+              ...this.state.maxStep,
+              [infra.kind] : event[event.length]["Values"]["created_resources"]
+            }
+          })
+        }
+
+        this.setState({ 
+          logs: [...this.state.logs, ...data], 
+          currentStep: {
+            ...this.state.currentStep,
+            [infra.kind] : event[event.length]["Values"]["created_resources"]
+          },
+        }, () => {
           this.scrollToBottom()
         })
       }
-  
-      this.state.ws.onerror = (err: ErrorEvent) => {
+
+      ws.onerror = (err: ErrorEvent) => {
         console.log(err)
       }
-    })
 
-    this.setState({ logs: [] });
+      ws.onclose = () => {
+        console.log('closing provisioner websocket')
+      }
+
+      return ws
+    });
+
+    this.setState({ websockets, logs: [] });
   }
 
   componentWillUnmount() {
-    if (this.state.ws) {
-      console.log('closing websocket')
-      this.state.ws.close()
-    }
+    this.state.websockets?.forEach((ws) => {
+      ws.close()
+    })
   }
 
   scrollRef = React.createRef<HTMLDivElement>();
@@ -73,6 +95,17 @@ export default class Provisioner extends Component<PropsType, StateType> {
   }
   
   render() {
+    let maxStep = 0;
+    let currentStep = 0;
+
+    for (let key in this.state.maxStep) {
+      maxStep += this.state.maxStep[key]
+    }
+
+    for (let key in this.state.currentStep) {
+      currentStep += this.state.currentStep[key]
+    }
+
     return (
       <StyledProvisioner>
         <TitleSection>
@@ -84,7 +117,7 @@ export default class Provisioner extends Component<PropsType, StateType> {
         </Helper>
 
         <LoadingBar>
-          <Loaded progress={((7 / loadMax) * 100).toString() + '%'} />
+          <Loaded progress={((currentStep / maxStep) * 100).toString() + '%'} />
         </LoadingBar>
 
         <LogStream ref={this.scrollRef}>