@@ -51,17 +51,21 @@ export default function MonitorPage() {
|
||||
)
|
||||
}
|
||||
|
||||
// 主机监控列表模块级缓存: 切走再进入时先展示上次数据, 拉取成功后再静默更新
|
||||
let cachedServers = null
|
||||
|
||||
// 主机监控: komari 实时节点列表 (30s 轮询, 静默刷新)
|
||||
function ServerView() {
|
||||
const [items, setItems] = useState(null) // null = 加载中
|
||||
const [items, setItems] = useState(cachedServers) // 有缓存直接先展示, 无缓存为 null 进入加载态
|
||||
const [err, setErr] = useState('')
|
||||
const navigate = useNavigate()
|
||||
|
||||
const load = useCallback((silent) => {
|
||||
if (!silent) { setErr(''); setItems(null) }
|
||||
if (!silent && cachedServers === null) setItems(null) // 仅无缓存时显示加载中
|
||||
if (!silent) setErr('')
|
||||
api('/servers')
|
||||
.then((data) => { setErr(''); setItems(data.items || []) })
|
||||
.catch((e) => { if (!silent) { setErr(e.message); setItems([]) } })
|
||||
.then((data) => { cachedServers = data.items || []; setErr(''); setItems(data.items || []) })
|
||||
.catch((e) => { if (!silent) { setErr(e.message); if (cachedServers === null) setItems([]) } })
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
@@ -76,7 +80,7 @@ function ServerView() {
|
||||
{err && (
|
||||
<div className="error-banner">
|
||||
{err}
|
||||
<span className="retry-link" onClick={load}>重试</span>
|
||||
<span className="retry-link" onClick={() => load(false)}>重试</span>
|
||||
</div>
|
||||
)}
|
||||
{items !== null && !err && items.length === 0 && <Empty description="暂无主机" />}
|
||||
|
||||
Reference in New Issue
Block a user