consoles: Redesign

src/components/common/needsShutdown.jsx

@@ -85,6 +85,26 @@ 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;
+        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 getDevicesRequiringShutdown(vm) {
     if (!vm.persistent)
         return [];
@@ -125,6 +145,10 @@ export function getDevicesRequiringShutdown(vm) {
     if (needsShutdownSpice(vm))
         devices.push(_("SPICE"));
 
+    // VNC
+    if (needsShutdownVnc(vm))
+        devices.push(_("VNC"));
+
     // TPM
     if (needsShutdownTpm(vm))
         devices.push(_("TPM"));

src/components/vm/consoles/consoles.css

@@ -18,13 +18,21 @@
      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;
 }
+
+.ct-remote-viewer-popover {
+    max-inline-size: 60ch;
+}

src/components/vm/consoles/consoles.jsx

@@ -20,140 +20,190 @@
 import PropTypes from 'prop-types';
 import cockpit from 'cockpit';
 import { AccessConsoles } from "@patternfly/react-console";
+import { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card';
+import { ExpandIcon, HelpIcon } from '@patternfly/react-icons';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core/dist/esm/components/ToggleGroup';
 
 import SerialConsole from './serialConsole.jsx';
-import Vnc from './vnc.jsx';
+import Vnc, { VncState } from './vnc.jsx';
 import DesktopConsole from './desktopConsole.jsx';
+
 import {
     domainCanConsole,
     domainDesktopConsole,
     domainSerialConsoleCommand
 } from '../../../libvirtApi/domain.js';
+import { vmId } from "../../../helpers.js";
 
 import './consoles.css';
 
 const _ = cockpit.gettext;
 
-const VmNotRunning = () => {
-    return (
-        <div id="vm-not-running-message">
-            {_("Please start the virtual machine to access its console.")}
-        </div>
-    );
-};
-
-class Consoles extends React.Component {
-    constructor (props) {
-        super(props);
-
-        this.state = {
-            serial: props.vm.displays && props.vm.displays.filter(display => display.type == 'pty'),
-        };
-
-        this.getDefaultConsole = this.getDefaultConsole.bind(this);
-        this.onDesktopConsoleDownload = this.onDesktopConsoleDownload.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        const oldSerial = prevState.serial;
-        const newSerial = nextProps.vm.displays && nextProps.vm.displays.filter(display => display.type == 'pty');
+export function console_default(vm) {
+    const serials = vm.displays && vm.displays.filter(display => display.type == 'pty');
+    const vnc = vm.displays && vm.displays.find(display => display.type == 'vnc');
 
-        if (newSerial.length !== oldSerial.length || oldSerial.some((pty, index) => pty.alias !== newSerial[index].alias))
-            return { serial: newSerial };
+    if (vnc || serials.length == 0)
+        return "vnc";
+    else
+        return "serial0";
+}
 
-        return null;
+export function console_name(vm, type) {
+   if (!type)
+        type = console_default(vm);
+
+    if (type.startsWith("serial")) {
+        const serials = vm.displays && vm.displays.filter(display => display.type == 'pty');
+        if (serials.length == 1)
+            return _("Serial console");
+        const idx = Number(type.substr(6));
+        return cockpit.format(_("Serial console ($0)"), serials[idx]?.alias || idx);
+    } else if (type == "vnc") {
+        return _("Graphical console");
+    } else {
+        return _("Console");
     }
+}
 
-    getDefaultConsole () {
-        const { vm } = this.props;
-
-        if (vm.displays) {
-            if (vm.displays.find(display => display.type == "vnc")) {
-                return 'VncConsole';
-            }
-            if (vm.displays.find(display => display.type == "spice")) {
-                return 'DesktopViewer';
-            }
+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;
         }
-
-        const serialConsoleCommand = domainSerialConsoleCommand({ vm });
-        if (serialConsoleCommand) {
-            return 'SerialConsole';
+    } else {
+        address = cockpit.transport.host;
+        const pos = address.indexOf("@");
+        if (pos >= 0) {
+            address = address.substr(pos + 1);
         }
-
-        // no console defined
-        return null;
     }
+    return address;
+}
 
-    onDesktopConsoleDownload (type) {
-        const { vm } = this.props;
-        // fire download of the .vv file
-        const consoleDetail = vm.displays.find(display => display.type == type);
-
-        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);
-            }
-        }
+function console_launch(vm, consoleDetail) {
+    // fire download of the .vv file
+    domainDesktopConsole({ name: vm.name, consoleDetail: { ...consoleDetail, address: connection_address() } });
+}
+
+export const Console = ({ vm, config, type, onAddErrorNotification, isExpanded }) => {
+    let con = null;
 
-        domainDesktopConsole({ name: vm.name, consoleDetail: { ...consoleDetail, address } });
+    if (!type)
+        type = console_default(vm);
+
+    if (vm.state != "running") {
+        const vnc = vm.inactiveXML.displays && vm.inactiveXML.displays.find(display => display.type == 'vnc');
+        const spice = vm.inactiveXML.displays && vm.inactiveXML.displays.find(display => display.type == 'spice');
+        return <VncState vm={vm} vnc={vnc} spice={spice} />;
     }
 
-    render () {
-        const { vm, onAddErrorNotification, isExpanded } = this.props;
-        const { serial } = this.state;
-        const spice = vm.displays && vm.displays.find(display => display.type == 'spice');
+    if (type.startsWith("serial")) {
+        const serials = vm.displays && vm.displays.filter(display => display.type == 'pty');
+        const idx = Number(type.substr(6));
+        if (serials.length > idx)
+            con = <SerialConsole
+                          type={type}
+                          connectionName={vm.connectionName}
+                          vmName={vm.name}
+                          spawnArgs={domainSerialConsoleCommand({ vm, alias: serials[idx].alias })} />;
+    } else if (type == "vnc") {
         const vnc = vm.displays && vm.displays.find(display => display.type == 'vnc');
+        const inactive_vnc = vm.inactiveXML.displays && vm.inactiveXML.displays.find(display => display.type == 'vnc');
+        const spice = vm.displays && vm.displays.find(display => display.type == 'spice');
 
-        if (!domainCanConsole || !domainCanConsole(vm.state)) {
-            return (<VmNotRunning />);
-        }
-
-        const onDesktopConsole = () => { // prefer spice over vnc
-            this.onDesktopConsoleDownload(spice ? 'spice' : 'vnc');
-        };
+        con = <Vnc
+                  type="VncConsole"
+                  vm={vm}
+                  consoleDetail={vnc}
+                  spiceDetail={spice}
+                  inactiveConsoleDetail={inactive_vnc}
+                  onAddErrorNotification={onAddErrorNotification}
+                  onLaunch={() => console_launch(vm, vnc || spice)}
+                  connectionAddress={connection_address()}
+                  isExpanded={isExpanded} />;
+    }
 
+    if (con) {
         return (
-            <AccessConsoles preselectedType={this.getDefaultConsole()}
-                            textSelectConsoleType={_("Select console type")}
-                            textSerialConsole={_("Serial console")}
-                            textVncConsole={_("VNC console")}
-                            textDesktopViewerConsole={_("Desktop viewer")}>
-                {serial.map((pty, idx) => (<SerialConsole type={serial.length == 1 ? "SerialConsole" : cockpit.format(_("Serial console ($0)"), pty.alias || idx)}
-                                                  key={"pty-" + idx}
-                                                  connectionName={vm.connectionName}
-                                                  vmName={vm.name}
-                                                  spawnArgs={domainSerialConsoleCommand({ vm, alias: pty.alias })} />))}
-                {vnc &&
-                <Vnc type="VncConsole"
-                     vmName={vm.name}
-                     vmId={vm.id}
-                     connectionName={vm.connectionName}
-                     consoleDetail={vnc}
-                     onAddErrorNotification={onAddErrorNotification}
-                     isExpanded={isExpanded} />}
-                {(vnc || spice) &&
-                <DesktopConsole type="DesktopViewer"
-                                onDesktopConsole={onDesktopConsole}
-                                vnc={vnc}
-                                spice={spice} />}
-            </AccessConsoles>
+            <div className="pf-v5-c-console">
+                {con}
+            </div>
         );
     }
-}
-Consoles.propTypes = {
-    vm: PropTypes.object.isRequired,
-    onAddErrorNotification: PropTypes.func.isRequired,
 };
 
-export default Consoles;
+export const ConsoleCard = ({ vm, config, type, setType, onAddErrorNotification }) => {
+    const serials = vm.displays && vm.displays.filter(display => display.type == 'pty');
+
+    if (!type)
+        type = console_default(vm);
+
+    const actions = [];
+    const tabs = [];
+    let body;
+
+    if (vm.state == "running") {
+        actions.push(
+            <Button
+                key="expand"
+                variant="link"
+                onClick={() => {
+                    const urlOptions = { name: vm.name, connection: vm.connectionName };
+                    return cockpit.location.go(["vm", "console"], { ...cockpit.location.options, ...urlOptions });
+                }}
+                icon={<ExpandIcon />}
+                iconPosition="right">{_("Expand")}
+            </Button>
+        );
+
+        if (serials.length > 0)
+            tabs.push(<ToggleGroupItem
+                          key="vnc"
+                          text={_("Graphical")}
+                          isSelected={type == "vnc"}
+                          onChange={() => setType("vnc")} />);
+
+        serials.forEach((pty, idx) => {
+            const t = "serial" + idx;
+            tabs.push(<ToggleGroupItem
+                          key={t}
+                          text={serials.length == 1 ? _("Serial") : cockpit.format(_("Serial ($0)"), pty.alias || idx)}
+                          isSelected={type == t}
+                          onChange={() => setType(t)} />);
+        })
+
+        body = <Console
+                   vm={vm}
+                   config={config}
+                   onAddErrorNotification={onAddErrorNotification}
+                   type={type}
+                   isExpanded={false} />
+    } else {
+        const vnc = vm.inactiveXML.displays && vm.inactiveXML.displays.find(display => display.type == 'vnc');
+        const spice = vm.inactiveXML.displays && vm.inactiveXML.displays.find(display => display.type == 'spice');
+        body = <VncState vm={vm} vnc={vnc} spice={spice} />;
+    }
+
+    return (
+        <Card
+            className="consoles-card"
+            id={`${vmId(vm.name)}-consoles`}
+            isSelectable
+            isClickable>
+            <CardHeader actions={{ actions }}>
+                <CardTitle component="h2">{_("Console")}</CardTitle>
+                <ToggleGroup>{tabs}</ToggleGroup>
+            </CardHeader>
+            <CardBody>
+                {body}
+            </CardBody>
+            <CardFooter />
+        </Card>
+    );
+};

src/components/vm/consoles/serialConsole.jsx

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import cockpit from 'cockpit';
 
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { Split, SplitItem } from "@patternfly/react-core/dist/esm/layouts/Split/index.js";
 import { Terminal } from "cockpit-components-terminal.jsx";
 
 const _ = cockpit.gettext;
@@ -89,15 +90,21 @@ class SerialConsoleCockpit extends React.Component {
 
         return (
             <>
-                <div className="pf-v5-c-console__actions-serial">
-                    {this.state.channel
-                        ? <Button id={this.props.vmName + "-serialconsole-disconnect"} variant="secondary" onClick={this.onDisconnect}>{_("Disconnect")}</Button>
-                        : <Button id={this.props.vmName + "-serialconsole-connect"} variant="secondary" onClick={() => this.createChannel(this.props.spawnArgs)}>{_("Connect")}</Button>
-                    }
-                </div>
                 <div id={pid} className="vm-terminal pf-v5-c-console__serial">
                     {t}
                 </div>
+                <div className="vm-console-footer">
+                    <Split>
+                        <SplitItem isFilled>
+                        </SplitItem>
+                        <SplitItem>
+                            {this.state.channel
+                                ? <Button id={this.props.vmName + "-serialconsole-disconnect"} variant="secondary" onClick={this.onDisconnect}>{_("Disconnect")}</Button>
+                                : <Button id={this.props.vmName + "-serialconsole-connect"} variant="secondary" onClick={() => this.createChannel(this.props.spawnArgs)}>{_("Connect")}</Button>
+                            }
+                        </SplitItem>
+                    </Split>
+                </div>
             </>
         );
     }