Merge branch 'main' into feature/add-bugsnag

docker · Sep 15, 2022 · adbb96e · adbb96e
2 parents 288ef1b + ffdd808
commit adbb96e
Show file tree

Hide file tree

Showing 17 changed files with 296 additions and 133 deletions.
diff --git a/client/go.mod b/client/go.mod
@@ -37,7 +37,7 @@ require (
 	github.com/prometheus/procfs v0.8.0 // indirect
 	github.com/russross/blackfriday/v2 v2.0.1 // indirect
 	github.com/shurcooL/sanitized_anchor_name v1.0.0 // indirect
-	golang.org/x/net v0.0.0-20211209124913-491a49abca63 // indirect
+	golang.org/x/net v0.0.0-20220906165146-f3363e06e74c // indirect
 	golang.org/x/sys v0.0.0-20220804214406-8e32c043e418 // indirect
 	golang.org/x/text v0.3.7 // indirect
 	google.golang.org/genproto v0.0.0-20201110150050-8816d57aaa9a // indirect

diff --git a/client/go.sum b/client/go.sum
@@ -746,6 +746,8 @@ golang.org/x/net v0.0.0-20210405180319-a5a99cb37ef4/go.mod h1:p54w0d4576C0XHj96b
 golang.org/x/net v0.0.0-20210525063256-abc453219eb5/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/net v0.0.0-20211209124913-491a49abca63 h1:iocB37TsdFuN6IBRZ+ry36wrkoV51/tl5vOWqkcPGvY=
 golang.org/x/net v0.0.0-20211209124913-491a49abca63/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20220906165146-f3363e06e74c h1:yKufUcDwucU5urd+50/Opbt4AYpqthk7wHpHok8f1lo=
+golang.org/x/net v0.0.0-20220906165146-f3363e06e74c/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=

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