consoles: Redesign #2008

mvollmer · 2025-01-30T12:04:01Z

COCKPIT-1225

Demo: https://www.youtube.com/watch?v=PHHoSxs70Ho

Add Suse instructions to RemoteConnectionInfo, <MoreInformationInstallVariant os="SLE, openSUSE" content="sudo zypper install virt-viewer" />.
fix mobile layout
helper text for password and port that mention requirements. "At most 8 characters", "number that is at least 5900".
sort out placement of "Disconnect" button. We can ignore multiple text consoles for this, I think.
should the "Set port and password" button look like a link or like a button?
validate port and password on blur.

src/components/vm/consoles/consoles.jsx

src/components/vm/consoles/vnc.jsx

src/components/vm/consoles/vncBody.jsx

src/components/vm/consoles/consoles.jsx

src/components/vm/consoles/vnc.jsx

src/components/vm/consoles/consoles.jsx

src/components/vm/consoles/vnc.jsx

src/components/vm/vmDetailsPage.jsx

src/components/vm/consoles/vnc.jsx

mvollmer · 2025-06-13T10:53:55Z

We might want to even remove the header and rely on people using the Browser back button to get out of "fullscreen" again.

But this would mean we need to find a different place for the "resize & scale" settings, which are important in fullscreen.

Venefilyn

First round of reviews done I think. Also answering some questions from the PR body:

Where should the "send key" and "disconnect" actions go?

Disconnect should be outside of the dropdown. Any dropdowns that have like 1 or 2 items we shouldn't have a dropdown either, unless it's an overflow menu (overkill for this PR). As for the ellipsis I'm wondering if there is a better icon to use just for "send key"

Is the (?) button plus popover ok?

Yeah might be fine. Trying to think of an alternative but not sure atm.

The buttons need spacing between them. Button group should have default padding available as a field.

Is it ok to completely ignore spice when there is vnc?

No clue, someone else would have to answer pros and cons of this.

How should the expanded view look?

Current is fine for maximizing space. But we should in future PR fix this.. I don't like how the page loses all the spacing, border, and border radius. I'd want to figure out how to make the page work with a fullscreen-like mode - but that's something we've talked about at lengths before (out of scope for this I think, too much work)

src/components/vm/consoles/common.jsx

Venefilyn · 2025-06-17T17:25:48Z

src/components/vm/consoles/vnc.jsx

+        if (password.length > 8) {
+            setPasswordError(_("Password must be 8 characters or less."));
+            field_errors += 1;
+        }


Should be explained why

Hmm, the reason is probably a limitation in the VNC protocol itself... If I remove this check here, the error from virt-xml is

ERROR unsupported configuration: VNC password is 21 characters long, only 8 permitted

So I don't know what we could say here that would be helpful...

What about just VNC protocol requires 8 characters or less. or something in that regard

Let's say "VNC protocol only allows 8 characters or less" to make it sound more like a unfortunate technology restriction, ok?

Let's say "VNC protocol only allows 8 characters or less" to make it sound more like a unfortunate technology restriction, ok?

This isn't true actually. The RFC says:

The client encrypts the challenge with DES, using a password supplied
by the user as the key. To form the key, the password is truncated
to eight characters, or padded with null bytes on the right.

So technically, the protocol allows passwords longer than 8 characters...

src/components/vm/consoles/vnc.jsx

src/components/vm/vmDetailsPage.jsx

Venefilyn · 2025-06-17T17:35:41Z

We might want to even remove the header and rely on people using the Browser back button to get out of "fullscreen" again.

But this would mean we need to find a different place for the "resize & scale" settings, which are important in fullscreen.

It should be possible to first escape from the console view, then hit escape to get out of the fullscreen mode and reset everything

- A ToggleGroup in the Card header is used to switch consoles - The console switcher is also there for shut-off machines. This gives us a place for type-specific actions that also make sense for a shut-off machine, like editing VNC server settings. - The DesktopViewer is gone, but there is a footer with a "Launch viewer" button and a "How to connect" popover. - Actions for the Graphics and Serial consoles are collected into kebab menus. - The expanded console has less UI around it, and it keeps the type that was active in the collapsed view. Instead of the breadcrumb it has a "Collapse" button. - When there is no actual console for a given type, there is now a EmptyState component where you can enable it. - It is possible to change VNC server settings via the "How to connect" popup. - The SPICE console invites you to replace it with VNC. - The size of the expanded console is now always controlled by the browser window and never overflows in height. - The VncConsole has been imported from @patternfly/react-console and stripped down.

mvollmer · 2025-06-18T13:54:44Z

The buttons need spacing between them. Button group should have default padding available as a field.

