Merge pull request #2325 from Particular/john/flowdiag2

Adding show/hide addresses to FlowDiagram

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

@@ -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/assets/endpoint.svg

@@ -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

@@ -24,6 +24,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;
@@ -278,6 +279,7 @@ onMounted(async () => {
 onUnmounted(() => {
   stopRefreshInterval();
 });
+const endpointColor = hexToCSSFilter("#929E9E").filter;
 </script>
 
 <template>
@@ -315,7 +317,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>