diff --git a/ui/src/components/Dashboard/PanelOptionsDialog.vue b/ui/src/components/Dashboard/PanelOptionsDialog.vue
index 05857a5f6b07..0850e7276c4e 100644
--- a/ui/src/components/Dashboard/PanelOptionsDialog.vue
+++ b/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
 }
diff --git a/ui/src/components/Dashboard/panels/MetricChartPanel.vue b/ui/src/components/Dashboard/panels/MetricChartPanel.vue
new file mode 100644
index 000000000000..5a15ddb5458b
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/MetricChartPanel.vue
@@ -0,0 +1,243 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Metric-chart panel: a line chart of one metric on one entity over the
+  (resolved) timeframe. Entity and metric are picked via the panel options
+  (gear), one of each. Defaults: localhost / Node Response Time (ICMP).
+-->
+<template>
+  <div
+    ref="rootRef"
+    class="metric-chart"
+  >
+    <div class="metric-chart__plot">
+      <canvas ref="canvasRef" />
+    </div>
+    <p
+      v-if="loading"
+      class="metric-chart__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="empty"
+      class="metric-chart__muted"
+    >
+      No data for {{ entity }} — {{ metricLabel }} in this timeframe.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Chart from 'chart.js/auto'
+import { format } from 'date-fns'
+import type { PanelComponentProps } from '@/types/dashboard'
+import { TOPN_KPIS } from '@/services/topnService'
+import {
+  DEFAULT_CHART_ENTITY,
+  DEFAULT_CHART_METRIC,
+  queryMetricSeries,
+  type MetricSeries
+} from '@/services/metricChartService'
+
+const props = defineProps<PanelComponentProps>()
+
+const LINE_COLOR = '#3a87ad' // legacy OpenNMS chart blue
+const FILL_COLOR = 'rgba(58, 135, 173, 0.15)'
+
+const rootRef = ref<HTMLElement | null>(null)
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const loading = ref(true)
+const empty = ref(false)
+
+let chart: Chart<'line', (number | null)[], string> | null = null
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let series: MetricSeries | null = null
+
+const metricId = computed(() => String(props.options?.metric ?? DEFAULT_CHART_METRIC))
+const entity = computed(() => String(props.options?.entity ?? DEFAULT_CHART_ENTITY))
+const metricLabel = computed(() => TOPN_KPIS.find(k => k.id === metricId.value)?.label ?? metricId.value)
+
+// Axis/grid colors must follow the theme (same approach as Status Overview).
+const textColor = (): string => {
+  const el = rootRef.value
+  if (el) {
+    const c = getComputedStyle(el).getPropertyValue('--p-text-color').trim()
+    if (c) {
+      return c
+    }
+  }
+  return '#333333'
+}
+const gridColor = () => 'rgba(128, 128, 128, 0.2)'
+
+// No chart.js date adapter in this app — use a category axis with labels
+// formatted by range (time-only within ~2 days, date+time beyond).
+const timeLabels = (s: MetricSeries): string[] => {
+  const span = (s.timestamps[s.timestamps.length - 1] ?? 0) - (s.timestamps[0] ?? 0)
+  const fmt = span <= 48 * 3_600_000 ? 'HH:mm' : 'MMM d HH:mm'
+  return s.timestamps.map(t => format(new Date(t), fmt))
+}
+
+const render = () => {
+  const canvas = canvasRef.value
+  if (!canvas || !series) {
+    return
+  }
+  const labels = timeLabels(series)
+  const data = series.values
+  const datasetLabel = `${entity.value} — ${metricLabel.value} (${series.unit})`
+  const color = textColor()
+
+  if (chart) {
+    chart.data.labels = labels
+    chart.data.datasets[0].data = data
+    chart.data.datasets[0].label = datasetLabel
+    const o = chart.options
+    if (o.plugins?.legend?.labels) {
+      o.plugins.legend.labels.color = color
+    }
+    if (o.scales?.x?.ticks) {
+      o.scales.x.ticks.color = color
+    }
+    if (o.scales?.y?.ticks) {
+      o.scales.y.ticks.color = color
+    }
+    if (o.scales?.y && 'title' in o.scales.y && o.scales.y.title) {
+      o.scales.y.title.color = color
+    }
+    chart.update()
+    return
+  }
+
+  chart = new Chart(canvas, {
+    type: 'line',
+    data: {
+      labels,
+      datasets: [
+        {
+          label: datasetLabel,
+          data,
+          borderColor: LINE_COLOR,
+          backgroundColor: FILL_COLOR,
+          borderWidth: 2,
+          pointRadius: 0,
+          pointHitRadius: 8,
+          tension: 0.2,
+          fill: true,
+          spanGaps: true
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: { legend: { position: 'bottom', labels: { color, boxWidth: 12 }}},
+      scales: {
+        x: {
+          ticks: { color, maxTicksLimit: 8, maxRotation: 0, autoSkip: true },
+          grid: { color: gridColor() }
+        },
+        y: {
+          beginAtZero: true,
+          title: { display: true, text: series.unit, color },
+          ticks: { color },
+          grid: { color: gridColor() }
+        }
+      }
+    }
+  })
+}
+
+// concurrent triggers (refresh tick, options change, timeframe change) race;
+// a stale response must not overwrite a newer one. Only the latest wins.
+let loadSeq = 0
+
+const load = async () => {
+  const seq = ++loadSeq
+  loading.value = true
+  const result = await queryMetricSeries(metricId.value, entity.value, props.timeframe)
+  if (seq !== loadSeq) {
+    return // a newer load started while this one was in flight
+  }
+  series = result
+  empty.value = !series
+  loading.value = false
+  await nextTick()
+  if (series) {
+    render()
+  } else if (chart) {
+    chart.destroy()
+    chart = null
+  }
+}
+
+onMounted(() => {
+  load()
+  if (rootRef.value) {
+    resizeObserver = new ResizeObserver(() => chart?.resize())
+    resizeObserver.observe(rootRef.value)
+  }
+  // recolor axes/legend when the .open-dark theme is toggled
+  themeObserver = new MutationObserver(render)
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] })
+})
+
+watch(
+  [() => props.refreshTick, metricId, entity, () => props.timeframe.preset, () => props.timeframe.from, () => props.timeframe.to],
+  load
+)
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  themeObserver?.disconnect()
+  themeObserver = null
+  chart?.destroy()
+  chart = null
+})
+</script>
+
+<style scoped lang="scss">
+.metric-chart {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  &__plot {
+    flex: 1 1 auto;
+    min-height: 0;
+    position: relative;
+  }
+
+  &__muted {
+    text-align: center;
+    color: var(--p-text-muted-color, #666);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/panels/TopnPanel.vue b/ui/src/components/Dashboard/panels/TopnPanel.vue
new file mode 100644
index 000000000000..8c18d0ff8542
--- /dev/null
+++ b/ui/src/components/Dashboard/panels/TopnPanel.vue
@@ -0,0 +1,152 @@
+<!--
+Licensed to The OpenNMS Group, Inc (TOG) under one or more
+contributor license agreements.  See the LICENSE.md file
+distributed with this work for additional information
+regarding copyright ownership.
+
+TOG licenses this file to You under the GNU Affero General
+Public License Version 3 (the "License") or (at your option)
+any later version.  You may not use this file except in
+compliance with the License.  You may obtain a copy of the
+License at:
+
+     https://www.gnu.org/licenses/agpl-3.0.txt
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+either express or implied.  See the License for the specific
+language governing permissions and limitations under the
+License.
+-->
+
+<!--
+  Top-N panel: ranks entities by a chosen KPI over the (resolved) timeframe.
+  KPI, N, and sort direction are set via the panel options (gear). Defaults:
+  Node Response Time, descending, N=5.
+-->
+<template>
+  <div class="topn">
+    <p
+      v-if="loading"
+      class="topn__muted"
+    >
+      Loading…
+    </p>
+    <p
+      v-else-if="!rows.length"
+      class="topn__muted"
+    >
+      No data for {{ kpiLabel }} in this timeframe.
+    </p>
+    <ol
+      v-else
+      class="topn__list"
+    >
+      <li
+        v-for="(row, idx) in rows"
+        :key="idx"
+        class="topn__row"
+      >
+        <span class="topn__rank">{{ idx + 1 }}</span>
+        <span class="topn__label">{{ row.label }}</span>
+        <span class="topn__value">{{ format(row.value) }} {{ row.unit }}</span>
+      </li>
+    </ol>
+    <p
+      v-if="!loading"
+      class="topn__caption"
+    >
+      {{ kpiLabel }} · {{ direction === 'desc' ? 'highest' : 'lowest' }} {{ n }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import type { PanelComponentProps } from '@/types/dashboard'
+import {
+  DEFAULT_TOPN_KPI,
+  DEFAULT_TOPN_N,
+  TOPN_KPIS,
+  queryTopn,
+  type TopnRow
+} from '@/services/topnService'
+
+const props = defineProps<PanelComponentProps>()
+
+const loading = ref(true)
+const rows = ref<TopnRow[]>([])
+
+const kpiId = computed(() => String(props.options?.kpi ?? DEFAULT_TOPN_KPI))
+const n = computed(() => Number(props.options?.n ?? DEFAULT_TOPN_N))
+const direction = computed<'asc' | 'desc'>(() => (props.options?.direction === 'asc' ? 'asc' : 'desc'))
+const kpiLabel = computed(() => TOPN_KPIS.find(k => k.id === kpiId.value)?.label ?? kpiId.value)
+
+const format = (v: number) => (Math.abs(v) >= 100 ? v.toFixed(0) : v.toFixed(2))
+
+// stale-response guard for concurrent triggers
+let loadSeq = 0
+const load = async () => {
+  loading.value = true
+  const seq = ++loadSeq
+  const result = await queryTopn(kpiId.value, props.timeframe, n.value, direction.value)
+  if (seq !== loadSeq) {
+    return // a newer load superseded this one
+  }
+  rows.value = result
+  loading.value = false
+}
+
+onMounted(load)
+watch([() => props.refreshTick, kpiId, n, direction, () => props.timeframe.preset, () => props.timeframe.from, () => props.timeframe.to], load)
+</script>
+
+<style scoped lang="scss">
+.topn {
+  font-size: 0.875rem;
+
+  &__muted {
+    color: var(--p-text-muted-color, #666);
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--p-content-border-color, #e0e0e0);
+  }
+
+  &__rank {
+    flex: 0 0 1.25rem;
+    text-align: right;
+    font-weight: 700;
+    color: var(--p-text-muted-color, #888);
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__value {
+    flex: 0 0 auto;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__caption {
+    margin: 0.5rem 0 0;
+    font-size: 0.75rem;
+    color: var(--p-text-muted-color, #888);
+  }
+}
+</style>
diff --git a/ui/src/components/Dashboard/registry.ts b/ui/src/components/Dashboard/registry.ts
index 6439a43f1e93..97a51289173b 100644
--- a/ui/src/components/Dashboard/registry.ts
+++ b/ui/src/components/Dashboard/registry.ts
@@ -87,6 +87,29 @@ export const panelRegistry: Record<string, PanelDefinition> = {
     supportedFilters: ['surveillanceCategories', 'ipMatch'],
     renamable: true,
     collapsible: true
+  },
+  topn: {
+    type: 'topn',
+    title: 'Top N',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/TopnPanel.vue')),
+    defaultSize: { w: 3, h: 4 },
+    minSize: { w: 2, h: 2 },
+    supportsTimeframe: true,
+    renamable: true,
+    collapsible: true
+  },
+  'metric-chart': {
+    type: 'metric-chart',
+    defaultHeightMode: 'fixed',
+    title: 'Metric Chart',
+    category: 'status',
+    component: defineAsyncComponent(() => import('./panels/MetricChartPanel.vue')),
+    defaultSize: { w: 6, h: 5 },
+    minSize: { w: 3, h: 3 },
+    supportsTimeframe: true,
+    renamable: true,
+    collapsible: true
   }
 }
 
diff --git a/ui/src/services/metricChartService.ts b/ui/src/services/metricChartService.ts
new file mode 100644
index 000000000000..9cf9b8daa4dc
--- /dev/null
+++ b/ui/src/services/metricChartService.ts
@@ -0,0 +1,95 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { rest } from './axiosInstances'
+import type { Timeframe } from '@/types/dashboard'
+import { TOPN_KPIS, listKpiSources } from './topnService'
+import { timeframeRange } from '@/components/Dashboard/timeframe'
+
+// Metric-chart panel: one entity x one metric over the resolved timeframe.
+// Metrics are the same registry the Top-N panel uses (TOPN_KPIS).
+export const DEFAULT_CHART_METRIC = 'response-time'
+export const DEFAULT_CHART_ENTITY = 'localhost'
+
+export interface MetricSeries {
+  timestamps: number[]
+  values: (number | null)[] // null = gap (NaN from RRD); chart renders a break
+  unit: string
+}
+
+// Entity labels that carry the given metric, for the options dropdown.
+export const listMetricEntities = async (metricId: string): Promise<string[]> => {
+  try {
+    const sources = await listKpiSources(metricId)
+    return [...new Set(sources.map(s => s.label))].sort((a, b) => a.localeCompare(b))
+  } catch {
+    return []
+  }
+}
+
+export const queryMetricSeries = async (
+  metricId: string,
+  entityLabel: string,
+  timeframe: Timeframe
+): Promise<MetricSeries | null> => {
+  const kpi = TOPN_KPIS.find(k => k.id === metricId) ?? TOPN_KPIS[0]
+  try {
+    const sources = await listKpiSources(kpi.id)
+    const source =
+      sources.find(s => s.label === entityLabel) ??
+      sources.find(s => s.label.toLowerCase() === entityLabel.toLowerCase())
+    if (!source) {
+      return null
+    }
+
+    const { start, end } = timeframeRange(timeframe)
+    // ~200 points; never below the 5-min collection interval (a single huge
+    // bucket returns NaN from RRD — same constraint as Top-N).
+    const step = Math.max(300_000, Math.floor((end - start) / 200))
+    const payload = {
+      start,
+      end,
+      step,
+      maxrows: 2000,
+      relaxed: true,
+      source: [
+        {
+          label: 'm',
+          resourceId: source.resourceId,
+          attribute: source.attribute,
+          aggregation: 'AVERAGE',
+          transient: false
+        }
+      ]
+    }
+    const resp = await rest.post('/measurements', payload, { headers: { Accept: 'application/json' }})
+    const timestamps: number[] = resp.data?.timestamps ?? []
+    const raw: number[] = resp.data?.columns?.[0]?.values ?? []
+    const values = raw.map(v => (Number.isFinite(v) ? v * kpi.scale : null))
+    if (!timestamps.length || values.every(v => v === null)) {
+      return null
+    }
+    return { timestamps, values, unit: kpi.unit }
+  } catch {
+    return null
+  }
+}
diff --git a/ui/src/services/topnService.ts b/ui/src/services/topnService.ts
new file mode 100644
index 000000000000..04fb2708aea9
--- /dev/null
+++ b/ui/src/services/topnService.ts
@@ -0,0 +1,153 @@
+///
+/// Licensed to The OpenNMS Group, Inc (TOG) under one or more
+/// contributor license agreements.  See the LICENSE.md file
+/// distributed with this work for additional information
+/// regarding copyright ownership.
+///
+/// TOG licenses this file to You under the GNU Affero General
+/// Public License Version 3 (the "License") or (at your option)
+/// any later version.  You may not use this file except in
+/// compliance with the License.  You may obtain a copy of the
+/// License at:
+///
+///      https://www.gnu.org/licenses/agpl-3.0.txt
+///
+/// Unless required by applicable law or agreed to in writing,
+/// software distributed under the License is distributed on an
+/// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+/// either express or implied.  See the License for the specific
+/// language governing permissions and limitations under the
+/// License.
+///
+
+import { rest } from './axiosInstances'
+import { type Timeframe } from '@/types/dashboard'
+import { timeframeRange } from '@/components/Dashboard/timeframe'
+
+// A KPI describes how to find the measurement source for each ranked entity and
+// how to present its value. Extensible — add interface traffic, CPU, etc. here.
+export interface TopnKpiDef {
+  id: string
+  label: string
+  unit: string
+  scale: number // multiply the raw RRD value (e.g. icmp is microseconds -> ms)
+  // returns the attribute name to query if this child resource carries the KPI
+  match: (childResourceId: string, attributeKeys: string[]) => string | null
+}
+
+export const TOPN_KPIS: TopnKpiDef[] = [
+  {
+    id: 'response-time',
+    label: 'Node Response Time (ICMP)',
+    unit: 'ms',
+    scale: 0.001,
+    match: (id, attrs) => (id.includes('responseTime') && attrs.includes('icmp') ? 'icmp' : null)
+  }
+]
+
+export const DEFAULT_TOPN_KPI = 'response-time'
+export const DEFAULT_TOPN_N = 5
+
+export interface TopnRow {
+  label: string
+  value: number
+  unit: string
+}
+
+const MAX_SOURCES = 250 // cap candidate resources per query
+
+
+interface RawResource {
+  id?: string
+  label?: string
+  rrdGraphAttributes?: Record<string, unknown>
+  children?: { resource?: RawResource[] }
+}
+
+export interface MeasurementSource {
+  resourceId: string
+  attribute: string
+  label: string
+}
+
+const collectSources = (root: { resource?: RawResource[] }, kpi: TopnKpiDef): MeasurementSource[] => {
+  const out: MeasurementSource[] = []
+  for (const node of root?.resource ?? []) {
+    const nodeLabel = node.label ?? node.id ?? 'node'
+    for (const child of node.children?.resource ?? []) {
+      const attrs = Object.keys(child.rrdGraphAttributes ?? {})
+      const attribute = kpi.match(child.id ?? '', attrs)
+      if (attribute && child.id) {
+        out.push({ resourceId: child.id, attribute, label: nodeLabel })
+      }
+    }
+  }
+  return out.slice(0, MAX_SOURCES)
+}
+
+// All entities (resources) carrying the given KPI — shared by Top-N and the metric chart.
+export const listKpiSources = async (kpiId: string): Promise<MeasurementSource[]> => {
+  const kpi = TOPN_KPIS.find(k => k.id === kpiId) ?? TOPN_KPIS[0]
+  const tree = await rest.get('/resources?depth=2', { headers: { Accept: 'application/json' }})
+  return collectSources(tree.data ?? {}, kpi)
+}
+
+export const queryTopn = async (
+  kpiId: string,
+  timeframe: Timeframe,
+  n: number,
+  direction: 'asc' | 'desc'
+): Promise<TopnRow[]> => {
+  const kpi = TOPN_KPIS.find(k => k.id === kpiId) ?? TOPN_KPIS[0]
+  try {
+    const sources = await listKpiSources(kpi.id)
+    if (!sources.length) {
+      return []
+    }
+
+    const { start, end } = timeframeRange(timeframe)
+    // Use a normal resolution step (a single huge bucket returns NaN from RRD);
+    // the series is averaged below. Cap to ~1000 points per source.
+    const step = Math.max(300_000, Math.floor((end - start) / 1000))
+    const payload = {
+      start,
+      end,
+      step,
+      maxrows: 2000,
+      relaxed: true,
+      source: sources.map((s, i) => ({
+        label: `s${i}`,
+        resourceId: s.resourceId,
+        attribute: s.attribute,
+        aggregation: 'AVERAGE',
+        transient: false
+      }))
+    }
+    const resp = await rest.post('/measurements', payload, { headers: { Accept: 'application/json' }})
+    const labels: string[] = resp.data?.labels ?? []
+    const columns: { values?: number[] }[] = resp.data?.columns ?? []
+
+    const rows: TopnRow[] = []
+    labels.forEach((label, i) => {
+      // the backend returns labels/columns in HashMap (hash) order, NOT request
+      // order, so column i does not map to sources[i]. Each label is the "s{k}"
+      // we sent, which encodes the true source index — map through that.
+      const sourceIndex = /^s(\d+)$/.test(label) ? Number(label.slice(1)) : i
+      const source = sources[sourceIndex]
+      if (!source) {
+        return
+      }
+      const values = (columns[i]?.values ?? []).filter(v => Number.isFinite(v))
+      if (!values.length) {
+        return
+      }
+      const avg = values.reduce((a, b) => a + b, 0) / values.length
+      rows.push({ label: source.label, value: avg * kpi.scale, unit: kpi.unit })
+    })
+
+    rows.sort((a, b) => (direction === 'asc' ? a.value - b.value : b.value - a.value))
+    return rows.slice(0, Math.max(1, n))
+  } catch (_err) {
+    return []
+  }
+}
diff --git a/ui/tests/services/topnService.test.ts b/ui/tests/services/topnService.test.ts
new file mode 100644
index 000000000000..6473ad181b95
--- /dev/null
+++ b/ui/tests/services/topnService.test.ts
@@ -0,0 +1,61 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { queryTopn } from '@/services/topnService'
+import { rest } from '@/services/axiosInstances'
+import { TimeframePreset } from '@/types/dashboard'
+
+vi.mock('@/services/axiosInstances', () => ({
+  rest: { get: vi.fn(), post: vi.fn() }
+}))
+
+const tf = { preset: TimeframePreset.Last24h, from: null, to: null }
+
+// two nodes each carrying the ICMP response-time attribute
+const resourceTree = {
+  data: {
+    resource: [
+      { id: 'node[1]', label: 'node-A', children: { resource: [{ id: 'node[1].responseTime[10.0.0.1]', rrdGraphAttributes: { icmp: {}}}] }},
+      { id: 'node[2]', label: 'node-B', children: { resource: [{ id: 'node[2].responseTime[10.0.0.2]', rrdGraphAttributes: { icmp: {}}}] }}
+    ]
+  }
+}
+
+describe('queryTopn column-to-source mapping', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(rest.get).mockResolvedValue(resourceTree)
+  })
+  afterEach(() => vi.restoreAllMocks())
+
+  it('attributes each measurement to the source its label encodes, not its position', async () => {
+    // backend returns columns in HASH order: s1 (node-B) first, s0 (node-A) second
+    vi.mocked(rest.post).mockResolvedValue({
+      data: {
+        labels: ['s1', 's0'],
+        columns: [
+          { values: [200000, 200000] }, // s1 => node-B => 200ms
+          { values: [50000, 50000] }     // s0 => node-A => 50ms
+        ]
+      }
+    })
+
+    const rows = await queryTopn('response-time', tf, 5, 'desc')
+
+    const byLabel = Object.fromEntries(rows.map(r => [r.label, Math.round(r.value)]))
+    expect(byLabel['node-A']).toBe(50)
+    expect(byLabel['node-B']).toBe(200)
+  })
+
+  it('ranks descending and honors n', async () => {
+    vi.mocked(rest.post).mockResolvedValue({
+      data: { labels: ['s0', 's1'], columns: [{ values: [50000] }, { values: [200000] }] }
+    })
+    const rows = await queryTopn('response-time', tf, 1, 'desc')
+    expect(rows).toHaveLength(1)
+    expect(rows[0].label).toBe('node-B')
+  })
+
+  it('returns empty when there are no sources', async () => {
+    vi.mocked(rest.get).mockResolvedValue({ data: { resource: [] }})
+    expect(await queryTopn('response-time', tf, 5, 'desc')).toEqual([])
+  })
+})