Doesn't that move the (?) too far away from the button that it applies to? I think the problem is that we get the grey focus background here...

I have changed it to use the new InfoPopover that we introduced in the PF6 migration.

mvollmer · 2025-06-18T14:10:46Z

Disconnect should be outside of the dropdown. Any dropdowns that have like 1 or 2 items we shouldn't have a dropdown either, unless it's an overflow menu (overkill for this PR).

Where would the "Disconnect" button go exactly?

"Disconnect" is not a very common or important action, and I think we need not make it prominent.

There is now also less horizontal space since the console selector has moved into the header and is now a row of toggle buttons. We might get this situation, potentially, but super rarely:

We have a lot of dropdowns with one or two items in them, such as for removing disks or network interfaces:

One could argue that this is appropriate since "Remove" is a destructive action and it should just sit there on the page (even if it has a confirmation dialog, of course). But we are not consistent with that.

As for the ellipsis I'm wondering if there is a better icon to use just for "send key"

Yes, I had a look but couldn't find any.

mvollmer · 2025-06-18T14:15:50Z

As for the ellipsis I'm wondering if there is a better icon to use just for "send key"

Yes, I had a look but couldn't find any.

Font Awesome has one: https://fontawesome.com/v5/icons/keyboard?s=solid

And we have the CSS for, but apparently not the font, or something. Inspector looks good:

but it renders as a missing glyph:

I know nothing about web and fonts.

Factored common code out from VNC and Spice. Added download icon to button, since it downloads a file. If we ever support opening vnc:// or spice:// URLs, we would use a different icon (or no icon) Used new InfoPopover for the RemoteViewerInfo.

mvollmer · 2025-06-18T14:23:57Z

Current [expanded view] is fine for maximizing space. But we should in future PR fix this.. I don't like how the page loses all the spacing, border, and border radius.

I have reverted my recent change and made it look more PF6y again:

I'd want to figure out how to make the page work with a fullscreen-like mode - but that's something we've talked about at lengths before (out of scope for this I think, too much work)

Yes, I'll prepare a PR. I think a "full browser" VNC console would be nice and seems quite within reach.

Venefilyn · 2025-06-18T14:50:59Z

The buttons need spacing between them. Button group should have default padding available as a field.

Doesn't that move the (?) too far away from the button that it applies to? I think the problem is that we get the grey focus background here...

I have changed it to use the new InfoPopover that we introduced in the PF6 migration.

I'd say it's either this or having a Tooltip component with a hover state for the button that shows the info. Spacing is important between buttons even if the padding does increase. It makes everything more uniform too

Disconnect should be outside of the dropdown. Any dropdowns that have like 1 or 2 items we shouldn't have a dropdown either, unless it's an overflow menu (overkill for this PR).

Where would the "Disconnect" button go exactly?

"Disconnect" is not a very common or important action, and I think we need not make it prominent.

There is now also less horizontal space since the console selector has moved into the header and is now a row of toggle buttons. We might get this situation, potentially, but super rarely:

We have a lot of dropdowns with one or two items in them, such as for removing disks or network interfaces:

One could argue that this is appropriate since "Remove" is a destructive action and it should just sit there on the page (even if it has a confirmation dialog, of course). But we are not consistent with that.

Okay if there is going to be multiple terminals you can switch to and not just 2 then we should revisit this in the future, out of scope for this PR at this point.

When it becomes a lot of options, having a tab selection might not be the best way to switch either. Remove is also not part of send keys itself so it is in a weird state to be in the dropdown there. Expand/Collapse button is on the right and serves as actions surrounding the console, so we can have Remove together with that (next to it).

A good rule of thumb is that when something approaches 3 items it should probably go into a dropdown menu to reduce clutter.

As for the ellipsis I'm wondering if there is a better icon to use just for "send key"

Yes, I had a look but couldn't find any.

As for the ellipsis I'm wondering if there is a better icon to use just for "send key"

Yes, I had a look but couldn't find any.

Font Awesome has one: fontawesome.com/v5/icons/keyboard?s=solid

And we have the CSS for, but apparently not the font, or something. Inspector looks good:

but it renders as a missing glyph:

I know nothing about web and fonts.

Ah yeah.. we explicitly remove FontAwesome in Cockpit atm. We can check in a future PR

Current [expanded view] is fine for maximizing space. But we should in future PR fix this.. I don't like how the page loses all the spacing, border, and border radius.

I have reverted my recent change and made it look more PF6y again:

I'd want to figure out how to make the page work with a fullscreen-like mode - but that's something we've talked about at lengths before (out of scope for this I think, too much work)

Yes, I'll prepare a PR. I think a "full browser" VNC console would be nice and seems quite within reach.

