One Click Apps - DONE!

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

@@ -10,7 +10,6 @@ import OneClickAppDeployManager, {
   IDeploymentState
 } from "./OneClickAppDeployManager";
 import OneClickAppDeployProgress from "./OneClickAppDeployProgress";
-import Utils from "../../../utils/Utils";
 import DomUtils from "../../../utils/DomUtils";
 
 export const ONE_CLICK_APP_NAME_VAR_NAME = "$$cap_appname";
@@ -86,23 +85,24 @@ export default class OneClickAppConfigPage extends Component<
 
   render() {
     const self = this;
+    const deploymentState = this.state.deploymentState;
+    const apiData = this.state.apiData;
 
-    if (!this.state.apiData) {
+    if (!apiData) {
       return <CenteredSpinner />;
     }
 
-    if (!!this.state.deploymentState) {
+    if (!!deploymentState) {
       return (
         <OneClickAppDeployProgress
           appName={self.props.match.params.appName}
-          deploymentState={this.state.deploymentState}
+          deploymentState={deploymentState}
+          onFinishClicked={() => self.props.history.push("/apps")}
           onRestartClicked={() => self.setState({ deploymentState: undefined })}
         />
       );
     }
 
-    const apiData = this.state.apiData!;
-
     return (
       <div>
         <Row type="flex" justify="center">
@@ -129,9 +129,6 @@ export default class OneClickAppConfigPage extends Component<
                   DomUtils.scrollToTopBar();
                 }}
               />
-              <div style={{ height: 50 }} />
-              <hr />
-              <pre>{JSON.stringify(this.state.apiData, null, 2)}</pre>>
             </Card>
           </Col>
         </Row>

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

@@ -1,17 +1,11 @@
-import ApiManager from "../../../api/ApiManager";
 import { IHashMapGeneric } from "../../../models/IHashMapGeneric";
 import {
   IOneClickTemplate,
   IDockerComposeService
 } from "./OneClickAppConfigPage";
 import Utils from "../../../utils/Utils";
-import { IAppDef } from "../AppDefinition";
 import OneClickAppDeploymentHelper from "./OneClickAppDeploymentHelper";
 
-const REGISTERING = "REGISTERING";
-const CONFIGURING = "CONFIGURING";
-const DEPLOYING = "DEPLOYING";
-
 interface IDeploymentStep {
   stepName: string;
   stepPromise: () => Promise<void>;
@@ -20,6 +14,7 @@ interface IDeploymentStep {
 export interface IDeploymentState {
   steps: string[];
   error: string;
+  successMessage?: string;
   currentStep: number;
 }
 
@@ -88,38 +83,37 @@ export default class OneClickAppDeployManager {
         );
       }
 
-      let currentStep = 0;
       const stepsTexts: string[] = ["Parsing the template"];
       for (let index = 0; index < steps.length; index++) {
         stepsTexts.push(steps[index].stepName);
       }
 
-      let promise = new Promise(function(resolve) {
-        self.onDeploymentStateChanged(
-          Utils.copyObject({
-            steps: stepsTexts,
-            error: "",
-            currentStep: 0
-          })
-        );
-        resolve();
-      });
+      let currentStep = 0;
+      const onNextStepPromiseCreator = function() {
+        return new Promise<void>(function(resolve) {
+          currentStep++;
+          self.onDeploymentStateChanged(
+            Utils.copyObject({
+              steps: stepsTexts,
+              error: "",
+              currentStep,
+              successMessage:
+                currentStep >= stepsTexts.length
+                  ? self.template!.instructions.end
+                  : undefined
+            })
+          );
+          resolve();
+        });
+      };
+
+      let promise = onNextStepPromiseCreator();
 
       for (let index = 0; index < steps.length; index++) {
         const element = steps[index];
-        promise = promise.then(element.stepPromise).then(function() {
-          return new Promise(function(resolve) {
-            currentStep++;
-            self.onDeploymentStateChanged(
-              Utils.copyObject({
-                steps: stepsTexts,
-                error: "",
-                currentStep
-              })
-            );
-            resolve();
-          });
-        });
+        promise = promise
+          .then(element.stepPromise)
+          .then(onNextStepPromiseCreator);
       }
 
       promise.catch(function(error) {

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

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { IDeploymentState } from "./OneClickAppDeployManager";
-import { Row, Col, Card, Steps, Icon } from "antd";
+import { Row, Col, Card, Steps, Icon, Button, Alert } from "antd";
 
 const Step = Steps.Step;
 
@@ -8,12 +8,44 @@ export default class OneClickAppDeployProgress extends Component<{
   appName: string;
   deploymentState: IDeploymentState;
   onRestartClicked: () => void;
+  onFinishClicked: () => void;
 }> {
+  createSteps() {
+    const steps = this.props.deploymentState.steps;
+    const stepsInfo = [];
+
+    for (let index = 0; index < steps.length; index++) {
+      stepsInfo.push({
+        text: (
+          <span>
+            <span>
+              {index === this.props.deploymentState.currentStep &&
+              !this.props.deploymentState.error ? (
+                <Icon
+                  style={{ fontSize: "16px", paddingRight: 12 }}
+                  type="loading"
+                />
+              ) : (
+                <span />
+              )}
+            </span>
+            {steps[index]}
+          </span>
+        ),
+        icon: undefined
+      });
+    }
+
+    return stepsInfo.map(s => {
+      return <Step icon={s.icon} title={s.text} />;
+    });
+  }
+
   render() {
+    const self = this;
+
     return (
       <div>
-        <pre>{JSON.stringify(this.props.deploymentState, null, 2)}</pre>
-        <div style={{ height: 40 }} />
         <div>
           <Row type="flex" justify="center">
             <Col span={16}>
@@ -25,33 +57,69 @@ export default class OneClickAppDeployProgress extends Component<{
                 <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
+                    status={
+                      !!self.props.deploymentState.error ? "error" : undefined
+                    }
+                    direction="vertical"
+                    current={self.props.deploymentState.currentStep}
+                  >
+                    {self.createSteps()}
                   </Steps>
+
+                  <div
+                    className={
+                      !!self.props.deploymentState.successMessage
+                        ? ""
+                        : "hide-on-demand"
+                    }
+                  >
+                    <div style={{ height: 20 }} />
+                    <Alert
+                      showIcon
+                      type="success"
+                      message={
+                        <div style={{ whiteSpace: "pre-line" }}>
+                          {self.props.deploymentState.successMessage}
+                        </div>
+                      }
+                    />
+                    <div style={{ height: 80 }} />
+                    <Row type="flex" justify="end">
+                      <Button
+                        style={{ minWidth: 150 }}
+                        size="large"
+                        type="primary"
+                        onClick={() => self.props.onFinishClicked()}
+                      >
+                        Finish
+                      </Button>
+                    </Row>
+                  </div>
+
+                  <div
+                    className={
+                      !!self.props.deploymentState.error ? "" : "hide-on-demand"
+                    }
+                  >
+                    <div style={{ height: 20 }} />
+                    <Alert
+                      showIcon
+                      type="error"
+                      message={self.props.deploymentState.error}
+                    />
+                    <div style={{ height: 80 }} />
+
+                    <Row type="flex" justify="end">
+                      <Button
+                        size="large"
+                        type="primary"
+                        onClick={() => self.props.onRestartClicked()}
+                      >
+                        Go Back &amp; Try Again
+                      </Button>
+                    </Row>
+                  </div>
                 </div>
               </Card>
             </Col>