Use MetadataItem

Author: johnsimons

src/Frontend/src/components/messages/MessageView.vue

@@ -19,6 +19,7 @@ import ExportMessageButton from "@/components/messages/ExportMessageButton.vue";
 import TabsLayout from "@/components/TabsLayout.vue";
 import { storeToRefs } from "pinia";
 import MetadataLabel from "@/components/messages/MetadataLabel.vue";
+import MetadataItem from "@/components/MetadataItem.vue";
 import { hexToCSSFilter } from "hex-to-css-filter";
 import SagaDiagram from "./SagaDiagram.vue";
 import FAIcon from "@/components/FAIcon.vue";
@@ -131,21 +132,21 @@ onMounted(() => {
               />
               <template v-if="state.data.failure_metadata.edited">
                 <MetadataLabel tooltip="Message was edited" type="info" text="Edited" />
-                <span v-if="state.data.failure_metadata.edit_of" class="metadata metadata-link">
-                  <FAIcon :icon="faClockRotateLeft" /> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of), query: route.query }">View previous version</RouterLink>
-                </span>
+                <MetadataItem v-if="state.data.failure_metadata.edit_of" :icon="faClockRotateLeft" class="metadata-link">
+                  <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(state.data.failure_metadata.edit_of), query: route.query }">View previous version</RouterLink>
+                </MetadataItem>
               </template>
-              <span v-if="state.data.failure_metadata.time_of_failure" class="metadata"><FAIcon :icon="faClock" /> Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></span>
-              <span v-else class="metadata"><FAIcon :icon="faClock" /> Processed at: <time-since :date-utc="state.data.processed_at"></time-since></span>
+              <MetadataItem v-if="state.data.failure_metadata.time_of_failure" :icon="faClock">Failed: <time-since :date-utc="state.data.failure_metadata.time_of_failure"></time-since></MetadataItem>
+              <MetadataItem v-else :icon="faClock">Processed at: <time-since :date-utc="state.data.processed_at"></time-since></MetadataItem>
               <template v-if="state.data.receiving_endpoint">
                 <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ state.data.receiving_endpoint.name }}</span>
-                <span class="metadata"><FAIcon :icon="faLaptop" /> Machine: {{ state.data.receiving_endpoint.host }}</span>
+                <MetadataItem :icon="faLaptop">Machine: {{ state.data.receiving_endpoint.host }}</MetadataItem>
               </template>
               <span v-if="state.data.failure_metadata.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ state.data.failure_metadata.redirect }}</span>
               <template v-if="state.data.failure_status.archived">
-                <span class="metadata"><FAIcon :icon="faClock" /> Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></span>
-                <span class="metadata danger" v-if="state.data.failure_status.delete_soon"><FAIcon :icon="faTrash" class="danger" /> Scheduled for permanent deletion: immediately</span>
-                <span class="metadata danger" v-else><FAIcon :icon="faTrash" class="danger" /> Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></span>
+                <MetadataItem :icon="faClock">Deleted: <time-since :date-utc="state.data.failure_metadata.last_modified"></time-since></MetadataItem>
+                <MetadataItem v-if="state.data.failure_status.delete_soon" :icon="faTrash" class="danger">Scheduled for permanent deletion: immediately</MetadataItem>
+                <MetadataItem v-else :icon="faTrash" class="danger">Scheduled for permanent deletion: <time-since :date-utc="state.data.failure_metadata.deleted_in"></time-since></MetadataItem>
               </template>
             </div>
           </div>