fix(operations) use events stream for all long-running operations

WD-6846
canonical · Oct 25, 2023 · e1bbb19 · e1bbb19
1 parent ece5c7e
commit e1bbb19
Show file tree

Hide file tree

Showing 15 changed files with 271 additions and 250 deletions.
diff --git a/src/api/images.tsx b/src/api/images.tsx
@@ -1,4 +1,3 @@
-import { TIMEOUT_300, watchOperation } from "./operations";
 import { handleResponse } from "util/helpers";
 import { ImportImage, LxdImage } from "types/image";
 import { LxdApiResponse } from "types/apiResponse";
@@ -25,20 +24,23 @@ export const fetchImageList = (project: string): Promise<LxdImage[]> => {
   });
 };
 
-export const deleteImage = (image: LxdImage, project: string) => {
+export const deleteImage = (
+  image: LxdImage,
+  project: string,
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(`/1.0/images/${image.fingerprint}?project=${project}`, {
       method: "DELETE",
     })
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
 
-export const importImage = (remoteImage: ImportImage) => {
+export const importImage = (
+  remoteImage: ImportImage,
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch("/1.0/images", {
       method: "POST",
@@ -54,9 +56,7 @@ export const importImage = (remoteImage: ImportImage) => {
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation, TIMEOUT_300).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
diff --git a/src/api/instances.tsx b/src/api/instances.tsx
@@ -1,7 +1,10 @@
 import {
+  continueOrFinish,
   handleEtagResponse,
   handleResponse,
   handleTextResponse,
+  pushFailure,
+  pushSuccess,
 } from "util/helpers";
 import { LxdInstance, LxdInstanceAction } from "types/instance";
 import { LxdTerminal, TerminalConnectPayload } from "types/terminal";
@@ -152,7 +155,6 @@ export const updateInstanceBulkAction = (
   isForce: boolean,
   eventQueue: EventQueue,
 ): Promise<PromiseSettledResult<void>[]> => {
-  let remainingResults = actions.length;
   const results: PromiseSettledResult<void>[] = [];
   return new Promise((resolve) => {
     void Promise.allSettled(
@@ -161,24 +163,9 @@ export const updateInstanceBulkAction = (
           (operation) => {
             eventQueue.set(
               operation.metadata.id,
-              () => {
-                results.push({
-                  status: "fulfilled",
-                  value: undefined,
-                });
-              },
-              (msg) => {
-                results.push({
-                  status: "rejected",
-                  reason: msg,
-                });
-              },
-              () => {
-                remainingResults--;
-                if (remainingResults === 0) {
-                  resolve(results);
-                }
-              },
+              () => pushSuccess(results),
+              (msg) => pushFailure(results, msg),
+              () => continueOrFinish(results, actions.length, resolve),
             );
           },
         );
@@ -204,32 +191,16 @@ export const deleteInstanceBulk = (
   instances: LxdInstance[],
   eventQueue: EventQueue,
 ): Promise<PromiseSettledResult<void>[]> => {
-  let remainingResults = instances.length;
   const results: PromiseSettledResult<void>[] = [];
   return new Promise((resolve) => {
     void Promise.allSettled(
       instances.map(async (instance) => {
         return await deleteInstance(instance).then((operation) => {
           eventQueue.set(
             operation.metadata.id,
-            () => {
-              results.push({
-                status: "fulfilled",
-                value: undefined,
-              });
-            },
-            (msg) => {
-              results.push({
-                status: "rejected",
-                reason: msg,
-              });
-            },
-            () => {
-              remainingResults--;
-              if (remainingResults === 0) {
-                resolve(results);
-              }
-            },
+            () => pushSuccess(results),
+            (msg) => pushFailure(results, msg),
+            () => continueOrFinish(results, instances.length, resolve),
           );
         });
       }),

diff --git a/src/api/operations.tsx b/src/api/operations.tsx
@@ -1,44 +1,7 @@
 import { handleResponse } from "util/helpers";
-import {
-  LxdOperation,
-  LxdOperationList,
-  LxdOperationResponse,
-} from "types/operation";
+import { LxdOperation, LxdOperationList } from "types/operation";
 import { LxdApiResponse } from "types/apiResponse";
 
-export const TIMEOUT_300 = 300;
-export const TIMEOUT_120 = 120;
-export const TIMEOUT_60 = 60;
-export const TIMEOUT_10 = 10;
-
-export const watchOperation = (
-  operationUrl: string,
-  timeout = TIMEOUT_10,
-): Promise<LxdOperationResponse> => {
-  return new Promise((resolve, reject) => {
-    const operationParts = operationUrl.split("?");
-    const baseUrl = operationParts[0];
-    const queryString = operationParts.length === 1 ? "" : operationParts[1];
-    fetch(`${baseUrl}/wait?timeout=${timeout}&${queryString}`)
-      .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        if (data.metadata.status === "Success") {
-          return resolve(data);
-        }
-        if (data.metadata.status === "Running") {
-          throw Error(
-            "Timeout while waiting for the operation to succeed. Watched operation continues in the background.",
-          );
-        } else if (data.metadata.status === "Cancelled") {
-          throw new Error("Cancelled");
-        } else {
-          throw Error(data.metadata.err);
-        }
-      })
-      .catch(reject);
-  });
-};
-
 const sortOperationList = (operations: LxdOperationList) => {
   const newestFirst = (a: LxdOperation, b: LxdOperation) => {
     return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();

diff --git a/src/api/projects.tsx b/src/api/projects.tsx
@@ -2,7 +2,6 @@ import { handleEtagResponse, handleResponse } from "util/helpers";
 import { LxdProject } from "types/project";
 import { LxdApiResponse } from "types/apiResponse";
 import { LxdOperationResponse } from "types/operation";
-import { TIMEOUT_60, watchOperation } from "api/operations";
 
 export const fetchProjects = (recursion: number): Promise<LxdProject[]> => {
   return new Promise((resolve, reject) => {
@@ -49,7 +48,10 @@ export const updateProject = (project: LxdProject) => {
   });
 };
 
-export const renameProject = (oldName: string, newName: string) => {
+export const renameProject = (
+  oldName: string,
+  newName: string,
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(`/1.0/projects/${oldName}`, {
       method: "POST",
@@ -58,9 +60,7 @@ export const renameProject = (oldName: string, newName: string) => {
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation, TIMEOUT_60).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };

diff --git a/src/api/snapshots.tsx b/src/api/snapshots.tsx
@@ -1,14 +1,19 @@
-import { TIMEOUT_120, TIMEOUT_60, watchOperation } from "./operations";
-import { handleResponse } from "util/helpers";
+import {
+  continueOrFinish,
+  handleResponse,
+  pushFailure,
+  pushSuccess,
+} from "util/helpers";
 import { LxdInstance, LxdSnapshot } from "types/instance";
 import { LxdOperationResponse } from "types/operation";
+import { EventQueue } from "context/eventQueue";
 
 export const createSnapshot = (
   instance: LxdInstance,
   name: string,
   expiresAt: string | null,
   stateful: boolean,
-) => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(
       `/1.0/instances/${instance.name}/snapshots?project=${instance.project}`,
@@ -22,17 +27,15 @@ export const createSnapshot = (
       },
     )
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation, TIMEOUT_60).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
 
 export const deleteSnapshot = (
   instance: LxdInstance,
   snapshot: { name: string },
-) => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(
       `/1.0/instances/${instance.name}/snapshots/${snapshot.name}?project=${instance.project}`,
@@ -41,33 +44,38 @@ export const deleteSnapshot = (
       },
     )
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation, TIMEOUT_120).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
 
 export const deleteSnapshotBulk = (
   instance: LxdInstance,
   snapshotNames: string[],
-) => {
-  return new Promise((resolve, reject) => {
-    Promise.all(
-      snapshotNames.map(
-        async (name) => await deleteSnapshot(instance, { name }),
-      ),
-    )
-      .then(resolve)
-      .catch(reject);
+  eventQueue: EventQueue,
+): Promise<PromiseSettledResult<void>[]> => {
+  const results: PromiseSettledResult<void>[] = [];
+  return new Promise((resolve) => {
+    void Promise.allSettled(
+      snapshotNames.map(async (name) => {
+        return await deleteSnapshot(instance, { name }).then((operation) => {
+          eventQueue.set(
+            operation.metadata.id,
+            () => pushSuccess(results),
+            (msg) => pushFailure(results, msg),
+            () => continueOrFinish(results, snapshotNames.length, resolve),
+          );
+        });
+      }),
+    );
   });
 };
 
 export const restoreSnapshot = (
   instance: LxdInstance,
   snapshot: LxdSnapshot,
   restoreState: boolean,
-) => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(`/1.0/instances/${instance.name}?project=${instance.project}`, {
       method: "PUT",
@@ -77,9 +85,7 @@ export const restoreSnapshot = (
       }),
     })
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
@@ -88,7 +94,7 @@ export const renameSnapshot = (
   instance: LxdInstance,
   snapshot: LxdSnapshot,
   newName: string,
-) => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(
       `/1.0/instances/${instance.name}/snapshots/${snapshot.name}?project=${instance.project}`,
@@ -100,9 +106,7 @@ export const renameSnapshot = (
       },
     )
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
@@ -111,7 +115,7 @@ export const updateSnapshot = (
   instance: LxdInstance,
   snapshot: LxdSnapshot,
   expiresAt: string,
-) => {
+): Promise<LxdOperationResponse> => {
   return new Promise((resolve, reject) => {
     fetch(
       `/1.0/instances/${instance.name}/snapshots/${snapshot.name}?project=${instance.project}`,
@@ -123,9 +127,7 @@ export const updateSnapshot = (
       },
     )
       .then(handleResponse)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };
diff --git a/src/api/storage-pools.tsx b/src/api/storage-pools.tsx
@@ -8,7 +8,6 @@ import {
 } from "types/storage";
 import { LxdApiResponse } from "types/apiResponse";
 import { LxdOperationResponse } from "types/operation";
-import { TIMEOUT_300, watchOperation } from "api/operations";
 import axios, { AxiosResponse } from "axios";
 
 export const fetchStoragePool = (
@@ -199,9 +198,7 @@ export const createIsoStorageVolume = (
         },
       )
       .then((response: AxiosResponse<LxdOperationResponse>) => response.data)
-      .then((data: LxdOperationResponse) => {
-        watchOperation(data.operation, TIMEOUT_300).then(resolve).catch(reject);
-      })
+      .then(resolve)
       .catch(reject);
   });
 };