Redesign of the MiniStatus window

[gbraad]

A possible design could be

where the Pause/Play button toggles between the states that the instance is in.

Related to: crc-org/crc-react-components#29

• button represents state of the instance
• delete actions is represented by a trash icon
• delete triggers confirmation dialog Spike adding a modal dialog option #130

[deboer-tim]

Having play & pause on the same button is confusing to me, e.g. which is it going to do? One option to fix this would be to alternate the icon based on the state, but then it has to be really clear what the current state is. It's clear when YouTube is playing because there is movement and sound and it immediately toggles between states, but with a VM the fan noise is a bit delayed and there are delays and unknown states. :) IMHO we're going to need a clear and separate current state (e.g. "Starting" label) beside the action.

IMHO Delete is also potentially confusing for new users, especially if you hadn't made the connection to a VM yet. You don't know if this is deleting the install, whether it is recoverable, how would I create a new one, etc. In this case I think there just needs to be a really clear confirmation dialog.

[gbraad]

Having play & pause on the same button is confusing to me

where the Pause/Play button toggles between the states that the instance is in (this means the icon changes according to the state of the VM).

---

• The instance state is stopped or unknown:
  

• the instance state is starting:
  

• the instances state is running:
  

[gbraad]

I think there just needs to be a really clear confirmation dialog.

• Spike adding a modal dialog option #130

I also suggest you to look at the doc that is shared between me, Kevin, and Beau of UX, as this have been addressed and discussed there.

[gbraad]

Would like to display memory, cpu and disk usage in 'real-time'.

For which

import {
    OutlinedHddIcon,
    MemoryIcon,
    MicrochipIcon
} from '@patternfly/react-icons';

can be used. Originally discussed as part of crc-org/crc-react-components#5

[gbraad]

• when stopped/stopping
  

• when starting
  

• when running