Add error instance capability

Author: warwickschroeder

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

@@ -28,7 +28,7 @@ function handleButtonClick() {
   if (shouldShowWizard.value) {
     showWizard.value = true;
   } else {
-    window.open(props.helpButtonUrl, "_blank");
+    window.open(props.helpButtonUrl, props.status !== CapabilityStatus.Available ? "_blank" : "_self");
   }
 }
 </script>

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

@@ -3,15 +3,19 @@ import { computed } from "vue";
 import CapabilityCard from "@/components/platformcapabilities/CapabilityCard.vue";
 import { useAuditingCapability } from "@/components/platformcapabilities/capabilities/AuditingCapability";
 import { useMonitoringCapability } from "@/components/platformcapabilities/capabilities/MonitoringCapability";
+import { useErrorCapability } from "@/components/platformcapabilities/capabilities/ErrorCapability";
 import { Capability } from "@/components/platformcapabilities/types";
 import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages";
 import { getMonitoringWizardPages } from "@/components/platformcapabilities/wizards/MonitoringWizardPages";
+import { getErrorWizardPages } from "@/components/platformcapabilities/wizards/ErrorWizardPages";
 
 const auditing = useAuditingCapability();
 const monitoring = useMonitoringCapability();
+const error = useErrorCapability();
 
 const auditingWizardPages = computed(() => getAuditingWizardPages(auditing.status.value));
 const monitoringWizardPages = computed(() => getMonitoringWizardPages(monitoring.status.value));
+const errorWizardPages = computed(() => getErrorWizardPages(error.status.value));
 </script>
 
 <template>
@@ -45,6 +49,18 @@ const monitoringWizardPages = computed(() => getMonitoringWizardPages(monitoring
         :help-button-url="monitoring.helpButtonUrl.value"
         :wizard-pages="monitoringWizardPages"
       ></CapabilityCard>
+      <CapabilityCard
+        :title="Capability.Error"
+        subtitle="Manage and retry failed messages"
+        :status="error.status.value"
+        :icon="error.icon.value"
+        :description="error.description.value"
+        :indicators="error.indicators.value"
+        :isLoading="error.isLoading.value"
+        :help-button-text="error.helpButtonText.value"
+        :help-button-url="error.helpButtonUrl.value"
+        :wizard-pages="errorWizardPages"
+      ></CapabilityCard>
     </div>
   </div>
 </template>

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

@@ -0,0 +1,101 @@
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { CapabilityStatus, StatusIndicator } from "@/components/platformcapabilities/types";
+import { useConnectionsAndStatsStore } from "@/stores/ConnectionsAndStatsStore";
+import { type CapabilityComposable, type CapabilityStatusToStringMap, useCapabilityBase } from "./BaseCapability";
+
+const ErrorDescriptions: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "The ServiceControl Error instance is connected but no failed messages have been received yet. This may be because no failures have occurred, or recoverability is not configured.",
+  [CapabilityStatus.Available]: "The ServiceControl Error instance is available and has received failed messages.",
+};
+
+const ErrorHelpButtonText: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "Learn More",
+  [CapabilityStatus.Available]: "View Failed Messages",
+};
+
+const ErrorHelpButtonUrl: CapabilityStatusToStringMap = {
+  [CapabilityStatus.EndpointsNotConfigured]: "https://docs.particular.net/nservicebus/recoverability/",
+  [CapabilityStatus.Available]: "#/failed-messages",
+};
+
+enum ErrorIndicatorTooltip {
+  InstanceAvailable = "The ServiceControl Error instance is configured and available",
+  InstanceUnavailable = "The ServiceControl Error instance is not responding",
+  FailedMessagesAvailable = "Failed messages have been received and are available for management",
+  FailedMessagesUnavailable = "No failed messages have been received yet",
+}
+
+export function useErrorCapability(): CapabilityComposable {
+  const { getIconForStatus, getDescriptionForStatus, getHelpButtonTextForStatus, getHelpButtonUrlForStatus, createIndicator } = useCapabilityBase();
+
+  // This tells us the connection state to the ServiceControl Error instance
+  // and the failed message count. Auto refreshed every 5 seconds.
+  const connectionsStore = useConnectionsAndStatsStore();
+  const connectionState = connectionsStore.connectionState;
+  const { failedMessageCount } = storeToRefs(connectionsStore);
+
+  // Determine if there are any failed messages
+  const hasFailedMessages = computed(() => failedMessageCount.value > 0);
+
+  // Determine overall error status
+  const errorStatus = computed(() => {
+    const connectionSuccessful = connectionState.connected && !connectionState.unableToConnect;
+
+    // 1. Check if we are connected to the error instance
+    if (!connectionSuccessful) {
+      return CapabilityStatus.Unavailable;
+    }
+
+    // 2. Check if there are any failed messages
+    if (!hasFailedMessages.value) {
+      return CapabilityStatus.EndpointsNotConfigured;
+    }
+
+    // 3. If connected and has failed messages, the error instance is fully available
+    return CapabilityStatus.Available;
+  });
+
+  // Icon based on status
+  const errorIcon = computed(() => getIconForStatus(errorStatus.value));
+
+  // Determine description based on status
+  const errorDescription = computed(() => getDescriptionForStatus(errorStatus.value, ErrorDescriptions));
+
+  // Determine help button text based on status
+  const errorHelpButtonText = computed(() => getHelpButtonTextForStatus(errorStatus.value, ErrorHelpButtonText));
+
+  // Determine help button URL based on status
+  const errorHelpButtonUrl = computed(() => getHelpButtonUrlForStatus(errorStatus.value, ErrorHelpButtonUrl));
+
+  // Determine indicators
+  const errorIndicators = computed(() => {
+    const indicators: StatusIndicator[] = [];
+
+    const connectionSuccessful = connectionState.connected && !connectionState.unableToConnect;
+    const instanceTooltip = connectionSuccessful ? ErrorIndicatorTooltip.InstanceAvailable : ErrorIndicatorTooltip.InstanceUnavailable;
+
+    indicators.push(createIndicator("Instance", connectionSuccessful ? CapabilityStatus.Available : CapabilityStatus.Unavailable, instanceTooltip));
+
+    // Only show failed messages indicator if instance is connected
+    if (connectionSuccessful) {
+      const messagesIndicatorTooltip = hasFailedMessages.value ? ErrorIndicatorTooltip.FailedMessagesAvailable : ErrorIndicatorTooltip.FailedMessagesUnavailable;
+      indicators.push(createIndicator("Failed Messages", hasFailedMessages.value ? CapabilityStatus.Available : CapabilityStatus.EndpointsNotConfigured, messagesIndicatorTooltip));
+    }
+
+    return indicators;
+  });
+
+  // Loading state - error is loading if we haven't attempted connection yet
+  const isLoading = computed(() => !connectionState.connected && !connectionState.unableToConnect && connectionState.connecting);
+
+  return {
+    status: errorStatus,
+    icon: errorIcon,
+    description: errorDescription,
+    indicators: errorIndicators,
+    isLoading,
+    helpButtonText: errorHelpButtonText,
+    helpButtonUrl: errorHelpButtonUrl,
+  };
+}

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

