Redesign of the Running setup screen

[gbraad]

This relies on #27

As a Task progress only works for long running tasks, like the download. It doesn't work well for most of the tasks we have, as they only run for a second or so.

Note: the Close Setup button only becomes active after the process finished.
Note 2: the checkmarks are just placeholders, as PatternFly most likely has nice looking Icons for this.

[gbraad]

Since some of the setup steps can go by VERY quickly we can somehow mitigate this by showing a trail of previous steps with a ... DONE indication, and a faded color.

import ReactDOM from 'react-dom';
import "@patternfly/react-core/dist/styles/base.css";
import './fonts.css';

import React from 'react';
import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';

class NewProgress extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div style={{margin:"20px"}}>

        <Progress title="Overall progress"
            value={30} min={0} max={100}
            measureLocation={ProgressMeasureLocation.outside} />

        {<span><br /></span>}
        {<span style={{color: "lightGray"}}><br />Installing hypervisor: Hyper-V ... DONE</span>}
        {<span style={{color: "gray"}}><br />Downloading openshift bundle ... DONE</span>}
        <Progress title="Reticulating splines ..."
            value={60} min={0} max={100}
            measureLocation={ProgressMeasureLocation.outside} />

      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<NewProgress />, rootElement);

https://codesandbox.io/s/youthful-volhard-e98jp?file=/src/index.js

[gbraad]