snapshots: Improve memory path handling

 - We only ask for the directory of the memory snapshot, not for the
   full filename.

 - The default for the memory save location is taken from previous
   snapshots.

 - The default snapshot name does not include the VM name.

 - Available and needed storage space is shown in the dialog.

 - New directories can be created from the dialog.

 - The memory save file gets the extension ".save", to mirror what
   "virsh managedsave" is doing.

build.js

@@ -84,6 +84,7 @@ const context = await esbuild.context({
     loader: {
         ".js": "jsx",
         ".py": "text",
+        ".sh": "text",
     },
     metafile: !!args.metafile,
     minify: production,

package.json

@@ -45,6 +45,7 @@
     "stylelint-use-logical-spec": "5.0.1"
   },
   "dependencies": {
+    "@novnc/novnc": "1.4.0",
     "@patternfly/patternfly": "5.4.0",
     "@patternfly/react-console": "5.1.0",
     "@patternfly/react-core": "5.4.0",
@@ -55,12 +56,12 @@
     "@xterm/addon-canvas": "0.7.0",
     "@xterm/xterm": "5.5.0",
     "dequal": "2.0.3",
+    "path-browserify": "1.0.1",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "redux": "5.0.1",
     "redux-thunk": "3.1.0",
-    "throttle-debounce": "5.0.2",
-    "@novnc/novnc": "1.4.0"
+    "throttle-debounce": "5.0.2"
   }
 }

src/components/vm/snapshots/get-available-space.sh

@@ -0,0 +1,7 @@
+#! /bin/bash
+
+set -eu
+
+path=$1
+while ! test -e "$path"; do path=$(dirname "$path"); done
+stat -f -c '{ "unit": %S, "free": %a }' "$path"

src/components/vm/snapshots/vmSnapshotsCreateModal.jsx

@@ -18,6 +18,7 @@
  */
 import cockpit from "cockpit";
 import React from "react";
+import { dirname } from 'path-browserify';
 
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
 import { Form, FormGroup } from "@patternfly/react-core/dist/esm/components/Form";
@@ -33,6 +34,8 @@ import { snapshotCreate, snapshotGetAll } from "../../../libvirtApi/snapshot.js"
 import { getSortedBootOrderDevices, LIBVIRT_SYSTEM_CONNECTION } from "../../../helpers.js";
 import { domainGet } from '../../../libvirtApi/domain.js';
 
+import get_available_space_sh from "./get-available-space.sh";
+
 const _ = cockpit.gettext;
 
 let current_user = null;
@@ -64,41 +67,78 @@ const DescriptionRow = ({ onValueChanged, description }) => {
     );
 };
 
