More changes

Author: johnsimons

src/Frontend/public/js/app.constants.js

@@ -4,4 +4,5 @@ window.defaultConfig = {
   service_control_url: 'http://localhost:33333/api/',
   monitoring_urls: ['http://localhost:33633/'],
   showPendingRetry: false,
+  showAllMessages: true,
 };

src/Frontend/src/components/CopyToClipboard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Tippy, TippyComponent } from "vue-tippy";
-import { useTemplateRef } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -11,14 +11,16 @@ const props = withDefaults(
 );
 
 const tippyRef = useTemplateRef<TippyComponent | null>("tippyRef");
-let timeoutId: number;
+const timeoutId = ref(0);
 
 async function copyToClipboard() {
   await navigator.clipboard.writeText(props.value);
-  window.clearTimeout(timeoutId);
+
   tippyRef.value?.show();
-  timeoutId = window.setTimeout(() => tippyRef.value?.hide(), 3000);
+  timeoutId.value = window.setTimeout(() => tippyRef.value?.hide(), 3000);
 }
+
+watch(timeoutId, (_, previousTimeoutId) => window.clearTimeout(previousTimeoutId));
 </script>
 
 <template>

src/Frontend/src/components/EventLogItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import TimeSince from "../components/TimeSince.vue";
 import type EventLogItem from "@/resources/EventLogItem";
 // eslint-disable-next-line no-duplicate-imports
@@ -8,7 +8,6 @@ import routeLinks from "@/router/routeLinks";
 
 defineProps<{ eventLogItem: EventLogItem }>();
 const router = useRouter();