If you get to it make it a rough draft in case I have drastic suggestions. I think it might be difficult to get good :D

This doesn't really matter since we ignore TypeScript errors in JavaScript files.

Added helper texts to describe requirements up front. Validate input when text inputs are blurred.

Also, non-numeric port values get their dedicated validation error.

mvollmer · 2025-06-19T09:55:12Z

@Venefilyn, for me the "Edit VNC settings" dialog is in the "non guided" part of Cockpit. It's there if you really need it, but otherwise it is best ignored. The "non guided" parts, in my view, don't need to be explained well.

Does that make sense to you? It means we don't need to polish the error messages and behavior a lot.

I have tried to make it clearer that people are leaving the "guided" parts by changing the label of the button to "Edit VNC settings (advanced)":

The password helper texts also are more scary:

mvollmer · 2025-06-19T09:59:35Z

When it becomes a lot of options, having a tab selection might not be the best way to switch either.

Yes, agreed. I think it is very rare that people have more than one text console. I think we can ignore this case for now.

I'll pull "Disconnect" out of the dropdown and try to find a SVG keyboard icon that we can use.

src/components/vm/consoles/consoles.jsx

src/components/vm/consoles/vnc.jsx

Now they look like previous: "Disconnect" is a secondary button, "Send key" is a menu.

cockpituous · 2025-06-19T14:08:47Z

src/components/common/needsShutdown.tsx

+        // a pending shutdown.
+        //
+        if (inactive_vnc.port != "-1" && active_vnc.port != inactive_vnc.port)
+            return true;


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:47Z

src/components/common/needsShutdown.tsx

+            return true;
+
+        if (active_vnc.password != inactive_vnc.password)
+            return true;


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:48Z

src/components/vm/consoles/VncConsole.jsx

+    repeaterID = '',
+    vncLogging = 'warn',
+    consoleContainerId,
+    onDisconnected = () => {},


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:48Z

src/components/vm/consoles/VncConsole.jsx

