import React, { Fragment, useEffect, useState } from 'react' import styled from '@emotion/styled' import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline' import DirectionsRunIcon from '@mui/icons-material/DirectionsRun' import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline' import { Alert, Box, Grid, LinearProgress, LinearProgressProps, Stack, Typography } from '@mui/material' import classnames from 'classnames' import { call } from './api' type Task = { title: string description: string started: boolean finished: boolean progress: number lastUpdate: number } function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) { return ( {`${Math.round(props.value)}%`} ) } const BorderLinearProgress = styled(LinearProgress)(() => ({ width: 200, height: 10, })) const ProgressBar: React.FC<{ value: number }> = ({ value }) => ( {`${Math.round(value)}%`} ) const TaskGrid: React.FC<{ tasks: Task[] }> = ({ tasks }) => tasks.length > 0 ? ( {tasks.map((t: Task) => { const className = classnames('task-grid-item', t.started && !t.finished ? 'running' : null) return ( {t.finished ? ( ) : t.started ? ( ) : ( )} {t.title} {t.description} {t.started && } ) })} ) : null export const Progress: React.FC<{ action: 'install' | 'upgrade' }> = ({ action }) => { const [version, setVersion] = useState() const [progress, setProgress] = useState(0) const [error, setError] = useState() const [tasks, setTasks] = useState([]) useEffect(() => { const timer = setInterval(() => { call('/api/v1/appliance/install/progress') .then(result => result.json()) .then(result => { setVersion(result.progress.version) setProgress(result.progress.progress) setError(result.progress.error) setTasks(result.progress.tasks) }) .catch(err => setError(err.message)) }, 1000) return () => clearInterval(timer) }, []) return (

{progress === 100 && ( {action === 'install' ? 'Installation' : 'Upgrade'} successful. Please wait for Admin UI to appear. )} {version === undefined || version === '' ? action === 'install' ? `Installing...` : `Upgrading...` : action === 'install' ? `Installing version ${version}...` : `Upgrading to version ${version}...`} {error && {error}}

) }