Implement export

Dockerfile

@@ -24,3 +24,5 @@ LABEL org.opencontainers.image.title="vackup-docker-extension" \
 COPY metadata.json .
 COPY docker.svg .
 COPY --from=client-builder /ui/build ui
+
+RUN mkdir -p /vackup

ui/src/App.tsx

@@ -11,31 +11,60 @@ function useDockerDesktopClient() {
   return client;
 }
 
-const columns = [
-  { field: "id", headerName: "ID", width: 70, hide: true },
-  { field: "volumeDriver", headerName: "Driver", width: 70 },
-  { field: "volumeName", headerName: "Volume name", width: 260 },
-  { field: "volumeMountPoint", headerName: "Mount point", width: 260 },
-  { field: "volumeSize", headerName: "Size", width: 130 },
-  {
-    field: "export",
-    headerName: "Action",
-    width: 130,
-    renderCell: (params) => (
-      <Button
-        variant="contained"
-        onClick={() => console.log("exporting volume", params.row.volumeName)}
-      >
-        Export
-      </Button>
-    ),
-  },
-];
-
 export function App() {
   const [rows, setRows] = React.useState([]);
+  const [exportPath, setExportPath] = React.useState<string>("");
   const ddClient = useDockerDesktopClient();
 
+  const columns = [
+    { field: "id", headerName: "ID", width: 70, hide: true },
+    { field: "volumeDriver", headerName: "Driver", width: 70 },
+    { field: "volumeName", headerName: "Volume name", width: 260 },
+    { field: "volumeMountPoint", headerName: "Mount point", width: 260 },
+    { field: "volumeSize", headerName: "Size", width: 130 },
+    {
+      field: "exportPath",
+      headerName: "Export path",
+      width: 130,
+      renderCell: (params) => {
+        const onClick = (e) => {
+          e.stopPropagation(); // don't select this row after clicking
+          selectExportDirectory();
+        };
+
+        return (
+          <Button variant="contained" onClick={onClick}>
+            Choose path
+          </Button>
+        );
+      },
+    },
+    {
+      field: "export",
+      headerName: "Action",
+      width: 130,
+      renderCell: (params) => {
+        const onClick = (e) => {
+          e.stopPropagation(); // don't select this row after clicking
+
+          console.log("exporting volume", params.row.volumeName);
+          console.log(params);
+          exportVolume(params.row.volumeName);
+        };
+
+        return (
+          <Button
+            variant="contained"
+            onClick={onClick}
+            disabled={exportPath === ""}
+          >
+            Export
+          </Button>
+        );
+      },
+    },
+  ];
+
   useEffect(() => {
     const listVolumes = async () => {
       const result = await ddClient.docker.cli.exec("volume", [
@@ -43,7 +72,7 @@ export function App() {
         "--format",
         "'{{ json . }}'",
       ]);
-      console.log(result);
+
       if (result.stderr !== "") {
         ddClient.desktopUI.toast.error(result.stderr);
       } else {
@@ -65,6 +94,48 @@ export function App() {
     listVolumes();
   }, []); // run it once, only when component is mounted
 
+  const selectExportDirectory = () => {
+    ddClient.desktopUI.dialog
+      .showOpenDialog({ properties: ["openDirectory"] })
+      .then((result) => {
+        if (result.canceled) {
+          return;
+        }
+
+        console.log("export path", result.filePaths[0]);
+        setExportPath(result.filePaths[0]);
+      });
+  };
+
+  const exportVolume = async (volumeName: string) => {
+    console.log("export");
+
+    const filename = "backup.tar.gz";
+
+    const output = await ddClient.docker.cli.exec("run", [
+      "--rm",
+      `-v=${volumeName}:/vackup-volume `,
+      `-v=${exportPath}:/vackup `,
+      "busybox",
+      "tar",
+      "-zcvf",
+      `/vackup/${filename}`,
+      "/vackup-volume",
+    ]);
+    console.log(output);
+    if (output.stderr !== "") {
+      //"tar: removing leading '/' from member names\n"
+      if (!output.stderr.includes("tar: removing leading")) {
+        // this is an error we may want to display
+        ddClient.desktopUI.toast.error(output.stderr);
+        return;
+      }
+    }
+    ddClient.desktopUI.toast.success(
+      `Volume ${volumeName} exported to ${exportPath}`
+    );
+  };
+
   return (
     <>
       <Typography variant="h3">Vackup Extension</Typography>