+        (e) => {
+            onSecurityFailure(e);


These 2 added lines are not executed by any test.

cockpituous · 2025-06-19T14:08:48Z

src/components/vm/consoles/VncConsole.jsx

+    }, [rfb, _onDisconnected, _onSecurityFailure]);
+
+    const connect = React.useCallback(() => {
+        const protocol = encrypt ? 'wss' : 'ws';


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:49Z

src/components/vm/consoles/vnc.jsx

+            { applyError &&
+                <ModalError dialogError={applyError} dialogErrorDetail={applyErrorDetail} />
+            }
+            <Form onSubmit={e => e.preventDefault()} isHorizontal>


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:49Z

src/components/vm/consoles/vnc.jsx

+                            .catch(ex => onAddErrorNotification({
+                                text: cockpit.format(_("Failed to send key Ctrl+Alt+$0 to VM $1"), keyName, vm.name),
+                                detail: ex.message,
+                                resourceId: vm.id,


These 4 added lines are not executed by any test.

cockpituous · 2025-06-19T14:08:49Z

src/components/vm/consoles/vnc.jsx

+                { state.connected
+                    ? <VncConsole
+                          host={window.location.hostname}
+                          port={window.location.port || (encrypt ? '443' : '80')}


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:49Z

src/components/vm/consoles/vnc.jsx

+                          encrypt={encrypt}
+                          shared
+                          credentials={this.credentials}
+                          vncLogging={ window.debugging?.includes("vnc") ? 'debug' : 'warn' }


This added line is not executed by any test.

cockpituous · 2025-06-19T14:08:49Z

src/components/vm/consoles/vnc.jsx

+                .catch(ex => onAddErrorNotification({
+                    text: cockpit.format(_("Failed to add VNC to VM $0"), vm.name),
+                    detail: ex.message,
+                    resourceId: vm.id,


These 4 added lines are not executed by any test.

mvollmer · 2025-06-19T15:15:58Z

Oh no, the tests have entered flake town...

mvollmer added no-test blocked labels Jan 30, 2025

github-advanced-security bot found potential problems Jan 30, 2025

View reviewed changes

mvollmer force-pushed the console-redesign branch 2 times, most recently from 69dcfd9 to 77c4eb9 Compare February 4, 2025 07:28

This was referenced Feb 4, 2025

Console resize and scale settings #2015

Draft

Add "view, edit, and add Video devices" to detailspage #1795

Closed

consoles: Allow adding VNC #2019

Closed

mvollmer force-pushed the console-redesign branch from 77c4eb9 to 0fe5bbc Compare February 10, 2025 15:17

github-advanced-security bot found potential problems Feb 10, 2025

View reviewed changes

src/components/vm/consoles/consoles.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

This was referenced Feb 11, 2025

lib: Add support for drilldowns to KebabDropdown cockpit-project/cockpit#21579

Draft

consoles: Allow configuring VNC #1973

Closed

mvollmer force-pushed the console-redesign branch 2 times, most recently from f65bf5f to ace6a87 Compare February 14, 2025 10:27

mvollmer removed the blocked label Feb 14, 2025

mvollmer force-pushed the console-redesign branch 3 times, most recently from 165110f to 4f73613 Compare February 17, 2025 14:05

github-advanced-security bot found potential problems Feb 17, 2025

View reviewed changes

mvollmer force-pushed the console-redesign branch 2 times, most recently from 5137d12 to 8128512 Compare February 17, 2025 14:34

github-advanced-security bot found potential problems Feb 17, 2025

View reviewed changes

mvollmer force-pushed the console-redesign branch 2 times, most recently from a363668 to ae64118 Compare February 18, 2025 08:24

mvollmer mentioned this pull request Feb 19, 2025

console: Better connection failure error messages #2038

Draft

1 task

mvollmer force-pushed the console-redesign branch from ae64118 to 111442f Compare February 19, 2025 11:26

mvollmer force-pushed the console-redesign branch from 111442f to 1edb67d Compare February 27, 2025 09:28

mvollmer mentioned this pull request Mar 3, 2025

console: Launch external SPICE viewer via spice:// URL #2049

Open

1 task

mvollmer force-pushed the console-redesign branch 2 times, most recently from 5c2254e to caadd56 Compare March 6, 2025 14:51

mvollmer force-pushed the console-redesign branch from 7768ef7 to d05b72a Compare June 13, 2025 10:35

mvollmer force-pushed the console-redesign branch from d05b72a to 56162ff Compare June 16, 2025 11:44

cockpit-project deleted a comment from sourcery-ai bot Jun 16, 2025

Venefilyn requested changes Jun 17, 2025

View reviewed changes

mvollmer added 2 commits June 18, 2025 17:22

FIXUP - remote viewer info

05ea999

FIXUP - launch viewer button

5f9703d

Factored common code out from VNC and Spice. Added download icon to button, since it downloads a file. If we ever support opening vnc:// or spice:// URLs, we would use a different icon (or no icon) Used new InfoPopover for the RemoteViewerInfo.

mvollmer force-pushed the console-redesign branch from 56162ff to 5f9703d Compare June 18, 2025 15:29

mvollmer added 4 commits June 19, 2025 10:45

FIXUP - Make TypeScript happier re LaunchViewerButton

5bd1f7a

This doesn't really matter since we ignore TypeScript errors in JavaScript files.

FIXUP - dialog messaging and validation

5ce7223

Added helper texts to describe requirements up front. Validate input when text inputs are blurred.

FIXUP - fix console card height in mobile layout

ef471d2

FIXUP - explain weakness of password and make dialog "advanced"

c6fe1c7

Also, non-numeric port values get their dedicated validation error.

github-advanced-security bot found potential problems Jun 19, 2025

View reviewed changes

src/components/vm/consoles/consoles.jsx Fixed Show fixed Hide fixed

mvollmer force-pushed the console-redesign branch from 45da00b to 405cdb1 Compare June 19, 2025 11:24

github-advanced-security bot found potential problems Jun 19, 2025

View reviewed changes

src/components/vm/consoles/consoles.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

FIXUP - undo actions

418cf49

Now they look like previous: "Disconnect" is a secondary button, "Send key" is a menu.

mvollmer force-pushed the console-redesign branch from 405cdb1 to 418cf49 Compare June 19, 2025 11:27

mvollmer added 2 commits June 19, 2025 14:36

FIXUP - linting

0ad85bc

FIXUP - tests

d693f19

cockpituous reviewed Jun 19, 2025

View reviewed changes

consoles: Redesign #2008

Are you sure you want to change the base?

consoles: Redesign #2008

Uh oh!

Conversation

mvollmer commented Jan 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mvollmer commented Jun 13, 2025

Uh oh!

Venefilyn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Venefilyn commented Jun 17, 2025

Uh oh!

mvollmer commented Jun 18, 2025

Uh oh!

mvollmer commented Jun 18, 2025

Uh oh!

mvollmer commented Jun 18, 2025

Uh oh!

mvollmer commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Venefilyn commented Jun 18, 2025

Uh oh!

mvollmer commented Jun 19, 2025

Uh oh!

mvollmer commented Jun 19, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mvollmer commented Jan 30, 2025 •

edited

Loading

mvollmer commented Jun 18, 2025 •

edited

Loading