Improve volume list performance (#62)

* Improve volume list performance * Fix test * Refresh table results when actions complete * Replace LinearProgress with Skeleton * Fix runtime error when fetching volumes * Fix labels in CI * Do not reload table when cloning a volume * Do not reload table when deleting a volume * Fix save_test.go * Reload table when importing into a new volume
docker · Sep 15, 2022 · ffdd808 · ffdd808
1 parent 73324b9
commit ffdd808
Show file tree

Hide file tree

Showing 13 changed files with 264 additions and 126 deletions.
diff --git a/.github/workflows/build-scan-push.yaml b/.github/workflows/build-scan-push.yaml
@@ -116,7 +116,13 @@ jobs:
             type=ref,event=branch
             type=ref,event=tag
             type=semver,pattern={{version}}
-
+          # The action will generate its own OCI labels that are not suitable for the Marketplace.
+          # We have to override them with the same values as the ones defined in the Dockerfile.
+          # https://github.com/docker/metadata-action#overwrite-labels
+          labels: |
+            org.opencontainers.image.title=Volumes Backup & Share
+            org.opencontainers.image.description=Back up, clone, restore, and share Docker volumes effortlessly.
+            org.opencontainers.image.vendor=Docker Inc.
       - name: Docker Build and Push to Docker Hub
         if: ${{ !github.event.pull_request.head.repo.fork }}
         uses: docker/build-push-action@v2

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -15,6 +15,7 @@ import {
   CircularProgress,
   Grid,
   LinearProgress,
+  Skeleton,
   Stack,
   Tooltip,
   Typography,
@@ -91,6 +92,9 @@ export function App() {
 
   const [actionsInProgress, setActionsInProgress] = React.useState({});
 
+  const [recalculateVolumeSize, setRecalculateVolumeSize] =
+    React.useState<string>(null);
+
   const columns = [
     { field: "volumeDriver", headerName: "Driver", hide: true },
     {
@@ -103,6 +107,14 @@ export function App() {
       headerName: "Containers",
       flex: 1,
       renderCell: (params) => {
+        if (isVolumesSizeLoading) {
+          return (
+            <Box sx={{ width: "100%" }}>
+              <Skeleton animation="wave" />
+            </Box>
+          );
+        }
+
         if (params.row.volumeContainers) {
           return (
             <Box display="flex" flexDirection="column">
@@ -119,10 +131,13 @@ export function App() {
       field: "volumeSize",
       headerName: "Size",
       renderCell: (params) => {
-        if (volumesSizeLoadingMap[params.row.volumeName]) {
+        if (
+          isVolumesSizeLoading ||
+          volumesSizeLoadingMap[params.row.volumeName]
+        ) {
           return (
             <Box sx={{ width: "100%" }}>
-              <LinearProgress />
+              <Skeleton animation="wave" />
             </Box>
           );
         }
@@ -290,31 +305,13 @@ export function App() {
     }
   };
 
-  const { data: rows, isLoading, listVolumes, setData } = useGetVolumes();
-
-  useEffect(() => {
-    const volumeEvents = async () => {
-      console.log("listening to volume events...");
-      await ddClient.docker.cli.exec(
-        "events",
-        ["--format", `"{{ json . }}"`, "--filter", "type=volume"],
-        {
-          stream: {
-            onOutput() {
-              listVolumes();
-            },
-            onClose(exitCode) {
-              console.log("onClose with exit code " + exitCode);
-            },
-            splitOutputLines: true,
-          },
-        }
-      );
-    };
-
-    volumeEvents();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const {
+    data: rows,
+    listVolumes,
+    isLoading,
+    isVolumesSizeLoading,
+    setData,
+  } = useGetVolumes();
 
   const getActionsInProgress = async () => {
     ddClient.extension.vm.service
@@ -396,45 +393,83 @@ export function App() {
       });
   };
 
-  const handleExportDialogClose = (actionSuccessfullyCompleted: boolean) => {
+  const handleExportDialogClose = () => {
     setOpenExportDialog(false);
     context.actions.setVolume(null);
-    if (actionSuccessfullyCompleted) {
-      listVolumes();
-    }
   };
 
-  const handleImportIntoNewDialogClose = (
-    actionSuccessfullyCompleted: boolean
-  ) => {
+  const handleImportIntoNewDialogClose = () => {
     setOpenImportIntoNewDialog(false);
     context.actions.setVolume(null);
+  };
+
+  const handleImportIntoNewDialogCompletion = (
+    actionSuccessfullyCompleted: boolean,
+    selectedVolumeName: string
+  ) => {
     if (actionSuccessfullyCompleted) {
-      if (context.store.volume)
+      if (selectedVolumeName && context.store.volume) {
+        // the import is performed on an existing volume
         calculateVolumeSize(context.store.volume.volumeName);
+      } else {
+        // the import is performed on a new volume, so we fetch all volumes to populate the table
+        listVolumes();
+      }
     }
   };
 
-  const handleCloneDialogClose = (actionSuccessfullyCompleted: boolean) => {
+  const handleCloneDialogClose = () => {
     setOpenCloneDialog(false);
     context.actions.setVolume(null);
+  };
+
+  const handleCloneDialogOnCompletion = (
+    clonedVolumeName: string,
+    actionSuccessfullyCompleted: boolean
+  ) => {
     if (actionSuccessfullyCompleted) {
-      listVolumes();
+      const rowsCopy = rows.slice();
+      rowsCopy.push({
+        id: rows.length,
+        volumeName: clonedVolumeName,
+        volumeDriver: "local",
+      });
+
+      setData(rowsCopy);
+      setRecalculateVolumeSize(clonedVolumeName);
     }
   };
 
+  useEffect(() => {
+    if (!recalculateVolumeSize) {
+      return;
+    }
+    calculateVolumeSize(recalculateVolumeSize);
+  }, [recalculateVolumeSize]);
+
   const handleTransferDialogClose = () => {
     setOpenTransferDialog(false);
     context.actions.setVolume(null);
   };
 
-  const handleDeleteForeverDialogClose = (
-    actionSuccessfullyCompleted: boolean
-  ) => {
+  const handleDeleteForeverDialogClose = () => {
     setOpenDeleteForeverDialog(false);
     context.actions.setVolume(null);
-    if (actionSuccessfullyCompleted) {
-      listVolumes();
+  };
+
+  const handleDeleteForeverDialogCompletion = (
+    actionSuccessfullyCompleted: boolean
+  ) => {
+    if (actionSuccessfullyCompleted && context.store.volume) {
+      const rowsCopy = rows.slice();
+      const index = rowsCopy.findIndex(
+        (element) => element.volumeName === context.store.volume.volumeName
+      );
+      if (index > -1) {
+        rowsCopy.splice(index, 1);
+      }
+
+      setData(rowsCopy);
     }
   };
 
@@ -528,13 +563,15 @@ export function App() {
               volumes={rows}
               open={openImportIntoNewDialog}
               onClose={handleImportIntoNewDialogClose}
+              onCompletion={handleImportIntoNewDialogCompletion}
             />
           )}
 
           {openCloneDialog && (
             <CloneDialog
               open={openCloneDialog}
               onClose={handleCloneDialogClose}
+              onCompletion={handleCloneDialogOnCompletion}
             />
           )}
 
@@ -548,9 +585,8 @@ export function App() {
           {openDeleteForeverDialog && (
             <DeleteForeverDialog
               open={openDeleteForeverDialog}
-              onClose={(e) => {
-                handleDeleteForeverDialogClose(e);
-              }}
+              onClose={handleDeleteForeverDialogClose}
+              onCompletion={handleDeleteForeverDialogCompletion}
             />
           )}
         </Grid>

diff --git a/ui/src/components/CloneDialog.tsx b/ui/src/components/CloneDialog.tsx
@@ -15,7 +15,8 @@ const ddClient = createDockerDesktopClient();
 
 interface Props {
   open: boolean;
-  onClose(v?: boolean): void;
+  onClose(): void;
+  onCompletion(clonedVolumeName: string, v?: boolean): void;
 }
 
 export default function CloneDialog({ ...props }: Props) {
@@ -44,13 +45,16 @@ export default function CloneDialog({ ...props }: Props) {
             },
           ]
         );
+        props.onCompletion(volumeName, true);
       })
       .catch((error) => {
         sendNotification.error(
           `Failed to clone volume ${context.store.volume.volumeName} to destination volume ${volumeName}: ${error.stderr} Exit code: ${error.code}`
         );
+        props.onCompletion(volumeName, false);
       });
-    props.onClose(true);
+
+    props.onClose();
   };
 
   return (
@@ -89,7 +93,7 @@ export default function CloneDialog({ ...props }: Props) {
           variant="outlined"
           onClick={() => {
             track({ action: "CloneVolumeCancel" });
-            props.onClose(false);
+            props.onClose();
           }}
         >
           Cancel

diff --git a/ui/src/components/DeleteForeverDialog.tsx b/ui/src/components/DeleteForeverDialog.tsx
@@ -15,7 +15,8 @@ const ddClient = createDockerDesktopClient();
 
 interface Props {
   open: boolean;
-  onClose(v?: boolean): void;
+  onClose(): void;
+  onCompletion(v?: boolean): void;
 }
 
 export default function DeleteForeverDialog({ ...props }: Props) {
@@ -30,13 +31,15 @@ export default function DeleteForeverDialog({ ...props }: Props) {
         sendNotification.info(
           `Volume ${context.store.volume.volumeName} deleted`
         );
+        props.onCompletion(true);
       })
       .catch((error) => {
         sendNotification.error(
           `Failed to delete volume ${context.store.volume.volumeName}: ${error.stderr} Exit code: ${error.code}`
         );
+        props.onCompletion(false);
       });
-    props.onClose(true);
+    props.onClose();
   };
 
   return (
@@ -53,7 +56,7 @@ export default function DeleteForeverDialog({ ...props }: Props) {
           variant="outlined"
           onClick={() => {
             track({ action: "DeleteVolumeCancel" });
-            props.onClose(false);
+            props.onClose();
           }}
         >
           Cancel

diff --git a/ui/src/components/ImportDialog.tsx b/ui/src/components/ImportDialog.tsx
@@ -33,11 +33,17 @@ const ddClient = createDockerDesktopClient();
 
 interface Props {
   open: boolean;
-  onClose(v: boolean): void;
+  onClose(): void;
+  onCompletion(v: boolean, selectedVolumeName: string): void;
   volumes: IVolumeRow[];
 }
 
-export default function ImportDialog({ volumes, open, onClose }: Props) {
+export default function ImportDialog({
+  volumes,
+  open,
+  onClose,
+  onCompletion,
+}: Props) {
   const [fromRadioValue, setFromRadioValue] = useState<
     "file" | "image" | "pull-registry"
   >("file");
@@ -86,21 +92,39 @@ export default function ImportDialog({ volumes, open, onClose }: Props) {
       importVolume({
         volumeName: volumeId?.[0] || selectedVolumeName,
         path,
-      });
+      })
+        .then(() => {
+          onCompletion(true, selectedVolumeName);
+        })
+        .catch(() => {
+          onCompletion(false, selectedVolumeName);
+        });
     } else if (fromRadioValue === "image") {
       track({ ...metrics, importType: "fromLocalImage" });
       loadImage({
         volumeName: volumeId?.[0] || selectedVolumeName,
         imageName: image,
-      });
+      })
+        .then(() => {
+          onCompletion(true, selectedVolumeName);
+        })
+        .catch(() => {
+          onCompletion(false, selectedVolumeName);
+        });
     } else {
       track({ ...metrics, importType: "fromRegistry" });
       pullFromRegistry({
         imageName: registryImage,
         volumeId: volumeId?.[0],
-      });
+      })
+        .then(() => {
+          onCompletion(true, selectedVolumeName);
+        })
+        .catch(() => {
+          onCompletion(false, selectedVolumeName);
+        });
     }
-    onClose(true);
+    onClose();
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -245,7 +269,7 @@ export default function ImportDialog({ volumes, open, onClose }: Props) {
           onClick={() => {
             track({ action: "ImportVolumeCancel" });
             setPath("");
-            onClose(false);
+            onClose();
           }}
         >
           Cancel