Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

consoles: Allow adding VNC #2019

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

mvollmer
Copy link
Member

@mvollmer mvollmer commented Feb 5, 2025

Screenshots: #2019 (comment)

  • move VncState out of vnc.jsx and rename it to ConsoleState or similar, it's not really VNC specific.
  • Handle machine without serial console.
  • test / coverage

src/components/vm/consoles/vnc.jsx Fixed Show fixed Hide fixed
src/components/vm/consoles/vnc.jsx Fixed Show fixed Hide fixed
src/components/vm/consoles/vnc.jsx Fixed Show fixed Hide fixed
@mvollmer
Copy link
Member Author

mvollmer commented Feb 5, 2025

This is heavy in EmptyState components. Here are some up-to-date screenshots. I will keep them in-sync with the code.

With no serial console

Shut-off machine with no console:

image

Shut off machine with just VNC:

image

Running machine with no console:

image

Running machine after adding VNC while it was running:

image

With a serial console

Shut-off machine with just serial:

image

Shut-off machine with both serial and VNC:

image

Running machine without VNC:

image

Running machine after adding VNC while it was running:

image

Hitting "Add VNC" will immediately add the VNC device to the VM without intervening dialog. The "Add VNC" button will be disabled and show a spinner while that happens (but it is usually so fast that the spinner doesn't manage to do a full round).

When there is an error during adding the VNC device, a toast alert appears with the error message.

This is the extent of it. I don't think I'll make a demo.

@martinpitt
Copy link
Member

In essence this is a downsized version of #1973. I like the approach! It can bring an existing vm without VNC to the same safe default config as a newly created VM. So it's at least required and hopefully undisputed. It's not yet clear whether it's sufficient for our particular customer (waiting for an answer for that), but either way I agree it makes sense to split add and edit. Porting the tests is hopefully not too much effort.

@mvollmer mvollmer mentioned this pull request Feb 6, 2025
10 tasks
@mvollmer mvollmer force-pushed the consoles-add-vnc branch 3 times, most recently from 42db0f3 to b388dab Compare February 6, 2025 11:18
- The "Console" card is always present and let's people add VNC while
  the machine is off.

- The "VNC console" tab is always present when the machine is running
  and let's people add VNC.
@garrett
Copy link
Member

garrett commented Feb 6, 2025

Hey, thanks for splitting this out! This is a feature we should definitely land as soon as we can; it's small, it's straightforward, and it makes sense. Judging from your screenshots, it already looks good too!

I'm currently working on some mockups for some small touchups, but I think what you have is almost ready.

I'll post something soon with some minor tweaks, but I don't think it'll require much.

@garrett
Copy link
Member

garrett commented Feb 6, 2025

Penpot design:
https://design.penpot.app/#/workspace/8ec95363-4e2c-80a4-8002-cc84eb3713ac/8cbf1f60-8e7b-11ec-a2fe-9eafb5cb1e0f?page-id=2b800199-2e0a-80de-8005-b2220bbe0adf&layout=layers

Screenshot capture of all the mockups in one board (at the time of writing, this is the same as the link in Penpot above):

cockpit-machines-add-vnc

It's mostly the same, but with a few small adjustments.

You should read this as shut off for the left three, powered on for the right two sets. Going from top to bottom, it's the initial state, and the second (and third, which is just a color variant of the second) is what happens after you add the console feature and haven't yet rebooted.

The color variations are because I thought restart was purple, not teal. In checking out locally, after making the mockups, I see it's teal, so I added that as a variant. I think teal is too close to green and could be mistaken as "success". It's not orange or red, as it's not a warning or dangerous, and it's not green because it's not a success state, and it's not grey because we're using color to emphasize that there are changes (which is what we do elsewhere). So that basically leaves us with purple and teal. But we should be consistent, so it's teal in the scope of this PR.

These mockups are idealistic. We can prune it back to make it match up with the features in this PR by:

  1. Removing the link styled buttons; only having text for the status
  2. Not changing the fully featured console in a shutoff state (the full console running state is untouched)
  3. Ignoring the newer style switcher, and keeping the dropdown for now (consider the widget as meaning "switcher of some sort goes here")
  4. Using the teal icon color (usually known in PF as "cyan", as specified elsewhere)
  5. Only concern ourselves with adding VNC (for now)

All of the above list could be considered as follow-ups at some point for the future, some sooner and some later. Some might be debatable, such as the link styled buttons (which brings in context, but is also redundant with the main actions) or handling adding the text console (which might be like in the mockup, might look different, or decided against). When there is VNC and no text, we can have the button to add text console similar to the graphical one inside of a "Text" tab, but I think that's outside the scope of this PR as well. (The design would be similar, but the text would be a little different.)

Copy link
Member

@garrett garrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a pruned-back version which removes all the parts of that list, so you can focus on the changes for this specific PR and not have to care about anything that might be coming for the future:

cockpit-machines-add-vnc-mini

@ Penpot: https://design.penpot.app/#/workspace/8ec95363-4e2c-80a4-8002-cc84eb3713ac/8cbf1f60-8e7b-11ec-a2fe-9eafb5cb1e0f?page-id=7a18c4a0-b2c0-80e9-8005-b24d8c683fd8

I tried to make this modified version quickly near the end of the workweek. If I removed too much, please refer to the previous mockup. Otherwise, I think this is mainly what's needed for this PR.

This should be a really small set of changes on top of what you already have here. What you have here is already great! Thanks for splitting this out and opening up this new PR!

@mvollmer
Copy link
Member Author

mvollmer commented Feb 6, 2025

I tried to make this modified version quickly near the end of the workweek. If I removed too much, please refer to the previous mockup. Otherwise, I think this is mainly what's needed for this PR.

Thanks! It's excellent.

I had considered putting a "shutdown" action into the console card, but rejected that idea because we currently do not have a "start" action either, and I feel that "shutdown" is a much too dangerous action to offer as the "obvious next step, don't even think about it" to the user. But there would be a confirmation dialog, and the expanded version of the console will likely not have the VM actions menu. So I agree that we should offer "start" and "restart" right in the card.

The action in the card will also avoid the issue that a mere "reboot" is not enough, we need a "shutdown" followed by "run". We don't have a dialog for that yet, unfortunately. I can make a variant of the "shutdown" dialog with a simple s/Shut down/Shut down and restart/. We should probably also remove the "Reboot" secondary action in it, since it will be the wrong thing to do in this case.

I would like to leave the toggle buttons, adding of a serial console, and changing the color for later.

Note that the current Console card never has a dropdown selector when the machine is shut off. Do you want it to have one even in the pared down version of your design? This question is also not yet decided for the big redesign in #2008, I think.

If yes, shouldn't we always have "Serial" and "VNC" in the dropdown, and the serial console has a "Add serial console" button of its own?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants