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 console are collected into a kebab menu,
  with a separate one for "Send keys".

- The expanded console has less UI around it, and it keeps the type
  that was active in the collapsed view.

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

- The SPICE console invites you to replace it with VNC.

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,78 @@
+/*
+ * 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 { 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';
+
+const _ = cockpit.gettext;
+
+export const RemoteConnectionInfo = ({ url, editor }) => {
+    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>
+                <Text component={TextVariants.p}>
+                    <ClipboardCopy
+                                hoverTip={_("Copy to clipboard")}
+                                clickTip={_("Successfully copied to clipboard!")}
+                                variant="inline-compact"
+                                isCode>
+                        {url}
+                    </ClipboardCopy>
+                </Text>
+            </>
+            }
+            { editor }
+        </TextContent>
+    );
+};

src/components/vm/consoles/consoles.css

@@ -18,13 +18,25 @@
      grid-template-rows: min-content 1fr;
 }
 
+.vm-console-footer {
+    grid-area: 3 / 1 / 4 / 3;
+}
+
 .consoles-page-expanded .actions-pagesection .pf-v5-c-page__main-body {
      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;
+}