Add "view, edit, and add Video devices" to detailspage

src/components/common/needsShutdown.jsx

@@ -81,6 +81,10 @@ export function needsShutdownSpice(vm) {
     return vm.hasSpice !== vm.inactiveXML.hasSpice;
 }
 
+export function needsShutdownVideo(vm, video) {
+    return false;
+}
+
 export function getDevicesRequiringShutdown(vm) {
     if (!vm.persistent)
         return [];

src/components/vm/videos/video.css

@@ -0,0 +1,8 @@
+.mac-grid {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+}
+
+.nic-add-mac-setting-manual {
+  margin-block-start: var(--pf-v5-global--spacer--md);
+}

src/components/vm/videos/videoAdd.jsx

@@ -0,0 +1,130 @@
+/*
+ * 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 } from "@patternfly/react-core/dist/esm/components/Button";
+// import { Checkbox } from "@patternfly/react-core/dist/esm/components/Checkbox";
+import { Form } from "@patternfly/react-core/dist/esm/components/Form";
+import { Modal } from "@patternfly/react-core/dist/esm/components/Modal";
+import { DialogsContext } from 'dialogs.jsx';
+
+import { ModalError } from 'cockpit-components-inline-notification.jsx';
+import { VideoTypeRow } from './videoBody.jsx';
+import { domainAttachVideo, domainGet } from '../../../libvirtApi/domain.js';
+
+import './video.css';
+
+const _ = cockpit.gettext;
+
+export class AddVIDEO extends React.Component {
+    static contextType = DialogsContext;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dialogError: undefined,
+            videoType: "vnc",
+            password: "",
+            permanent: false,
+            addVideoInProgress: 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({ addVideoInProgress: true });
+        const videoParams = {
+            connectionName: vm.connectionName,
+            vmName: vm.name,
+            videoType: this.state.videoType,
+            permanent: this.state.permanent,
+            password: this.state.password || "",
+            hotplug: vm.state === "running",
+        };
+
+        domainAttachVideo(videoParams)
+                .then(() => {
+                    domainGet({ connectionName: vm.connectionName, id: vm.id });
+                    Dialogs.close();
+                })
+                .catch(exc => this.dialogErrorSet(_("Video device settings could not be saved"), exc.message))
+                .finally(() => this.setState({ addVideoInProgress: false }));
+    }
+
+    render() {
+        const Dialogs = this.context;
+        const { idPrefix, vm } = this.props;
+
+        const defaultBody = (
+            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+                <VideoTypeRow idPrefix={idPrefix}
+                                 dialogValues={this.state}
+                                 onValueChanged={this.onValueChanged}
+                                 osTypeArch={vm.arch}
+                                 osTypeMachine={vm.emulatedMachine} />
+            </Form>
+        );
+
+        return (
+            <Modal position="top" variant="medium" id={`${idPrefix}-dialog`} isOpen onClose={Dialogs.close} className='video-add'
+                title={_("Add virtual video device")}
+                footer={
+                    <>
+                        <Button isLoading={this.state.addVideoInProgress}
+                                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>
+        );
+    }
+}
+
+AddVIDEO.propTypes = {
+    idPrefix: PropTypes.string.isRequired,
+    vm: PropTypes.object.isRequired,
+};
+
+export default AddVIDEO;

src/components/vm/videos/videoBody.jsx

@@ -0,0 +1,77 @@
+/*
+ * 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 { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { Flex } from "@patternfly/react-core/dist/esm/layouts/Flex";
+import { FormGroup } from "@patternfly/react-core/dist/esm/components/Form";
+import { FormSelect, FormSelectOption } from "@patternfly/react-core/dist/esm/components/FormSelect";
+import { Popover, PopoverPosition } from "@patternfly/react-core/dist/esm/components/Popover";
+import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/esm/components/Text";
+import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput";
+import { ExternalLinkSquareAltIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
+
+
+import cockpit from 'cockpit';
+
+import './video.css';
+
+const _ = cockpit.gettext;
+
+export const VideoTypeRow = ({ idPrefix, onValueChanged, dialogValues, osTypeArch, osTypeMachine }) => {
+    const availableTypes = [
+        { name: 'vnc', desc: 'vnc' },
+        { name: 'spice', desc: 'spice' }];
+    const defaultType = dialogValues.videoType;
+
+    return (
+        <>
+            <FormGroup fieldId={`${idPrefix}-type`} label={_("Type")}>
+                <FormSelect id={`${idPrefix}-type`}
+                            onChange={(_event, value) => onValueChanged('videoType', value)}
+                            data-value={defaultType}
+                            value={defaultType}>
+                    {availableTypes
+                            .map(videoType => {
+                                return (
+                                    <FormSelectOption value={videoType.name} key={videoType.name}
+                                                      label={videoType.name} />
+                                );
+                            })
+                    }
+                </FormSelect>
+            </FormGroup>
+            <FormGroup fieldId={`${idPrefix}-password`} label={_("Password")}>
+                <TextInput id={`${idPrefix}-password`}
+                           value={dialogValues.videoPassword}
+                           type="password"
+                           onChange={(event) => onValueChanged('videoPassword', event.target.value)} />
+            </FormGroup>
+        </>
+    );
+};
+
+VideoTypeRow.propTypes = {
+    idPrefix: PropTypes.string.isRequired,
+    osTypeArch: PropTypes.string.isRequired,
+    osTypeMachine: PropTypes.string.isRequired,
+    onValueChanged: PropTypes.func.isRequired,
+    dialogValues: PropTypes.object.isRequired,
+};

src/components/vm/videos/videoEdit.jsx

@@ -0,0 +1,125 @@
+/*
+ * 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 } from "@patternfly/react-core/dist/esm/components/Button";
+import { Form } from "@patternfly/react-core/dist/esm/components/Form";
+import { Modal } from "@patternfly/react-core/dist/esm/components/Modal";
+
+import { ModalError } from 'cockpit-components-inline-notification.jsx';
+import { DialogsContext } from 'dialogs.jsx';
+import { VideoTypeAndSourceRow, VideoTypeRow } from './videoBody.jsx';
+import { domainChangeVideoSettings, domainGet } from '../../../libvirtApi/domain.js';
+
+const _ = cockpit.gettext;
+
+export class EditVIDEOModal extends React.Component {
+    static contextType = DialogsContext;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            dialogError: undefined,
+            videoType: props.video.type,
+            saveDisabled: false,
+            videoPassword: props.video.password || "",
+        };
+
+        this.save = this.save.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 });
+    }
+
+    save() {
+        const Dialogs = this.context;
+        const { vm, video } = this.props;
+
+        const videoParams = {
+            vmName: vm.name,
+            connectionName: vm.connectionName,
+            persistent: vm.persistent,
+            videoType: this.state.videoType,
+            password: this.state.videoPassword || "",
+            hotplug: vm.state === "running",
+        };
+
+        domainChangeVideoSettings(videoParams)
+                .then(() => {
+                    domainGet({ connectionName: vm.connectionName, id: vm.id });
+                    Dialogs.close();
+                })
+                .catch((exc) => {
+                    this.dialogErrorSet(_("Video device settings could not be saved"), exc.message);
+                });
+    }
+
+    render() {
+        const Dialogs = this.context;
+        const { idPrefix, vm, video, availableSources } = this.props;
+
+        const defaultBody = (
+            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+                <VideoTypeRow idPrefix={idPrefix}
+                                 dialogValues={this.state}
+                                 onValueChanged={this.onValueChanged}
+                                 osTypeArch={vm.arch}
+                                 osTypeMachine={vm.emulatedMachine} />
+            </Form>
+        );
+        const showWarning = () => {
+        };
+
+        return (
+            <Modal position="top" variant="medium" id={`${idPrefix}-modal-window`} isOpen onClose={Dialogs.close} className='video-edit'
+                   title={cockpit.format(_("$0 virtual video device settings"), video)}
+                   footer={
+                       <>
+                           <Button isDisabled={this.state.saveDisabled} id={`${idPrefix}-save`} variant='primary' onClick={this.save}>
+                               {_("Save")}
+                           </Button>
+                           <Button id={`${idPrefix}-cancel`} variant='link' onClick={Dialogs.close}>
+                               {_("Cancel")}
+                           </Button>
+                       </>
+                   }>
+                <>
+                    { showWarning() }
+                    {this.state.dialogError && <ModalError dialogError={this.state.dialogError} dialogErrorDetail={this.state.dialogErrorDetail} />}
+                    {defaultBody}
+                </>
+            </Modal>
+        );
+    }
+}
+EditVIDEOModal.propTypes = {
+    availableSources: PropTypes.object.isRequired,
+    idPrefix: PropTypes.string.isRequired,
+    vm: PropTypes.object.isRequired,
+};