refactor: remove entire live resource system (frontend, CSS, backend route, permission)

Author: ddrayko

middleware/permissions.js

@@ -14,7 +14,6 @@ export const PERMISSIONS = {
   SERVER_LIST: 'server:list',
   SERVER_DETAILS: 'server:details',
   SERVER_OVERVIEW: 'server:overview',
-  SERVER_RESOURCES: 'server:resources',
 
   // API key actions
   API_KEY_READ: 'api_key:read',
@@ -72,7 +71,6 @@ export const ROLE_PERMISSIONS = {
     PERMISSIONS.SERVER_LIST,
     PERMISSIONS.SERVER_DETAILS,
     PERMISSIONS.SERVER_OVERVIEW,
-    PERMISSIONS.SERVER_RESOURCES,
     PERMISSIONS.API_KEY_READ,
     PERMISSIONS.API_KEY_WRITE,
     PERMISSIONS.API_KEY_DELETE,

public/css/style.css

@@ -2053,20 +2053,6 @@ tbody tr:hover {
     word-break: break-all;
   }
 
-  /* Resource gauges */
-  .resource-gauges {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .resource-gauge {
-    padding: 16px 12px;
-  }
-
-  .resource-gauge-value {
-    font-size: 1.4rem;
-  }
-
   /* Servers toolbar */
   .servers-toolbar {
     flex-direction: column;
@@ -2798,18 +2784,6 @@ tbody tr:hover {
     padding-bottom: 6px;
   }
 
-  .resource-gauge-value {
-    font-size: 1.2rem;
-  }
-
-  .resource-gauge-label {
-    font-size: 0.68rem;
-  }
-
-  .resource-gauge-sub {
-    font-size: 0.6rem;
-  }
-
   .modal {
     padding: 20px 16px;
   }
@@ -3531,60 +3505,6 @@ tbody tr:hover {
 
 
 
-/* Resource gauges for server detail */
-.resource-gauges {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-  margin-top: 8px;
-}
-
-.resource-gauge {
-  text-align: center;
-  padding: 20px 12px;
-  background: rgba(255,255,255,0.02);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  position: relative;
-  overflow: hidden;
-}
-
-.resource-gauge-value {
-  font-size: 1.8rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-  margin-bottom: 4px;
-}
-
-.resource-gauge-label {
-  font-size: 0.75rem;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-weight: 600;
-}
-
-.resource-gauge-bar {
-  margin-top: 12px;
-  height: 4px;
-  background: rgba(255,255,255,0.06);
-  border-radius: 99px;
-  overflow: hidden;
-}
-
-.resource-gauge-fill {
-  height: 100%;
-  border-radius: 99px;
-  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.resource-gauge-sub {
-  font-size: 0.68rem;
-  color: var(--text-muted);
-  margin-top: 6px;
-  font-family: 'JetBrains Mono', monospace;
-}
-
 /* Account API key section */
 .api-key-input-group {
   display: flex;
@@ -3596,8 +3516,6 @@ tbody tr:hover {
   flex: 1;
 }
 
-/* servers-toolbar + resource-gauges mobile: handled in RESPONSIVE section */
-
 /* ===== ADMIN PANEL ===== */
 .admin-layout {
   min-height: 100vh;

public/js/app.js

@@ -3273,10 +3273,6 @@ async function renderServerDetail(serverId) {
       </div>
     `;
 
-    if (activeTab === 'resources') {
-      fetchLiveResources(s.identifier);
-    }
-
     // Disable transition for initial position to prevent sliding from 0
     const indicator = $('#tab-indicator');
     const activeTabEl = $('#server-detail-tabs .tab.active');
@@ -3305,89 +3301,6 @@ async function renderServerDetail(serverId) {
   }
 }
 
-async function fetchLiveResources(identifier) {
-  const container = $('#live-resources-container');
-  if (!container) return;
-
-  try {
-    const data = await api(`/servers/resources/${identifier}`);
-
-    if (!data.resources) {
-      container.innerHTML = html`
-        <div class="empty-state" style="padding:24px">
-          <div class="empty-state-title" style="font-size:0.95rem">No live data</div>
-          <div class="empty-state-desc" style="font-size:0.82rem">
-            ${data.error || 'Add your Pyrodactyl API key in Account → Account Info to enable live monitoring.'}
-          </div>
-          <button class="btn btn-primary btn-sm" onclick="navigateTo('account/info')" style="margin-top:8px;width:auto">Configure API Key</button>
-        </div>
-      `;
-      return;
-    }
-
-    const res = data.resources;
-    const currentState = data.current_state;
-    const cpuPct = Math.round(res.cpu_absolute || 0);
-    const memUsed = res.memory_bytes ? Math.round(res.memory_bytes / (1024 * 1024)) : 0;
-    const memLimit = res.memory_limit_bytes ? Math.round(res.memory_limit_bytes / (1024 * 1024)) : 512;
-    const memPct = memLimit > 0 ? Math.min(100, Math.round((memUsed / memLimit) * 100)) : 0;
-    const diskUsed = res.disk_bytes ? Math.round(res.disk_bytes / (1024 * 1024)) : 0;
-    const diskLimit = 3072;
-    const diskPct = diskLimit > 0 ? Math.min(100, Math.round((diskUsed / diskLimit) * 100)) : 0;
-
-    function usageClass(pct) {
-      if (pct >= 80) return 'usage-high';
-      if (pct >= 50) return 'usage-mid';
-      return 'usage-low';
-    }
-
-    container.innerHTML = html`
-      <div class="resource-gauges">
-        <div class="resource-gauge">
-          <div class="resource-gauge-value" style="color:${cpuPct >= 80 ? 'var(--accent-red)' : cpuPct >= 50 ? 'var(--accent-orange)' : 'var(--accent-cyan)'}">${cpuPct}%</div>
-          <div class="resource-gauge-label">CPU</div>
-          <div class="resource-gauge-bar"><div class="resource-gauge-fill ${usageClass(cpuPct)}" style="width:${cpuPct}%"></div></div>
-          <div class="resource-gauge-sub">${cpuPct >= 80 ? 'High load' : cpuPct >= 50 ? 'Moderate' : 'Idle'}</div>
-        </div>
-        <div class="resource-gauge">
-          <div class="resource-gauge-value" style="color:${memPct >= 80 ? 'var(--accent-red)' : memPct >= 50 ? 'var(--accent-orange)' : 'var(--accent-1)'}">${memUsed} / ${memLimit} MB</div>
-          <div class="resource-gauge-label">Memory</div>
-          <div class="resource-gauge-bar"><div class="resource-gauge-fill ${usageClass(memPct)}" style="width:${memPct}%"></div></div>
-          <div class="resource-gauge-sub">${memPct}% used</div>
-        </div>
-        <div class="resource-gauge">
-          <div class="resource-gauge-value" style="color:${diskPct >= 80 ? 'var(--accent-red)' : diskPct >= 50 ? 'var(--accent-orange)' : 'var(--accent-green)'}">${(diskUsed / 1024).toFixed(1)} / ${(diskLimit / 1024).toFixed(1)} GB</div>
-          <div class="resource-gauge-label">Disk</div>
-          <div class="resource-gauge-bar"><div class="resource-gauge-fill ${usageClass(diskPct)}" style="width:${diskPct}%"></div></div>
-          <div class="resource-gauge-sub">${diskPct}% used</div>
-        </div>
-      </div>
-      <div style="margin-top:12px;text-align:center;font-size:0.72rem;color:var(--text-muted)">
-        Updated ${formatRelativeTime(new Date().toISOString())} · 
-        ${currentState ? html`Status: <strong>${currentState}</strong>` : ''}
-      </div>
-    `;
-
-    const refreshBtn = $('#refresh-resources-btn');
-    if (refreshBtn && !refreshBtn.dataset.listenerAttached) {
-      refreshBtn.dataset.listenerAttached = '1';
-      refreshBtn.addEventListener('click', () => {
-        container.innerHTML = '<div style="text-align:center;padding:32px;color:var(--text-secondary)" id="live-resources-loading"><span class="spinner"></span> Fetching live data...</div>';
-        fetchLiveResources(identifier);
-      });
-    }
-
-  } catch (err) {
-    if (container) {
-      container.innerHTML = html`
-        <div style="text-align:center;padding:24px;color:var(--text-muted);font-size:0.88rem">
-          Could not load live resources: ${err.message}
-        </div>
-      `;
-    }
-  }
-}
-
 // ===== TAB SWITCHING =====
 function switchTab(tabBtn) {
   if (!$('#tab-indicator')) return;
@@ -3407,13 +3320,6 @@ function switchTab(tabBtn) {
     indicator.style.width = tabBtn.offsetWidth + 'px';
   }
 
-  if (tabName === 'resources') {
-    const container = $('#live-resources-container');
-    if (container && container.querySelector('.resource-gauge') === null) {
-      fetchLiveResources(state.serverIdentifier);
-    }
-  }
-
   const newUrl = `/server/${state.serverId}/${tabName}`;
   history.pushState({ page: 'server', serverId: state.serverId, tab: tabName }, '', newUrl);
 }

routes/servers.js

@@ -540,41 +540,6 @@ async function verifyServerOwnership(userId, identifier) {
   }
 }
 
-router.get('/resources/:identifier', authenticateToken, async (req, res) => {
-  try {
-    const { identifier } = req.params;
-    const userId = req.user.userId;
-
-    if (!await verifyServerOwnership(userId, identifier)) {
-      return res.status(403).json({ error: 'You do not own this server' });
-    }
-
-    const users = await query('SELECT ptero_client_api_key FROM users WHERE id = ?', [userId]);
-    if (users.length === 0 || !users[0].ptero_client_api_key) {
-      return res.json({ resources: null, error: 'No Pyrodactyl API key configured. Set one in Account settings.' });
-    }
-
-    const apiKey = users[0].ptero_client_api_key;
-    const pteroRes = await fetch(`${PTERO_URL}/api/client/servers/${identifier}/resources`, {
-      headers: {
-        'Authorization': `Bearer ${apiKey}`,
-        'Accept': 'application/json',
-      },
-      signal: AbortSignal.timeout(8000),
-    });
-
-    if (!pteroRes.ok) {
-      return res.status(502).json({ error: 'Failed to fetch resources from panel' });
-    }
-
-    const data = await pteroRes.json();
-    res.json({ resources: data.attributes.resources, current_state: data.attributes.current_state });
-  } catch (err) {
-    console.error('Resources error:', err.message);
-    res.status(500).json({ error: 'Failed to fetch server resources' });
-  }
-});
-
 router.post('/power/:identifier', authenticateToken, powerLimiter, async (req, res) => {
   try {
     const { identifier } = req.params;