diff --git a/ui/package.json b/ui/package.json index 3b3754e..81cbd17 100644 --- a/ui/package.json +++ b/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": { diff --git a/ui/src/components/deployment/run/DeployRequest.ts b/ui/src/components/deployment/run/DeployRequest.ts index bd5f3bd..5155025 100644 --- a/ui/src/components/deployment/run/DeployRequest.ts +++ b/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; + } } diff --git a/ui/src/components/deployment/run/RunDeploy.tsx b/ui/src/components/deployment/run/RunDeploy.tsx index dbb227f..b9ba891 100644 --- a/ui/src/components/deployment/run/RunDeploy.tsx +++ b/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,12 +147,16 @@ export default function RunDeploy() { )} {steps.length > 0 && ( - + {steps.map((step, i) => { const isError = step.status === 'error'; - + const icon = !isError ? ( - + step.status === 'done' ? ( + + ) : ( + + ) ) : ( ); @@ -78,7 +164,7 @@ export default function RunDeploy() { diff --git a/ui/src/styles/App.css b/ui/src/styles/App.css index 12dce52..b7a574c 100644 --- a/ui/src/styles/App.css +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/ui/types/rc-steps/index.d.ts b/ui/types/rc-steps/index.d.ts index fb1b38e..687ad99 100644 --- a/ui/types/rc-steps/index.d.ts +++ b/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}> {} } } \ No newline at end of file