Speed up server list & detail loads
All checks were successful
Deploy GSM / deploy (push) Successful in 28s

Three compounding causes made the dashboard and detail pages slow:

- Detail page fetched the WHOLE fleet (every SSH/Prometheus/RCON call for
  all servers) just to show one. Switch ServerDetail to GET /servers/:id
  (add api.getServer) so it costs one server's worth of work, not N.
- No server-side caching: every 10s poll, from every open tab, recomputed
  everything. Add a shared 5s-TTL per-server cache + in-flight dedup behind
  both GET / and GET /:id; invalidate on start/stop/restart so power
  actions still reflect immediately.
- Prometheus fetch had no timeout, so a slow/restarting Prometheus hung the
  whole aggregation indefinitely (the .catch can't catch a hang). Add
  AbortSignal.timeout to queryPrometheus/queryPrometheusRange.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-26 13:46:34 +02:00
parent 2f6fc841b2
commit 024d97e544
4 changed files with 134 additions and 148 deletions

View File

@@ -131,6 +131,14 @@ export async function getServers(token) {
})
}
// Fetch a single server's status payload. Cheaper than getServers() — only one
// server is queried server-side instead of the whole fleet.
export async function getServer(token, serverId) {
return fetchAPI(`/servers/${serverId}`, {
headers: { Authorization: `Bearer ${token}` },
})
}
export async function serverAction(token, serverId, action, body = null) {
return fetchAPI(`/servers/${serverId}/${action}`, {
method: 'POST',

View File

@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { getServers, serverAction, sendRcon, getServerLogs, getWhitelist, getFactorioCurrentSave, getAutoShutdownSettings, setAutoShutdownSettings, getDisplaySettings, setDisplaySettings, getServerVersion } from '../api'
import { getServer, serverAction, sendRcon, getServerLogs, getWhitelist, getFactorioCurrentSave, getAutoShutdownSettings, setAutoShutdownSettings, getDisplaySettings, setDisplaySettings, getServerVersion } from '../api'
import { useUser } from '../context/UserContext'
import MetricsChart from '../components/MetricsChart'
import ConfirmModal from '../components/ConfirmModal'
@@ -73,13 +73,8 @@ export default function ServerDetail() {
const fetchServer = async () => {
try {
const servers = await getServers(token)
const found = servers.find(s => s.id === serverId)
if (found) {
setServer(found); document.title = found.name + " | Zeasy GSM"
} else {
navigate('/')
}
const found = await getServer(token, serverId)
setServer(found); document.title = found.name + " | Zeasy GSM"
} catch (err) {
console.error(err)
navigate('/')