UI: Finish prototype deployment process

ui/package.json

@@ -31,6 +31,7 @@
     "react-promise-tracker": "^2.0.5",
     "react-router-dom": "^5.1.2",
     "react-spinners": "^0.8.0",
+    "thenfail": "^0.4.13",
     "use-global-hook": "^0.1.12"
   },
   "devDependencies": {

ui/src/components/deployment/run/DeployRequest.ts

@@ -1,16 +1,29 @@
 import { UseGlobalSession } from '../../Global';
 
-export default function DeployRequest(endpoint: string, location: string, body: string) {
+export default async function DeployRequest(
+  endpoint: string,
+  location: string,
+  body: any
+) {
   const url = endpoint + '/' + location;
 
-  return fetch(url, {
-    method: 'POST',
-    body: body
-  })
-    .then(x => x.json())
-    .then(x => console.log(x))
-    .catch(x => {
-      console.error(x);
-      throw x;
+  try {
+    const x = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(body),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then(r => {
+        if (r.ok) {
+            return r.json()
+        }
+
+        throw new Error('API returned not OK')
     });
+    return console.log(x);
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
 }

ui/src/components/deployment/run/RunDeploy.tsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from 'react-bootstrap';
 import Steps from 'rc-steps';
 import { PacmanLoader } from 'react-spinners';
 import { UseGlobalSettings, UseGlobalSession } from '../../Global';
 import DeployRequest from './DeployRequest';
 import PacmanGhost from '../../Ghost';
+import { Settings } from '../../settings/Settings';
+import Promise from 'thenfail';
 
-type stepStatus = 'working' | 'error';
+type stepStatus = 'active' | 'error' | 'finish' | 'done';
 
 type step = {
   title: string;
@@ -36,7 +38,7 @@ export default function RunDeploy() {
     status?: stepStatus
   ) => {
     setSteps(prev => [
-      ...prev.slice(0, prev.length),
+      ...prev.slice(0, prev.length - 1),
       {
         title: title,
         description: description,
@@ -52,9 +54,89 @@ export default function RunDeploy() {
 
     const state = { ...globalSettings };
 
-    DeployRequest(endpoint, 'telegraf', state.Telegraf.toString())
-      .then(() => addStep('Deploy Telegraf', 'Asking OmegaGraf to create the container'))
-      .catch(() => setLastStep('Deploy Telegraf', 'Error creating container, please check server logs', 'error'));
+    Promise.then(() =>
+      deploySim(endpoint, state).then(() =>
+        deployGrafana(endpoint, state).then(() =>
+          deployTelegraf(endpoint, state).then(() =>
+            deployPrometheus(endpoint, state).then(() => {
+              const stepText = 'Cleaning up our mess...';
+              addStep('Finishing up', stepText);
+              setLastStep('Done', 'You can start using OmegaGraf!', 'done');
+            })
+          )
+        )
+      )
+    );
+  };
+
+  const deployTelegraf = async (endpoint: string, state: Settings) => {
+    try {
+      const stepText = 'Asking OmegaGraf to create the container...';
+      addStep('Deploy Telegraf', stepText);
+      await DeployRequest(endpoint, 'telegraf', state.Telegraf);
+      setLastStep('Deploy Telegraf', stepText + 'Done!', 'finish');
+    } catch (e) {
+      setLastStep(
+        'Deploy Telegraf',
+        'Error creating container, please check server logs',
+        'error'
+      );
+      const x = Promise.break;
+    }
+  };
+
+  const deployPrometheus = async (endpoint: string, state: Settings) => {
+    try {
+      const stepText = 'Asking OmegaGraf to create the container...';
+      addStep('Deploy Prometheus', stepText);
+      await DeployRequest(endpoint, 'prometheus', state.Prometheus);
+      setLastStep('Deploy Prometheus', stepText + 'Done!', 'finish');
+    } catch (e) {
+      setLastStep(
+        'Deploy Prometheus',
+        'Error creating container, please check server logs',
+        'error'
+      );
+      const x = Promise.break;
+    }
+  };
+
+  const deployGrafana = async (endpoint: string, state: Settings) => {
+    try {
+      const stepText = 'Asking OmegaGraf to create the container...';
+      addStep('Deploy Grafana', stepText);
+      await DeployRequest(endpoint, 'grafana', state.Grafana);
+      setLastStep('Deploy Grafana', stepText + 'Done!', 'finish');
+    } catch (e) {
+      setLastStep(
+        'Deploy Grafana',
+        'Error creating container, please check server logs',
+        'error'
+      );
+      const x = Promise.break;
+    }
+  };
+
+  const deploySim = async (endpoint: string, state: Settings) => {
+    try {
+      const stepText = 'Asking OmegaGraf to create the container...';
+      addStep('Deploy VCSim', stepText);
+      await DeployRequest(endpoint, 'telegraf/sim', state.VCSim);
+      setLastStep('Deploy VCSim', stepText + 'Done!', 'finish');
+    } catch (e) {
+      setLastStep(
+        'Deploy VCSim',
+        'Error creating container, please check server logs',
+        'error'
+      );
+      const x = Promise.break;
+    }
+  };
+
+  const stepLength = () => {
+    const l = steps.length - 1;
+    console.log('Current step:' + l);
+    return l;
   };
 
   return (
@@ -65,20 +147,24 @@ export default function RunDeploy() {
         </Button>
       )}
       {steps.length > 0 && (
-        <Steps current={steps.length - 1} direction="vertical" size="large">
+        <Steps current={stepLength()} direction="vertical">
           {steps.map((step, i) => {
             const isError = step.status === 'error';
-            
+
             const icon = !isError ? (
-              <PacmanLoader size={15} color={'#007bff'} loading={true} />
+              step.status === 'done' ? (
+                <i className="rcicon rcicon-check" />
+              ) : (
+                <PacmanLoader size={15} color={'#007bff'} loading={true} />
+              )
             ) : (
               <PacmanGhost />
             );
             return (
               <Steps.Step
                 key={i}
                 {...step}
-                {...(i === steps.length - 1 && {
+                {...(i === stepLength() && {
                   icon: { ...icon }
                 })}
               />

ui/src/styles/App.css

@@ -153,8 +153,12 @@ body {
 }
 
 .header-gradient {
-  background: rgb(34,193,195);
-  background: linear-gradient(50deg, rgba(34,193,195,1) 0%, rgba(41,209,159,1) 100%);
+  background: rgb(34, 193, 195);
+  background: linear-gradient(
+    50deg,
+    rgba(34, 193, 195, 1) 0%,
+    rgba(41, 209, 159, 1) 100%
+  );
 }
 
 .rc-steps-item-active > .rc-steps-item-container > .rc-steps-item-content {
@@ -169,4 +173,22 @@ body {
 .rc-steps-item-error > .rc-steps-item-container > .rc-steps-item-content {
   margin-top: 2px;
   margin-left: 40px;
-}
+}
+
+.rc-steps-item-done > .rc-steps-item-container > .rc-steps-item-content {
+  margin-top: -1px;
+  margin-left: 35px;
+}
+
+.rc-steps-item-done > .rc-steps-item-container > .rc-steps-item-icon {
+  background-color: #fff;
+  border: 1px solid #108ee9;
+  width: 26px;
+  height: 26px;
+  line-height: 26px;
+  text-align: center;
+  border-radius: 26px;
+  font-size: 14px;
+  margin-right: 8px;
+  transition: background-color 0.3s, border-color 0.3s;
+}

ui/types/rc-steps/index.d.ts

@@ -1,5 +1,5 @@
 declare module 'rc-steps' {
-    export default class Steps extends React.Component<{current: number, direction?: string, size?: string}> {
-        static Step = class Step extends React.Component<{title: string, description: string, icon?: any}> {}
+    export default class Steps extends React.Component<{current: number, direction?: string, size?: string, icons?: any}> {
+        static Step = class Step extends React.Component<{title: string, description: string, icon?: any, ref?: any}> {}
     }
 }