Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

consoles: Allow configuring VNC #1973

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ COCKPIT_REPO_FILES = \
$(NULL)

COCKPIT_REPO_URL = https://github.com/cockpit-project/cockpit.git
COCKPIT_REPO_COMMIT = fa91d69378d44616cf2b276fcbbcdd6b982b117a # 331 + 103 commits
COCKPIT_REPO_COMMIT = 2f8963cecb18daa21f2d7df3123a6a27c494d601

$(COCKPIT_REPO_FILES): $(COCKPIT_REPO_STAMP)
COCKPIT_REPO_TREE = '$(strip $(COCKPIT_REPO_COMMIT))^{tree}'
Expand Down
73 changes: 65 additions & 8 deletions src/components/vm/consoles/consoles.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 { Split, SplitItem } from "@patternfly/react-core/dist/esm/layouts/Split/index.js";

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,
Expand All @@ -34,10 +40,59 @@ 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 = cockpit.format(_("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>
);
};
Expand Down Expand Up @@ -81,8 +136,9 @@ class Consoles extends React.Component {
return 'SerialConsole';
}

// no console defined
return null;
// no console defined, but the VncConsole is always there and
// will instruct people how to enable it for real.
return 'VncConsole';
}

onDesktopConsoleDownload (type) {
Expand All @@ -98,32 +154,33 @@ 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
this.onDesktopConsoleDownload(spice ? 'spice' : 'vnc');
};

console.log("R");

return (
<AccessConsoles preselectedType={this.getDefaultConsole()}
textSelectConsoleType={_("Select console type")}
textSerialConsole={_("Serial console")}
textVncConsole={_("VNC console")}
textVncConsole={_("Graphical console (VNC)")}
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} />}
isExpanded={isExpanded} />
{(vnc || spice) &&
<DesktopConsole type="DesktopViewer"
onDesktopConsole={onDesktopConsole}
Expand Down
16 changes: 14 additions & 2 deletions src/components/vm/consoles/vnc.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -68,7 +69,7 @@ class Vnc extends React.Component {
}

const { consoleDetail } = props;
if (!consoleDetail || consoleDetail.port == -1) {
if (!consoleDetail || consoleDetail.port == -1 || !consoleDetail.address) {
logDebug('Vnc component: console detail not yet provided');
return;
}
Expand Down Expand Up @@ -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>
{_("Graphical console not supported. Shut down the virtual machine to add support.")}
</EmptyStateBody>
</EmptyState>
</div>
);
}
if (!path) {
// postpone rendering until consoleDetail is known and channel ready
return null;
}
Expand Down
131 changes: 131 additions & 0 deletions src/components/vm/consoles/vncAdd.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*
* 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, validateDialogValues } 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,
validationErrors: { },
};
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 });
Comment on lines +56 to +57
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 2 added lines are not executed by any test.

}

add() {
const Dialogs = this.context;
const { vm } = this.props;

const errors = validateDialogValues(this.state);
if (errors) {
this.setState({ validationErrors: errors });
return;
}

this.setState({ addVncInProgress: true });
const vncParams = {
connectionName: vm.connectionName,
vmName: vm.name,
vncAddress: this.state.vncAddress || "",
vncPort: this.state.vncPort || "",
Comment on lines +74 to +75
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 2 added lines are not executed by any test.

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))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

.finally(() => this.setState({ addVncInProgress: false }));
}

render() {
const Dialogs = this.context;
const { idPrefix } = this.props;

const defaultBody = (
<Form onSubmit={e => e.preventDefault()} isHorizontal>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

<VncRow
idPrefix={idPrefix}
dialogValues={this.state}
validationErrors={this.state.validationErrors}
onValueChanged={this.onValueChanged} />
</Form>
);

return (
<Modal position="top" variant={ModalVariant.medium} id={`${idPrefix}-dialog`} isOpen onClose={Dialogs.close} className='vnc-add'
title={_("Add VNC server")}
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} />}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This added line is not executed by any test.

{defaultBody}
</Modal>
);
}
}

AddVNC.propTypes = {
idPrefix: PropTypes.string.isRequired,
vm: PropTypes.object.isRequired,
};

export default AddVNC;
Loading