Structure for one click app deployment is done, To be implemented: OneClickAppDeployHelper

app-frontend/src/containers/apps/oneclick/OneClickAppConfigPage.tsx

@@ -10,6 +10,8 @@ import OneClickAppDeployHelper, {
   IDeploymentState
 } from "./OneClickAppDeployHelper";
 import OneClickAppDeployProgress from "./OneClickAppDeployProgress";
+import Utils from "../../../utils/Utils";
+import DomUtils from "../../../utils/DomUtils";
 
 export interface IOneClickVariable {
   id: string;
@@ -89,7 +91,9 @@ export default class OneClickAppConfigPage extends Component<
     if (!!this.state.deploymentState) {
       return (
         <OneClickAppDeployProgress
+          appName={self.props.match.params.appName}
           deploymentState={this.state.deploymentState}
+          onRestartClicked={() => self.setState({ deploymentState: undefined })}
         />
       );
     }
@@ -114,12 +118,13 @@ export default class OneClickAppConfigPage extends Component<
               <div style={{ height: 40 }} />
               <OneClickVariablesSection
                 oneClickAppVariables={apiData.variables}
-                onNextClicked={values =>
+                onNextClicked={values => {
                   self.oneClickAppDeployHelper.startDeployProcess(
                     self.state.apiData!,
                     values
-                  )
-                }
+                  );
+                  DomUtils.scrollToTopBar();
+                }}
               />
               <div style={{ height: 50 }} />
               <hr />

app-frontend/src/containers/apps/oneclick/OneClickAppDeployHelper.ts

@@ -1,6 +1,13 @@
 import ApiManager from "../../../api/ApiManager";
 import { IHashMapGeneric } from "../../../models/IHashMapGeneric";
-import { IOneClickTemplate } from "./OneClickAppConfigPage";
+import {
+  IOneClickTemplate,
+  IDockerComposeService
+} from "./OneClickAppConfigPage";
+
+const REGISTERING = "REGISTERING";
+const CONFIGURING = "CONFIGURING";
+const DEPLOYING = "DEPLOYING";
 
 export interface IDeploymentState {
   steps: string[];
@@ -10,6 +17,7 @@ export interface IDeploymentState {
 
 export default class OneClickAppDeployHelper {
   private apiManager: ApiManager;
+  private template: IOneClickTemplate | undefined;
   constructor(
     private onDeploymentStateChanged: (
       deploymentState: IDeploymentState
@@ -22,18 +30,43 @@ export default class OneClickAppDeployHelper {
     template: IOneClickTemplate,
     values: IHashMapGeneric<string>
   ) {
-    // JSON.stringfy
-    // Replace
-    // Re parse with error check
-    // Start deploy
-    // TODO
-    alert("Deploying");
-    console.log(values);
+    let stringified = JSON.stringify(template);
+
+    for (let index = 0; index < template.variables.length; index++) {
+      const element = template.variables[index];
+      stringified = stringified
+        .split(element.id)
+        .join(values[element.id] || "");
+    }
+
+    try {
+      this.template = JSON.parse(stringified);
+    } catch (error) {
+      this.onDeploymentStateChanged({
+        steps: ["Parsing the template"],
+        error: `Cannot parse: ${stringified}` + "\n\n\n\n" + error,
+        currentStep: 0
+      });
+      return;
+    }
+
+    alert("TODO");
+    // Dependency tree
+    // Create steps as promises
+    // Start running promises, each promise will update the progress state automatically
 
     this.onDeploymentStateChanged({
-      steps: [],
+      steps: ["Parsing the template"],
       error: "",
       currentStep: 0
     });
   }
+
+  createStep(appName: string, step: string) {
+    return appName + " " + step;
+  }
+
+  onStepCompleted(appName: string, step: string) {}
+
+  deployApp(appName: string, dockerComposeService: IDockerComposeService) {}
 }

app-frontend/src/containers/apps/oneclick/OneClickAppDeployProgress.tsx

@@ -1,14 +1,62 @@
 import React, { Component } from "react";
 import { IDeploymentState } from "./OneClickAppDeployHelper";
+import { Row, Col, Card, Steps, Icon } from "antd";
+
+const Step = Steps.Step;
 
 export default class OneClickAppDeployProgress extends Component<{
+  appName: string;
   deploymentState: IDeploymentState;
+  onRestartClicked: () => void;
 }> {
   render() {
     return (
       <div>
-        <h3>OneClickAppDeployProgress</h3>
         <pre>{JSON.stringify(this.props.deploymentState, null, 2)}</pre>
+        <div style={{ height: 40 }} />
+        <div>
+          <Row type="flex" justify="center">
+            <Col span={16}>
+              <Card title={`Deploying your ${this.props.appName}`}>
+                <p>
+                  This process takes a few minutes to complete. DO NOT refresh
+                  this page and DO NOT navigate away!!!
+                </p>
+                <div style={{ padding: 20 }}>
+                  <h3>Progress:</h3>
+                  <div style={{ height: 20 }} />
+                  <Steps direction="vertical" current={1}>
+                    <Step
+                      title="Registering App Name"
+                      description="This is a description."
+                    />
+                    <Steps.Step
+                      icon={<Icon type="loading" />}
+                      title="Configuring App Name"
+                      description="This is a description."
+                    />
+                    <Step
+                      title="Deploying App Name"
+                      description="This is a description."
+                    />
+                    <Step
+                      title="Deploying App Name"
+                      description="This is a description."
+                    />
+                    <Step
+                      title="Deploying App Name"
+                      description="This is a description."
+                    />
+                    <Step
+                      title="Deploying App Name"
+                      description="This is a description."
+                    />
+                  </Steps>
+                </div>
+              </Card>
+            </Col>
+          </Row>
+        </div>
       </div>
     );
   }