crc-org / crc-react-components Goto Github PK

• CSS is not properly applied to the plus/minus buttons Storybook issue
• Numbers aren't clamped

Attachments

https://github.com/code-ready/crc-react-components/blob/675f07b7487ab18fbea67028c8c4127545629225/src/components/Settings.jsx#L69

Add card:

• For Podman a more detailed state showing how many containers are running.
• For OpenShift; the current context selected (?)
• In general we can show CPU and memory usage

Visualize this as a carousel that slides left and right?

• basic
  • CPU
  • Memory
  • Disk-size
  • preset
• Proxy
  • host
  • no-proxy
• other
  • telemetry
  • pull-secret

The current component allows for a simple copy-paste.

The possible alternative options can be:

• read from file
  #19
• automated flow
  #18
• All methods will perform basic 'validation'
  #17
  to show the user what was retrieved or given.

Read the contents for the pull-secret from a file

  <input type="file" id="file" name="file" />

• Related to: #16
• Depends on: #17

User provides the Red Hat credentials, and the pull-secret (PII) gets obtained. This prevents the case where we leave a file on the machine (safely stored in the credential store).

• Related to: #16
• Depends on: #17

We use componentWillReceiveProps in several component:

• Actions
• ControlCard
• PresetSelection

componentWillReceiveProps is deprecated and generate warning, see more on https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

If types are introduced it is suggested to fix:

        const isStarting = this.state.CrcStatus === "Starting";

suggested to be

        const isBusy = (this.state.CrcStatus === "Starting") || (this.state.CrcStatus === "Stopping");

https://github.com/code-ready/crc-react-components/blob/2344936f4718fee12d4c65bcb20c6e8f6b9b136c/src/components/Actions.jsx#L31

• Start
  pf-icon-on | fa-power-off
• Stop
  pf-icon-paused | fa-pause-circle
• Delete
  pf-icon-delete | fa-trash

Ref: https://www.patternfly.org/v4/guidelines/icons/

To prevent issues with the pull-secret, the component could perform basic validation.

When the pull secret has been pasted, it is checked for JSON-wellformedness. If not, the outer edge can turn red, and a callback can be given/variable set isValid = false;

It could even be possible to read basic data from the pull-secret. As the pull-secret takes the form of:

{
  "auths": {
    "cloud.openshift.com": {
      "auth": "b3B...Q==",
      "email": "[email protected]"
    },
    "quay.io": {
      "auth": "b3B...Q==",
      "email": "[email protected]"
    },
    "registry.connect.redhat.com": {
      "auth": "NTA...w==",
      "email": "[email protected]"
    },
    "registry.redhat.io": {
      "auth": "NTA...w==",
      "email": "[email protected]"
    }
  }
}

we could show:

Provided pull-secret belongs to:
Email:   g***d@r***t.com

Note: this could additionally state that the 'validness' (not expired) will be checked by the cluster.

Has values for podmanVersion

Allow

• remove the border

Since including the preset in the status messages, we now show a fraction that is divided by zero, causing a NaN% to be shown.

When the disksize / diskuse is 0 we can not calculate the fraction and show display nothing or a static %

... to allow opening a dialog using the new PullSecretInputCard.

Should be part of crc-org/tray-electron#129

Alternatively we may provide type definition *.d.ts for this components.

• Memory
  pf-icon pf-icon-memory | fa-memory
• CPU
  pf-icon-cpu | fa-microchip
• Disk-size
  pf-container-node | fa-hdd
• pull-secret
  pficon-key | fa-key

Ref: https://www.patternfly.org/v4/guidelines/icons/

Use icons to represent state:

• #29
• crc-org/tray-electron#126

This is a nasty workaround for now to make the components aware of the minimum values specific to presets, as the API does not return this:

• crc-org/crc#2869

and causing:

• crc-org/tray-electron#120