Tab the PC detail page and add panel groups to the ADR-010 contract

plugins/computers/frontend/views/PCDetail.vue

@@ -84,8 +84,10 @@
            Hardware and the rest follow. Panels self-order among themselves by
            their declared position, and self-hide when a site has no plugin
            answering for this asset type. -->
-      <div class="content-grid">
-        <PluginAssetPanels ref="assetPanels" :assetid="computer.assetid" />
+      <AssetDetailTabs v-model="activegroup" :tabs="detailtabs" label="Computer detail sections" />
+
+      <div v-show="activegroup === 'details'" class="content-grid">
+        <PluginAssetPanels ref="assetPanels" :assetid="computer.assetid" group="details" />
 
         <!-- Left Column -->
         <div class="content-column">
@@ -256,7 +258,25 @@
             </div>
           </div>
 
-          <!-- Installed Applications -->
+          <!-- Custom Fields -->
+          <CustomFieldsSection :assetid="computer.assetid" />
+
+          <!-- All relationships (controls, defaultprinter, ...) -->
+          <AssetRelationships v-if="computer.assetid" :assetid="computer.assetid" />
+
+          <!-- Notes -->
+          <div class="section-card" v-if="computer.notes">
+            <h3 class="section-title">Notes</h3>
+            <p class="notes-text">{{ computer.notes }}</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Software. The core installed-applications list plus anything a plugin
+           declared for this group. -->
+      <div v-show="activegroup === 'software'" class="content-grid">
+        <PluginAssetPanels :assetid="computer.assetid" group="software" />
+        <div class="content-column">
           <div class="section-card" v-if="installedApps.length > 0">
             <h3 class="section-title">Installed Applications</h3>
             <div class="app-list">
@@ -276,21 +296,22 @@
               </router-link>
             </div>
           </div>
-
-          <!-- Custom Fields -->
-          <CustomFieldsSection :assetid="computer.assetid" />
-
-          <!-- All relationships (controls, defaultprinter, ...) -->
-          <AssetRelationships v-if="computer.assetid" :assetid="computer.assetid" />
-
-          <!-- Notes -->
-          <div class="section-card" v-if="computer.notes">
-            <h3 class="section-title">Notes</h3>
-            <p class="notes-text">{{ computer.notes }}</p>
-          </div>
         </div>
       </div>
 
+      <!-- Metrics, Actions and Activity are entirely plugin-contributed: the
+           telemetry, the service controls and the event feed all belong to the
+           endpoints plugin, and core knows nothing about them. -->
+      <div v-show="activegroup === 'metrics'" class="content-grid">
+        <PluginAssetPanels :assetid="computer.assetid" group="metrics" />
+      </div>
+      <div v-show="activegroup === 'actions'" class="content-grid">
+        <PluginAssetPanels :assetid="computer.assetid" group="actions" />
+      </div>
+      <div v-show="activegroup === 'activity'" class="content-grid">
+        <PluginAssetPanels :assetid="computer.assetid" group="activity" />
+      </div>
+
       <!-- Audit Footer -->
       <div class="audit-footer">
         <span>Created {{ formatDate(computer.createddate) }}<template v-if="computer.createdby"> by {{ computer.createdby }}</template></span>
@@ -305,7 +326,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 import { colorStyle } from "@/utils/colorStyle"
 import { useRoute, useRouter } from 'vue-router'
 import { computersApi, applicationsApi, endpointsApi } from '@/api'
@@ -315,6 +336,7 @@ import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
 import AssetTriageBand from '@/components/AssetTriageBand.vue'
 import PluginAssetPanels from '@/components/PluginAssetPanels.vue'
+import AssetDetailTabs from '@/components/AssetDetailTabs.vue'
 import AssetRelationships from '@/components/AssetRelationships.vue'
 import { useIdentifierFlags } from '@/composables/identifierSettings'
 import { setRecordTitle } from '@/composables/pageTitle'
@@ -344,6 +366,36 @@ const hasRecordCheckin = computed(() => {
 })
 const installedApps = ref([])
 const assetPanels = ref(null)
+
+// Which tab is showing. Always opens on Details: it holds what the asset IS,
+// which is the answer somebody arriving from a search or a link came for.
+const activegroup = ref('details')
+
+// Only offer a tab that has something in it. An empty tab is worse than an
+// absent one - it reads as broken rather than as "this site does not collect
+// that". Details always shows because core fills it regardless of plugins.
+//
+// populatedGroups comes from PluginAssetPanels, which knows which panels
+// actually returned data; Software is additionally true when core has an
+// installed-applications list of its own.
+const detailtabs = computed(() => {
+  const filled = assetPanels.value?.populatedGroups ?? new Set()
+  const has = (key) => filled.has ? filled.has(key) : false
+  const tabs = [{ key: 'details', label: 'Details' }]
+  if (has('software') || installedApps.value.length > 0) {
+    tabs.push({ key: 'software', label: 'Software', count: installedApps.value.length || null })
+  }
+  if (has('metrics')) tabs.push({ key: 'metrics', label: 'Metrics' })
+  if (has('actions')) tabs.push({ key: 'actions', label: 'Actions' })
+  if (has('activity')) tabs.push({ key: 'activity', label: 'Activity' })
+  return tabs
+})
+
+// A tab can disappear on refetch - a plugin gets disabled, telemetry stops
+// answering. Fall back to Details rather than leaving the page showing nothing.
+watch(detailtabs, (tabs) => {
+  if (!tabs.some((tab) => tab.key === activegroup.value)) activegroup.value = 'details'
+})
 const restarting = ref(false)
 const refreshing = ref(false)