consoles: Show VNC details also when VM is off

So that people can edit them or add VNC if it is missing.
cockpit-project · Jan 16, 2025 · 78c6280 · 78c6280
1 parent 1a72730
commit 78c6280
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 6 deletions.
diff --git a/src/components/vm/consoles/consoles.jsx b/src/components/vm/consoles/consoles.jsx
@@ -20,10 +20,17 @@ import React from 'react';
 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 { Split, SplitItem } from "@patternfly/react-core/dist/esm/layouts/Split/index.js";
 
+import { useDialogs } from 'dialogs.jsx';
+import { fmt_to_fragments } from "utils.js";
 import SerialConsole from './serialConsole.jsx';
 import Vnc from './vnc.jsx';
 import DesktopConsole from './desktopConsole.jsx';
+import { AddVNC } from './vncAdd.jsx';
+import { EditVNCModal } from './vncEdit.jsx';
+
 import {
     domainCanConsole,
     domainDesktopConsole,
@@ -34,10 +41,57 @@ import './consoles.css';
 
 const _ = cockpit.gettext;
 
-const VmNotRunning = () => {
+const VmNotRunning = ({ vm, vnc }) => {
+    const Dialogs = useDialogs();
+
+    function add_vnc() {
+        Dialogs.show(<AddVNC
+                         idPrefix="add-vnc"
+                         vm={vm} />);
+    }
+
+    function edit_vnc() {
+        Dialogs.show(<EditVNCModal
+                         idPrefix="edit-vnc"
+                         consoleDetail={vnc}
+                         vmName={vm.name}
+                         vmId={vm.id}
+                         connectionName={vm.connectionName} />);
+    }
+
+    let vnc_info;
+    let vnc_action;
+
+    if (!vnc) {
+        vnc_info = _("not supported");
+        vnc_action = (
+            <Button variant="link" isInline onClick={add_vnc}>
+                {_("Add support")}
+            </Button>);
+    } else {
+        if (vnc.port == -1)
+            vnc_info = _("supported");
+        else
+            vnc_info = fmt_to_fragments(_("supported, port $0"), vnc.port);
+
+        vnc_action = (
+            <Button variant="link" isInline onClick={edit_vnc}>
+                {_("Edit")}
+            </Button>);
+    }
+
     return (
         <div id="vm-not-running-message">
-            {_("Please start the virtual machine to access its console.")}
+            <p>{_("Please start the virtual machine to access its console.")}</p>
+            <br/>
+            <Split hasGutter>
+                <SplitItem isFilled>
+                    <span><b>{_("Graphical console:")}</b> {vnc_info}</span>
+                </SplitItem>
+                <SplitItem>
+                    {vnc_action}
+                </SplitItem>
+            </Split>
         </div>
     );
 };
@@ -98,7 +152,7 @@ class Consoles extends React.Component {
         const vnc = vm.displays && vm.displays.find(display => display.type == 'vnc');
 
         if (!domainCanConsole || !domainCanConsole(vm.state)) {
-            return (<VmNotRunning />);
+            return (<VmNotRunning vm={vm} vnc={vnc} />);
         }
 
         const onDesktopConsole = () => { // prefer spice over vnc
@@ -116,14 +170,13 @@ class Consoles extends React.Component {
                                                   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} />}
+                     isExpanded={isExpanded} />
                 {(vnc || spice) &&
                 <DesktopConsole type="DesktopViewer"
                                 onDesktopConsole={onDesktopConsole}

diff --git a/src/components/vm/consoles/vnc.jsx b/src/components/vm/consoles/vnc.jsx
@@ -23,6 +23,7 @@ import { VncConsole } from '@patternfly/react-console';
 import { Dropdown, DropdownItem, DropdownList } from "@patternfly/react-core/dist/esm/components/Dropdown";
 import { MenuToggle } from "@patternfly/react-core/dist/esm/components/MenuToggle";
 import { Divider } from "@patternfly/react-core/dist/esm/components/Divider";
+import { EmptyState, EmptyStateBody } from "@patternfly/react-core/dist/esm/components/EmptyState";
 
 import { logDebug } from '../../../helpers.js';
 import { domainSendKey } from '../../../libvirtApi/domain.js';
@@ -117,7 +118,18 @@ class Vnc extends React.Component {
     render() {
         const { consoleDetail, connectionName, vmName, vmId, onAddErrorNotification, isExpanded } = this.props;
         const { path, isActionOpen } = this.state;
-        if (!consoleDetail || !path) {
+        if (!consoleDetail) {
+            return (
+                <div className="pf-v5-c-console__vnc">
+                    <EmptyState>
+                        <EmptyStateBody>
+                            {_("VNC support not enabled. Shut down the virtual machine to add support.")}
+                        </EmptyStateBody>
+                    </EmptyState>
+                </div>
+            );
+        }
+        if (!path) {
             // postpone rendering until consoleDetail is known and channel ready
             return null;
         }