Update capability cards WIP

Author: warwickschroeder

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

@@ -8,8 +8,8 @@ const props = defineProps<{
   icon: IconDefinition;
   title: Capability;
   subtitle: string;
-  helpUrl: string;
-  dataUrl: string;
+  helpButtonText: string;
+  helpButtonUrl: string;
   description: string;
   indicators?: StatusIndicator[];
   isLoading?: boolean;
@@ -25,7 +25,7 @@ const props = defineProps<{
       'capability-unavailable': !props.isLoading && props.status === CapabilityStatus.Unavailable,
       'capability-partially-unavailable': !props.isLoading && props.status === CapabilityStatus.PartiallyUnavailable,
       'capability-loading': props.isLoading,
-      'capability-notconfigured': !props.isLoading && props.status === CapabilityStatus.NotConfigured,
+      'capability-notconfigured': !props.isLoading && (props.status === CapabilityStatus.EndpointsNotConfigured || props.status === CapabilityStatus.InstanceNotConfigured),
     }"
   >
     <div v-if="props.isLoading" class="loading-overlay">
@@ -40,7 +40,7 @@ const props = defineProps<{
           'text-success': props.status === CapabilityStatus.Available,
           'text-danger': props.status === CapabilityStatus.Unavailable,
           'text-warning': props.status === CapabilityStatus.PartiallyUnavailable,
-          'text-info': props.status === CapabilityStatus.NotConfigured,
+          'text-info': props.status === CapabilityStatus.EndpointsNotConfigured || props.status === CapabilityStatus.InstanceNotConfigured,
         }"
       />
       <div class="capability-info">
@@ -53,7 +53,7 @@ const props = defineProps<{
                 class="indicator-light"
                 :class="{
                   'light-success': indicator.status === CapabilityStatus.Available,
-                  'light-warning': indicator.status === CapabilityStatus.NotConfigured || indicator.status === CapabilityStatus.PartiallyUnavailable,
+                  'light-warning': indicator.status === CapabilityStatus.EndpointsNotConfigured || indicator.status === CapabilityStatus.PartiallyUnavailable,
                   'light-danger': indicator.status === CapabilityStatus.Unavailable,
                 }"
               />
@@ -63,7 +63,7 @@ const props = defineProps<{
         </div>
         <div class="capability-subtitle">{{ props.subtitle }}</div>
       </div>
-      <div v-if="props.status !== CapabilityStatus.NotConfigured" class="capability-status">
+      <div v-if="props.status !== CapabilityStatus.EndpointsNotConfigured && props.status !== CapabilityStatus.InstanceNotConfigured" class="capability-status">
         <span
           class="status-badge"
           :class="{
@@ -80,8 +80,8 @@ const props = defineProps<{
       <div class="capability-description">
         {{ 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 ? "Learn More" : props.title === Capability.Auditing ? "View Messages" : "View Metrics" }}
+      <a :href="props.helpButtonUrl" :target="props.status === CapabilityStatus.Available ? '_self' : '_blank'" class="btn-primary learn-more-btn">
+        {{ props.helpButtonText }}
       </a>
     </div>
   </div>

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

@@ -23,8 +23,8 @@ const monitoring = useMonitoringCapability();
         :description="auditing.description.value"
         :indicators="auditing.indicators.value"
         :isLoading="auditing.isLoading.value"
-        help-url="https://docs.particular.net/nservicebus/operations/auditing"
-        data-url="#/messages"
+        :help-button-text="auditing.helpButtonText.value"
+        :help-button-url="auditing.helpButtonUrl.value"
       ></CapabilityCard>
       <CapabilityCard
         :title="Capability.Monitoring"
@@ -34,8 +34,8 @@ const monitoring = useMonitoringCapability();
         :description="monitoring.description.value"
         :indicators="monitoring.indicators.value"
         :isLoading="monitoring.isLoading.value"
-        help-url="https://docs.particular.net/monitoring/metrics/install-plugin"
-        data-url="#/monitoring"
+        :help-button-text="monitoring.helpButtonText.value"
+        :help-button-url="monitoring.helpButtonUrl.value"
       ></CapabilityCard>
     </div>
   </div>

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

@@ -1,20 +1,32 @@
-import { computed, watchEffect } from "vue";
+import { computed } from "vue";
 import { CapabilityStatus, StatusIndicator } from "@/components/platformcapabilities/types";
 import useIsAllMessagesSupported, { minimumSCVersionForAllMessages } from "@/components/audit/isAllMessagesSupported";
 import { storeToRefs } from "pinia";
-import { useAuditStore } from "@/stores/AuditStore";
-import { MessageStatus } from "@/resources/Message";
-import { type CapabilityComposable, useCapabilityBase } from "./BaseCapability";
-import { useRemoteInstancesStore } from "@/stores/RemoteInstancesStore";
+import { type CapabilityComposable, type CapabilityStatusToStringMap, useCapabilityBase } from "./BaseCapability";
+import useRemoteInstancesAutoRefresh from "@/composables/useRemoteInstancesAutoRefresh";
+import useAuditStoreAutoRefresh from "@/composables/useAuditStoreAutoRefresh";
 import { RemoteInstanceStatus, type RemoteInstance } from "@/resources/RemoteInstance";
 
-enum AuditingCardDescription {
-  NotConfigured = "Auditing instance is connected but no successful messages have been processed yet or you don't have auditing enabled for any endpoints.",
-  Unavailable = "All Auditing instances are configured but not responding.",
-  PartiallyUnavailable = "Some Auditing instances are not responding. Check individual instance status below.",
-  NotSupported = `Auditing instance is connected but the "All Messages" feature requires ServiceControl ${minimumSCVersionForAllMessages} or higher.`,
-  Available = "Auditing is available and processing successful messages.",
-}
+const AuditingDescriptions: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]:
+    "A ServiceControl Auditing instance is connected but no successful messages have been processed yet or you don't have auditing enabled for any endpoints. Click 'Learn More' to find out how to set up auditing for your endpoints.",
+  [CapabilityStatus.InstanceNotConfigured]: "A ServiceControl Auditing instance has not been configured. Click 'Get Started' to learn more about setting up auditing.",
+  [CapabilityStatus.Unavailable]: "All ServiceControl Auditing instances are configured but not responding.",
+  [CapabilityStatus.PartiallyUnavailable]: "Some ServiceControl Auditing instances are not responding.",
+  [CapabilityStatus.Available]: "All ServiceControl Auditing instances are available and endpoints have been configured to send audit messages.",
+};
+
+const AuditingHelpButtonText: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "Learn More",
+  [CapabilityStatus.InstanceNotConfigured]: "Get Started",
+  [CapabilityStatus.Available]: "View Messages",
+};
+
+const AuditingHelpButtonUrl: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "https://docs.particular.net/nservicebus/operations/auditing",
+  [CapabilityStatus.InstanceNotConfigured]: "https://docs.particular.net/servicecontrol/audit-instances/",
+  [CapabilityStatus.Available]: "#/messages",
+};
 
 enum AuditingIndicatorTooltip {
   InstanceAvailable = "Auditing instance is configured and available",
@@ -65,34 +77,26 @@ function hasPartiallyUnavailableAuditInstances(instances: RemoteInstance[] | nul
 }
 
 export function useAuditingCapability(): CapabilityComposable {
-  const { getIconForStatus, createIndicator } = useCapabilityBase();
+  const { getIconForStatus, getDescriptionForStatus, getHelpButtonTextForStatus, getHelpButtonUrlForStatus, createIndicator } = useCapabilityBase();
 
   // This gives us the list of remote instances configured in ServiceControl.
-  const remoteInstancesStore = useRemoteInstancesStore();
+  // Uses auto-refresh to periodically check status (every 5 seconds)
+  const { store: remoteInstancesStore } = useRemoteInstancesAutoRefresh();
   const { remoteInstances } = storeToRefs(remoteInstancesStore);
 
-  // This gives us the messages array which includes all messages (successful and failed).
-  const auditStore = useAuditStore();
-  const { messages } = storeToRefs(auditStore);
-  const successfulMessageCount = computed(() => {
-    return messages.value.filter((msg) => msg.status === MessageStatus.Successful || msg.status === MessageStatus.ResolvedSuccessfully).length;
-  });
+  // This gives us the hasSuccessfulMessages flag which indicates if any successful messages exist.
+  // Uses auto-refresh (minimal) to periodically check for at least 1 successful message (every 5 seconds)
+  const { store: auditStore } = useAuditStoreAutoRefresh();
+  const { hasSuccessfulMessages } = storeToRefs(auditStore);
 
+  // This tells us if the "All Messages" feature is supported by checking the SC version
   const isAllMessagesSupported = useIsAllMessagesSupported();
 
-  watchEffect(() => {
-    // Trigger initial load of audit messages if audit is configured
-    if (hasAvailableAuditInstances(remoteInstances.value)) {
-      // TODO: This is not auto refreshed. User will need to manually refresh the page to get updated data. Ideally this would auto refresh periodically.
-      auditStore.refresh();
-    }
-  });
-
   // Determine overall auditing status
   const auditStatus = computed(() => {
     // 1. Check if there are any audit instances configured.
     if (!remoteInstances.value || remoteInstances.value.length === 0) {
-      return CapabilityStatus.NotConfigured;
+      return CapabilityStatus.InstanceNotConfigured;
     }
 
     // 2. Check if all audit instances are unavailable
@@ -105,9 +109,9 @@ export function useAuditingCapability(): CapabilityComposable {
       return CapabilityStatus.PartiallyUnavailable;
     }
 
-    // 4. Check if all messages feature is supported and there are successful messages
-    if (!isAllMessagesSupported.value || successfulMessageCount.value === 0) {
-      return CapabilityStatus.NotConfigured;
+    // 4. Check if the 'All Messages' feature is not supported OR there are no successful messages
+    if (!isAllMessagesSupported.value || !hasSuccessfulMessages.value) {
+      return CapabilityStatus.EndpointsNotConfigured;
     }
 
     // 5. Audit instance is available and there are successful audit messages
@@ -118,22 +122,13 @@ export function useAuditingCapability(): CapabilityComposable {
   const auditIcon = computed(() => getIconForStatus(auditStatus.value));
 
   // Determine description based on status
-  const auditDescription = computed(() => {
-    if (auditStatus.value === CapabilityStatus.NotConfigured) {
-      return AuditingCardDescription.NotConfigured;
-    }
+  const auditDescription = computed(() => getDescriptionForStatus(auditStatus.value, AuditingDescriptions));
 
-    if (auditStatus.value === CapabilityStatus.Available) {
-      return AuditingCardDescription.Available;
-    }
+  // Determine help button text based on status
+  const auditHelpButtonText = computed(() => getHelpButtonTextForStatus(auditStatus.value, AuditingHelpButtonText));
 
-    if (auditStatus.value === CapabilityStatus.PartiallyUnavailable) {
-      return AuditingCardDescription.PartiallyUnavailable;
-    }
-
-    // Unavailable
-    return AuditingCardDescription.Unavailable;
-  });
+  // Determine help button URL based on status
+  const auditHelpButtonUrl = computed(() => getHelpButtonUrlForStatus(auditStatus.value, AuditingHelpButtonUrl));
 
   // Determine indicators
   const auditIndicators = computed(() => {
@@ -152,7 +147,7 @@ export function useAuditingCapability(): CapabilityComposable {
 
     // Messages available indicator - show if at least one instance is available
     if (hasAvailableAuditInstances(remoteInstances.value)) {
-      const messagesAvailable = isAllMessagesSupported.value && successfulMessageCount.value > 0;
+      const messagesAvailable = isAllMessagesSupported.value && hasSuccessfulMessages.value;
 
       let messageTooltip = "";
       if (messagesAvailable) {
@@ -163,7 +158,7 @@ export function useAuditingCapability(): CapabilityComposable {
         messageTooltip = AuditingIndicatorTooltip.MessagesUnavailable;
       }
 
-      indicators.push(createIndicator("Messages", messagesAvailable ? CapabilityStatus.Available : CapabilityStatus.NotConfigured, messageTooltip));
+      indicators.push(createIndicator("Messages", messagesAvailable ? CapabilityStatus.Available : CapabilityStatus.EndpointsNotConfigured, messageTooltip));
     }
 
     return indicators;
@@ -178,5 +173,7 @@ export function useAuditingCapability(): CapabilityComposable {
     description: auditDescription,
     indicators: auditIndicators,
     isLoading,
+    helpButtonText: auditHelpButtonText,
+    helpButtonUrl: auditHelpButtonUrl,
   };
 }

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

@@ -8,14 +8,19 @@ export interface CapabilityComposable {
   description: ComputedRef<string>;
   indicators: ComputedRef<StatusIndicator[]>;
   isLoading: ComputedRef<boolean>;
+  helpButtonText: ComputedRef<string>;
+  helpButtonUrl: ComputedRef<string>;
 }
 
+export type CapabilityStatusToStringMap = Partial<Record<CapabilityStatus, string>>;
+
 export function useCapabilityBase() {
   const getIconForStatus = (status: CapabilityStatus): IconDefinition => {
     switch (status) {
       case CapabilityStatus.Available:
         return faCheck;
-      case CapabilityStatus.NotConfigured:
+      case CapabilityStatus.EndpointsNotConfigured:
+      case CapabilityStatus.InstanceNotConfigured:
         return faInfoCircle;
       case CapabilityStatus.Unavailable:
         return faTimes;
@@ -24,6 +29,18 @@ export function useCapabilityBase() {
     }
   };
 
+  const getDescriptionForStatus = (status: CapabilityStatus, descriptions: CapabilityStatusToStringMap): string => {
+    return descriptions[status] ?? "";
+  };
+
+  const getHelpButtonTextForStatus = (status: CapabilityStatus, helpButtonTexts: CapabilityStatusToStringMap): string => {
+    return helpButtonTexts[status] || "Learn More";
+  };
+
+  const getHelpButtonUrlForStatus = (status: CapabilityStatus, helpButtonUrls: CapabilityStatusToStringMap): string => {
+    return helpButtonUrls[status] || "#/dashboard";
+  };
+
   const createIndicator = (label: string, status: CapabilityStatus, tooltip: string, url?: string, version?: string): StatusIndicator => {
     let fullTooltip = tooltip;
     if (url) {
@@ -41,6 +58,9 @@ export function useCapabilityBase() {
 
   return {
     getIconForStatus,
+    getDescriptionForStatus,
+    getHelpButtonTextForStatus,
+    getHelpButtonUrlForStatus,
     createIndicator,
   };
 }