Add support for system monitor in topology

src/lib/topology/displayTabs.ts

@@ -1,8 +1,9 @@
 import { TopologyNode } from '@deltares/fews-pi-requests'
 import { RouteLocationNamedRaw } from 'vue-router'
+import { nodeHasCharts, nodeHasMap, nodeHasReports, nodeHasSchematicStatusDisplay, nodeHasSystemMonitor } from './nodes'
 
 export interface DisplayTab {
-  type: 'charts' | 'map' | 'reports' | 'schematic-status-display'
+  type: 'charts' | 'map' | 'reports' | 'schematic-status-display' | 'system-monitor'
   id: string
   title: string
   href?: string
@@ -45,30 +46,16 @@ const displayTabs: DisplayTab[] = [
     icon: 'mdi-view-dashboard',
     active: false,
   },
+  {
+    type: 'system-monitor',
+    id: 'ssd',
+    title: 'System Monitor',
+    to: { name: 'TopologySystemMonitor' },
+    icon: 'mdi-view-dashboard',
+    active: false,
+  },
 ]
 
-
-
-function nodeHasMap(node: TopologyNode) {
-  return node.gridDisplaySelection !== undefined || node.filterIds !== undefined
-}
-
-function nodeHasCharts(node: TopologyNode) {
-  return (
-    node.displayGroups !== undefined ||
-    node.displayId !== undefined ||
-    (node.plotId != undefined && node.locationIds != undefined)
-  )
-}
-
-function nodeHasReports(node: TopologyNode) {
-  return node.reportDisplay?.reports !== undefined
-}
-
-function nodeHasSchematicStatusDisplay(node: TopologyNode) {
-  return node.scadaPanelId !== undefined
-}
-
 export function displayTabsForNode(node: TopologyNode, parentNodeId?: string) {
   for (const tab of displayTabs) {
     const params = {
@@ -92,6 +79,10 @@ export function displayTabsForNode(node: TopologyNode, parentNodeId?: string) {
         tab.active = nodeHasSchematicStatusDisplay(node)
         tab.to.params = { ...params, panelId: node.scadaPanelId }
         break
+      case 'system-monitor':
+        tab.active = nodeHasSystemMonitor(node)
+        tab.to.params = { ...params }
+        break
     }
   }
   return displayTabs.filter((tab) => tab.active)

src/lib/topology/nodes.ts

@@ -115,18 +115,43 @@ function topologyNodeIsVisible(node: TopologyNode): boolean {
 }
 
 function hasSupportedDisplay(node: TopologyNode): boolean {
-  if (node.scadaPanelId !== undefined) return true
+  if (
+    nodeHasSchematicStatusDisplay(node) ||
+    nodeHasMap(node) ||
+    nodeHasCharts(node) ||
+    nodeHasReports(node) ||
+    nodeHasSystemMonitor(node)
+  )
+    return true
   if (
     node.filterIds !== undefined &&
     node.filterIds.length == 1 &&
     node.dataDownloadDisplay !== undefined
   )
     return true
-  if (node.plotId != undefined && node.locationIds != undefined) return true
-  if (node.filterIds !== undefined && node.filterIds.length > 0) return true
-  if (node.gridDisplaySelection !== undefined) return true
-  if (node.displayId !== undefined) return true
-  if (node.displayGroups !== undefined && node.displayGroups.length > 0)
-    return true
   return false
 }
+
+export function nodeHasMap(node: TopologyNode) {
+  return node.gridDisplaySelection !== undefined || node.filterIds !== undefined
+}
+
+export function nodeHasCharts(node: TopologyNode) {
+  return (
+    node.displayGroups !== undefined ||
+    node.displayId !== undefined ||
+    (node.plotId != undefined && node.locationIds != undefined)
+  )
+}
+
+export function nodeHasReports(node: TopologyNode) {
+  return node.reportDisplay?.reports !== undefined
+}
+
+export function nodeHasSchematicStatusDisplay(node: TopologyNode) {
+  return node.scadaPanelId !== undefined
+}
+
+export function nodeHasSystemMonitor(node: TopologyNode) {
+  return node.mainPanel !== undefined && node.mainPanel === 'system monitor'
+}

src/views/SystemMonitorDisplayView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column h-100">
+  <div class="d-flex flex-column h-100 w-100">
     <v-tabs v-model="selectedTab" class="flex-0-0">
       <v-tab value="Running tasks">Running tasks</v-tab>
       <v-tab value="Import status">Import status</v-tab>