Support remote servicecontrol instances. Now will cache remotes. Add ability to hide individual cards, or entire platform capability section.

Author: warwickschroeder

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

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import FAIcon from "@/components/FAIcon.vue";
-import { IconDefinition, faCircle } from "@fortawesome/free-solid-svg-icons";
+import { IconDefinition, faCircle, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { StatusIndicator, WizardPage } from "@/components/platformcapabilities/types";
 import { Capability, CapabilityStatus } from "@/components/platformcapabilities/constants";
 import WizardDialog from "./WizardDialog.vue";
 
+const emit = defineEmits<{
+  hide: [];
+}>();
+
 const props = defineProps<{
   status: CapabilityStatus;
   icon: IconDefinition;
@@ -50,6 +54,9 @@ function handleButtonClick() {
       <div class="loading-spinner"></div>
       <div class="loading-text">Loading {{ props.title }} capability status...</div>
     </div>
+    <button class="hide-card-btn" @click="emit('hide')" v-tippy="'Hide this card'">
+      <FAIcon :icon="faTimes" />
+    </button>
     <div v-if="!props.isLoading" class="capability-header">
       <FAIcon
         :icon="props.icon"
@@ -119,6 +126,31 @@ function handleButtonClick() {
   min-height: 150px;
 }
 
+.hide-card-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #999);
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: all 0.2s ease;
+  font-size: 12px;
+  z-index: 5;
+}
+
+.capability-card:hover .hide-card-btn {
+  opacity: 1;
+}
+
+.hide-card-btn:hover {
+  background-color: var(--hover-bg, #f0f0f0);
+  color: var(--text-primary, #333);
+}
+
 .capability-available {
   border-left: 4px solid var(--success-color, #28a745);
 }

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

@@ -1,31 +1,50 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { storeToRefs } from "pinia";
 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/constants";
 import { getAuditingWizardPages } from "@/components/platformcapabilities/wizards/AuditingWizardPages";
 import { getMonitoringWizardPages } from "@/components/platformcapabilities/wizards/MonitoringWizardPages";
-import { getErrorWizardPages } from "@/components/platformcapabilities/wizards/ErrorWizardPages";
+import { usePlatformCapabilitiesStore } from "@/stores/PlatformCapabilitiesStore";
+import FAIcon from "@/components/FAIcon.vue";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+
+const platformCapabilitiesStore = usePlatformCapabilitiesStore();
+const { visibility } = storeToRefs(platformCapabilitiesStore);
 
 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));
+
+// Check if any cards are hidden (to show restore option)
+const hasHiddenCards = computed(() => !visibility.value.showAuditingCard || !visibility.value.showMonitoringCard || !visibility.value.showErrorCard);
 </script>
 
 <template>
-  <div class="platform-capabilities">
+  <div v-if="visibility.showSection" class="platform-capabilities">
     <div class="capabilities-header">
-      <h6>Platform Capabilities</h6>
-      <p class="capabilities-description">Discover and configure the capabilities of the Particular Service Platform</p>
+      <div class="capabilities-title-row">
+        <div>
+          <h6>Platform Capabilities</h6>
+          <p class="capabilities-description">Discover and configure the capabilities of the Particular Service Platform</p>
+        </div>
+        <div class="capabilities-actions">
+          <button v-if="hasHiddenCards" class="btn-link restore-btn" @click="platformCapabilitiesStore.showAll()" v-tippy="'Show all hidden cards'">Show All</button>
+          <button class="btn-icon hide-section-btn" @click="platformCapabilitiesStore.toggleSection()" v-tippy="'Hide this section'">
+            <FAIcon :icon="faChevronUp" />
+          </button>
+        </div>
+      </div>
     </div>
     <div class="capabilities-list">
       <CapabilityCard
+        v-if="visibility.showAuditingCard"
         :title="Capability.Auditing"
         subtitle="Track and search all successful messages flowing through your system"
         :status="auditing.status.value"
@@ -36,8 +55,10 @@ const errorWizardPages = computed(() => getErrorWizardPages(error.status.value))
         :help-button-text="auditing.helpButtonText.value"
         :help-button-url="auditing.helpButtonUrl.value"
         :wizard-pages="auditingWizardPages"
+        @hide="platformCapabilitiesStore.toggleAuditingCard()"
       ></CapabilityCard>
       <CapabilityCard
+        v-if="visibility.showMonitoringCard"
         :title="Capability.Monitoring"
         subtitle="Monitor endpoint performance and throughput"
         :status="monitoring.status.value"
@@ -48,8 +69,10 @@ const errorWizardPages = computed(() => getErrorWizardPages(error.status.value))
         :help-button-text="monitoring.helpButtonText.value"
         :help-button-url="monitoring.helpButtonUrl.value"
         :wizard-pages="monitoringWizardPages"
+        @hide="platformCapabilitiesStore.toggleMonitoringCard()"
       ></CapabilityCard>
       <CapabilityCard
+        v-if="visibility.showErrorCard"
         :title="Capability.Error"
         subtitle="Manage and retry failed messages"
         :status="error.status.value"
@@ -59,26 +82,98 @@ const errorWizardPages = computed(() => getErrorWizardPages(error.status.value))
         :isLoading="error.isLoading.value"
         :help-button-text="error.helpButtonText.value"
         :help-button-url="error.helpButtonUrl.value"
-        :wizard-pages="errorWizardPages"
+        @hide="platformCapabilitiesStore.toggleErrorCard()"
       ></CapabilityCard>
     </div>
   </div>
+  <div v-else class="platform-capabilities-collapsed">
+    <button class="btn-link expand-btn" @click="platformCapabilitiesStore.toggleSection()">
+      <FAIcon :icon="faChevronDown" />
+      <span>Show Platform Capabilities</span>
+    </button>
+  </div>
 </template>
 
 <style scoped>
 .capabilities-header {
   margin-bottom: 10px;
 }
+
+.capabilities-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
 .capabilities-description {
   font-size: 14px;
   color: var(--text-secondary, #666);
   margin: 0;
 }
+
+.capabilities-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--primary-color, #007bff);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 8px;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #666);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.btn-icon:hover {
+  background-color: var(--hover-bg, #f0f0f0);
+  color: var(--text-primary, #333);
+}
+
 .capabilities-list {
   display: flex;
   gap: 16px;
 }
+
 .capabilities-list > * {
   flex: 1;
 }
+
+.platform-capabilities-collapsed {
+  padding: 8px 0;
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  color: var(--text-secondary, #666);
+  cursor: pointer;
+  font-size: 14px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.expand-btn:hover {
+  background-color: var(--hover-bg, #f0f0f0);
+  color: var(--text-primary, #333);
+}
 </style>

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

@@ -6,7 +6,24 @@ import { storeToRefs } from "pinia";
 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";
+import { RemoteInstanceStatus, RemoteInstanceType, type RemoteInstance } from "@/resources/RemoteInstance";
+
+/**
+ * Checks if a remote instance is an audit instance using the cached instance type
+ */
+function isAuditInstance(instance: RemoteInstance): boolean {
+  return instance.cachedInstanceType === RemoteInstanceType.Audit;
+}
+
+/**
+ * Filters remote instances to only include audit instances
+ */
+function filterAuditInstances(instances: RemoteInstance[] | null | undefined): RemoteInstance[] {
+  if (!instances) {
+    return [];
+  }
+  return instances.filter(isAuditInstance);
+}
 
 const AuditingDescriptions: CapabilityStatusToStringMap = {
   [CapabilityStatus.EndpointsNotConfigured]:
@@ -87,6 +104,9 @@ export function useAuditingCapability(): CapabilityComposable {
   const { store: remoteInstancesStore } = useRemoteInstancesAutoRefresh();
   const { remoteInstances } = storeToRefs(remoteInstancesStore);
 
+  // Filter to only include audit instances (those with audit_retention_period in configuration)
+  const auditInstances = computed(() => filterAuditInstances(remoteInstances.value));
+
   // 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();
@@ -98,17 +118,17 @@ export function useAuditingCapability(): CapabilityComposable {
   // Determine overall auditing status
   const auditStatus = computed(() => {
     // 1. Check if there are any audit instances configured.
-    if (!remoteInstances.value || remoteInstances.value.length === 0) {
+    if (auditInstances.value.length === 0) {
       return CapabilityStatus.InstanceNotConfigured;
     }
 
     // 2. Check if all audit instances are unavailable
-    if (allAuditInstancesUnavailable(remoteInstances.value)) {
+    if (allAuditInstancesUnavailable(auditInstances.value)) {
       return CapabilityStatus.Unavailable;
     }
 
     // 3. Check if some but not all audit instances are unavailable
-    if (hasPartiallyUnavailableAuditInstances(remoteInstances.value)) {
+    if (hasPartiallyUnavailableAuditInstances(auditInstances.value)) {
       return CapabilityStatus.PartiallyUnavailable;
     }
 
@@ -138,18 +158,18 @@ export function useAuditingCapability(): CapabilityComposable {
     const indicators: StatusIndicator[] = [];
 
     // Add an indicator for each remote audit instance
-    if (remoteInstances.value && remoteInstances.value.length > 0) {
-      remoteInstances.value.forEach((instance, index) => {
+    if (auditInstances.value.length > 0) {
+      auditInstances.value.forEach((instance, index) => {
         const isAvailable = instance.status === RemoteInstanceStatus.Online;
-        const label = remoteInstances.value!.length > 1 ? `Instance ${index + 1}` : "Instance";
+        const label = auditInstances.value.length > 1 ? `Instance ${index + 1}` : "Instance";
         const tooltip = isAvailable ? AuditingIndicatorTooltip.InstanceAvailable : AuditingIndicatorTooltip.InstanceUnavailable;
 
         indicators.push(createIndicator(label, isAvailable ? CapabilityStatus.Available : CapabilityStatus.Unavailable, tooltip, instance.api_uri, instance.version));
       });
     }
 
     // Messages available indicator - show if at least one instance is available
-    if (hasAvailableAuditInstances(remoteInstances.value)) {
+    if (hasAvailableAuditInstances(auditInstances.value)) {
       const messagesAvailable = isAllMessagesSupported.value && hasSuccessfulMessages.value;
 
       let messageTooltip = "";