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 13, 2025 · 2842ed0 · 2842ed0
1 parent eaf58a2
commit 2842ed0
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,16 @@ 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 { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList";
 
+import { useDialogs } from 'dialogs.jsx';
 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 +40,58 @@ 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} />);
+    }
+
     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 />
+            <br />
+            <h4>{_("VNC")}</h4>
+            { vnc
+                ? <>
+                      <DescriptionList isCompact isHorizontal>
+                          <DescriptionListGroup>
+                              <DescriptionListTerm>
+                                  {_("Listening address")}
+                              </DescriptionListTerm>
+                              <DescriptionListDescription>
+                                  {vnc.address || <i>{_("default")}</i>}
+                              </DescriptionListDescription>
+                          </DescriptionListGroup>
+                          <DescriptionListGroup>
+                              <DescriptionListTerm>
+                                  {_("Listening port")}
+                              </DescriptionListTerm>
+                              <DescriptionListDescription>
+                                  {vnc.port != -1 ? vnc.port : <i>{_("automatic")}</i>}
+                              </DescriptionListDescription>
+                          </DescriptionListGroup>
+                      </DescriptionList>
+                      <Button variant="link" isInline onClick={edit_vnc}>
+                          {_("Edit")}
+                      </Button>
+                  </>
+                : <Button variant="link" isInline onClick={add_vnc}>
+                      {_("Add support")}
+                  </Button>
+            }
         </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, EmptyStateFooter } 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;
         }