consoles: Allow control over scaling and resizing behavior

Author: mvollmer

src/components/vm/consoles/consoles.jsx

@@ -34,7 +34,7 @@ import './consoles.css';
 
 const _ = cockpit.gettext;
 
-export const ConsoleCard = ({ vm, config, type, setType, onAddErrorNotification, isExpanded }) => {
+export const ConsoleCard = ({ vm, config, type, setType, sizeMode, setSizeMode, onAddErrorNotification, isExpanded }) => {
     const serials = vm.displays && vm.displays.filter(display => display.type == 'pty');
     const inactive_serials = vm.inactiveXML.displays && vm.inactiveXML.displays.filter(display => display.type == 'pty');
     const vnc = vm.displays && vm.displays.find(display => display.type == 'vnc');
@@ -105,13 +105,15 @@ export const ConsoleCard = ({ vm, config, type, setType, onAddErrorNotification,
             if (vnc) {
                 body = (
                     <VncActive
-                           type="VncConsole"
-                           vm={vm}
-                           consoleDetail={vnc}
-                           inactiveConsoleDetail={inactive_vnc}
-                           spiceDetail={spice}
-                           onAddErrorNotification={onAddErrorNotification}
-                           isExpanded={isExpanded} />
+                        type="VncConsole"
+                        vm={vm}
+                        consoleDetail={vnc}
+                        inactiveConsoleDetail={inactive_vnc}
+                        spiceDetail={spice}
+                        sizeMode={sizeMode}
+                        setSizeMode={setSizeMode}
+                        onAddErrorNotification={onAddErrorNotification}
+                        isExpanded={isExpanded} />
                 );
             } else if (inactive_vnc) {
                 body = (

src/components/vm/consoles/vnc.jsx

@@ -29,14 +29,15 @@ import { HelperText, HelperTextItem } from "@patternfly/react-core/dist/esm/comp
 import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput";
 import { InputGroup } from "@patternfly/react-core/dist/esm/components/InputGroup";
 import { EyeIcon, EyeSlashIcon, PendingIcon, HelpIcon } from "@patternfly/react-icons";
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core/dist/esm/components/ToggleGroup';
 
 import {
     EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateBody, EmptyStateFooter, EmptyStateActions
 } from "@patternfly/react-core/dist/esm/components/EmptyState";
 import { Split, SplitItem } from "@patternfly/react-core/dist/esm/layouts/Split/index.js";
 
 import { KebabDropdown } from 'cockpit-components-dropdown.jsx';
-import { DropdownItem } from "@patternfly/react-core/dist/esm/components/Dropdown";
+import { DropdownItem, DropdownGroup } from "@patternfly/react-core/dist/esm/components/Dropdown";
 
 import { Modal, ModalVariant } from "@patternfly/react-core/dist/esm/components/Modal";
 import { ModalError } from 'cockpit-components-inline-notification.jsx';
@@ -189,7 +190,11 @@ const VncEditModal = ({ vm, inactive_vnc }) => {
     );
 };
 
-const VncFooter = ({ vm, vnc, inactive_vnc, connected, onDisconnect, onAddErrorNotification }) => {
+const VncFooter = ({
+    vm, vnc, inactive_vnc, connected, onDisconnect,
+    isExpanded, sizeMode, setSizeMode,
+    onAddErrorNotification
+}) => {
     const Dialogs = useDialogs();
 
     const renderDropdownItem = keyName => {
@@ -261,6 +266,24 @@ const VncFooter = ({ vm, vnc, inactive_vnc, connected, onDisconnect, onAddErrorN
                         </Button>
                     </Popover>
                 </SplitItem>
+                { isExpanded &&
+                    <SplitItem>
+                        <ToggleGroup>
+                            <ToggleGroupItem
+                                text={_("No scaling or resizing")}
+                                isSelected={!sizeMode}
+                                onChange={() => setSizeMode(null)} />
+                            <ToggleGroupItem
+                                text={_("Local scaling")}
+                                isSelected={sizeMode == "local"}
+                                onChange={() => setSizeMode("local")} />
+                            <ToggleGroupItem
+                                text={_("Remote resizing")}
+                                isSelected={sizeMode == "remote"}
+                                onChange={() => setSizeMode("remote")} />
+                        </ToggleGroup>
+                    </SplitItem>
+                }
                 <SplitItem>
                     <KebabDropdown
                         toggleButtonId="vnc-actions"
@@ -344,7 +367,8 @@ export class VncActive extends React.Component {
 
     render() {
         const {
-            consoleDetail, inactiveConsoleDetail, vm, onAddErrorNotification, isExpanded
+            consoleDetail, inactiveConsoleDetail, vm, onAddErrorNotification, isExpanded,
+            sizeMode, setSizeMode,
         } = this.props;
         const { path, connected } = this.state;
 
@@ -363,12 +387,15 @@ export class VncActive extends React.Component {
 
         const footer = (
             <VncFooter
-                           vm={vm}
-                           vnc={consoleDetail}
-                           inactive_vnc={inactiveConsoleDetail}
-                           connected={connected}
-                           onDisconnect={() => this.setState({ connected: false })}
-                           onAddErrorNotification={onAddErrorNotification} />
+                vm={vm}
+                vnc={consoleDetail}
+                inactive_vnc={inactiveConsoleDetail}
+                connected={connected}
+                isExpanded={isExpanded}
+                sizeMode={sizeMode}
+                setSizeMode={setSizeMode}
+                onDisconnect={() => this.setState({ connected: false })}
+                onAddErrorNotification={onAddErrorNotification} />
         );
 
         return (
@@ -387,8 +414,8 @@ export class VncActive extends React.Component {
                           onSecurityFailure={this.onSecurityFailure}
                           textConnecting={_("Connecting")}
                           consoleContainerId={isExpanded ? "vnc-display-container-expanded" : "vnc-display-container-minimized"}
-                          resizeSession
-                          scaleViewport
+                          scaleViewport={!isExpanded || sizeMode == "local"}
+                          resizeSession={!!isExpanded && sizeMode == "remote"}
                     />
                     : <div className="pf-v5-c-console__vnc">
                         <EmptyState>

src/components/vm/vmDetailsPage.jsx

@@ -64,6 +64,7 @@ export const VmDetailsPage = ({
     }, []);
 
     const [consoleType, setConsoleType] = useState(null);
+    const [consoleSizeMode, setConsoleSizeMode] = useState(null);
 
     const vmActionsPageSection = (
         <PageSection className="actions-pagesection" variant={PageSectionVariants.light} isWidthLimited>
@@ -95,6 +96,8 @@ export const VmDetailsPage = ({
                         config={config}
                         type={consoleType}
                         setType={setConsoleType}
+                        sizeMode={consoleSizeMode}
+                        setSizeMode={setConsoleSizeMode}
                         onAddErrorNotification={onAddErrorNotification}
                         isExpanded />
                 </Page>
@@ -128,6 +131,8 @@ export const VmDetailsPage = ({
                       config={config}
                       type={consoleType}
                       setType={setConsoleType}
+                      sizeMode={consoleSizeMode}
+                      setSizeMode={setConsoleSizeMode}
                       onAddErrorNotification={onAddErrorNotification} />
         },
         {