fix(instance) show error message, when api updates fail

Signed-off-by: David Edler <[email protected]>
canonical · Mar 6, 2024 · 65dea4a · 65dea4a
1 parent 2c73fee
commit 65dea4a
Show file tree

Hide file tree

Showing 21 changed files with 530 additions and 395 deletions.
diff --git a/src/api/images.tsx b/src/api/images.tsx
@@ -54,14 +54,19 @@ export const deleteImageBulk = (
     void Promise.allSettled(
       fingerprints.map((name) => {
         const image = { fingerprint: name } as LxdImage;
-        return deleteImage(image, project).then((operation) => {
-          eventQueue.set(
-            operation.metadata.id,
-            () => pushSuccess(results),
-            (msg) => pushFailure(results, msg),
-            () => continueOrFinish(results, fingerprints.length, resolve),
-          );
-        });
+        return deleteImage(image, project)
+          .then((operation) => {
+            eventQueue.set(
+              operation.metadata.id,
+              () => pushSuccess(results),
+              (msg) => pushFailure(results, msg),
+              () => continueOrFinish(results, fingerprints.length, resolve),
+            );
+          })
+          .catch((e) => {
+            pushFailure(results, e instanceof Error ? e.message : "");
+            continueOrFinish(results, fingerprints.length, resolve);
+          });
       }),
     );
   });

