Adding more to report

src/ServicePulse.Host/vue/src/views/throughputreport/EndpointsView.vue

@@ -176,7 +176,7 @@ function save() {
       <div class="col">
         <drop-down label="Sort" :select-item="sortData.find((v) => v.value === filterData.sort)" :callback="sortChanged" :items="sortData" />
       </div>
-      <div class="col-1">
+      <div class="col-1 text-end">
         <button class="btn btn-primary" type="button" @click="save">Save</button>
       </div>
     </div>

src/ServicePulse.Host/vue/src/views/throughputreport/ReportView.vue

@@ -1,5 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+function generateReport() {}
+</script>
 
-<template>Report</template>
+<template>
+  <div class="box">
+    <div class="row">
+      <div class="col-6">
+        <label class="form-label">Mask sensitive data</label>
+        <textarea class="form-control" rows="3"></textarea>
+        <div class="form-text">Masks sensitive information in the generated report. One word per line.</div>
+      </div>
+      <div class="col-6 text-end"><button class="btn btn-primary actions" type="button" @click="generateReport">Generate Report</button></div>
+    </div>
+  </div>
+  <div class="extra-info">
+    <p>For MSMQ, ask the user if they have more endpoints that do not have audit/monitoring turned on, and if so to also send us a screen shot of their MSMQqueues in addition to the report.</p>
+  </div>
+</template>
 
-<style scoped></style>
+<style scoped>
+.extra-info {
+  margin: 15px 0;
+}
+</style>

src/ServicePulse.Host/vue/src/views/throughputreport/SetupView.vue

@@ -2,6 +2,7 @@
 import { setupData } from "@/views/throughputreport/randomData";
 
 enum Transport {
+  MSMQ,
   AzureStorageQueue,
   NetStandardAzureServiceBus,
   LearningTransport,
@@ -11,7 +12,7 @@ enum Transport {
   "AmazonSQS",
 }
 
-const transport: Transport = Transport["RabbitMQ.ClassicConventionalRouting"];
+const transport: Transport = Transport.MSMQ; //["RabbitMQ.ClassicConventionalRouting"];
 
 function displayTransportNameForInstructions() {
   switch (transport) {
@@ -34,27 +35,35 @@ function test() {}
 </script>
 
 <template>
-  <div class="intro">
-    <p>In order for ServicePulse to collect throughput data directly from {{ displayTransportNameForInstructions() }} you need to setup the following settings in ServiceControl.</p>
-    <p>There are two options to set the settings, you can either set environment variables or alternative is to set it directly in the <code>ServiceControl.exe.config</code> file.</p>
-    <p>For more information read this documentation.</p>
-  </div>
-  <div class="row">
-    <div class="card">
-      <div class="card-body">
-        <h5 class="card-title">List of settings required</h5>
-        <ul class="card-text settingsList">
-          <li v-for="item in setupData" :key="item.name">
-            <div>
-              <strong>{{ item.name }}</strong>
-            </div>
-            <p>{{ item.description }}</p>
-          </li>
-        </ul>
+  <template v-if="transport === Transport.MSMQ">
+    <div class="intro">
+      <p>In order for ServicePulse to collect throughput data from MSMQ endpoints, you need to enable metrics for all your endpoints.</p>
+      <p>To setup ServicePulse to collect endpoint Metrics <a href="https://docs.particular.net/monitoring/metrics/">read the Metrics documentation</a>.</p>
+    </div>
+  </template>
+  <template v-else>
+    <div class="intro">
+      <p>In order for ServicePulse to collect throughput data directly from {{ displayTransportNameForInstructions() }} you need to setup the following settings in ServiceControl.</p>
+      <p>There are two options to set the settings, you can either set environment variables or alternative is to set it directly in the <code>ServiceControl.exe.config</code> file.</p>
+      <p>For more information read this documentation.</p>
+    </div>
+    <div class="row">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">List of settings required</h5>
+          <ul class="card-text settingsList">
+            <li v-for="item in setupData" :key="item.name">
+              <div>
+                <strong>{{ item.name }}</strong>
+              </div>
+              <p>{{ item.description }}</p>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="row"><button class="btn btn-primary actions" type="button" @click="test">Test Connection</button></div>
+    <div class="row"><button class="btn btn-primary actions" type="button" @click="test">Test Connection</button></div>
+  </template>
 </template>
 
 <style scoped>