-const route = useRoute();
 
 function navigateToEvent(eventLogItem: EventLogItem) {
   switch (eventLogItem.category) {
@@ -27,7 +26,7 @@ function navigateToEvent(eventLogItem: EventLogItem) {
     case "MessageFailures":
       if (eventLogItem.related_to?.length && eventLogItem.related_to[0].search("message") > 0) {
         const messageId = eventLogItem.related_to[0].substring(9);
-        router.push({ path: routeLinks.messages.message.link(messageId), query: { back: route.path } });
+        router.push({ path: routeLinks.messages.failedMessage.link(messageId) });
       } else {
         router.push(routeLinks.failedMessage.root);
       }

src/Frontend/src/components/LoadingSpinner.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="text-center">
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+</template>

src/Frontend/src/components/audit/AuditList.vue

@@ -101,7 +101,15 @@ function formatDotNetTimespan(timespan: string) {
               <template #content>
                 <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
               </template>
-              <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.message.link(message.id), query: { back: route.path } }">
+              <RouterLink
+                v-if="message.status === MessageStatus.Successful"
+                class="hackToPreventSafariFromShowingTooltip"
+                aria-label="details-link"
+                :to="{ path: routeLinks.messages.successMessage.link(message.message_id, message.id), query: { back: route.path } }"
+              >
+                {{ message.message_id }}
+              </RouterLink>
+              <RouterLink v-else class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.messages.failedMessage.link(message.id) }">
                 {{ message.message_id }}
               </RouterLink>
             </tippy>

src/Frontend/src/components/failedmessages/MessageList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import TimeSince from "../TimeSince.vue";
 import NoData from "../NoData.vue";
 import routeLinks from "@/router/routeLinks";
@@ -17,7 +17,6 @@ export interface IMessageList {
 
 let lastLabelClickedIndex: number | undefined;
 const router = useRouter();
-const route = useRoute();
 const emit = defineEmits(["retryRequested"]);
 const props = withDefaults(
   defineProps<{
@@ -78,7 +77,7 @@ function labelClicked($event: MouseEvent, index: number) {
 }
 
 function navigateToMessage(messageId: string) {
-  router.push({ path: routeLinks.messages.message.link(messageId), query: { back: route.path } });
+  router.push({ path: routeLinks.messages.failedMessage.link(messageId) });
 }
 
 defineExpose<IMessageList>({

src/Frontend/src/components/messages/BodyView.vue

@@ -1,18 +1,27 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import CodeEditor from "@/components/CodeEditor.vue";
 import parseContentType from "@/composables/contentTypeParser";
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import LoadingSpinner from "@/components/LoadingSpinner.vue";
 
 const store = useMessageViewStore();
-
+watch(
+  () => store.state.data.body_url,
+  async () => {
+    await store.downloadBody();
+  },
+  { immediate: true }
+);
 const contentType = computed(() => parseContentType(store.body.data.content_type));
+const body = computed(() => store.body.data.value);
 </script>
 
 <template>
   <div v-if="store.body.not_found" class="alert alert-info">Could not find message body. This could be because the message URL is invalid or the corresponding message was processed and is no longer tracked by ServiceControl.</div>
   <div v-else-if="store.body.failed_to_load" class="alert alert-info">Message body unavailable.</div>
-  <CodeEditor v-else-if="contentType.isSupported" :model-value="store.body.data.value ?? ''" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
+  <LoadingSpinner v-else-if="store.body.loading" />
+  <CodeEditor v-else-if="body !== undefined && contentType.isSupported" :model-value="body" :language="contentType.language" :read-only="true" :show-gutter="true"></CodeEditor>
   <div v-else class="alert alert-warning">Message body cannot be displayed because content type "{{ store.body.data.content_type }}" is not supported.</div>
 </template>
 

src/Frontend/src/components/messages/DeleteMessageButton.vue

@@ -4,12 +4,14 @@ import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
 import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
+import { MessageStatus } from "@/resources/Message.ts";
 
 const store = useMessageViewStore();
 const isConfirmDialogVisible = ref(false);
 
 const failureStatus = computed(() => store.state.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.resolved);
+const isVisible = computed(() => !failureStatus.value.archived && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
 
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
@@ -21,7 +23,7 @@ const handleConfirm = async () => {
 </script>
 
 <template>
-  <template v-if="!failureStatus.archived">
+  <template v-if="isVisible">
     <button type="button" class="btn btn-default" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-trash"></i> Delete message</button>
     <Teleport to="#modalDisplay">
       <ConfirmDialog

src/Frontend/src/components/messages/EditAndRetryButton.vue

@@ -4,13 +4,14 @@ import { computed, ref } from "vue";
 import { showToastAfterOperation } from "@/composables/toast.ts";
 import { TYPE } from "vue-toastification";
 import EditRetryDialog2 from "@/components/failedmessages/EditRetryDialog2.vue";
+import { MessageStatus } from "@/resources/Message.ts";
 
 const store = useMessageViewStore();
 const isConfirmDialogVisible = ref(false);
 
 const failureStatus = computed(() => store.state.data.failure_status);
 const isDisabled = computed(() => failureStatus.value.retried || failureStatus.value.archived || failureStatus.value.resolved);
-
+const isVisible = computed(() => store.edit_and_retry_config.enabled && store.state.data.status !== MessageStatus.Successful && store.state.data.status !== MessageStatus.ResolvedSuccessfully);
 const handleConfirm = async () => {
   isConfirmDialogVisible.value = false;
 
@@ -21,10 +22,10 @@ const handleConfirm = async () => {
 </script>
 
 <template>
-  <template v-if="store.edit_and_retry_config.enabled">
+  <template v-if="isVisible">
     <button type="button" class="btn btn-default" aria-label="Edit & retry" :disabled="isDisabled" @click="isConfirmDialogVisible = true"><i class="fa fa-pencil"></i> Edit & retry</button>
     <Teleport to="#modalDisplay">
-      <EditRetryDialog2 @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog2>
+      <EditRetryDialog2 v-if="isConfirmDialogVisible" @cancel="isConfirmDialogVisible = false" @confirm="handleConfirm"></EditRetryDialog2>
     </Teleport>
   </template>
 </template>

src/Frontend/src/components/messages/ExportMessageButton.vue

@@ -1,11 +1,34 @@
 <script setup lang="ts">
 import { useMessageViewStore } from "@/stores/MessageViewStore.ts";
+import { useDownloadFileFromString } from "@/composables/fileDownloadCreator.ts";
+import { showToastAfterOperation } from "@/composables/toast.ts";
+import { TYPE } from "vue-toastification";
+import { ref } from "vue";
 
 const store = useMessageViewStore();
+const executing = ref(false);
+
+async function exportMessage() {
+  executing.value = true;
+  await showToastAfterOperation(
+    async () => {
+      const exportedString = await store.exportMessage();
+      useDownloadFileFromString(exportedString, "text/txt", "failedMessage.txt");
+    },
+    TYPE.INFO,
+    "Info",
+    "Message export completed."
+  );
+  executing.value = false;
+}
 </script>
 
 <template>
-  <button type="button" class="btn btn-default" @click="store.exportMessage"><i class="fa fa-download"></i> Export message</button>
+  <button v-if="!executing" type="button" class="btn btn-default" @click="exportMessage"><i class="fa fa-download"></i> Export message</button>
+  <button v-else type="button" class="btn btn-default" disabled>
+    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+    <span role="status"> Exporting message</span>
+  </button>
 </template>
 
 <style scoped></style>