diff --git a/src/api/instance-snapshots.tsx b/src/api/instance-snapshots.tsx
@@ -58,16 +58,19 @@ export const deleteInstanceSnapshotBulk = (
   return new Promise((resolve) => {
     void Promise.allSettled(
       snapshotNames.map(async (name) => {
-        return await deleteInstanceSnapshot(instance, { name }).then(
-          (operation) => {
+        return await deleteInstanceSnapshot(instance, { name })
+          .then((operation) => {
             eventQueue.set(
               operation.metadata.id,
               () => pushSuccess(results),
               (msg) => pushFailure(results, msg),
               () => continueOrFinish(results, snapshotNames.length, resolve),
             );
-          },
-        );
+          })
+          .catch((e) => {
+            pushFailure(results, e instanceof Error ? e.message : "");
+            continueOrFinish(results, snapshotNames.length, resolve);
+          });
       }),
     );
   });

diff --git a/src/api/instances.tsx b/src/api/instances.tsx
@@ -171,16 +171,19 @@ export const updateInstanceBulkAction = (
   return new Promise((resolve) => {
     void Promise.allSettled(
       actions.map(async ({ name, project, action }) => {
-        return await putInstanceAction(name, project, action, isForce).then(
-          (operation) => {
+        return await putInstanceAction(name, project, action, isForce)
+          .then((operation) => {
             eventQueue.set(
               operation.metadata.id,
               () => pushSuccess(results),
               (msg) => pushFailure(results, msg),
               () => continueOrFinish(results, actions.length, resolve),
             );
-          },
-        );
+          })
+          .catch((e) => {
+            pushFailure(results, e instanceof Error ? e.message : "");
+            continueOrFinish(results, actions.length, resolve);
+          });
       }),
     );
   });
@@ -207,14 +210,19 @@ export const deleteInstanceBulk = (
   return new Promise((resolve) => {
     void Promise.allSettled(
       instances.map(async (instance) => {
-        return await deleteInstance(instance).then((operation) => {
-          eventQueue.set(
-            operation.metadata.id,
-            () => pushSuccess(results),
-            (msg) => pushFailure(results, msg),
-            () => continueOrFinish(results, instances.length, resolve),
-          );
-        });
+        return await deleteInstance(instance)
+          .then((operation) => {
+            eventQueue.set(
+              operation.metadata.id,
+              () => pushSuccess(results),
+              (msg) => pushFailure(results, msg),
+              () => continueOrFinish(results, instances.length, resolve),
+            );
+          })
+          .catch((e) => {
+            pushFailure(results, e instanceof Error ? e.message : "");
+            continueOrFinish(results, instances.length, resolve);
+          });
       }),
     );
   });

diff --git a/src/api/volume-snapshots.tsx b/src/api/volume-snapshots.tsx
@@ -59,16 +59,19 @@ export const deleteVolumeSnapshotBulk = (
   return new Promise((resolve) => {
     void Promise.allSettled(
       snapshotNames.map(async (name) => {
-        return await deleteVolumeSnapshot(volume, { name }).then(
-          (operation) => {
+        return await deleteVolumeSnapshot(volume, { name })
+          .then((operation) => {
             eventQueue.set(
               operation.metadata.id,
               () => pushSuccess(results),
               (msg) => pushFailure(results, msg),
               () => continueOrFinish(results, snapshotNames.length, resolve),
             );
-          },
-        );
+          })
+          .catch((e) => {
+            pushFailure(results, e instanceof Error ? e.message : "");
+            continueOrFinish(results, snapshotNames.length, resolve);
+          });
       }),
     );
   });

diff --git a/src/pages/images/actions/DeleteImageBtn.tsx b/src/pages/images/actions/DeleteImageBtn.tsx
@@ -20,26 +20,36 @@ const DeleteImageBtn: FC<Props> = ({ image, project }) => {
 
   const handleDelete = () => {
     setLoading(true);
-    void deleteImage(image, project).then((operation) =>
-      eventQueue.set(
-        operation.metadata.id,
-        () => {
-          void queryClient.invalidateQueries({
-            queryKey: [queryKeys.images],
-          });
-          void queryClient.invalidateQueries({
-            queryKey: [queryKeys.projects, project],
-          });
-          toastNotify.success(`Image ${image.properties.description} deleted.`);
-        },
-        (msg) =>
-          toastNotify.failure(
-            `Image ${image.properties.description} deletion failed`,
-            new Error(msg),
-          ),
-        () => setLoading(false),
-      ),
-    );
+    void deleteImage(image, project)
+      .then((operation) =>
+        eventQueue.set(
+          operation.metadata.id,
+          () => {
+            void queryClient.invalidateQueries({
+              queryKey: [queryKeys.images],
+            });
+            void queryClient.invalidateQueries({
+              queryKey: [queryKeys.projects, project],
+            });
+            toastNotify.success(
+              `Image ${image.properties.description} deleted.`,
+            );
+          },
+          (msg) =>
+            toastNotify.failure(
+              `Image ${image.properties.description} deletion failed`,
+              new Error(msg),
+            ),
+          () => setLoading(false),
+        ),
+      )
+      .catch((e) => {
+        toastNotify.failure(
+          `Image ${image.properties.description} deletion failed`,
+          e,
+        );
+        setLoading(false);
+      });
   };
 
   return (

diff --git a/src/pages/instances/CreateInstance.tsx b/src/pages/instances/CreateInstance.tsx
@@ -210,13 +210,17 @@ const CreateInstance: FC = () => {
       void startInstance({
         name: instanceName,
         project: project,
-      } as LxdInstance).then((operation) => {
-        eventQueue.set(
-          operation.metadata.id,
-          () => notifyCreatedAndStarted(instanceLink),
-          (msg) => notifyCreatedButStartFailed(instanceLink, new Error(msg)),
-        );
-      });
+      } as LxdInstance)
+        .then((operation) => {
+          eventQueue.set(
+            operation.metadata.id,
+            () => notifyCreatedAndStarted(instanceLink),
+            (msg) => notifyCreatedButStartFailed(instanceLink, new Error(msg)),
+          );
+        })
+        .catch((e: Error) => {
+          notifyCreatedButStartFailed(instanceLink, e);
+        });
     } else {
       const consoleUrl = `/ui/project/${project}/instance/${instanceName}/console`;
       const message = isIsoImage && (

diff --git a/src/pages/instances/EditInstance.tsx b/src/pages/instances/EditInstance.tsx
@@ -54,7 +54,7 @@ import { useEventQueue } from "context/eventQueue";
 import { hasDiskError, hasNetworkError } from "util/instanceValidation";
 import FormFooterLayout from "components/forms/FormFooterLayout";
 import { useToastNotification } from "context/toastNotificationProvider";
-import { instanceLinkFromName } from "util/instances";
+import InstanceLink from "pages/instances/InstanceLink";
 
 export interface InstanceEditDetailsFormValues {
   name: string;
@@ -111,33 +111,34 @@ const EditInstance: FC<Props> = ({ instance }) => {
 
       // ensure the etag is set (it is missing on the yaml)
       instancePayload.etag = instance.etag;
+      const instanceLink = <InstanceLink instance={instance} />;
 
-      void updateInstance(instancePayload, project).then((operation) => {
-        const instanceName = values.name;
-        const instanceLink = instanceLinkFromName({
-          instanceName,
-          project,
+      void updateInstance(instancePayload, project)
+        .then((operation) => {
+          eventQueue.set(
+            operation.metadata.id,
+            () => {
+              toastNotify.success(<>Instance {instanceLink} updated.</>);
+              void formik.setValues(getInstanceEditValues(instancePayload));
+            },
+            (msg) =>
+              toastNotify.failure(
+                "Instance update failed.",
+                new Error(msg),
+                instanceLink,
+              ),
+            () => {
+              formik.setSubmitting(false);
+              void queryClient.invalidateQueries({
+                queryKey: [queryKeys.instances],
+              });
+            },
+          );
+        })
+        .catch((e) => {
+          formik.setSubmitting(false);
+          toastNotify.failure("Instance update failed.", e, instanceLink);
         });
-        eventQueue.set(
-          operation.metadata.id,
-          () => {
-            toastNotify.success(<>Instance {instanceLink} updated.</>);
-            void formik.setValues(getInstanceEditValues(instancePayload));
-          },
-          (msg) =>
-            toastNotify.failure(
-              "Instance update failed.",
-              new Error(msg),
-              instanceLink,
-            ),
-          () => {
-            formik.setSubmitting(false);
-            void queryClient.invalidateQueries({
-              queryKey: [queryKeys.instances],
-            });
-          },
-        );
-      });
     },
   });
 

diff --git a/src/pages/instances/InstanceDetailHeader.tsx b/src/pages/instances/InstanceDetailHeader.tsx
@@ -15,6 +15,7 @@ import {
   instanceLinkFromOperation,
 } from "util/instances";
 import { getInstanceName } from "util/operations";
+import InstanceLink from "pages/instances/InstanceLink";
 
 interface Props {
   name: string;
@@ -58,32 +59,42 @@ const InstanceDetailHeader: FC<Props> = ({ name, instance, project }) => {
         formik.setSubmitting(false);
         return;
       }
-      void renameInstance(name, values.name, project).then((operation) => {
-        const instanceLink = instanceLinkFromName({
-          instanceName: values.name,
-          project,
+      void renameInstance(name, values.name, project)
+        .then((operation) => {
+          const instanceLink = instanceLinkFromName({
+            instanceName: values.name,
+            project,
+          });
+          eventQueue.set(
+            operation.metadata.id,
+            () => {
+              navigate(`/ui/project/${project}/instance/${values.name}`);
+              toastNotify.success(
+                <>
+                  Instance{" "}
+                  <strong>{getInstanceName(operation.metadata)}</strong> renamed
+                  to {instanceLink}.
+                </>,
+              );
+              void formik.setFieldValue("isRenaming", false);
+            },
+            (msg) =>
+              toastNotify.failure(
+                "Renaming instance failed.",
+                new Error(msg),
+                instanceLinkFromOperation({ operation, project }),
+              ),
+            () => formik.setSubmitting(false),
+          );
+        })
+        .catch((e) => {
+          formik.setSubmitting(false);
+          toastNotify.failure(
+            `Renaming instance failed.`,
+            e,
+            instance ? <InstanceLink instance={instance} /> : undefined,
+          );
         });
-        eventQueue.set(
-          operation.metadata.id,
-          () => {
-            navigate(`/ui/project/${project}/instance/${values.name}`);
-            toastNotify.success(
-              <>
-                Instance <strong>{getInstanceName(operation.metadata)}</strong>{" "}
-                renamed to {instanceLink}.
-              </>,
-            );
-            void formik.setFieldValue("isRenaming", false);
-          },
-          (msg) =>
-            toastNotify.failure(
-              "Renaming instance failed.",
-              new Error(msg),
-              instanceLinkFromOperation({ operation, project }),
-            ),
-          () => formik.setSubmitting(false),
-        );
-      });
     },
   });