User indicator update for transactional session (#2456)

* User indicator update for transactional session

* links in legend options

* Apply suggestions from code review

Co-authored-by: Poornima Nayar <[email protected]>

* Individual legend components

* Updated legends

---------

Co-authored-by: Andreas Öhlund <[email protected]>
Co-authored-by: Poornima Nayar <[email protected]>

Author: 3 people

src/Frontend/src/views/throughputreport/EndpointsView.vue

@@ -3,18 +3,26 @@ import routeLinks from "@/router/routeLinks";
 import isRouteSelected from "@/composables/isRouteSelected";
 import { UserIndicator } from "@/views/throughputreport/endpoints/userIndicator";
 import { userIndicatorMapper } from "@/views/throughputreport/endpoints/userIndicatorMapper";
-import { ref } from "vue";
+import { ref, type Component } from "vue";
 import { useThroughputStore } from "@/stores/ThroughputStore";
 import { storeToRefs } from "pinia";
+import LegendNServiceBusEndpoint from "./LegendNServiceBusEndpoint.vue";
+import LegendNServiceBusEndpointNoLongerInUse from "./LegendNServiceBusEndpointNoLongerInUse.vue";
+import LegendTransactionalSessionProcessorEndpoint from "./LegendTransactionalSessionProcessorEndpoint.vue";
+import LegendSendOnlyEndpoint from "./LegendSendOnlyEndpoint.vue";
+import LegendPlannedToDecommission from "./LegendPlannedToDecommission.vue";
+import LegendNotNServiceBusEndpoint from "./LegendNotNServiceBusEndpoint.vue";
 
 const { isBrokerTransport } = storeToRefs(useThroughputStore());
 const showLegend = ref(true);
-const legendOptions = new Map<UserIndicator, string>([
-  [UserIndicator.NServiceBusEndpoint, "Known NServiceBus Endpoint"],
-  [UserIndicator.NServiceBusEndpointNoLongerInUse, "NServiceBus Endpoint that is no longer in use, usually this would have zero throughput"],
-  [UserIndicator.SendOnlyOrTransactionSessionEndpoint, "If the endpoint has no throughput or the endpoint has Transactional Session feature enabled"],
-  [UserIndicator.PlannedToDecommission, "If the endpoint is planned to no longer be used in the next 30 days"],
-  [UserIndicator.NotNServiceBusEndpoint, "Not an NServiceBus Endpoint"],
+
+const legendOptions = new Map<UserIndicator, Component>([
+  [UserIndicator.NServiceBusEndpoint, LegendNServiceBusEndpoint],
+  [UserIndicator.NServiceBusEndpointNoLongerInUse, LegendNServiceBusEndpointNoLongerInUse],
+  [UserIndicator.TransactionalSessionProcessorEndpoint, LegendTransactionalSessionProcessorEndpoint],
+  [UserIndicator.SendOnlyEndpoint, LegendSendOnlyEndpoint],
+  [UserIndicator.PlannedToDecommission, LegendPlannedToDecommission],
+  [UserIndicator.NotNServiceBusEndpoint, LegendNotNServiceBusEndpoint],
 ]);
 
 function toggleOptionsLegendVisible() {
@@ -32,8 +40,8 @@ function toggleOptionsLegendVisible() {
         <a href="#" :aria-label="`${showLegend ? 'Hide' : 'Show'} Endpoint Types meaning`" @click.prevent="toggleOptionsLegendVisible()">{{ showLegend ? "Hide" : "Show" }} Endpoint Types meaning.</a>
       </p>
       <div v-show="showLegend" class="alert alert-info">
-        <div v-for="[key, value] in legendOptions" :key="key">
-          <strong>{{ userIndicatorMapper.get(key) }}</strong> - {{ value }}.
+        <div v-for="[key, LegendComponent] in legendOptions" :key="key">
+          <strong>{{ userIndicatorMapper.get(key) }}</strong> - <component :is="LegendComponent" />.
         </div>
       </div>
     </div>

src/Frontend/src/views/throughputreport/LegendNServiceBusEndpoint.vue

@@ -0,0 +1,6 @@
+<template>
+  <span>
+    Known NServiceBus
+    <a href="https://docs.particular.net/nservicebus/endpoints/" target="_blank">Endpoint</a>
+  </span>
+</template>

src/Frontend/src/views/throughputreport/LegendNServiceBusEndpointNoLongerInUse.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>NServiceBus Endpoint that is no longer in use, usually this would have zero throughput</span>
+</template>

src/Frontend/src/views/throughputreport/LegendNotNServiceBusEndpoint.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>Not an NServiceBus Endpoint</span>
+</template>

src/Frontend/src/views/throughputreport/LegendPlannedToDecommission.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>If the endpoint is planned to no longer be used in the next 30 days</span>
+</template>

src/Frontend/src/views/throughputreport/LegendSendOnlyEndpoint.vue

@@ -0,0 +1,3 @@
+<template>
+  <span>An endpoint that <a href="https://docs.particular.net/nservicebus/hosting/#self-hosting-send-only-hosting" target="_blank">only sends</a> messages and does not process any messages</span>
+</template>

src/Frontend/src/views/throughputreport/LegendTransactionalSessionProcessorEndpoint.vue

@@ -0,0 +1,3 @@
+<template>
+  <span> An <a href="https://docs.particular.net/nservicebus/transactional-session/#design-considerations" target="_blank">endpoint that is only processing transactional session control messages</a> </span>
+</template>

src/Frontend/src/views/throughputreport/endpoints/DetectedBrokerQueuesView.vue

@@ -22,7 +22,14 @@ const { testResults } = storeToRefs(store);
   </template>
   <DetectedListView
     ariaLabel="Detected broker queues"
-    :indicator-options="[UserIndicator.NServiceBusEndpoint, UserIndicator.NotNServiceBusEndpoint, UserIndicator.SendOnlyOrTransactionSessionEndpoint, UserIndicator.NServiceBusEndpointNoLongerInUse, UserIndicator.PlannedToDecommission]"
+    :indicator-options="[
+      UserIndicator.NServiceBusEndpoint,
+      UserIndicator.NotNServiceBusEndpoint,
+      UserIndicator.TransactionalSessionProcessorEndpoint,
+      UserIndicator.SendOnlyEndpoint,
+      UserIndicator.NServiceBusEndpointNoLongerInUse,
+      UserIndicator.PlannedToDecommission,
+    ]"
     :source="DataSource.Broker"
     column-title="Queue Name"
     :show-endpoint-type-placeholder="true"

src/Frontend/src/views/throughputreport/endpoints/DetectedEndpointsView.vue

@@ -23,7 +23,7 @@ const { isBrokerTransport, hasErrors } = storeToRefs(useThroughputStore());
   </template>
   <DetectedListView
     ariaLabel="Detected endpoints"
-    :indicator-options="[UserIndicator.NServiceBusEndpoint, UserIndicator.SendOnlyOrTransactionSessionEndpoint, UserIndicator.NServiceBusEndpointNoLongerInUse, UserIndicator.PlannedToDecommission]"
+    :indicator-options="[UserIndicator.NServiceBusEndpoint, UserIndicator.TransactionalSessionProcessorEndpoint, UserIndicator.SendOnlyEndpoint, UserIndicator.NServiceBusEndpointNoLongerInUse, UserIndicator.PlannedToDecommission]"
     :source="DataSource.WellKnownEndpoint"
     column-title="Endpoint Name"
     :show-endpoint-type-placeholder="false"

src/Frontend/src/views/throughputreport/endpoints/userIndicator.ts

@@ -1,7 +1,8 @@
 export enum UserIndicator {
   NServiceBusEndpoint = "NServiceBusEndpoint",
   NotNServiceBusEndpoint = "NotNServiceBusEndpoint",
-  SendOnlyOrTransactionSessionEndpoint = "SendOnlyOrTransactionSessionEndpoint",
+  TransactionalSessionProcessorEndpoint = "TransactionalSessionProcessorEndpoint",
+  SendOnlyEndpoint = "SendOnlyEndpoint",
   NServiceBusEndpointNoLongerInUse = "NServiceBusEndpointNoLongerInUse",
   PlannedToDecommission = "PlannedToDecommission",
 }