Update report and setup tabs

src/ServicePulse.Host/vue/src/resources/ConnectionTestResults.ts

@@ -0,0 +1,12 @@
+export default interface ConnectionTestResults {
+  transport: string;
+  audit_connection_result: ConnectionSettingsTestResult;
+  monitoring_connection_result: ConnectionSettingsTestResult;
+  broker_connection_result: ConnectionSettingsTestResult;
+}
+
+export interface ConnectionSettingsTestResult {
+  connection_successful: boolean;
+  connection_error_messages: string[];
+  diagnostics: string;
+}

src/ServicePulse.Host/vue/src/resources/ReportGenerationState.ts

@@ -0,0 +1,5 @@
+export default interface ReportGenerationState {
+  transport: string;
+  report_can_be_generated: boolean;
+  reason: string;
+}

src/ServicePulse.Host/vue/src/resources/ThroughputConnectionSettings.ts

@@ -0,0 +1,9 @@
+export default interface ThroughputConnectionSettings {
+  service_control_settings: ThroughputConnectionSetting[];
+  broker_settings: ThroughputConnectionSetting[];
+}
+
+export interface ThroughputConnectionSetting {
+  name: string;
+  description: string;
+}

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

@@ -1,20 +1,56 @@
 <script setup lang="ts">
-function generateReport() {}
+import { computed, onMounted, ref } from "vue";
+import { Transport } from "./Transport";
+import ReportGenerationState from "@/resources/ReportGenerationState";
+import throughputClient from "@/views/throughputreport/throughputClient";
+import { serviceControlUrl } from "@/composables/serviceServiceControlUrls";
+
+const reportState = ref<ReportGenerationState | null>(null);
+const masks = ref<string>("");
+
+onMounted(async () => {
+  reportState.value = await throughputClient.reportAvailable();
+});
+
+const transport = computed(() => {
+  if (reportState.value == null) {
+    return Transport.None;
+  }
+
+  return reportState.value.transport as Transport;
+});
+
+function masksChanged(event: Event) {
+  masks.value = (event.target as HTMLInputElement).value;
+}
+
+function generateReportUrl() {
+  const values = masks.value
+    .split("\n")
+    .filter((value) => value.length > 0)
+    .map((value) => `mask=${encodeURIComponent(value)}`);
+
+  return `${serviceControlUrl.value}throughput/report/file?${values.join("&")}`;
+}
 </script>
 
 <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>
+        <textarea class="form-control" rows="3" :value="masks" @input="masksChanged"></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 class="col-6 text-end">
+        <a v-if="reportState?.report_can_be_generated" class="btn btn-primary actions" role="button" :href="generateReportUrl()">Generate Report</a>
+        <a v-else class="btn btn-primary disabled actions" aria-disabled="true" role="button">Generate Report</a>
+        <p v-if="!reportState?.report_can_be_generated">{{ reportState?.reason }}</p>
+      </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 class="extra-info" v-if="transport === Transport.MSMQ">
+    <p>If you have more endpoints that do not have audit/monitoring turned on, please also send us a screen shot of their MSMQ queues in addition to the report.</p>
   </div>
 </template>
 

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

@@ -1,21 +1,33 @@
 <script setup lang="ts">
-import { setupData } from "@/views/throughputreport/randomData";
+import { computed, onMounted, ref } from "vue";
+import ConnectionTestResults from "@/resources/ConnectionTestResults";
+import ThroughputConnectionSettings from "@/resources/ThroughputConnectionSettings";
+import { Transport } from "./Transport";
+import throughputClient from "@/views/throughputreport/throughputClient";
 
-enum Transport {
-  MSMQ,
-  AzureStorageQueue,
-  NetStandardAzureServiceBus,
-  LearningTransport,
-  "RabbitMQ.ClassicConventionalRouting",
-  "RabbitMQ.ClassicDirectRouting",
-  "SQLServer",
-  "AmazonSQS",
-}
+const testResults = ref<ConnectionTestResults | null>(null);
+const settingsInfo = ref<ThroughputConnectionSettings | null>(null);
+
+onMounted(async () => {
+  await getTestResults();
+});
 
