consoles: Allow configuring VNC

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}

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;
         }

src/components/vm/consoles/vncAdd.jsx

@@ -0,0 +1,122 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright 2024 Fsas Technologies 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 PropTypes from 'prop-types';
+import { Button, Form, Modal, ModalVariant } from "@patternfly/react-core";
+import { DialogsContext } from 'dialogs.jsx';
+
+import { ModalError } from 'cockpit-components-inline-notification.jsx';
+import { VncRow } from './vncBody.jsx';
+import { domainAttachVnc, domainGet } from '../../../libvirtApi/domain.js';
+
+const _ = cockpit.gettext;
+
+export class AddVNC extends React.Component {
+    static contextType = DialogsContext;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dialogError: undefined,
+            vncAddress: "",
+            vncPort: "",
+            vncPassword: "",
+            addVncInProgress: false,
+        };
+        this.add = this.add.bind(this);
+        this.onValueChanged = this.onValueChanged.bind(this);
+        this.dialogErrorSet = this.dialogErrorSet.bind(this);
+    }
+
+    onValueChanged(key, value) {
+        const stateDelta = { [key]: value };
+
+        this.setState(stateDelta);
+    }
+
+    dialogErrorSet(text, detail) {
+        this.setState({ dialogError: text, dialogErrorDetail: detail });
+    }
+
+    add() {
+        const Dialogs = this.context;
+        const { vm } = this.props;
+
+        this.setState({ addVncInProgress: true });
+        const vncParams = {
+            connectionName: vm.connectionName,
+            vmName: vm.name,
+            vncAddress: this.state.vncAddress || "",
+            vncPort: this.state.vncPort || "",
+            vncPassword: this.state.vncPassword || "",
+        };
+
+        domainAttachVnc(vncParams)
+                .then(() => {
+                    domainGet({ connectionName: vm.connectionName, id: vm.id });
+                    Dialogs.close();
+                })
+                .catch(exc => this.dialogErrorSet(_("VNC device settings could not be saved"), exc.message))
+                .finally(() => this.setState({ addVncInProgress: false }));
+    }
+
+    render() {
+        const Dialogs = this.context;
+        const { idPrefix } = this.props;
+
+        const defaultBody = (
+            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+                <VncRow idPrefix={idPrefix}
+                                 dialogValues={this.state}
+                                 onValueChanged={this.onValueChanged} />
+            </Form>
+        );
+
+        return (
+            <Modal position="top" variant={ModalVariant.medium} id={`${idPrefix}-dialog`} isOpen onClose={Dialogs.close} className='vnc-add'
+                title={_("Add VNC")}
+                footer={
+                    <>
+                        <Button isLoading={this.state.addVncInProgress}
+                                isDisabled={false}
+                                id={`${idPrefix}-add`}
+                                variant='primary'
+                                onClick={this.add}>
+                            {_("Add")}
+                        </Button>
+                        <Button id={`${idPrefix}-cancel`} variant='link' onClick={Dialogs.close}>
+                            {_("Cancel")}
+                        </Button>
+                    </>
+                }>
+                {this.state.dialogError && <ModalError dialogError={this.state.dialogError} dialogErrorDetail={this.state.dialogErrorDetail} />}
+                {defaultBody}
+            </Modal>
+        );
+    }
+}
+
+AddVNC.propTypes = {
+    idPrefix: PropTypes.string.isRequired,
+    vm: PropTypes.object.isRequired,
+};
+
+export default AddVNC;

src/components/vm/consoles/vncBody.jsx

@@ -0,0 +1,63 @@
+/*
+ * This file is part of Cockpit.
+ *
+ * Copyright 2024 Fsas Technologies 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 PropTypes from 'prop-types';
+import { FormGroup, Grid, GridItem, TextInput } from "@patternfly/react-core";
+
+import cockpit from 'cockpit';
+
+const _ = cockpit.gettext;
+
+export const VncRow = ({ idPrefix, onValueChanged, dialogValues }) => {
+    return (
+        <Grid hasGutter md={6}>
+            <GridItem span={6}>
+                <FormGroup fieldId={`${idPrefix}-address`} label={_("VNC address")}>
+                    <TextInput id={`${idPrefix}-address`}
+                           value={dialogValues.vncAddress}
+                           type="text"
+                           onChange={(event) => onValueChanged('vncAddress', event.target.value)} />
+                </FormGroup>
+            </GridItem>
+            <GridItem span={6}>
+                <FormGroup fieldId={`${idPrefix}-port`} label={_("VNC port")}>
+                    <TextInput id={`${idPrefix}-port`}
+                           value={dialogValues.vncPort}
+                           type="number"
+                           onChange={(event) => onValueChanged('vncPort', event.target.value)} />
+                </FormGroup>
+            </GridItem>
+            <GridItem span={6}>
+                <FormGroup fieldId={`${idPrefix}-password`} label={_("VNC password")}>
+                    <TextInput id={`${idPrefix}-password`}
+                           value={dialogValues.vncPassword}
+                           type="password"
+                           onChange={(event) => onValueChanged('vncPassword', event.target.value)} />
+                </FormGroup>
+            </GridItem>
+        </Grid>
+    );
+};
+
+VncRow.propTypes = {
+    idPrefix: PropTypes.string.isRequired,
+    onValueChanged: PropTypes.func.isRequired,
+    dialogValues: PropTypes.object.isRequired,
+};