Update naming for view data button

Author: warwickschroeder

src/Frontend/src/components/platformcapabilities/CapabilityCard.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import FAIcon from "@/components/FAIcon.vue";
 import { IconDefinition, faCircle } from "@fortawesome/free-solid-svg-icons";
-import { CapabilityStatus, StatusIndicator } from "@/components/platformcapabilities/types";
+import { CapabilityStatus, StatusIndicator, Capability } from "@/components/platformcapabilities/types";
 
 const props = defineProps<{
   status: CapabilityStatus;
   icon: IconDefinition;
-  title: string;
+  title: Capability;
   subtitle: string;
   helpUrl: string;
   dataUrl: string;
@@ -80,7 +80,7 @@ const props = defineProps<{
         {{ props.description }}
       </div>
       <a :href="props.status === CapabilityStatus.Available ? props.dataUrl : props.helpUrl" :target="props.status === CapabilityStatus.Available ? '_self' : '_blank'" class="btn-primary learn-more-btn">
-        {{ props.status === CapabilityStatus.Available ? "View Data" : "Learn More" }}
+        {{ props.status !== CapabilityStatus.Available ? "Learn More" : props.title === Capability.Auditing ? "View Messages" : "View Metrics" }}
       </a>
     </div>
   </div>

src/Frontend/src/components/platformcapabilities/PlatformCapabilitiesDashboardItem.vue

@@ -4,6 +4,7 @@ import useThroughputStoreAutoRefresh from "@/composables/useThroughputStoreAutoR
 import { storeToRefs } from "pinia";
 import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability";
 import { useMonitoringCapability } from "@/components/platformcapabilities/capabilities/MonitoringCapability";
+import { Capability } from "@/components/platformcapabilities/types";
 
 const { store } = useThroughputStoreAutoRefresh();
 const { testResults } = storeToRefs(store);
@@ -19,7 +20,7 @@ const monitoring = useMonitoringCapability();
     </div>
     <div class="capabilities-list">
       <CapabilityCard
-        title="Auditing"
+        :title="Capability.Auditing"
         subtitle="Track and search all successful messages flowing through your system"
         :status="auditing.status.value"
         :icon="auditing.icon.value"
@@ -30,7 +31,7 @@ const monitoring = useMonitoringCapability();
         data-url="#/messages"
       ></CapabilityCard>
       <CapabilityCard
-        title="Monitoring"
+        :title="Capability.Monitoring"
         subtitle="Monitor endpoint performance and throughput"
         :status="monitoring.status.value"
         :icon="monitoring.icon.value"

src/Frontend/src/components/platformcapabilities/capabilities/MonitoringCapability.ts

@@ -100,7 +100,7 @@ export function useMonitoringCapability() {
     // data available indicator - only show if instance is connected
     if (instanceAvailable) {
       indicators.push({
-        label: "Data",
+        label: "Metrics",
         status: !endpointListIsEmpty.value ? CapabilityStatus.Available : CapabilityStatus.PartiallyAvailable,
         tooltip: !endpointListIsEmpty.value ? MonitoringIndicatorTooltip.DataAvailable : MonitoringIndicatorTooltip.DataUnavailable,
       });

src/Frontend/src/components/platformcapabilities/types.ts

@@ -10,3 +10,8 @@ export enum CapabilityStatus {
   PartiallyAvailable = "Data Unavailable", // Instance is available but not data is flowing for reasons
   NotConfigured = "Not Configured", // Instance is not configured. Promo should be shown
 }
+
+export enum Capability {
+  Monitoring = "Monitoring",
+  Auditing = "Auditing",
+}