@@ -15,4 +15,5 @@ export enum CapabilityStatus {
 export enum Capability {
   Monitoring = "Monitoring",
   Auditing = "Auditing",
+  Error = "Recoverability",
 }

src/Frontend/src/components/platformcapabilities/wizards/ErrorWizardPages.ts

@@ -0,0 +1,51 @@
+import type { WizardPage } from "../WizardDialog.vue";
+import { CapabilityStatus } from "../types";
+
+const ErrorEndpointsNotConfiguredPages: WizardPage[] = [
+  {
+    title: "Configure Recoverability",
+    content: `
+      <p>Your ServiceControl Error instance is connected, but no failed messages have been received yet. This could be because no message processing failures have occurred, endpoints are not configured to send failed messages to ServiceControl, or endpoints are not currently running.</p>
+      <p>To ensure failed messages appear in ServicePulse when failures occur, configure recoverability in your NServiceBus endpoints:</p>
+      <ul>
+        <li><strong>Configure the error queue</strong> - Tell your endpoints where to send failed messages</li>
+        <li><strong>Deploy your changes</strong> - Restart endpoints with the new configuration</li>
+      </ul>
+    `,
+    learnMoreUrl: "https://docs.particular.net/nservicebus/recoverability/",
+    learnMoreText: "Learn about recoverability",
+  },
+  {
+    title: "Configure Your Endpoints",
+    content: `
+      <p>Add error queue configuration to your endpoint setup code:</p>
+      <p><code>endpointConfiguration.SendFailedMessagesTo("error");</code></p>
+      <p>Make sure the error queue name matches what your ServiceControl Error instance is monitoring.</p>
+    `,
+    learnMoreUrl: "https://docs.particular.net/nservicebus/recoverability/configure-error-handling",
+    learnMoreText: "View configuration options",
+  },
+  {
+    title: "Verify Your Setup",
+    content: `
+      <p>Once configured:</p>
+      <ul>
+        <li><strong>Trigger a test failure</strong> - Send a message that will fail processing</li>
+        <li><strong>Check this capability card</strong> - it will automatically update when failures are detected</li>
+        <li><strong>View the Failed Messages tab</strong> to see and manage your failed messages</li>
+      </ul>
+      <p>If failed messages don't appear after a few minutes, check your endpoint logs and ServiceControl logs for any errors.</p>
+    `,
+    learnMoreUrl: "https://docs.particular.net/servicecontrol/troubleshooting",
+    learnMoreText: "Troubleshooting guide",
+  },
+];
+
+export function getErrorWizardPages(status: CapabilityStatus): WizardPage[] {
+  switch (status) {
+    case CapabilityStatus.EndpointsNotConfigured:
+      return ErrorEndpointsNotConfiguredPages;
+    default:
+      return [];
+  }
+}