show status icons

Author: PhilBastian

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

@@ -4,10 +4,46 @@ import { ColumnNames, useAuditStore } from "@/stores/AuditStore";
 import { storeToRefs } from "pinia";
 import { useRoute } from "vue-router";
 import DataView from "../DataView.vue";
+import SortableColumn from "../SortableColumn.vue";
+import { MessageStatus } from "@/resources/Message";
 
 const route = useRoute();
 const store = useAuditStore();
 const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
+
+function statusToName(messageStatus: MessageStatus) {
+  switch (messageStatus) {
+    case MessageStatus.Successful:
+      return "Successful";
+    case MessageStatus.ResolvedSuccessfully:
+      return "Successful after retries";
+    case MessageStatus.Failed:
+      return "Failed";
+    case MessageStatus.ArchivedFailure:
+      return "Failed message deleted";
+    case MessageStatus.RepeatedFailure:
+      return "Repeated Failures";
+    case MessageStatus.RetryIssued:
+      return "Retry requested";
+  }
+}
+
+function statusToIcon(messageStatus: MessageStatus) {
+  switch (messageStatus) {
+    case MessageStatus.Successful:
+      return "fa successful";
+    case MessageStatus.ResolvedSuccessfully:
+      return "fa resolved-successfully";
+    case MessageStatus.Failed:
+      return "fa failed";
+    case MessageStatus.ArchivedFailure:
+      return "fa archived";
+    case MessageStatus.RepeatedFailure:
+      return "fa repeated-failure";
+    case MessageStatus.RetryIssued:
+      return "fa retry-issued";
+  }
+}
 </script>
 
 <template>
@@ -36,8 +72,8 @@ const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
       <template #data="{ pageData }">
         <div role="rowgroup" aria-label="endpoints">
           <div role="row" :aria-label="message.message_id" class="row grid-row" v-for="message in pageData" :key="message.id">
-            <div role="cell" aria-label="instance-name" class="status">
-              {{ "todo" }}
+            <div role="cell" aria-label="status" class="status" :title="statusToName(message.status)">
+              <div class="status-icon" :class="statusToIcon(message.status)"></div>
             </div>
             <div role="cell" aria-label="message-id" class="col-3 message-id">
               <div class="box-header">
@@ -46,7 +82,7 @@ const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
                     <p :style="{ overflowWrap: 'break-word' }">{{ message.message_id }}</p>
                   </template>
                   <RouterLink class="hackToPreventSafariFromShowingTooltip" aria-label="details-link" :to="{ path: routeLinks.audit.message.link(message.id), query: { back: route.path } }">
-                    {{ message.id }}
+                    {{ message.message_id }}
                   </RouterLink>
                 </tippy>
               </div>
@@ -83,4 +119,61 @@ const { messages, sortByInstances, itemsPerPage } = storeToRefs(store);
   width: 5em;
   text-align: center;
 }
+
+.status-icon {
+  color: white;
+  border-radius: 0.75em;
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.status-icon::before {
+  vertical-align: middle;
+  font-size: 0.85em;
+}
+
+.successful {
+  background: #6cc63f;
+}
+.successful::before {
+  content: "\f00c";
+}
+
+.resolved-successfully {
+  background: #3f881b;
+}
+.resolved-successfully::before {
+  content: "\f01e";
+}
+
+.failed {
+  background: #c63f3f;
+}
+.failed::before {
+  content: "\f00d";
+}
+
+.archived {
+  background: #000000;
+}
+.archived::before {
+  content: "\f187";
+  font-size: 0.85em;
+}
+
+.repeated-failure {
+  background: #c63f3f;
+}
+.repeated-failure::before {
+  content: "\f00d\f00d";
+  font-size: 0.6em;
+}
+
+.retry-issued {
+  background: #cccccc;
+  color: #000000;
+}
+.retry-issued::before {
+  content: "\f01e";
+}
 </style>

src/Frontend/src/resources/Message.ts

@@ -15,7 +15,7 @@ export default interface Message {
   is_system_message: boolean;
   conversation_id: string;
   headers: Header[];
-  status: string;
+  status: MessageStatus;
   message_intent: string;
   body_url: string;
   body_size: number;
@@ -27,3 +27,58 @@ export interface ExtendedMessage extends Message {
   headersNotFound: boolean;
   messageBodyNotFound: boolean;
 }
+
+export enum MessageStatus {
+  Failed = "failed",
+  RepeatedFailure = "repeatedFailure",
+  Successful = "successful",
+  ResolvedSuccessfully = "resolvedSuccessfully",
+  ArchivedFailure = "archivedFailure",
+  RetryIssued = "retryIssued",
+}
+
+// export class AuditMessage implements Message {
+//   id: string;
+//   message_id: string;
+//   message_type: string;
+//   sending_endpoint: EndpointDetails;
+//   receiving_endpoint: EndpointDetails;
+//   time_sent: string;
+//   processed_at: string;
+//   critical_time: string;
+//   processing_time: string;
+//   delivery_time: string;
+//   is_system_message: boolean;
+//   conversation_id: string;
+//   headers: Header[];
+//   status: string;
+//   message_intent: string;
+//   body_url: string;
+//   body_size: number;
+//   instance_id: string;
+
+//   constructor(message: Message) {
+//     this.id = message.id;
+//     this.message_id = message.message_id;
+//     this.message_type = message.message_type;
+//     this.sending_endpoint = message.sending_endpoint;
+//     this.receiving_endpoint = message.receiving_endpoint;
+//     this.time_sent = message.time_sent;
+//     this.processed_at = message.processed_at;
+//     this.critical_time = message.critical_time;
+//     this.processing_time = message.processing_time;
+//     this.delivery_time = message.delivery_time;
+//     this.is_system_message = message.is_system_message;
+//     this.conversation_id = message.conversation_id;
+//     this.headers = message.headers;
+//     this.status = message.status;
+//     this.message_intent = message.message_intent;
+//     this.body_url = message.body_url;
+//     this.body_size = message.body_size;
+//     this.instance_id = message.instance_id;
+//   }
+
+//   get message_status(): MessageStatus {
+//     return this.status as MessageStatus;
+//   }
+// }