prometheus

public/js/app.js

@@ -70,7 +70,8 @@
     detailCpuCores: document.getElementById('detailCpuCores'),
     detailMemTotal: document.getElementById('detailMemTotal'),
     detailUptime: document.getElementById('detailUptime'),
-    detailContainer: document.getElementById('detailContainer')
+    detailContainer: document.getElementById('detailContainer'),
+    sourceFilter: document.getElementById('sourceFilter')
   };
 
   // ---- State ----
@@ -78,6 +79,8 @@
   let networkChart = null;
   let user = null; // Currently logged in user
   let currentServerDetail = { instance: null, job: null, source: null, charts: {} };
+  let allServersData = [];
+  let currentSourceFilter = 'all';
 
   // ---- Initialize ----
   function init() {
@@ -155,6 +158,14 @@
         networkChart.draw();
       });
     }
+    
+    // Source filter listener
+    if (dom.sourceFilter) {
+      dom.sourceFilter.addEventListener('change', () => {
+        currentSourceFilter = dom.sourceFilter.value;
+        renderFilteredServers();
+      });
+    }
 
     // Check auth status
     checkAuthStatus();
@@ -312,6 +323,7 @@
     try {
       const response = await fetch('/api/metrics/overview');
       const data = await response.json();
+      allServersData = data.servers || [];
       updateDashboard(data);
     } catch (err) {
       console.error('Error fetching metrics:', err);
@@ -349,7 +361,7 @@
     dom.traffic24hTotal.textContent = formatBytes(data.traffic24h.total || (data.traffic24h.rx + data.traffic24h.tx));
 
     // Update server table
-    updateServerTable(data.servers);
+    renderFilteredServers();
 
     // Flash animation
     if (previousMetrics) {
@@ -363,6 +375,14 @@
     previousMetrics = data;
   }
 
+  function renderFilteredServers() {
+    let filtered = allServersData;
+    if (currentSourceFilter !== 'all') {
+      filtered = allServersData.filter(s => s.source === currentSourceFilter);
+    }
+    updateServerTable(filtered);
+  }
+
   // ---- Server Table ----
   function updateServerTable(servers) {
     if (!servers || servers.length === 0) {
@@ -390,7 +410,8 @@
             <span class="status-dot ${server.up ? 'status-dot-online' : 'status-dot-offline'}"></span>
           </td>
           <td>
-            <div style="color: var(--text-primary); font-weight: 600; font-family: var(--font-sans);">${escapeHtml(server.job)}</div>
+            <div style="color: var(--text-primary); font-weight: 600; font-family: var(--font-sans); line-height: 1.2;">${escapeHtml(server.job)}</div>
+            <div style="color: var(--text-muted); font-size: 0.7rem; font-family: var(--font-mono); font-weight: 400; margin-top: 2px;">${escapeHtml(server.originalInstance)}</div>
           </td>
           <td>${escapeHtml(server.source)}</td>
           <td>
@@ -770,11 +791,28 @@
     dom.siteSettingsMessage.className = 'form-message';
   }
 
+  function updateSourceFilterOptions(sources) {
+    if (!dom.sourceFilter) return;
+    const current = dom.sourceFilter.value;
+    let html = '<option value="all">所有数据源</option>';
+    sources.forEach(source => {
+      html += `<option value="${escapeHtml(source.name)}">${escapeHtml(source.name)}</option>`;
+    });
+    dom.sourceFilter.innerHTML = html;
+    if (sources.some(s => s.name === current)) {
+      dom.sourceFilter.value = current;
+    } else {
+      dom.sourceFilter.value = 'all';
+      currentSourceFilter = 'all';
+    }
+  }
+
   async function loadSources() {
     try {
       const response = await fetch('/api/sources');
       const sources = await response.json();
       dom.sourceCount.textContent = `${sources.length} 个数据源`;
+      updateSourceFilterOptions(sources);
       renderSources(sources);
     } catch (err) {
       console.error('Error loading sources:', err);