|
| 1 | +/* |
| 2 | + * This file is part of Cockpit. |
| 3 | + * |
| 4 | + * Copyright 2024 Fsas Technologies Inc. |
| 5 | + * Copyright (C) 2025 Red Hat, Inc. |
| 6 | + * |
| 7 | + * Cockpit is free software; you can redistribute it and/or modify it |
| 8 | + * under the terms of the GNU Lesser General Public License as published by |
| 9 | + * the Free Software Foundation; either version 2.1 of the License, or |
| 10 | + * (at your option) any later version. |
| 11 | + * |
| 12 | + * Cockpit is distributed in the hope that it will be useful, but |
| 13 | + * WITHOUT ANY WARRANTY; without even the implied warranty of |
| 14 | + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
| 15 | + * Lesser General Public License for more details. |
| 16 | + * |
| 17 | + * You should have received a copy of the GNU Lesser General Public License |
| 18 | + * along with Cockpit; If not, see <http://www.gnu.org/licenses/>. |
| 19 | + */ |
| 20 | + |
| 21 | +import cockpit from 'cockpit'; |
| 22 | + |
| 23 | +import React, { useState } from 'react'; |
| 24 | +import PropTypes from 'prop-types'; |
| 25 | +import { |
| 26 | + Form, Modal, ModalVariant, |
| 27 | + FormGroup, FormHelperText, HelperText, HelperTextItem, |
| 28 | + InputGroup, TextInput, Button, |
| 29 | +} from "@patternfly/react-core"; |
| 30 | +import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons"; |
| 31 | + |
| 32 | +import { ModalError } from 'cockpit-components-inline-notification.jsx'; |
| 33 | +import { DialogsContext } from 'dialogs.jsx'; |
| 34 | +import { domainChangeVncSettings, domainAttachVnc, domainGet } from '../../../libvirtApi/domain.js'; |
| 35 | +import { NeedsShutdownAlert } from '../../common/needsShutdown.jsx'; |
| 36 | + |
| 37 | +const _ = cockpit.gettext; |
| 38 | + |
| 39 | +const VncBody = ({ idPrefix, onValueChanged, dialogValues, validationErrors }) => { |
| 40 | + const [showPassword, setShowPassword] = useState(false); |
| 41 | + |
| 42 | + return ( |
| 43 | + <> |
| 44 | + <FormGroup |
| 45 | + fieldId={`${idPrefix}-portmode`} |
| 46 | + label={_("Port")} isInline hasNoPaddingTop isStack> |
| 47 | + <TextInput |
| 48 | + id={`${idPrefix}-port`} |
| 49 | + value={dialogValues.vncPort} |
| 50 | + type="text" |
| 51 | + validated={validationErrors?.vncPort ? "error" : null} |
| 52 | + onChange={(event) => onValueChanged('vncPort', event.target.value)} /> |
| 53 | + <FormHelperText> |
| 54 | + <HelperText> |
| 55 | + { validationErrors?.vncPort |
| 56 | + ? <HelperTextItem variant='error'>{validationErrors?.vncPort}</HelperTextItem> |
| 57 | + : <HelperTextItem> |
| 58 | + {_("Leave empty to automatically assign a free port when machine starts")} |
| 59 | + </HelperTextItem> |
| 60 | + } |
| 61 | + </HelperText> |
| 62 | + </FormHelperText> |
| 63 | + </FormGroup> |
| 64 | + <FormGroup fieldId={`${idPrefix}-password`} label={_("Password")}> |
| 65 | + <InputGroup> |
| 66 | + <TextInput |
| 67 | + id={`${idPrefix}-password`} |
| 68 | + type={showPassword ? "text" : "password"} |
| 69 | + value={dialogValues.vncPassword} |
| 70 | + onChange={(event) => onValueChanged('vncPassword', event.target.value)} /> |
| 71 | + <Button |
| 72 | + variant="control" |
| 73 | + onClick={() => setShowPassword(!showPassword)}> |
| 74 | + { showPassword ? <EyeSlashIcon /> : <EyeIcon /> } |
| 75 | + </Button> |
| 76 | + </InputGroup> |
| 77 | + </FormGroup> |
| 78 | + </> |
| 79 | + ); |
| 80 | +}; |
| 81 | + |
| 82 | +function validateDialogValues(values) { |
| 83 | + const res = { }; |
| 84 | + |
| 85 | + if (values.vncPort != "" && (!values.vncPort.match("^[0-9]+$") || Number(values.vncPort) < 5900)) |
| 86 | + res.vncPort = _("Port must be 5900 or larger."); |
| 87 | + |
| 88 | + return Object.keys(res).length > 0 ? res : null; |
| 89 | +} |
| 90 | + |
| 91 | +VncBody.propTypes = { |
| 92 | + idPrefix: PropTypes.string.isRequired, |
| 93 | + onValueChanged: PropTypes.func.isRequired, |
| 94 | + dialogValues: PropTypes.object.isRequired, |
| 95 | + validationErrors: PropTypes.object, |
| 96 | +}; |
| 97 | + |
| 98 | +export class AddEditVNCModal extends React.Component { |
| 99 | + static contextType = DialogsContext; |
| 100 | + |
| 101 | + constructor(props) { |
| 102 | + super(props); |
| 103 | + |
| 104 | + this.state = { |
| 105 | + dialogError: undefined, |
| 106 | + vncPort: Number(props.consoleDetail?.port) == -1 ? "" : props.consoleDetail?.port || "", |
| 107 | + vncPassword: props.consoleDetail?.password || "", |
| 108 | + validationErrors: null, |
| 109 | + }; |
| 110 | + |
| 111 | + this.save = this.save.bind(this); |
| 112 | + this.onValueChanged = this.onValueChanged.bind(this); |
| 113 | + this.dialogErrorSet = this.dialogErrorSet.bind(this); |
| 114 | + } |
| 115 | + |
| 116 | + onValueChanged(key, value) { |
| 117 | + const stateDelta = { [key]: value, validationErrors: null }; |
| 118 | + this.setState(stateDelta); |
| 119 | + } |
| 120 | + |
| 121 | + dialogErrorSet(text, detail) { |
| 122 | + this.setState({ dialogError: text, dialogErrorDetail: detail }); |
| 123 | + } |
| 124 | + |
| 125 | + save() { |
| 126 | + const Dialogs = this.context; |
| 127 | + const { vm } = this.props; |
| 128 | + |
| 129 | + const errors = validateDialogValues(this.state); |
| 130 | + if (errors) { |
| 131 | + this.setState({ validationErrors: errors }); |
| 132 | + return; |
| 133 | + } |
| 134 | + |
| 135 | + const vncParams = { |
| 136 | + connectionName: vm.connectionName, |
| 137 | + vmName: vm.name, |
| 138 | + vncAddress: this.props.consoleDetail?.address || "", |
| 139 | + vncPort: this.state.vncPort || "", |
| 140 | + vncPassword: this.state.vncPassword || "", |
| 141 | + }; |
| 142 | + |
| 143 | + (this.props.consoleDetail ? domainChangeVncSettings(vncParams) : domainAttachVnc(vncParams)) |
| 144 | + .then(() => { |
| 145 | + domainGet({ connectionName: vm.connectionName, id: vm.id }); |
| 146 | + Dialogs.close(); |
| 147 | + }) |
| 148 | + .catch((exc) => { |
| 149 | + this.dialogErrorSet(_("VNC settings could not be saved"), exc.message); |
| 150 | + }); |
| 151 | + } |
| 152 | + |
| 153 | + render() { |
| 154 | + const Dialogs = this.context; |
| 155 | + const { idPrefix, vm } = this.props; |
| 156 | + |
| 157 | + const defaultBody = ( |
| 158 | + <Form onSubmit={e => e.preventDefault()} isHorizontal> |
| 159 | + <VncBody |
| 160 | + idPrefix={idPrefix} |
| 161 | + dialogValues={this.state} |
| 162 | + validationErrors={this.state.validationErrors} |
| 163 | + onValueChanged={this.onValueChanged} /> |
| 164 | + </Form> |
| 165 | + ); |
| 166 | + |
| 167 | + return ( |
| 168 | + <Modal position="top" variant={ModalVariant.medium} id={`${idPrefix}-dialog`} isOpen onClose={Dialogs.close} className='vnc-edit' |
| 169 | + title={this.props.consoleDetail ? _("Edit VNC server settings") : _("Add VNC server")} |
| 170 | + footer={ |
| 171 | + <> |
| 172 | + <Button isDisabled={!!this.state.validationErrors} id={`${idPrefix}-save`} variant='primary' onClick={this.save}> |
| 173 | + {this.props.consoleDetail ? _("Save") : _("Add")} |
| 174 | + </Button> |
| 175 | + <Button id={`${idPrefix}-cancel`} variant='link' onClick={Dialogs.close}> |
| 176 | + {_("Cancel")} |
| 177 | + </Button> |
| 178 | + </> |
| 179 | + }> |
| 180 | + <> |
| 181 | + { vm.state === 'running' && !this.state.dialogError && <NeedsShutdownAlert idPrefix={idPrefix} /> } |
| 182 | + {this.state.dialogError && <ModalError dialogError={this.state.dialogError} dialogErrorDetail={this.state.dialogErrorDetail} />} |
| 183 | + {defaultBody} |
| 184 | + </> |
| 185 | + </Modal> |
| 186 | + ); |
| 187 | + } |
| 188 | +} |
| 189 | + |
| 190 | +AddEditVNCModal.propTypes = { |
| 191 | + idPrefix: PropTypes.string.isRequired, |
| 192 | + vm: PropTypes.object.isRequired, |
| 193 | + consoleDetail: PropTypes.object, |
| 194 | +}; |
0 commit comments