consoles: Redesign and reimplement

- 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 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 activate it. (VNC and serial)

- It is possible to change VNC server settings via the "How to
  connect" popup.g

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

Author: mvollmer

src/components/common/needsShutdown.jsx

@@ -85,6 +85,47 @@ export function needsShutdownSpice(vm) {
     return vm.hasSpice !== vm.inactiveXML.hasSpice;
 }
 
+export function needsShutdownVnc(vm) {
+    function find_vnc(v) {
+        return v.displays && v.displays.find(d => d.type == "vnc");
+    }
+
+    const active_vnc = find_vnc(vm);
+    const inactive_vnc = find_vnc(vm.inactiveXML);
+
+    if (inactive_vnc) {
+        if (!active_vnc)
+            return true;
+
+        // The active_vnc.port value is the actual port allocated at
+        // machine start, it is never -1. Thus, we can't just compare
+        // inactive_vnc.port with active_vnc.port here when
+        // inactive_vnc.port is -1. Also, when inactive_vnc.port _is_
+        // -1, we can't tell whether active_vnc.port has been
+        // allocated based on some old fixed port in inactive_vnc.port
+        // (in which case we might want to shutdown and restart), or
+        // whether it was allocated dynamically (in which case we
+        // don't want to). But luckily that doesn't really matter and
+        // a shutdown would not have any useful effect anyway, so we
+        // don't have to worry that we are missing a notification for
+        // a pending shutdown.
+        //
+        if (inactive_vnc.port != -1 && active_vnc.port != inactive_vnc.port)
+            return true;
+
+        if (active_vnc.password != inactive_vnc.password)
+            return true;
+    }
+
+    return false;
+}
+
+export function needsShutdownSerialConsole(vm) {
+    const serials = vm.displays && vm.displays.filter(display => display.type == 'pty');
+    const inactive_serials = vm.inactiveXML.displays && vm.inactiveXML.displays.filter(display => display.type == 'pty');
+    return serials.length != inactive_serials.length;
+}
+
 export function getDevicesRequiringShutdown(vm) {
     if (!vm.persistent)
         return [];
@@ -125,6 +166,14 @@ export function getDevicesRequiringShutdown(vm) {
     if (needsShutdownSpice(vm))
         devices.push(_("SPICE"));
 
+    // VNC
+    if (needsShutdownVnc(vm))
+        devices.push(_("VNC"));
+
+    // Serial console
+    if (needsShutdownSerialConsole(vm))
+        devices.push(_("Text console"));
+
     // TPM
     if (needsShutdownTpm(vm))
         devices.push(_("TPM"));

src/components/vm/consoles/common.jsx

@@ -0,0 +1,107 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright (C) 2025 Red Hat, Inc.
+ *
+ * Cockpit is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * Cockpit is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import cockpit from 'cockpit';
+
+import { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { Text, TextContent, TextVariants, TextList, TextListItem, TextListItemVariants, TextListVariants } from "@patternfly/react-core/dist/esm/components/Text";
+import { ClipboardCopy } from "@patternfly/react-core/dist/esm/components/ClipboardCopy/index.js";
+import { fmt_to_fragments } from 'utils.jsx';
+import { domainDesktopConsole } from '../../../libvirtApi/domain.js';
+
+const _ = cockpit.gettext;
+
+export function connection_address() {
+    let address;
+    if (cockpit.transport.host == "localhost") {
+        const app = cockpit.transport.application();
+        if (app.startsWith("cockpit+=")) {
+            address = app.substr(9);
+        } else {
+            address = window.location.hostname;
+        }
+    } else {
+        address = cockpit.transport.host;
+        const pos = address.indexOf("@");
+        if (pos >= 0) {
+            address = address.substr(pos + 1);
+        }
+    }
+    return address;
+}
+
+export function console_launch(vm, consoleDetail) {
+    // fire download of the .vv file
+    domainDesktopConsole({ name: vm.name, consoleDetail: { ...consoleDetail, address: connection_address() } });
+}
+
+export const RemoteConnectionInfo = ({ hide, url, onEdit }) => {
+    function TLI(term, description) {
+        // What is this? Java?
+        return (
+            <>
+                <TextListItem component={TextListItemVariants.dt}>{term}</TextListItem>
+                <TextListItem component={TextListItemVariants.dd}>{description}</TextListItem>
+            </>
+        );
+    }
+
+    return (
+        <TextContent>
+            <Text component={TextVariants.p}>
+                {fmt_to_fragments(_("Clicking \"Launch viewer\" will download a $0 file and launch the Remote Viewer application on your system."), <code>.vv</code>)}
+            </Text>
+            <Text component={TextVariants.p}>
+                {_("Remote Viewer is available for most operating systems. To install it, search for \"Remote Viewer\" in GNOME Software, KDE Discover, or run the following:")}
+            </Text>
+            <TextList component={TextListVariants.dl}>
+                {TLI(_("RHEL, CentOS"), <code>sudo yum install virt-viewer</code>)}
+                {TLI(_("Fedora"), <code>sudo dnf install virt-viewer</code>)}
+                {TLI(_("Ubuntu, Debian"), <code>sudo apt-get install virt-viewer</code>)}
+                {TLI(_("Windows"),
+                     fmt_to_fragments(
+                         _("Download the MSI from $0"),
+                         <a href="https://virt-manager.org/download" target="_blank" rel="noopener noreferrer">
+                             virt-manager.org
+                         </a>))}
+            </TextList>
+            { url &&
+            <>
+                <Text component={TextVariants.p}>
+                    {_("Other remote viewer applications can connect to the following address:")}
+                </Text>
+                <ClipboardCopy
+                    hoverTip={_("Copy to clipboard")}
+                    clickTip={_("Successfully copied to clipboard!")}
+                    variant="inline-compact"
+                >
+                    {url}
+                </ClipboardCopy>
+                <Text component={TextVariants.p} />
+            </>
+            }
+            { onEdit &&
+                <Button isInline variant="link" onClick={() => { hide(); onEdit() }}>
+                    {_("Set port and password")}
+                </Button>
+            }
+        </TextContent>
+    );
+};

src/components/vm/consoles/consoles.css

@@ -6,6 +6,11 @@
 .pf-v5-c-console__vnc > div > div {
     inline-size: 100%;
     block-size: 100%;
+    max-block-size: 100%;
+}
+
+.pf-v5-c-console {
+    row-gap: 0;
 }
 
 .pf-v5-c-console__actions {
@@ -18,13 +23,52 @@
      grid-template-rows: min-content 1fr;
 }
 
+.vm-console-footer {
+    grid-area: 3 / 1 / 4 / 3;
+    margin-block-start: var(--pf-v5-global--spacer--md);
+}
+
 .consoles-page-expanded .actions-pagesection .pf-v5-c-page__main-body {
-     padding-block-end: 0;
+    padding-block-end: 0;
 }
 
-/* Hide send key button - there is not way to do that from the JS
+/* Hide standard VNC actions - there is not way to do that from the JS
  * https://github.com/patternfly/patternfly-react/issues/3689
  */
-#pf-v5-c-console__send-shortcut {
+.pf-v5-c-console__actions-vnc {
     display: none;
 }
+
+.consoles-card .pf-v5-c-empty-state__icon {
+    color: var(--pf-v5-global--custom-color--200);
+}
+
+.ct-remote-viewer-popover {
+    max-inline-size: 60ch;
+}
+
+.consoles-card {
+    block-size: 100%;
+    max-block-size: 100%;
+}
+
+.consoles-page-expanded .pf-v5-c-console {
+    display: block;
+}
+
+.consoles-page-expanded .pf-v5-c-console__vnc {
+    margin-block-end: 15px;
+}
+
+.consoles-page-expanded .consoles-card .pf-v5-c-card__body {
+    /* 100% - card header height (padding-top + title line height + padding-bottom) */
+    max-block-size: calc(100% - (var(--pf-v5-c-card--first-child--PaddingTop) + (var(--pf-v5-c-card__title-text--LineHeight) * var(--pf-v5-global--FontSize--2xl)) + var(--pf-v5-c-card__title--not--last-child--PaddingBottom)));
+}
+
+.consoles-card .pf-v5-c-card__footer:empty {
+  display: none;
+}
+
+.consoles-card .pf-v5-c-console__serial {
+    block-size: 100%;
+}