Add support for system monitor in topology

src/lib/topology/displayTabs.ts

@@ -0,0 +1,116 @@
+import { TopologyNode } from '@deltares/fews-pi-requests'
+import { RouteLocationNamedRaw } from 'vue-router'
+import {
+  nodeHasCharts,
+  nodeHasDataDownload,
+  nodeHasMap,
+  nodeHasReports,
+  nodeHasSchematicStatusDisplay,
+  nodeHasSystemMonitor,
+} from './nodes'
+
+export interface DisplayTab {
+  type:
+    | 'charts'
+    | 'map'
+    | 'reports'
+    | 'data-download'
+    | 'schematic-status-display'
+    | 'system-monitor'
+  id: string
+  title: string
+  href?: string
+  target?: string
+  to: RouteLocationNamedRaw
+  icon: string
+  active: boolean
+}
+
+const displayTabs: DisplayTab[] = [
+  {
+    type: 'map',
+    id: 'spatial',
+    title: 'Map',
+    to: { name: 'TopologySpatialDisplay' },
+    icon: 'mdi-map',
+    active: false,
+  },
+  {
+    type: 'charts',
+    id: 'timeseries',
+    title: 'Charts',
+    to: { name: 'TopologyTimeSeries' },
+    icon: 'mdi-chart-multiple',
+    active: false,
+  },
+  {
+    type: 'data-download',
+    id: 'download',
+    title: 'Download',
+    to: { name: 'TopologyDataDownload' },
+    icon: 'mdi-download',
+    active: false,
+  },
+  {
+    type: 'reports',
+    id: 'reports',
+    title: 'Reports',
+    to: { name: 'TopologyReports' },
+    icon: 'mdi-file-document',
+    active: false,
+  },
+  {
+    type: 'schematic-status-display',
+    id: 'ssd',
+    title: 'Schematic',
+    to: { name: 'TopologySchematicStatusDisplay' },
+    icon: 'mdi-view-dashboard',
+    active: false,
+  },
+  {
+    type: 'system-monitor',
+    id: 'ssd',
+    title: 'System Monitor',
+    to: { name: 'TopologySystemMonitor' },
+    icon: 'mdi-view-dashboard',
+    active: false,
+  },
+]
+
+export function displayTabsForNode(node: TopologyNode, parentNodeId?: string) {
+  for (const tab of displayTabs) {
+    const params = {
+      nodeId: parentNodeId ? [parentNodeId, node.id] : node.id,
+    }
+    switch (tab.type) {
+      case 'map':
+        tab.active = nodeHasMap(node)
+        tab.to.params = {
+          ...params,
+          LayerName: node.gridDisplaySelection?.plotId,
+        }
+        break
+      case 'charts':
+        tab.active = nodeHasCharts(node)
+        tab.to.params = { ...params }
+        break
+      case 'data-download':
+        tab.active = nodeHasDataDownload(node)
+        tab.to.params = { ...params }
+        break
+      case 'reports':
+        tab.active = nodeHasReports(node)
+        tab.to.params = { ...params }
+        break
+      case 'schematic-status-display':
+        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,40 @@ function topologyNodeIsVisible(node: TopologyNode): boolean {
 }
 
 function hasSupportedDisplay(node: TopologyNode): boolean {
-  if (node.scadaPanelId !== undefined) return true
-  if (
-    node.filterIds !== undefined &&
-    node.filterIds.length == 1 &&
-    node.dataDownloadDisplay !== undefined
+  return (
+    nodeHasSchematicStatusDisplay(node) ||
+    nodeHasMap(node) ||
+    nodeHasCharts(node) ||
+    nodeHasDataDownload(node) ||
+    nodeHasReports(node) ||
+    nodeHasSystemMonitor(node)
   )
-    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 nodeHasDataDownload(node: TopologyNode) {
+  return node.filterIds !== undefined && node.dataDownloadDisplay !== 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/router/index.ts

@@ -161,21 +161,21 @@ export const dynamicRoutes: Readonly<RouteRecordRaw[]> = [
     meta: { sidebar: true },
     children: [
       {
-        path: '/topology/node/:nodeId*/download/',
+        path: '/topology/node/:nodeId*/download',
         name: 'TopologyDataDownload',
         component: DataDownloadDisplayView,
         props: true,
         meta: { sidebar: true },
       },
       {
-        path: '/topology/node/:nodeId*/series/',
+        path: '/topology/node/:nodeId*/series',
         name: 'TopologyTimeSeries',
         component: TimeSeriesDisplay,
         props: true,
         meta: { sidebar: true },
       },
       {
-        path: '/topology/node/:nodeId*/reports/',
+        path: '/topology/node/:nodeId*/reports',
         name: 'TopologyReports',
         component: ReportsDisplayView,
         props: true,
@@ -188,6 +188,13 @@ export const dynamicRoutes: Readonly<RouteRecordRaw[]> = [
         props: true,
         meta: { sidebar: true },
       },
+      {
+        path: '/topology/node/:nodeId*/systemmonitor',
+        name: 'TopologySystemMonitor',
+        component: SystemMonitorDisplayView,
+        props: true,
+        meta: { sidebar: true },
+      },
       {
         path: '/topology/node/:nodeId*/map/:layerName?',
         name: 'TopologySpatialDisplay',

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>

src/views/TopologyDisplayView.vue

@@ -118,7 +118,6 @@ import type { WebOcTopologyDisplayConfig } from '@deltares/fews-pi-requests'
 
 import { computed, ref, StyleValue, watch, watchEffect } from 'vue'
 import {
-  type RouteLocationNamedRaw,
   onBeforeRouteUpdate,
   RouteLocationNormalized,
   useRoute,
@@ -131,6 +130,10 @@ import { useDisplay } from 'vuetify'
 import { useNodesStore } from '@/stores/nodes'
 import { nodeButtonItems, recursiveUpdateNode } from '@/lib/topology/nodes'
 import { useDownloadDialogStore } from '@/stores/downloadDialog'
+import {
+  displayTabsForNode,
+  type DisplayTab,
+} from '@/lib/topology/displayTabs.js'
 
 interface Props {
   nodeId?: string | string[]
@@ -141,16 +144,6 @@ interface Props {
   longitude?: string
 }
 
-interface DisplayTab {
-  type: 'charts' | 'map' | 'reports' | 'schematic-status-display'
-  id: string
-  title: string
-  href?: string
-  target?: string
-  to: RouteLocationNamedRaw
-  icon: string
-}
-
 const props = defineProps<Props>()
 
 const configStore = useConfigStore()
@@ -274,99 +267,6 @@ function updateItems(): void {
   }
 }
 
-function displayTabsForNode(leafNode: TopologyNode, parentNodeId?: string) {
-  const activeNodeId = leafNode.id
-  const timeseriesTabId = `${activeNodeId}-timeseries`
-  const reportsTabId = `${activeNodeId}-reports`
-  const spatialTabId = `${activeNodeId}-spatial`
-  const ssdTabId = `${activeNodeId}-ssd`
-  const _displayTabs: DisplayTab[] = []
-  if (
-    leafNode.gridDisplaySelection !== undefined ||
-    leafNode.filterIds !== undefined
-  ) {
-    _displayTabs.push({
-      type: 'map',
-      id: spatialTabId,
-      title: 'Map',
-      to: {
-        name: 'TopologySpatialDisplay',
-        params: {
-          nodeId: parentNodeId ? [parentNodeId, leafNode.id] : leafNode.id,
-          layerName: leafNode.gridDisplaySelection?.plotId,
-        },
-      },
-      icon: 'mdi-map',
-    })
-  }
-  if (
-    leafNode.displayGroups !== undefined ||
-    leafNode.displayId !== undefined ||
-    (leafNode.plotId != undefined && leafNode.locationIds != undefined)
-  ) {
-    _displayTabs.push({
-      type: 'charts',
-      id: timeseriesTabId,
-      title: 'Charts',
-      to: {
-        name: 'TopologyTimeSeries',
-        params: {
-          nodeId: parentNodeId ? [parentNodeId, leafNode.id] : leafNode.id,
-        },
-      },
-      icon: 'mdi-chart-multiple',
-    })
-  }
-  if (
-    leafNode.filterIds !== undefined &&
-    leafNode.filterIds.length == 1 &&
-    leafNode.dataDownloadDisplay !== undefined
-  ) {
-    _displayTabs.push({
-      type: 'charts',
-      id: timeseriesTabId,
-      title: 'Download',
-      to: {
-        name: 'TopologyDataDownload',
-        params: {
-          nodeId: parentNodeId ? [parentNodeId, leafNode.id] : leafNode.id,
-        },
-      },
-      icon: 'mdi-download',
-    })
-  }
-  if (leafNode.reportDisplay?.reports.length) {
-    _displayTabs.push({
-      type: 'reports',
-      id: reportsTabId,
-      title: 'Reports',
-      to: {
-        name: 'TopologyReports',
-        params: {
-          nodeId: parentNodeId ? [parentNodeId, leafNode.id] : leafNode.id,
-        },
-      },
-      icon: 'mdi-file-document',
-    })
-  }
-  if (leafNode.scadaPanelId !== undefined) {
-    _displayTabs.push({
-      type: 'schematic-status-display',
-      id: ssdTabId,
-      title: 'Schematic',
-      to: {
-        name: 'TopologySchematicStatusDisplay',
-        params: {
-          nodeId: parentNodeId ? [parentNodeId, leafNode.id] : leafNode.id,
-          panelId: leafNode.scadaPanelId,
-        },
-      },
-      icon: 'mdi-view-dashboard',
-    })
-  }
-  return _displayTabs
-}
-
 watch(nodes, updateItems)
 watch(thresholds, updateItems)
 
@@ -408,9 +308,7 @@ watchEffect(() => {
 
   // Create the displayTabs for the active node.
   if (node === undefined) return
-  const _displayTabs = displayTabsForNode(node, parentNodeIdNodeId)
-  displayTabs.value = _displayTabs
-
+  displayTabs.value = displayTabsForNode(node, parentNodeIdNodeId)
   externalLink.value = node.url
 })