-function getDefaultMemoryPath(vm, snapName) {
-    // Choosing a default path where memory snapshot should be stored might be tricky. Ideally we want
-    // to store it in the same directory where the primary disk (the disk which is first booted) is stored
-    // If however no such disk can be found, we should fallback to libvirt's default /var/lib/libvirt
+function getDefaultMemoryLocation(vm) {
+    // If we find an existing external snapshot, use it's memory path
+    // as the default. Otherwise, try to find the primary disk and use
+    // it's location. If that fails as well, use a reasonable hard
+    // coded value.
+
+    for (const s of vm.snapshots.sort((a, b) => b.creationTime - a.creationTime)) {
+        if (s.memoryPath)
+            return dirname(s.memoryPath);
+    }
+
     const devices = getSortedBootOrderDevices(vm).filter(d => d.bootOrder &&
                                                               d.device.device === "disk" &&
                                                               d.device.type === "file" &&
                                                               d.device.source.file);
     if (devices.length > 0) {
-        const primaryDiskPath = devices[0].device.source.file;
-        const directory = primaryDiskPath.substring(0, primaryDiskPath.lastIndexOf("/") + 1);
-        return directory + snapName;
+        return dirname(devices[0].device.source.file);
     } else {
         if (vm.connectionName === LIBVIRT_SYSTEM_CONNECTION)
-            return "/var/lib/libvirt/memory/" + snapName;
+            return "/var/lib/libvirt/memory";
         else if (current_user)
-            return current_user.home + "/.local/share/libvirt/memory/" + snapName;
+            return current_user.home + "/.local/share/libvirt/memory";
     }
 
     return "";
 }
 
-const MemoryPathRow = ({ onValueChanged, memoryPath, validationError }) => {
+const MemoryLocationRow = ({ onValueChanged, memoryLocation, validationError, available, needed }) => {
+    let info = "";
+    let info_variant = "default";
+
+    if (needed) {
+        info = cockpit.format(_("Memory snapshot will use about $0."),
+                              cockpit.format_bytes(needed));
+    }
+    if (available) {
+        info = info + " " + cockpit.format(_("Total space available: $0."), cockpit.format_bytes(available));
+        if (needed && available * 0.9 < needed)
+            info_variant = "warning";
+    }
+
     return (
-        <FormGroup id="snapshot-create-dialog-memory-path" label={_("Memory file")}>
+        <FormGroup id="snapshot-create-dialog-memory-location" label={_("Memory state file location")}>
             <FileAutoComplete
-                onChange={value => onValueChanged("memoryPath", value)}
-                superuser="try"
+                onChange={value => onValueChanged("memoryLocation", value)}
+                value={memoryLocation}
                 isOptionCreatable
-                value={memoryPath} />
-            <FormHelper helperTextInvalid={validationError} />
+                onlyDirectories
+                placeholder={_("Path to directory")}
+                superuser="try" />
+            <FormHelper helperTextInvalid={validationError}
+                        helperText={info}
+                        variant={validationError ? "error" : info_variant} />
         </FormGroup>
     );
 };
 
+function get_available_space(path, superuser, callback) {
+    if (!path)
+        callback(null);
+
+    cockpit.script(get_available_space_sh, [path], { superuser })
+            .then(output => {
+                const info = JSON.parse(output);
+                callback(info.free * info.unit);
+            })
+            .catch(exc => {
+                // channel has already logged the error
+                callback(null);
+            });
+}
+
 export class CreateSnapshotModal extends React.Component {
     static contextType = DialogsContext;
 
@@ -107,11 +147,12 @@ export class CreateSnapshotModal extends React.Component {
         // cut off seconds, subseconds, and timezone
         const now = new Date().toISOString()
                 .replace(/:[^:]*$/, '');
-        const snapName = props.vm.name + '_' + now;
+        const snapName = now;
         this.state = {
             name: snapName,
             description: "",
-            memoryPath: getDefaultMemoryPath(props.vm, snapName),
+            memoryLocation: getDefaultMemoryLocation(props.vm),
+            available: null,
             inProgress: false,
         };
 
@@ -121,16 +162,27 @@ export class CreateSnapshotModal extends React.Component {
         this.onCreate = this.onCreate.bind(this);
     }
 
+    updateAvailableSpace(path) {
+        get_available_space(path, this.props.vm.connectionName === LIBVIRT_SYSTEM_CONNECTION,
+                            val => this.setState({ available: val }));
+    }
+
     onValueChanged(key, value) {
         this.setState({ [key]: value });
+        if (key == "memoryLocation") {
+            // We don't need to debounce this.  The "memoryLocation"
+            // state is not changed on each keypress, but only when
+            // the input is blurred.
+            this.updateAvailableSpace(value);
+        }
     }
 
     dialogErrorSet(text, detail) {
         this.setState({ dialogError: text, dialogErrorDetail: detail });
     }
 
     onValidate() {
-        const { name, memoryPath } = this.state;
+        const { name, memoryLocation } = this.state;
         const { vm, isExternal } = this.props;
         const validationError = {};
 
@@ -139,27 +191,37 @@ export class CreateSnapshotModal extends React.Component {
         else if (!name)
             validationError.name = _("Name can not be empty");
 
-        if (isExternal && vm.state === "running" && !memoryPath)
-            validationError.memory = _("Memory file can not be empty");
+        if (isExternal && vm.state === "running" && !memoryLocation)
+            validationError.memory = _("Memory save location can not be empty");
 
         return validationError;
     }
 
     onCreate() {
         const Dialogs = this.context;
         const { vm, isExternal } = this.props;
-        const { name, description, memoryPath } = this.state;
+        const { name, description, memoryLocation } = this.state;
         const validationError = this.onValidate();
 
         if (!Object.keys(validationError).length) {
             this.setState({ inProgress: true });
-            snapshotCreate({
-                vm,
-                name,
-                description,
-                isExternal,
-                memoryPath: isExternal && vm.state === "running" && memoryPath,
-            })
+            let mpath = null;
+            if (isExternal && vm.state === "running" && memoryLocation) {
+                mpath = memoryLocation;
+                if (mpath[mpath.length - 1] != "/")
+                    mpath = mpath + "/";
+                mpath = mpath + vm.name + "." + name + ".save";
+            }
+            const superuser = (vm.connectionName === LIBVIRT_SYSTEM_CONNECTION);
+            cockpit.spawn(["mkdir", "-p", memoryLocation], { superuser, err: "message" })
+                    .then(() =>
+                        snapshotCreate({
+                            vm,
+                            name,
+                            description,
+                            isExternal,
+                            memoryPath: mpath,
+                        }))
                     .then(() => {
                         // VM Snapshots do not trigger any events so we have to refresh them manually
                         snapshotGetAll({ connectionName: vm.connectionName, domainPath: vm.id });
@@ -175,19 +237,38 @@ export class CreateSnapshotModal extends React.Component {
         }
     }
 
+    componentDidMount() {
+        this.updateAvailableSpace(this.state.memoryLocation);
+    }
+
+    estimateMemorySnapshotSize(vm) {
+        /* According to experiments, the memory snapshot is smaller
+           than the amount of RAM used by the virtual machine.
+
+           RSS       File
+           ----------------
+           254 MB    145 MB
+           636 MB    492 MB
+           1.57 GB   1.4 GB
+        */
+        return (vm.rssMemory || vm.currentMemory) * 1024;
+    }
+
     render() {
         const Dialogs = this.context;
         const { idPrefix, isExternal, vm } = this.props;
-        const { name, description, memoryPath } = this.state;
+        const { name, description, memoryLocation, available } = this.state;
         const validationError = this.onValidate();
 
         const body = (
-            <Form onSubmit={e => e.preventDefault()} isHorizontal>
+            <Form onSubmit={e => e.preventDefault()}>
                 <NameRow name={name} validationError={validationError.name} onValueChanged={this.onValueChanged} />
                 <DescriptionRow description={description} onValueChanged={this.onValueChanged} />
                 {isExternal && vm.state === 'running' &&
-                    <MemoryPathRow memoryPath={memoryPath} onValueChanged={this.onValueChanged}
-                                   validationError={validationError.memory} />}
+                    <MemoryLocationRow memoryLocation={memoryLocation} onValueChanged={this.onValueChanged}
+                                       validationError={validationError.memory}
+                                       available={available}
+                                       needed={this.estimateMemorySnapshotSize(vm)} />}
             </Form>
         );
 

src/libvirt-xml-parse.js

@@ -216,14 +216,16 @@ export function parseDomainSnapshotDumpxml(snapshot) {
     const nameElem = getSingleOptionalElem(snapElem, 'name');
     const descElem = getSingleOptionalElem(snapElem, 'description');
     const parentElem = getSingleOptionalElem(snapElem, 'parent');
+    const memElem = getSingleOptionalElem(snapElem, 'memory');
 
     const name = nameElem?.childNodes[0].nodeValue;
     const description = descElem?.childNodes[0].nodeValue;
     const parentName = parentElem?.getElementsByTagName("name")[0].childNodes[0].nodeValue;
     const state = snapElem.getElementsByTagName("state")[0].childNodes[0].nodeValue;
     const creationTime = snapElem.getElementsByTagName("creationTime")[0].childNodes[0].nodeValue;
+    const memoryPath = memElem?.getAttribute("file");
 
-    return { name, description, state, creationTime, parentName };
+    return { name, description, state, creationTime, parentName, memoryPath };
 }
 
 export function parseDomainDumpxml(connectionName, domXml, objPath) {