From 58d16dd37785aa2d996ccd76b87527a8e3da0752 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 7 Feb 2024 07:59:32 +1000
Subject: [PATCH 1/2] Migrating more composables

---
 .../configuration/PlatformLicense.vue         |   4 +-
 .../configuration/RetryRedirects.vue          |   6 +-
 .../failedmessages/DeletedMessageGroups.vue   |   2 +-
 .../failedmessages/EditRetryDialog.vue        |   2 +-
 .../failedmessages/MessageGroupList.vue       |   6 +-
 .../components/failedmessages/MessageView.vue |   5 +-
 .../src/composables/serviceFailedMessage.js   |  59 -------
 .../src/composables/serviceFailedMessage.ts   |  48 ++++++
 .../src/composables/serviceMessageGroup.js    | 150 ------------------
 .../src/composables/serviceMessageGroup.ts    |  64 ++++++++
 .../vue/src/composables/serviceRedirects.js   | 117 --------------
 .../vue/src/composables/serviceRedirects.ts   |  87 ++++++++++
 src/ServicePulse.Host/vue/src/main.ts         |   4 +
 .../vue/src/resources/FailureGroupView.ts     |   9 ++
 .../vue/src/resources/GroupOperation.ts       |  17 ++
 15 files changed, 242 insertions(+), 338 deletions(-)
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts
 delete mode 100644 src/ServicePulse.Host/vue/src/composables/serviceRedirects.js
 create mode 100644 src/ServicePulse.Host/vue/src/composables/serviceRedirects.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/FailureGroupView.ts
 create mode 100644 src/ServicePulse.Host/vue/src/resources/GroupOperation.ts

diff --git a/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue b/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
index d63393cb2c..2ffeb242b2 100644
--- a/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
+++ b/src/ServicePulse.Host/vue/src/components/configuration/PlatformLicense.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { license, licenseStatus } from "../../composables/serviceLicense";
+import { license, licenseStatus } from "@/composables/serviceLicense";
 import ServiceControlNotAvailable from "../ServiceControlNotAvailable.vue";
-import { connectionState } from "../../composables/serviceServiceControl";
+import { connectionState } from "@/composables/serviceServiceControl";
 import BusyIndicator from "../BusyIndicator.vue";
 import ExclamationMark from "./../../components/ExclamationMark.vue";
 
