address comments from review

Author: PhilBastian

src/Frontend/src/components/heartbeats/EndpointInstances.vue

@@ -89,7 +89,7 @@ async function deleteInstance(instance: EndpointsView) {
 
 async function deleteAllInstances() {
   try {
-    await Promise.all(sortedInstances.value.filter((instance: EndpointsView) => instance.name === endpointName).map((instance: EndpointsView) => store.deleteEndpointInstance(instance)));
+    await Promise.all(sortedInstances.value.filter((instance) => instance.name === endpointName).map((instance) => store.deleteEndpointInstance(instance)));
     useShowToast(TYPE.SUCCESS, "Endpoint deleted", "", false, { timeout: 1000 });
     await router.replace(backLink.value);
   } catch {

src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue

@@ -10,7 +10,6 @@ import HeartbeatsList from "./HeartbeatsList.vue";
 import { ref } from "vue";
 import ConfirmDialog from "@/components/ConfirmDialog.vue";
 import ResultsCount from "../ResultsCount.vue";
-import { LogicalEndpoint } from "@/resources/Heartbeat";
 
 enum Operation {
   Track = "track",
@@ -36,7 +35,7 @@ async function proceedWarningDialog() {
 
   try {
     await store.updateEndpointSettings(
-      filteredEndpoints.value.filter((endpoint: LogicalEndpoint) => (dialogWarningOperation.value === Operation.Track && !endpoint.track_instances) || (dialogWarningOperation.value === Operation.DoNotTrack && endpoint.track_instances))
+      filteredEndpoints.value.filter((endpoint) => (dialogWarningOperation.value === Operation.Track && !endpoint.track_instances) || (dialogWarningOperation.value === Operation.DoNotTrack && endpoint.track_instances))
     );
     useShowToast(TYPE.SUCCESS, `All endpoints set to '${dialogWarningOperation.value}'`, "", false, { timeout: 1000 });
   } catch {

src/Frontend/src/components/messages/SequenceDiagram/HandlersComponent.vue

@@ -69,23 +69,21 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
 </script>
 
 <template>
-  <g>
-    <g v-for="(handler, i) in handlerItems" :key="handler.id" :transform="`translate(${handler.left}, ${handler.y})`">
-      <!--Handler Activation Box-->
-      <rect :width="Handler_Width" :height="handler.height" :class="handler.incomingId && 'clickable'" :fill="handler.fill" @mouseover="() => store.setHighlightId(handler.incomingId)" @mouseleave="() => store.setHighlightId()" />
-      <path v-if="handler.icon" :d="handler.icon" fill="white" :transform="`translate(${Handler_Width / 2 - handler.iconSize / 2}, ${handler.height / 2 - handler.iconSize / 2})`" />
-      <!--Message Type and Icon-->
-      <g
-        v-if="handler.messageType"
-        :transform="`translate(${handler.messageTypeOffset}, 4)`"
-        class="clickable"
-        :fill="handler.messageTypeHighlight ? 'var(--highlight)' : 'var(--gray40)'"
-        @mouseover="() => store.setHighlightId(handler.incomingId)"
-        @mouseleave="() => store.setHighlightId()"
-      >
-        <path d="M9,3L9,3 9,0 0,0 0,3 4,3 4,6 0,6 0,9 4,9 4,12 0,12 0,15 9,15 9,12 5,12 5,9 9,9 9,6 5,6 5,3z" />
-        <text x="14" y="10" alignment-baseline="middle" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
-      </g>
+  <g v-for="(handler, i) in handlerItems" :key="handler.id" :transform="`translate(${handler.left}, ${handler.y})`">
+    <!--Handler Activation Box-->
+    <rect :width="Handler_Width" :height="handler.height" :class="handler.incomingId && 'clickable'" :fill="handler.fill" @mouseover="() => store.setHighlightId(handler.incomingId)" @mouseleave="() => store.setHighlightId()" />
+    <path v-if="handler.icon" :d="handler.icon" fill="white" :transform="`translate(${Handler_Width / 2 - handler.iconSize / 2}, ${handler.height / 2 - handler.iconSize / 2})`" />
+    <!--Message Type and Icon-->
+    <g
+      v-if="handler.messageType"
+      :transform="`translate(${handler.messageTypeOffset}, 4)`"
+      class="clickable"
+      :fill="handler.messageTypeHighlight ? 'var(--highlight)' : 'var(--gray40)'"
+      @mouseover="() => store.setHighlightId(handler.incomingId)"
+      @mouseleave="() => store.setHighlightId()"
+    >
+      <path d="M9,3L9,3 9,0 0,0 0,3 4,3 4,6 0,6 0,9 4,9 4,12 0,12 0,15 9,15 9,12 5,12 5,9 9,9 9,6 5,6 5,3z" />
+      <text x="14" y="10" alignment-baseline="middle" :ref="(el) => setMessageTypeRef(el as SVGTextElement, i)">{{ handler.messageType }}</text>
     </g>
   </g>
 </template>

src/Frontend/src/components/messages/SequenceDiagram/RoutesComponent.vue

@@ -82,7 +82,13 @@ function setMessageTypeRef(el: SVGTextElement, index: number) {
         @mouseover="() => store.setHighlightId(arrow.id)"
         @mouseleave="() => store.setHighlightId()"
       >
-        <rect v-if="arrow.highlight && arrow.messageTypeOffset" :width="arrow.highlightTextWidth + 19 + 4 + 4" :height="arrow.highlightTextHeight + 4 + 4" fill="var(--highlight-background)" />
+        <!--19 is width of MessageType icon, plus a gap-->
+        <rect
+          v-if="arrow.highlight && arrow.messageTypeOffset"
+          :width="arrow.highlightTextWidth + 19 + Message_Type_Margin + Message_Type_Margin"
+          :height="arrow.highlightTextHeight + Message_Type_Margin + Message_Type_Margin"
+          fill="var(--highlight-background)"
+        />
         <svg :x="Message_Type_Margin" :y="Message_Type_Margin" width="15" height="15" viewBox="0 0 32 32">
           <path
             v-if="arrow.type === RoutedMessageType.Timeout"

src/Frontend/src/resources/SequenceDiagram/Endpoint.ts

@@ -30,20 +30,20 @@ export function createSendingEndpoint(message: Message): Endpoint {
 }
 
 export class EndpointRegistry {
-  _store = new Map<string, EndpointItem>();
+  #store = new Map<string, EndpointItem>();
 
   register(item: Endpoint) {
-    let endpoint = this._store.get(item.name);
+    let endpoint = this.#store.get(item.name);
     if (!endpoint) {
       endpoint = item as EndpointItem;
-      this._store.set(endpoint.name, endpoint);
+      this.#store.set(endpoint.name, endpoint);
     }
 
     item.hosts.forEach((host) => endpoint.addHost(host as Host));
   }
 
   get(item: Endpoint) {
-    return this._store.get(item.name)! as Endpoint;
+    return this.#store.get(item.name)! as Endpoint;
   }
 }
 

src/Frontend/src/stores/HeartbeatInstancesStore.spec.ts

@@ -81,7 +81,7 @@ describe("HeartbeatInstancesStore tests", () => {
       [{ name: "", track_instances: true }]
     );
 
-    const names = () => filteredInstances.value.map((value: EndpointsView) => value.host_display_name);
+    const names = () => filteredInstances.value.map((value) => value.host_display_name);
     sortByInstances.value = { property: ColumnNames.InstanceName, isAscending: true };
     expect(names()).toEqual(["Anna", "John", "Oliver"]);
 

src/Frontend/src/stores/HeartbeatsStore.spec.ts

@@ -10,7 +10,7 @@ import * as precondition from "../../test/preconditions";
 import { EndpointSettings } from "@/resources/EndpointSettings";
 import { serviceControlWithHeartbeats } from "@/components/heartbeats/serviceControlWithHeartbeats";
 import flushPromises from "flush-promises";
-import { EndpointStatus, LogicalEndpoint } from "@/resources/Heartbeat";
+import { EndpointStatus } from "@/resources/Heartbeat";
 import { ColumnNames, useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 
 describe("HeartbeatsStore tests", () => {
@@ -302,7 +302,7 @@ describe("HeartbeatsStore tests", () => {
         ]
       );
 
-      const names = () => filteredHealthyEndpoints.value.map((value: LogicalEndpoint) => value.name);
+      const names = () => filteredHealthyEndpoints.value.map((value) => value.name);
 
       sortByInstances.value = { property: ColumnNames.Name, isAscending: true };
       expect(names()).toEqual(["Anna", "John", "Oliver"]);