consoles: Redesign #2008

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

Design: #2074

PatternFly 6 #2070

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

Questions:

Where should the "send key" and "disconnect" actions go?
Is the (?) button plus popover ok?
Is it ok to completely ignore spice when there is vnc?
How should the expanded view look?

The demo has outdated placements of some UI elements to get more space for the expanded console (and to follow the original mockup more closely):

Toggle buttons are left aligned now.
Kebab is at the top next to toggle buttons now.
"Launch viewer" button is at the right now.
Expanded view has no "Launch viewer" button now

Up-to-date screenshots:

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-03-26T17:12:50Z

We should build this all up from scratch without react-console. This means writing our own NoVNC React wrapper. That's very feasible and worth it, IMO, but can be done separately.

The move to PF6 makes this more important. React-console 6.0.0 uses inline CSS and generated class names, both of which is problematic for us.

cockpituous · 2025-03-27T13:08:13Z

src/components/common/needsShutdown.jsx

+        // 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-03-27T13:08:13Z

src/components/common/needsShutdown.jsx

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


This added line is not executed by any test.

cockpituous · 2025-03-27T13:08:13Z

src/components/vm/consoles/common.jsx

+        if (app.startsWith("cockpit+=")) {
+            address = app.substr(9);


These 2 added lines are not executed by any test.

cockpituous · 2025-03-27T13:08:13Z

src/components/vm/consoles/serial.jsx

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


These 4 added lines are not executed by any test.

cockpituous · 2025-03-27T13:08:13Z

src/components/vm/consoles/state.jsx

+}
+
+export function useStateObject(constructor, deps, comps) {
+    const state = useObject(constructor, obj => obj.close(), deps || [], comps);


This added line is not executed by any test.

cockpituous · 2025-03-27T13:08:13Z

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-03-27T13:08:13Z

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-03-27T13:08:13Z

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-03-27T13:08:14Z

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-03-27T13:08:14Z

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.

Except the console.

- Remove "isClickable" and "isSelectable" from all Cards. Only two of our cards are actually clickable, and they contain buttons which conflicts with the "isClickable" property. For those, we remove all card clickability and force people to click on the buttons only. This gives all Cards a border. - Remove the border of the "main" Cards of a page by making them "plain". This is the lists of VMs, storage pools, and networks.

This is unsatisfying because of the way react-console styles itself now: - It generates class names at run time. - It inserts <style> elements into the DOM, which would force us to open up our Content-Security-Policy via "style-src-elem 'unsafe-inline'". Instead, we have a copy of their CSS in our code. That way, we can also apply some bug fixes more cleanly. We should stop using react-console eventually.

So that we have a single place to style them.

They should extend to the edges of the card, not have a line after the last row, but do have a line after the header.

src/components/vm/consoles/common.jsx

src/components/vm/vmDetailsPage.jsx

- 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 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

WIP - 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 5 times, most recently from a192cf0 to 5c63980 Compare March 24, 2025 12:22

mvollmer mentioned this pull request Mar 27, 2025

PatternFly 6 #2070

Open

mvollmer removed the no-test label Mar 27, 2025

mvollmer force-pushed the console-redesign branch from 5c63980 to aeb7548 Compare March 27, 2025 12:36

cockpituous reviewed Mar 27, 2025

View reviewed changes

mvollmer mentioned this pull request Mar 27, 2025

Refresh design of VM consoles #2074

Open

mvollmer and others added 10 commits March 28, 2025 14:41

packages: Update to Patternfly 6

c8f1382

all: Automatic PF6 codemods

8326260

all: Add no-masthead-sidebar class to Page

7546b2d

all: Fix it all up

d65abe3

Except the console.

all: Use new InfoPopover for all HelpIcon popovers

837e3a0

So that we have a single place to style them.

vms: Align state filter label to center

f274eb3

all: Put some margin between dialog alerts and the body

46d9c1d

all: Style tables in list containing Cards

3a45f81

They should extend to the edges of the card, not have a line after the last row, but do have a line after the header.

mvollmer force-pushed the console-redesign branch 3 times, most recently from 45f1f50 to cf185c5 Compare March 28, 2025 15:44

github-advanced-security bot found potential problems Mar 28, 2025

View reviewed changes

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

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

mvollmer force-pushed the console-redesign branch from cf185c5 to 4858e67 Compare March 28, 2025 16:23

mvollmer added the blocked label Mar 28, 2025

mvollmer added 2 commits March 28, 2025 19:13

Upps

2d97cff

mvollmer force-pushed the console-redesign branch from 4858e67 to 2d97cff Compare March 28, 2025 17:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

consoles: Redesign #2008

consoles: Redesign #2008

mvollmer commented Jan 30, 2025 •

edited

Loading

mvollmer commented Mar 26, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

cockpituous Mar 27, 2025

consoles: Redesign #2008

Are you sure you want to change the base?

consoles: Redesign #2008

Conversation

mvollmer commented Jan 30, 2025 • edited Loading

mvollmer commented Mar 26, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mvollmer commented Jan 30, 2025 •

edited

Loading