-const transport: Transport = Transport.MSMQ; //["RabbitMQ.ClassicConventionalRouting"];
+const transport = computed(() => {
+  if (testResults.value == null) {
+    return Transport.None;
+  }
+
+  return testResults.value.transport as Transport;
+});
+
+async function getTestResults() {
+  const [test, settings] = await Promise.all([throughputClient.test(), throughputClient.setting()]);
+  testResults.value = test;
+  settingsInfo.value = settings;
+}
 
 function displayTransportNameForInstructions() {
-  switch (transport) {
+  switch (transport.value) {
     case Transport.AzureStorageQueue:
     case Transport.NetStandardAzureServiceBus:
       return "Azure";
@@ -31,7 +43,9 @@ function displayTransportNameForInstructions() {
   }
 }
 
-function test() {}
+async function test() {
+  await getTestResults();
+}
 </script>
 
 <template>
@@ -45,14 +59,14 @@ function test() {}
     <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>
+      <p>For more information read <a href="https://docs.particular.net/servicecontrol/creating-config-file">this documentation</a>.</p>
     </div>
     <div class="row">
       <div class="card">
         <div class="card-body">
-          <h5 class="card-title">List of settings required</h5>
+          <h5 class="card-title">List of settings</h5>
           <ul class="card-text settingsList">
-            <li v-for="item in setupData" :key="item.name">
+            <li v-for="item in settingsInfo?.broker_settings" :key="item.name">
               <div>
                 <strong>{{ item.name }}</strong>
               </div>
@@ -63,6 +77,15 @@ function test() {}
       </div>
     </div>
     <div class="row"><button class="btn btn-primary actions" type="button" @click="test">Test Connection</button></div>
+    <div class="row">
+      <h3>Test Connection results</h3>
+      <h4>Broker</h4>
+      <pre>{{ testResults?.broker_connection_result.diagnostics }}</pre>
+      <h4>Audit</h4>
+      <pre>{{ testResults?.audit_connection_result.diagnostics }}</pre>
+      <h4>Monitoring</h4>
+      <pre>{{ testResults?.monitoring_connection_result.diagnostics }}</pre>
+    </div>
   </template>
 </template>
 

src/ServicePulse.Host/vue/src/views/throughputreport/Transport.ts

@@ -0,0 +1,11 @@
+export enum Transport {
+  None = "None",
+  MSMQ = "MSMQ",
+  AzureStorageQueue = "AzureStorageQueue",
+  NetStandardAzureServiceBus = "NetStandardAzureServiceBus",
+  LearningTransport = "LearningTransport",
+  "RabbitMQ.ClassicConventionalRouting" = "RabbitMQ.ClassicConventionalRouting",
+  "RabbitMQ.ClassicDirectRouting" = "RabbitMQ.ClassicDirectRouting",
+  "SQLServer" = "SQLServer",
+  "AmazonSQS" = "AmazonSQS",
+}

src/ServicePulse.Host/vue/src/views/throughputreport/throughputClient.ts

@@ -1,11 +1,15 @@
 import { useFetchFromServiceControl, usePostToServiceControl, useTypedFetchFromServiceControl } from "@/composables/serviceServiceControlUrls";
 import EndpointThroughputSummary from "@/resources/EndpointThroughputSummary";
 import UpdateUserIndicator from "@/resources/UpdateUserIndicator";
+import ConnectionTestResults from "@/resources/ConnectionTestResults";
+import ThroughputConnectionSettings from "@/resources/ThroughputConnectionSettings";
+import { useDownloadFile } from "@/composables/fileDownloadCreator";
+import ReportGenerationState from "@/resources/ReportGenerationState";
 
 class ThroughputClient {
   constructor(readonly basePath: string) {}
 
-  public async endpoints(): Promise<EndpointThroughputSummary[]> {
+  public async endpoints() {
     const [_, data] = await useTypedFetchFromServiceControl<EndpointThroughputSummary[]>(`${this.basePath}/endpoints`);
 
     return data;
@@ -14,6 +18,26 @@ class ThroughputClient {
   public async updateIndicators(data: UpdateUserIndicator[]): Promise<void> {
     const response = await usePostToServiceControl(`${this.basePath}/endpoints/update`, data);
   }
+
+  public async test() {
+    const [, data] = await useTypedFetchFromServiceControl<ConnectionTestResults>(`${this.basePath}/settings/test`);
+    return data;
+  }
+
+  public async setting() {
+    const [, data] = await useTypedFetchFromServiceControl<ThroughputConnectionSettings>(`${this.basePath}/settings/info`);
+    return data;
+  }
+
+  public async reportAvailable() {
+    const [, data] = await useTypedFetchFromServiceControl<ReportGenerationState>(`${this.basePath}/report/available`);
+    return data;
+  }
+
+  public downloadReport(masks: string[]) {
+    //useDownloadFile();
+    //const response = await useFetchFromServiceControl(`${this.basePath}/report/file`);
+  }
 }
 
 export default new ThroughputClient("throughput");