Improvements to Flow diagram

Author: johnsimons

src/Frontend/package-lock.json

@@ -26,6 +26,7 @@
     "bootstrap": "^5.3.5",
     "bootstrap-icons": "^1.11.3",
     "codemirror": "^6.0.1",
+    "hex-to-css-filter": "^6.0.0",
     "lodash.debounce": "^4.0.8",
     "lossless-json": "^4.0.2",
     "memoize-one": "^6.0.0",

src/Frontend/package.json

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    text: string;
+    ellipsesStyle?: "RightSide" | "LeftSide";
+  }>(),
+  { ellipsesStyle: "RightSide" }
+);
+
+const textContainer = ref<HTMLElement | null>(null);
+const tooltipText = ref("");
+
+const updateTooltip = () => {
+  if (textContainer.value) {
+    tooltipText.value = textContainer.value.scrollWidth > textContainer.value.clientWidth ? textContainer.value.textContent || "" : "";
+  }
+};
+
+onMounted(() => {
+  updateTooltip();
+});
+
+watch([() => props.text], () => {
+  updateTooltip();
+});
+</script>
+
+<template>
+  <div ref="textContainer" title="" class="text-container hackToPreventSafariFromShowingTooltip" :class="{ 'left-side-ellipsis': ellipsesStyle === 'LeftSide' }" v-tippy="{ content: tooltipText, maxWidth: 'none' }">
+    {{ text }}
+  </div>
+</template>
+
+<style scoped>
+.hackToPreventSafariFromShowingTooltip::after {
+  content: "";
+  display: block;
+}
+
+.left-side-ellipsis {
+  direction: rtl;
+  text-align: left;
+}
+
+.text-container {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+</style>

src/Frontend/src/assets/endpoint.svg

@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
 import moment from "moment";
+import { Tippy } from "vue-tippy";
 
 const emptyDate = "0001-01-01T00:00:00";
 
 const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string; titleValue?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a", titleValue: undefined });
 
 let interval: number | undefined = undefined;
 
-const title = ref(),
+const title = ref<string[]>([]),
   text = ref();
 
 function updateText() {
   if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
-    title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
+    title.value = props.titleValue ? [props.titleValue] : [`${m.local().format("LLLL")} (local)`, `${m.utc().format("LLLL")} (UTC)`];
   } else {
     text.value = props.defaultTextOnFailure;
-    title.value = props.titleValue ?? props.defaultTextOnFailure;
+    title.value = [props.titleValue ?? props.defaultTextOnFailure];
   }
 }
 
@@ -34,5 +35,10 @@ onUnmounted(() => window.clearInterval(interval));
 </script>
 
 <template>
-  <span :title="title">{{ text }}</span>
+  <Tippy>
+    <template #content>
+      <div v-for="row in title" :key="row">{{ row }}</div>
+    </template>
+    <span>{{ text }}</span>
+  </Tippy>
 </template>

src/Frontend/src/components/TextEllipses.vue

@@ -4,6 +4,7 @@ import TimeSince from "../TimeSince.vue";
 import NoData from "../NoData.vue";
 import routeLinks from "@/router/routeLinks";
 import { FailedMessageStatus, ExtendedFailedMessage } from "@/resources/FailedMessage";
+import { hexToCSSFilter } from "hex-to-css-filter";
 
 export interface IMessageList {
   getSelectedMessages(): ExtendedFailedMessage[];
@@ -89,6 +90,7 @@ defineExpose<IMessageList>({
   isAnythingDisplayed,
   numberDisplayed,
 });
+const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 
 <template>
@@ -122,7 +124,7 @@ defineExpose<IMessageList>({
                 <span v-if="message.edited" :title="'Message was edited'" class="label sidebar-label label-info metadata-label">Edited</span>
 
                 <span class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :dateUtc="message.time_of_failure"></time-since></span>
-                <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ message.receiving_endpoint.name }}</span>
+                <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ message.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ message.receiving_endpoint.host }}</span>
                 <span class="metadata" v-if="message.redirect"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ message.redirect }}</span>
                 <!-- for deleted messages-->

src/Frontend/src/components/TimeSince.vue

@@ -13,7 +13,7 @@ defineProps<{ date?: string; tooltipTarget: string }>();
         <p>No heartbeat data received for this {{ tooltipTarget }}.</p>
         <p>Have you installed and configured the <a target="_blank" href="https://docs.particular.net/monitoring/heartbeats/install-plugin">heartbeats plugin</a> for this {{ tooltipTarget }}?</p>
       </template>
-      <span title="Last Heartbeat">No data available</span>
+      <span>No data available</span>
     </tippy>
   </p>
 </template>

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

@@ -25,6 +25,7 @@ import HeadersView from "@/components/messages/HeadersView.vue";
 import StackTraceView from "@/components/messages/StacktraceView.vue";
 import { stringify, parse } from "lossless-json";
 import xmlFormat from "xml-formatter";
+import { hexToCSSFilter } from "hex-to-css-filter";
 
 let refreshInterval: number | undefined;
 let pollingFaster = false;
@@ -280,6 +281,7 @@ onMounted(async () => {
 onUnmounted(() => {
   stopRefreshInterval();
 });
+const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 
 <template>
@@ -317,7 +319,7 @@ onUnmounted(() => {
                   <i class="fa fa-history"></i> <RouterLink :to="{ path: routeLinks.messages.failedMessage.link(failedMessage.edit_of), query: { back: route.path } }">View previous version</RouterLink>
                 </span>
                 <span v-if="failedMessage.time_of_failure" class="metadata"><i class="fa fa-clock-o"></i> Failed: <time-since :date-utc="failedMessage.time_of_failure"></time-since></span>
-                <span class="metadata"><i class="fa pa-endpoint"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
+                <span class="metadata"><i class="fa pa-endpoint" :style="{ filter: endpointColor }"></i> Endpoint: {{ failedMessage.receiving_endpoint.name }}</span>
                 <span class="metadata"><i class="fa fa-laptop"></i> Machine: {{ failedMessage.receiving_endpoint.host }}</span>
                 <span v-if="failedMessage.redirect" class="metadata"><i class="fa pa-redirect-source pa-redirect-small"></i> Redirect: {{ failedMessage.redirect }}</span>
               </div>