diff --git a/src/ServicePulse.Host/vue/src/components/configuration/RetryRedirects.vue b/src/ServicePulse.Host/vue/src/components/configuration/RetryRedirects.vue
index 527d6a2a68..4eff66c8d9 100644
--- a/src/ServicePulse.Host/vue/src/components/configuration/RetryRedirects.vue
+++ b/src/ServicePulse.Host/vue/src/components/configuration/RetryRedirects.vue
@@ -71,7 +71,7 @@ async function saveEditedRedirect(redirect) {
     getRedirect();
   } else {
     redirectSaveSuccessful.value = false;
-    if (result.status === "409" || result.status === 409) {
+    if (result.status === 409) {
       useShowToast("error", "Error", "Failed to update a redirect, can not create redirect to a queue" + redirect.targetQueue + " as it already has a redirect. Provide a different queue or end the redirect.");
     } else {
       useShowToast("error", "Error", result.message);
@@ -94,9 +94,9 @@ async function saveCreatedRedirect(redirect) {
     getRedirect();
   } else {
     redirectSaveSuccessful.value = false;
-    if ((result.status === "409" || result.status === 409) && result.statusText === "Duplicate") {
+    if (result.status === 409 && result.statusText === "Duplicate") {
       useShowToast("error", "Error", "Failed to create a redirect, can not create more than one redirect for queue: " + redirect.sourceQueue);
-    } else if ((result.status === "409" || result.status === 409) && result.statusText === "Dependents") {
+    } else if (result.status === 409 && result.statusText === "Dependents") {
       useShowToast("error", "Error", "Failed to create a redirect, can not create a redirect to a queue that already has a redirect or is a target of a redirect.");
     } else {
       useShowToast("error", "Error", result.message);
diff --git a/src/ServicePulse.Host/vue/src/components/failedmessages/DeletedMessageGroups.vue b/src/ServicePulse.Host/vue/src/components/failedmessages/DeletedMessageGroups.vue
index 85b40d491f..5a340661e8 100644
--- a/src/ServicePulse.Host/vue/src/components/failedmessages/DeletedMessageGroups.vue
+++ b/src/ServicePulse.Host/vue/src/components/failedmessages/DeletedMessageGroups.vue
@@ -343,7 +343,7 @@ onMounted(async () => {
                                 <button
                                   type="button"
                                   class="btn btn-link btn-sm"
-                                  :disabled="group.count == 0 || isBeingRestored(group.workflow_state.status)"
+                                  :disabled="group.count === 0 || isBeingRestored(group.workflow_state.status)"
                                   @mouseenter="group.hover3 = true"
                                   @mouseleave="group.hover3 = false"
                                   v-if="archiveGroups.length > 0"
diff --git a/src/ServicePulse.Host/vue/src/components/failedmessages/EditRetryDialog.vue b/src/ServicePulse.Host/vue/src/components/failedmessages/EditRetryDialog.vue
index 681923b444..022350e258 100644
--- a/src/ServicePulse.Host/vue/src/components/failedmessages/EditRetryDialog.vue
+++ b/src/ServicePulse.Host/vue/src/components/failedmessages/EditRetryDialog.vue
@@ -89,7 +89,7 @@ function removeHeadersMarkedAsRemoved() {
 async function retryEditedMessage() {
   removeHeadersMarkedAsRemoved();
   try {
-    await useRetryEditedMessage([id.value], localMessage);
+    await useRetryEditedMessage(id.value, localMessage);
     localMessage.value.retried = true;
     return emit("retried", settings);
   } catch {
diff --git a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageGroupList.vue b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageGroupList.vue
index 752589c0b9..792d76fedb 100644
--- a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageGroupList.vue
+++ b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageGroupList.vue
@@ -106,7 +106,7 @@ async function saveDeleteNote(group, hideToastMessage) {
   if (result.message === "success") {
     noteSaveSuccessful.value = true;
     if (!hideToastMessage) {
-      useShowToast("info", "Info", "Note deleted succesfully");
+      useShowToast("info", "Info", "Note deleted successfully");
     }
 
     loadFailedMessageGroups(); //reload the groups
@@ -244,9 +244,9 @@ const acknowledgeGroup = async function (group) {
   const result = await useAcknowledgeArchiveGroup(group.id);
   if (result.message === "success") {
     if (group.operation_status === "ArchiveCompleted") {
-      useShowToast("info", "Info", "Group deleted succesfully");
+      useShowToast("info", "Info", "Group deleted successfully");
     } else {
-      useShowToast("info", "Info", "Group retried succesfully");
+      useShowToast("info", "Info", "Group retried successfully");
     }
     loadFailedMessageGroups(); //reload the groups
   } else {
diff --git a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
index ee83ccf38a..ef44607ca0 100644
--- a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
+++ b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
@@ -87,7 +87,7 @@ async function archiveMessage() {
   changeRefreshInterval(1000); // We've started an archive, so increase the polling frequency
   try {
     const response = await useArchiveMessage([id.value]);
-    if (response !== undefined) {
+    if (response.data.ok) {
       failedMessage.value.archiving = true;
       return;
     }
@@ -103,9 +103,10 @@ async function unarchiveMessage() {
   try {
     const response = await useUnarchiveMessage([id.value]);
 
-    if (response !== undefined) {
+    if (response.data.ok) {
       failedMessage.value.restoring = true;
     }
+
     return false;
   } catch (err) {
     console.log(err);
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.js b/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.js
deleted file mode 100644
index 3963774833..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { usePatchToServiceControl, usePostToServiceControl } from "./serviceServiceControlUrls";
-
-export async function useUnarchiveMessage(ids) {
-  try {
-    const response = await usePatchToServiceControl("errors/unarchive/", ids);
-    if (response.ok === false) {
-      throw response.statusText;
-    }
-    const result = {
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (error) {
-    console.error("There was an error trying to unarchive messages with the provided id(s): ", ids, "\n", error);
-    return;
-  }
-}
-
-export async function useArchiveMessage(ids) {
-  try {
-    const response = await usePatchToServiceControl("errors/archive/", ids);
-    if (response.ok === false) {
-      throw response.statusText;
-    }
-    const result = {
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (error) {
-    console.error("There was an error trying to unarchive messages with the provided id(s): ", ids, "\n", error);
-    return;
-  }
-}
-
-export async function useRetryMessages(ids) {
-  try {
-    await usePostToServiceControl("errors/retry", ids);
-  } catch (error) {
-    console.error("There was an error trying to retry messages with the provided id(s): ", ids, "\n", error);
-  }
-}
-
-export async function useRetryEditedMessage(ids, editedMessage) {
-  const payload = { message_body: editedMessage.value.messageBody, message_headers: editedMessage.value.headers };
-  try {
-    const response = await usePostToServiceControl("edit/" + ids, payload);
-    if (!response.ok) {
-      throw response.statusText;
-    }
-    return response;
-  } catch (error) {
-    console.error("There was an error trying to retry message with the provided id: ", ids, "\n", error);
-    throw error;
-  }
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts b/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts
new file mode 100644
index 0000000000..c8e73a4b43
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts
@@ -0,0 +1,48 @@
+import { usePatchToServiceControl, usePostToServiceControl } from "./serviceServiceControlUrls";
+import type { Ref } from "vue";
+
+export async function useUnarchiveMessage(ids: string[]) {
+  const response = await usePatchToServiceControl("errors/unarchive/", ids);
+  if (!response.ok) {
+    throw response.statusText;
+  }
+
+  return {
+    status: response.status,
+    statusText: response.statusText,
+    data: response,
+  };
+}
+
+export async function useArchiveMessage(ids: string[]) {
+  const response = await usePatchToServiceControl("errors/archive/", ids);
+  if (!response.ok) {
+    throw response.statusText;
+  }
+
+  return {
+    status: response.status,
+    statusText: response.statusText,
+    data: response,
+  };
+}
+
+export async function useRetryMessages(ids: string[]) {
+  await usePostToServiceControl("errors/retry", ids);
+}
+
+export async function useRetryEditedMessage(
+  id: string,
+  editedMessage: Ref<{
+    messageBody: string;
+    headers: unknown[];
+  }>
+) {
+  const payload = { message_body: editedMessage.value.messageBody, message_headers: editedMessage.value.headers };
+  const response = await usePostToServiceControl(`edit/${id}`, payload);
+  if (!response.ok) {
+    throw response.statusText;
+  }
+
+  return response;
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.js b/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.js
deleted file mode 100644
index ac3826b616..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import { useDeleteFromServiceControl, useFetchFromServiceControl, usePostToServiceControl } from "./serviceServiceControlUrls";
-
-export async function useGetExceptionGroups(classifier) {
-  try {
-    const response = await useFetchFromServiceControl(`recoverability/groups/${classifier ? classifier : ""}`);
-    const data = await response.json();
-    return data;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-//get all deleted message groups
-export async function useGetArchiveGroups(classifier) {
-  try {
-    const response = await useFetchFromServiceControl(`errors/groups/${classifier ? classifier : ""}`);
-    const data = await response.json();
-    return data;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-//delete note by group id
-export async function useDeleteNote(groupId) {
-  try {
-    const response = await useDeleteFromServiceControl("recoverability/groups/" + groupId + "/comment");
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-//edit or create note by group id
-export async function useEditOrCreateNote(groupId, comment) {
-  try {
-    const response = await usePostToServiceControl("recoverability/groups/" + groupId + "/comment?comment=" + comment);
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-//archive exception group by group id
-//archiveGroup
-export async function useArchiveExceptionGroup(groupId) {
-  try {
-    const response = await usePostToServiceControl("recoverability/groups/" + groupId + "/errors/archive");
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-//restore group by group id
-export async function useRestoreGroup(groupId) {
-  try {
-    const response = await usePostToServiceControl("recoverability/groups/" + groupId + "/errors/unarchive");
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-//retry exception group by group id
-//retryGroup
-export async function useRetryExceptionGroup(groupId) {
-  try {
-    const response = await usePostToServiceControl("recoverability/groups/" + groupId + "/errors/retry");
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
-
-//acknowledge archive exception group by group id
-export async function useAcknowledgeArchiveGroup(groupId) {
-  try {
-    const response = await useDeleteFromServiceControl("recoverability/unacknowledgedgroups/" + groupId);
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result = {
-      message: "error",
-    };
-    return result;
-  }
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts b/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts
new file mode 100644
index 0000000000..36cf655931
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts
@@ -0,0 +1,64 @@
+import { useDeleteFromServiceControl, usePostToServiceControl, useTypedFetchFromServiceControl } from "./serviceServiceControlUrls";
+import type GroupOperation from "@/resources/GroupOperation";
+import type FailureGroupView from "@/resources/FailureGroupView";
+
+export async function useGetExceptionGroups(classifier: string = "") {
+  const [, data] = await useTypedFetchFromServiceControl<GroupOperation[]>(`recoverability/groups/${classifier}`);
+  return data;
+}
+
+//get all deleted message groups
+export async function useGetArchiveGroups(classifier: string = "") {
+  const [, data] = await useTypedFetchFromServiceControl<FailureGroupView[]>(`errors/groups/${classifier}`);
+  return data;
+}
+
+//delete note by group id
+export async function useDeleteNote(groupId: string) {
+  const response = await useDeleteFromServiceControl(`recoverability/groups/${groupId}/comment`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+  };
+}
+
+//edit or create note by group id
+export async function useEditOrCreateNote(groupId: string, comment: string) {
+  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/comment?comment=${comment}`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+  };
+}
+
+//archive exception group by group id
+//archiveGroup
+export async function useArchiveExceptionGroup(groupId: string) {
+  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/errors/archive`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+  };
+}
+
+//restore group by group id
+export async function useRestoreGroup(groupId: string) {
+  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/errors/unarchive`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+  };
+}
+
+//retry exception group by group id
+//retryGroup
+export async function useRetryExceptionGroup(groupId: string) {
+  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/errors/retry`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+  };
+}
+
+//acknowledge archive exception group by group id
+export async function useAcknowledgeArchiveGroup(groupId: string) {
+  const response = await useDeleteFromServiceControl(`recoverability/unacknowledgedgroups/${groupId}`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+  };
+}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceRedirects.js b/src/ServicePulse.Host/vue/src/composables/serviceRedirects.js
deleted file mode 100644
index 77dbc74fdf..0000000000
--- a/src/ServicePulse.Host/vue/src/composables/serviceRedirects.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import { useDeleteFromServiceControl, useFetchFromServiceControl, usePostToServiceControl, usePutToServiceControl } from "./serviceServiceControlUrls";
-
-const redirects = {
-  data: [],
-  queues: [],
-  total: 0,
-};
-export async function useRedirects() {
-  await getRedirects();
-  await getKnownQueues();
-  return redirects;
-}
-
-async function getKnownQueues() {
-  try {
-    const response = await useFetchFromServiceControl(`errors/queues/addresses`);
-    const data = await response.json();
-    if (data) {
-      redirects.queues = data.map((x) => x.physical_address);
-    }
-  } catch (err) {
-    console.log(err);
-  }
-}
-
-async function getRedirects() {
-  try {
-    const response = await useFetchFromServiceControl("redirects");
-    redirects.total = parseInt(response.headers.get("Total-Count"));
-    const data = await response.json();
-    redirects.data = data;
-  } catch (err) {
-    console.log(err);
-  }
-}
-
-export async function useRetryPendingMessagesForQueue(queueName) {
-  try {
-    const response = await usePostToServiceControl("errors/queues/" + queueName + "/retry");
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result_1 = {
-      message: "error",
-    };
-    return result_1;
-  }
-}
-
-export async function useUpdateRedirects(redirectId, sourceEndpoint, targetEndpoint) {
-  try {
-    const response = await usePutToServiceControl("redirects/" + redirectId, {
-      id: redirectId,
-      fromphysicaladdress: sourceEndpoint,
-      tophysicaladdress: targetEndpoint,
-    });
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result_1 = {
-      message: "error",
-    };
-    return result_1;
-  }
-}
-
-export async function useCreateRedirects(sourceEndpoint, targetEndpoint) {
-  try {
-    const response = await usePostToServiceControl("redirects", {
-      fromphysicaladdress: sourceEndpoint,
-      tophysicaladdress: targetEndpoint,
-    });
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result_1 = {
-      message: "error",
-    };
-    return result_1;
-  }
-}
-
-export async function useDeleteRedirects(redirectId) {
-  try {
-    const response = await useDeleteFromServiceControl("redirects/" + redirectId);
-    const result = {
-      message: response.ok ? "success" : "error:" + response.statusText,
-      status: response.status,
-      statusText: response.statusText,
-      data: response,
-    };
-    return result;
-  } catch (err) {
-    console.log(err);
-    const result_1 = {
-      message: "error",
-    };
-    return result_1;
-  }
-}
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceRedirects.ts b/src/ServicePulse.Host/vue/src/composables/serviceRedirects.ts
new file mode 100644
index 0000000000..fd598eedbf
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/composables/serviceRedirects.ts
@@ -0,0 +1,87 @@
+import { useDeleteFromServiceControl, usePostToServiceControl, usePutToServiceControl, useTypedFetchFromServiceControl } from "./serviceServiceControlUrls";
+
+interface Redirect {
+  message_redirect_id: string;
+  from_physical_address: string;
+  to_physical_address: string;
+  last_modified: string;
+}
+
+interface Redirects {
+  data: Redirect[];
+  queues: string[];
+  total: number;
+}
+
+interface QueueAddress {
+  physical_address: string;
+  failed_message_count: number;
+}
+
+export async function useRedirects() {
+  const redirects: Redirects = {
+    data: [],
+    queues: [],
+    total: 0,
+  };
+
+  async function getKnownQueues() {
+    const [, data] = await useTypedFetchFromServiceControl<QueueAddress[]>("errors/queues/addresses");
+    redirects.queues = data.map((x) => x.physical_address);
+  }
+
+  async function getRedirects() {
+    const [response, data] = await useTypedFetchFromServiceControl<Redirect[]>("redirects");
+    redirects.total = parseInt(response.headers.get("Total-Count") || "0");
+    redirects.data = data;
+  }
+
+  await Promise.all([getRedirects(), getKnownQueues()]);
+
+  return redirects;
+}
+
+export async function useRetryPendingMessagesForQueue(queueName: string) {
+  const response = await usePostToServiceControl(`errors/queues/${queueName}/retry`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+    status: response.status,
+    statusText: response.statusText,
+  };
+}
+
+export async function useUpdateRedirects(redirectId: string, sourceEndpoint: string, targetEndpoint: string) {
+  const response = await usePutToServiceControl(`redirects/${redirectId}`, {
+    id: redirectId,
+    fromphysicaladdress: sourceEndpoint,
+    tophysicaladdress: targetEndpoint,
+  });
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+    status: response.status,
+    statusText: response.statusText,
+    data: response,
+  };
+}
+
+export async function useCreateRedirects(sourceEndpoint: string, targetEndpoint: string) {
+  const response = await usePostToServiceControl("redirects", {
+    fromphysicaladdress: sourceEndpoint,
+    tophysicaladdress: targetEndpoint,
+  });
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+    status: response.status,
+    statusText: response.statusText,
+  };
+}
+
+export async function useDeleteRedirects(redirectId: string) {
+  const response = await useDeleteFromServiceControl(`redirects/${redirectId}`);
+  return {
+    message: response.ok ? "success" : `error:${response.statusText}`,
+    status: response.status,
+    statusText: response.statusText,
+    data: response,
+  };
+}
diff --git a/src/ServicePulse.Host/vue/src/main.ts b/src/ServicePulse.Host/vue/src/main.ts
index db649747e4..c78f526b83 100644
--- a/src/ServicePulse.Host/vue/src/main.ts
+++ b/src/ServicePulse.Host/vue/src/main.ts
@@ -22,4 +22,8 @@ const toastOptions: PluginOptions = {
 app.use(Toast, toastOptions);
 app.use(SimpleTypeahead);
 
+app.config.errorHandler = (err, instance, info) => {
+  console.error(instance, err);
+};
+
 app.mount("#app");
diff --git a/src/ServicePulse.Host/vue/src/resources/FailureGroupView.ts b/src/ServicePulse.Host/vue/src/resources/FailureGroupView.ts
new file mode 100644
index 0000000000..612eb82da5
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/FailureGroupView.ts
@@ -0,0 +1,9 @@
+export default interface FailureGroupView {
+  id: string;
+  title: string;
+  type: string;
+  count: number;
+  comment: string;
+  first: string;
+  last: string;
+}
diff --git a/src/ServicePulse.Host/vue/src/resources/GroupOperation.ts b/src/ServicePulse.Host/vue/src/resources/GroupOperation.ts
new file mode 100644
index 0000000000..c5747ead97
--- /dev/null
+++ b/src/ServicePulse.Host/vue/src/resources/GroupOperation.ts
@@ -0,0 +1,17 @@
+export default interface GroupOperation {
+  id: string;
+  title: string;
+  type: string;
+  count: number;
+  operation_messages_completed_count?: number;
+  comment: string;
+  first?: string;
+  last?: string;
+  operation_status: string;
+  operation_failed?: boolean;
+  operation_progress: number;
+  operation_remaining_count?: number;
+  operation_startTime?: string;
+  operation_completion_time?: string;
+  need_user_acknowledgement: boolean;
+}

From cef21fe69792628247d60774a98a85603c40b233 Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Thu, 8 Feb 2024 08:18:11 +1000
Subject: [PATCH 2/2] A few changes based on feedback

---
 src/ServicePulse.Host/vue/.eslintrc.cjs       |  1 +
 .../components/failedmessages/MessageView.vue | 36 ++++---------------
 .../src/composables/serviceFailedMessage.ts   | 18 ++--------
 .../src/composables/serviceMessageGroup.ts    | 32 ++++++-----------
 .../src/composables/serviceServiceControl.js  |  4 +--
 5 files changed, 21 insertions(+), 70 deletions(-)

diff --git a/src/ServicePulse.Host/vue/.eslintrc.cjs b/src/ServicePulse.Host/vue/.eslintrc.cjs
index d9b6c417a4..10b036cdad 100644
--- a/src/ServicePulse.Host/vue/.eslintrc.cjs
+++ b/src/ServicePulse.Host/vue/.eslintrc.cjs
@@ -28,5 +28,6 @@ module.exports = {
     eqeqeq: ["error", "smart"],
     "unused-imports/no-unused-imports": "error",
     "import/no-duplicates": "error",
+    "no-throw-literal": "error",
   },
 };
diff --git a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
index ef44607ca0..17997e48f6 100644
--- a/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
+++ b/src/ServicePulse.Host/vue/src/components/failedmessages/MessageView.vue
@@ -85,45 +85,21 @@ function updateMessageDeleteDate() {
 async function archiveMessage() {
   useShowToast("info", "Info", `Deleting the message ${id.value} ...`);
   changeRefreshInterval(1000); // We've started an archive, so increase the polling frequency
-  try {
-    const response = await useArchiveMessage([id.value]);
-    if (response.data.ok) {
-      failedMessage.value.archiving = true;
-      return;
-    }
-    return false;
-  } catch (err) {
-    console.log(err);
-    return false;
-  }
+  await useArchiveMessage([id.value]);
+  failedMessage.value.archiving = true;
 }
 
 async function unarchiveMessage() {
   changeRefreshInterval(1000); // We've started an unarchive, so increase the polling frequency
-  try {
-    const response = await useUnarchiveMessage([id.value]);
-
-    if (response.data.ok) {
-      failedMessage.value.restoring = true;
-    }
-
-    return false;
-  } catch (err) {
-    console.log(err);
-    return false;
-  }
+  await useUnarchiveMessage([id.value]);
+  failedMessage.value.restoring = true;
 }
 
 async function retryMessage() {
   useShowToast("info", "Info", `Retrying the message ${id.value} ...`);
   changeRefreshInterval(1000); // We've started a retry, so increase the polling frequency
-  try {
-    await useRetryMessages([id.value]);
-    failedMessage.value.retried = true;
-  } catch (err) {
-    console.log(err);
-    return false;
-  }
+  await useRetryMessages([id.value]);
+  failedMessage.value.retried = true;
 }
 
 async function downloadHeadersAndBody() {
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts b/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts
index c8e73a4b43..136b741125 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts
+++ b/src/ServicePulse.Host/vue/src/composables/serviceFailedMessage.ts
@@ -6,25 +6,13 @@ export async function useUnarchiveMessage(ids: string[]) {
   if (!response.ok) {
     throw response.statusText;
   }
-
-  return {
-    status: response.status,
-    statusText: response.statusText,
-    data: response,
-  };
 }
 
 export async function useArchiveMessage(ids: string[]) {
   const response = await usePatchToServiceControl("errors/archive/", ids);
   if (!response.ok) {
-    throw response.statusText;
+    throw new Error(response.statusText);
   }
-
-  return {
-    status: response.status,
-    statusText: response.statusText,
-    data: response,
-  };
 }
 
 export async function useRetryMessages(ids: string[]) {
@@ -41,8 +29,6 @@ export async function useRetryEditedMessage(
   const payload = { message_body: editedMessage.value.messageBody, message_headers: editedMessage.value.headers };
   const response = await usePostToServiceControl(`edit/${id}`, payload);
   if (!response.ok) {
-    throw response.statusText;
+    throw new Error(response.statusText);
   }
-
-  return response;
 }
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts b/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts
index 36cf655931..a69a768df8 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts
+++ b/src/ServicePulse.Host/vue/src/composables/serviceMessageGroup.ts
@@ -15,50 +15,38 @@ export async function useGetArchiveGroups(classifier: string = "") {
 
 //delete note by group id
 export async function useDeleteNote(groupId: string) {
-  const response = await useDeleteFromServiceControl(`recoverability/groups/${groupId}/comment`);
-  return {
-    message: response.ok ? "success" : `error:${response.statusText}`,
-  };
+  return evaluateResponse(await useDeleteFromServiceControl(`recoverability/groups/${groupId}/comment`));
 }
 
 //edit or create note by group id
 export async function useEditOrCreateNote(groupId: string, comment: string) {
-  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/comment?comment=${comment}`);
-  return {
-    message: response.ok ? "success" : `error:${response.statusText}`,
-  };
+  return evaluateResponse(await usePostToServiceControl(`recoverability/groups/${groupId}/comment?comment=${comment}`));
 }
 
 //archive exception group by group id
 //archiveGroup
 export async function useArchiveExceptionGroup(groupId: string) {
-  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/errors/archive`);
-  return {
-    message: response.ok ? "success" : `error:${response.statusText}`,
-  };
+  return evaluateResponse(await usePostToServiceControl(`recoverability/groups/${groupId}/errors/archive`));
 }
 
 //restore group by group id
 export async function useRestoreGroup(groupId: string) {
-  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/errors/unarchive`);
-  return {
-    message: response.ok ? "success" : `error:${response.statusText}`,
-  };
+  return evaluateResponse(await usePostToServiceControl(`recoverability/groups/${groupId}/errors/unarchive`));
 }
 
 //retry exception group by group id
 //retryGroup
 export async function useRetryExceptionGroup(groupId: string) {
-  const response = await usePostToServiceControl(`recoverability/groups/${groupId}/errors/retry`);
-  return {
-    message: response.ok ? "success" : `error:${response.statusText}`,
-  };
+  return evaluateResponse(await usePostToServiceControl(`recoverability/groups/${groupId}/errors/retry`));
 }
 
 //acknowledge archive exception group by group id
 export async function useAcknowledgeArchiveGroup(groupId: string) {
-  const response = await useDeleteFromServiceControl(`recoverability/unacknowledgedgroups/${groupId}`);
+  return evaluateResponse(await useDeleteFromServiceControl(`recoverability/unacknowledgedgroups/${groupId}`));
+}
+
+async function evaluateResponse(response: Response) {
   return {
-    message: response.ok ? "success" : `error:${response.statusText}`,
+    message: response.ok ? "success" : `error: ${response.statusText}`,
   };
 }
diff --git a/src/ServicePulse.Host/vue/src/composables/serviceServiceControl.js b/src/ServicePulse.Host/vue/src/composables/serviceServiceControl.js
index 60452a9050..441bc80884 100644
--- a/src/ServicePulse.Host/vue/src/composables/serviceServiceControl.js
+++ b/src/ServicePulse.Host/vue/src/composables/serviceServiceControl.js
@@ -340,7 +340,7 @@ function getMonitoredEndpoints() {
       if (response != null && response.ok) {
         return response.json();
       }
-      throw "Error connecting to monitoring";
+      throw new Error("Error connecting to monitoring");
     }
   );
 }
@@ -353,7 +353,7 @@ function getDisconnectedEndpointsCount() {
       if (response != null && response.ok) {
         return response.json();
       }
-      throw "Error connecting to monitoring";
+      throw new Error("Error connecting to monitoring");
     }
   );
 }