NMS-20127: dashboard Top-N and Metric Chart panels

ui/src/components/Dashboard/PanelOptionsDialog.vue

@@ -97,7 +97,71 @@ License.
         </small>
       </div>
 
-
+      <template v-if="panel.type === 'metric-chart'">
+        <div class="opts__field">
+          <label class="opts__label">Entity</label>
+          <OnmsSelect
+            v-model="chartEntity"
+            :options="entityOptions"
+            :loading="entitiesLoading"
+            filter
+            class="opts__control"
+          />
+          <small class="opts__hint">Entities that have data for the selected metric.</small>
+        </div>
+        <div class="opts__field">
+          <label class="opts__label">Metric</label>
+          <OnmsSelect
+            v-model="chartMetric"
+            :options="kpiOptions"
+            option-label="label"
+            option-value="value"
+            class="opts__control"
+          />
+        </div>
+      </template>
+
+      <template v-if="panel.type === 'topn'">
+        <div class="opts__field">
+          <label class="opts__label">Rank by (KPI)</label>
+          <OnmsSelect
+            v-model="topnKpi"
+            :options="kpiOptions"
+            option-label="label"
+            option-value="value"
+            class="opts__control"
+          />
+        </div>
+        <fieldset class="opts__group">
+          <legend class="opts__legend">Order</legend>
+          <label class="opts__radio">
+            <input
+              v-model="topnDirection"
+              type="radio"
+              value="desc"
+            >
+            Descending (highest first)
+          </label>
+          <label class="opts__radio">
+            <input
+              v-model="topnDirection"
+              type="radio"
+              value="asc"
+            >
+            Ascending (lowest first)
+          </label>
+        </fieldset>
+        <div class="opts__field">
+          <label class="opts__label">How many (N)</label>
+          <input
+            v-model.number="topnN"
+            type="number"
+            min="1"
+            max="50"
+            class="opts__control opts__number"
+          >
+        </div>
+      </template>
     </div>
 
     <template #footer>
@@ -116,16 +180,20 @@ License.
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { OnmsDialog, OnmsTextarea, OnmsInputText, OnmsButton } from '@opennms/onms-ui'
+import { OnmsDialog, OnmsTextarea, OnmsInputText, OnmsButton, OnmsSelect } from '@opennms/onms-ui'
 import type { DashboardPanel, PanelHeightMode } from '@/types/dashboard'
 import { getPanelDefinition } from './registry'
 import { useDashboardStore } from '@/stores/dashboardStore'
+import { DEFAULT_TOPN_KPI, DEFAULT_TOPN_N, TOPN_KPIS } from '@/services/topnService'
+import { DEFAULT_CHART_ENTITY, DEFAULT_CHART_METRIC, listMetricEntities } from '@/services/metricChartService'
 
 const props = defineProps<{ panel: DashboardPanel; visible: boolean }>()
 const emit = defineEmits<{ (e: 'update:visible', value: boolean): void }>()
 
 const store = useDashboardStore()
 
+const kpiOptions = TOPN_KPIS.map(k => ({ label: k.label, value: k.id }))
+
 const visibleModel = computed({
   get: () => props.visible,
   set: v => emit('update:visible', v)
@@ -144,6 +212,32 @@ const htmlUrl = ref('')
 const SHADEABLE = ['pending-situations', 'nodes-with-alarms', 'availability']
 const supportsShade = computed(() => SHADEABLE.includes(props.panel.type))
 
+const topnKpi = ref(DEFAULT_TOPN_KPI)
+const topnN = ref(DEFAULT_TOPN_N)
+const topnDirection = ref<'asc' | 'desc'>('desc')
+
+// metric-chart: one entity x one metric (single-select each)
+const chartEntity = ref(DEFAULT_CHART_ENTITY)
+const chartMetric = ref(DEFAULT_CHART_METRIC)
+const entityOptions = ref<string[]>([])
+const entitiesLoading = ref(false)
+
+const loadEntities = async () => {
+  entitiesLoading.value = true
+  const entities = await listMetricEntities(chartMetric.value)
+  // keep the current selection listed even if it has no data right now
+  if (chartEntity.value && !entities.includes(chartEntity.value)) {
+    entities.unshift(chartEntity.value)
+  }
+  entityOptions.value = entities
+  entitiesLoading.value = false
+}
+
+watch(chartMetric, () => {
+  if (props.panel.type === 'metric-chart' && props.visible) {
+    loadEntities()
+  }
+})
 
 // External URLs are blocked by the dashboard CSP (frame-src 'self'); validate
 // up front so the user gets an explanation instead of a silent broken iframe.
@@ -169,6 +263,14 @@ const syncFromPanel = () => {
   shade.value = !!props.panel.options?.shade
   notesText.value = String(props.panel.options?.text ?? '')
   htmlUrl.value = String(props.panel.options?.url ?? '')
+  topnKpi.value = String(props.panel.options?.kpi ?? DEFAULT_TOPN_KPI)
+  topnN.value = Number(props.panel.options?.n ?? DEFAULT_TOPN_N)
+  topnDirection.value = props.panel.options?.direction === 'asc' ? 'asc' : 'desc'
+  chartEntity.value = String(props.panel.options?.entity ?? DEFAULT_CHART_ENTITY)
+  chartMetric.value = String(props.panel.options?.metric ?? DEFAULT_CHART_METRIC)
+  if (props.panel.type === 'metric-chart') {
+    loadEntities()
+  }
 }
 
 watch(
@@ -195,6 +297,15 @@ const apply = () => {
   if (props.panel.type === 'html-content') {
     opts.url = htmlUrl.value.trim()
   }
+  if (props.panel.type === 'topn') {
+    opts.kpi = topnKpi.value
+    opts.n = Math.min(50, Math.max(1, Number(topnN.value) || DEFAULT_TOPN_N))
+    opts.direction = topnDirection.value
+  }
+  if (props.panel.type === 'metric-chart') {
+    opts.entity = chartEntity.value
+    opts.metric = chartMetric.value
+  }
   store.setPanelOptions(props.panel.id, opts)
   visibleModel.value = false
 }