P8(1): restore homepage overview curves on a memory-only sampling ring
Backend: new overviewMetrics store — a single-tier (2s x 360 = 12min) in-memory ring fed by ServerService.RefreshStatus for exactly the eight overview series (cpu/mem/swap/diskUsage/netUp/netDown/tcpCount/udpCount). No persistence, no gob snapshot, no system-history page: the only surface is GET /panel/api/server/history/:metric/:bucket restricted to those keys, which seeds the frontend curves. ~46KB bounded by construction; the ring starts empty on every panel start. Frontend: restore useOverviewHistory + the VitalTile/ThroughputCard/ ConnectionsCard sparklines and the IndexPage wiring exactly as they were before P7 removed them along with the history module.
This commit is contained in:
Muse
@@ -1,18 +1,38 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, theme } from 'antd';
|
||||
|
||||
import { Sparkline } from '@/components/viz';
|
||||
import type { Status } from '@/models/status';
|
||||
|
||||
interface ConnectionsCardProps {
|
||||
status: Status;
|
||||
tcp: number[];
|
||||
udp: number[];
|
||||
labels: string[];
|
||||
isMobile: boolean;
|
||||
}
|
||||
|
||||
export default function ConnectionsCard({ status }: ConnectionsCardProps) {
|
||||
export default function ConnectionsCard({
|
||||
status,
|
||||
tcp,
|
||||
udp,
|
||||
labels,
|
||||
isMobile,
|
||||
}: ConnectionsCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const { token } = theme.useToken();
|
||||
const accent = token.colorPrimary;
|
||||
const udpColor = token.colorTextTertiary;
|
||||
|
||||
const referenceLines = useMemo(
|
||||
() => [
|
||||
{ y: status.udpCount, color: udpColor, dash: '2 4' },
|
||||
{ y: status.tcpCount, color: accent, dash: '2 4' },
|
||||
],
|
||||
[status.tcpCount, status.udpCount, accent, udpColor],
|
||||
);
|
||||
|
||||
return (
|
||||
<Card hoverable styles={{ body: { padding: 0 } }}>
|
||||
<div className="ov-wide-head ov-wide-head-stack">
|
||||
@@ -35,6 +55,26 @@ export default function ConnectionsCard({ status }: ConnectionsCardProps) {
|
||||
<span className="ov-legend-num">{status.udpCount.toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ov-wide-chart">
|
||||
<Sparkline
|
||||
data={tcp}
|
||||
data2={udp}
|
||||
labels={labels}
|
||||
height={isMobile ? 120 : 170}
|
||||
strokeWidth={1.5}
|
||||
fillOpacity={0.24}
|
||||
showTooltip
|
||||
showLegend={false}
|
||||
valueMax={null}
|
||||
stroke={accent}
|
||||
stroke2={udpColor}
|
||||
name1="TCP"
|
||||
name2="UDP"
|
||||
yFormatter={(v) => Math.round(v).toLocaleString()}
|
||||
referenceLines={referenceLines}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ import VitalTile from './VitalTile';
|
||||
import ThroughputCard from './ThroughputCard';
|
||||
import ConnectionsCard from './ConnectionsCard';
|
||||
import SystemStrip from './SystemStrip';
|
||||
import { mean, peak, useOverviewHistory } from './useOverviewHistory';
|
||||
import type { PanelUpdateInfo } from './PanelUpdateModal';
|
||||
const JsonEditor = lazy(() => import('@/components/form/JsonEditor'));
|
||||
const PanelUpdateModal = lazy(() => import('./PanelUpdateModal'));
|
||||
@@ -44,6 +45,8 @@ export default function IndexPage() {
|
||||
setMessageInstance(messageApi);
|
||||
}, [messageApi]);
|
||||
|
||||
const history = useOverviewHistory(status, fetched && !fetchError);
|
||||
|
||||
const [devChannelEnable, setDevChannelEnable] = useState(false);
|
||||
const [panelUpdateInfo, setPanelUpdateInfo] = useState<PanelUpdateInfo>({
|
||||
currentVersion: '',
|
||||
@@ -192,6 +195,9 @@ export default function IndexPage() {
|
||||
percent={status.cpu.percent}
|
||||
statusColor={status.cpu.color}
|
||||
detail={`${CPUFormatter.cpuCoreFormat(status.cpuCores)} / ${status.logicalPro}T · ${CPUFormatter.cpuSpeedFormat(status.cpuSpeedMhz)}`}
|
||||
footLeft={`${t('pages.index.avg')} ${mean(history.series.cpu).toFixed(0)}%`}
|
||||
footRight={`${t('pages.index.peak')} ${peak(history.series.cpu).toFixed(0)}%`}
|
||||
data={history.series.cpu}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<VitalTile
|
||||
@@ -200,6 +206,9 @@ export default function IndexPage() {
|
||||
percent={status.mem.percent}
|
||||
statusColor={status.mem.color}
|
||||
detail={`${SizeFormatter.sizeFormat(status.mem.current)} / ${SizeFormatter.sizeFormat(status.mem.total)}`}
|
||||
footLeft={`${t('pages.index.avg')} ${mean(history.series.mem).toFixed(0)}%`}
|
||||
footRight={`${t('pages.index.peak')} ${peak(history.series.mem).toFixed(0)}%`}
|
||||
data={history.series.mem}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<VitalTile
|
||||
@@ -208,6 +217,9 @@ export default function IndexPage() {
|
||||
percent={status.swap.percent}
|
||||
statusColor={status.swap.color}
|
||||
detail={`${SizeFormatter.sizeFormat(status.swap.current)} / ${SizeFormatter.sizeFormat(status.swap.total)}`}
|
||||
footLeft={`${t('pages.index.avg')} ${mean(history.series.swap).toFixed(1)}%`}
|
||||
footRight={`${t('pages.index.peak')} ${peak(history.series.swap).toFixed(0)}%`}
|
||||
data={history.series.swap}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<VitalTile
|
||||
@@ -217,13 +229,27 @@ export default function IndexPage() {
|
||||
statusColor={status.disk.color}
|
||||
detail={`${SizeFormatter.sizeFormat(status.disk.current)} / ${SizeFormatter.sizeFormat(totalDisk)}`}
|
||||
footLeft={`${t('pages.index.free')} ${SizeFormatter.sizeFormat(freeDisk)}`}
|
||||
footRight={`${t('pages.index.avg')} ${mean(history.series.diskUsage).toFixed(1)}%`}
|
||||
data={history.series.diskUsage}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ov-mid">
|
||||
<ThroughputCard status={status} />
|
||||
<ConnectionsCard status={status} />
|
||||
<ThroughputCard
|
||||
status={status}
|
||||
up={history.series.netUp}
|
||||
down={history.series.netDown}
|
||||
labels={history.labels}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<ConnectionsCard
|
||||
status={status}
|
||||
tcp={history.series.tcpCount}
|
||||
udp={history.series.udpCount}
|
||||
labels={history.labels}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SystemStrip
|
||||
|
||||
@@ -1,26 +1,49 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card, theme } from 'antd';
|
||||
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
|
||||
|
||||
import { SizeFormatter } from '@/utils';
|
||||
import { Sparkline } from '@/components/viz';
|
||||
import type { Status } from '@/models/status';
|
||||
import { mean, peak } from './useOverviewHistory';
|
||||
|
||||
interface ThroughputCardProps {
|
||||
status: Status;
|
||||
up: number[];
|
||||
down: number[];
|
||||
labels: string[];
|
||||
isMobile: boolean;
|
||||
}
|
||||
|
||||
export default function ThroughputCard({ status }: ThroughputCardProps) {
|
||||
export default function ThroughputCard({
|
||||
status,
|
||||
up,
|
||||
down,
|
||||
labels,
|
||||
isMobile,
|
||||
}: ThroughputCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const { token } = theme.useToken();
|
||||
const accent = token.colorPrimary;
|
||||
const downColor = token.colorTextTertiary;
|
||||
|
||||
const referenceLines = useMemo(
|
||||
() => [
|
||||
{ y: status.netIO.down, color: downColor, dash: '2 4' },
|
||||
{ y: status.netIO.up, color: accent, dash: '2 4' },
|
||||
],
|
||||
[status.netIO.up, status.netIO.down, accent, downColor],
|
||||
);
|
||||
|
||||
return (
|
||||
<Card hoverable styles={{ body: { padding: 0 } }}>
|
||||
<div className="ov-wide-head">
|
||||
<div>
|
||||
<div className="ov-kicker">{t('pages.index.overallSpeed')}</div>
|
||||
<div className="ov-sub">{t('pages.index.throughputSub')}</div>
|
||||
<div className="ov-sub">
|
||||
{`${t('pages.index.throughputSub')} · ${t('pages.index.peak')} ${SizeFormatter.speedFormat(peak(down))}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ov-wide-legend">
|
||||
<div className="ov-legend-label">
|
||||
@@ -36,6 +59,26 @@ export default function ThroughputCard({ status }: ThroughputCardProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ov-wide-chart">
|
||||
<Sparkline
|
||||
data={up}
|
||||
data2={down}
|
||||
labels={labels}
|
||||
height={isMobile ? 140 : 186}
|
||||
strokeWidth={1.75}
|
||||
fillOpacity={0.24}
|
||||
showTooltip
|
||||
showLegend={false}
|
||||
valueMax={null}
|
||||
stroke={accent}
|
||||
stroke2={downColor}
|
||||
name1={t('pages.index.upload')}
|
||||
name2={t('pages.index.download')}
|
||||
yFormatter={SizeFormatter.speedFormat}
|
||||
referenceLines={referenceLines}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="ov-wide-foot">
|
||||
<div>
|
||||
<div className="ov-kicker">{t('pages.index.sent')}</div>
|
||||
@@ -46,6 +89,14 @@ export default function ThroughputCard({ status }: ThroughputCardProps) {
|
||||
<div className="ov-kicker">{t('pages.index.received')}</div>
|
||||
<div className="ov-foot-value">{SizeFormatter.sizeFormat(status.netTraffic.recv)}</div>
|
||||
</div>
|
||||
<span className="ov-foot-sep" />
|
||||
<div>
|
||||
<div className="ov-kicker">{t('pages.index.avgWindow')}</div>
|
||||
<div className="ov-foot-value">
|
||||
<span className="ov-foot-part">{`↑ ${SizeFormatter.speedFormat(mean(up))}`}</span>{' '}
|
||||
<span className="ov-foot-part">{`↓ ${SizeFormatter.speedFormat(mean(down))}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import { useMemo } from 'react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { Card } from 'antd';
|
||||
import { Card, theme } from 'antd';
|
||||
|
||||
import { Sparkline } from '@/components/viz';
|
||||
import { mean, peak } from './useOverviewHistory';
|
||||
|
||||
interface VitalTileProps {
|
||||
icon: ReactNode;
|
||||
@@ -7,11 +11,31 @@ interface VitalTileProps {
|
||||
percent: number;
|
||||
statusColor: string;
|
||||
detail: string;
|
||||
footLeft?: string;
|
||||
footLeft: string;
|
||||
footRight: string;
|
||||
data: number[];
|
||||
isMobile: boolean;
|
||||
}
|
||||
|
||||
export default function VitalTile({ icon, label, percent, detail, footLeft }: VitalTileProps) {
|
||||
export default function VitalTile({
|
||||
icon,
|
||||
label,
|
||||
percent,
|
||||
statusColor,
|
||||
detail,
|
||||
footLeft,
|
||||
footRight,
|
||||
data,
|
||||
isMobile,
|
||||
}: VitalTileProps) {
|
||||
const { token } = theme.useToken();
|
||||
const meanColor = token.colorTextTertiary;
|
||||
|
||||
const referenceLines = useMemo(
|
||||
() => (data.length > 1 ? [{ y: mean(data), dash: '3 4', color: meanColor }] : []),
|
||||
[data, meanColor],
|
||||
);
|
||||
|
||||
return (
|
||||
<Card hoverable className="ov-tile" styles={{ body: { padding: 0 } }}>
|
||||
<div className="ov-tile-head">
|
||||
@@ -26,11 +50,26 @@ export default function VitalTile({ icon, label, percent, detail, footLeft }: Vi
|
||||
|
||||
<div className="ov-tile-detail">{detail}</div>
|
||||
|
||||
{footLeft ? (
|
||||
<div className="ov-tile-foot">
|
||||
<span>{footLeft}</span>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="ov-tile-foot">
|
||||
<span>{footLeft}</span>
|
||||
<span>{footRight}</span>
|
||||
</div>
|
||||
|
||||
<div className="ov-tile-chart">
|
||||
<Sparkline
|
||||
data={data}
|
||||
height={isMobile ? 48 : 62}
|
||||
strokeWidth={1.5}
|
||||
fillOpacity={0.3}
|
||||
showGrid={false}
|
||||
showMarker={false}
|
||||
valueMax={peak(data) > 0 ? null : 100}
|
||||
stroke={statusColor}
|
||||
referenceLines={referenceLines}
|
||||
yFormatter={(v) => `${v.toFixed(0)}%`}
|
||||
name1={label}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { HttpUtil, TimeFormatter } from '@/utils';
|
||||
import type { Status } from '@/models/status';
|
||||
|
||||
const OVERVIEW_WINDOW = 72;
|
||||
const SEED_BUCKET_SECONDS = 2;
|
||||
|
||||
const SERIES_KEYS = [
|
||||
'cpu',
|
||||
'mem',
|
||||
'swap',
|
||||
'diskUsage',
|
||||
'netUp',
|
||||
'netDown',
|
||||
'tcpCount',
|
||||
'udpCount',
|
||||
] as const;
|
||||
|
||||
export type OverviewSeriesKey = (typeof SERIES_KEYS)[number];
|
||||
|
||||
export interface OverviewHistory {
|
||||
series: Record<OverviewSeriesKey, number[]>;
|
||||
labels: string[];
|
||||
}
|
||||
|
||||
interface HistoryPoint {
|
||||
t: number;
|
||||
v: number;
|
||||
}
|
||||
|
||||
interface HistoryWindow {
|
||||
series: Record<OverviewSeriesKey, number[]>;
|
||||
times: number[];
|
||||
}
|
||||
|
||||
function emptySeries(): Record<OverviewSeriesKey, number[]> {
|
||||
return Object.fromEntries(SERIES_KEYS.map((key) => [key, [] as number[]])) as Record<
|
||||
OverviewSeriesKey,
|
||||
number[]
|
||||
>;
|
||||
}
|
||||
|
||||
function emptyWindow(): HistoryWindow {
|
||||
return { series: emptySeries(), times: [] };
|
||||
}
|
||||
|
||||
function sampleOf(status: Status): Record<OverviewSeriesKey, number> {
|
||||
return {
|
||||
cpu: status.cpu.percent,
|
||||
mem: status.mem.percent,
|
||||
swap: status.swap.percent,
|
||||
diskUsage: status.disk.percent,
|
||||
netUp: status.netIO.up,
|
||||
netDown: status.netIO.down,
|
||||
tcpCount: status.tcpCount,
|
||||
udpCount: status.udpCount,
|
||||
};
|
||||
}
|
||||
|
||||
function tailWindow<T>(values: T[]): T[] {
|
||||
return values.slice(-OVERVIEW_WINDOW);
|
||||
}
|
||||
|
||||
export function mean(values: number[]): number {
|
||||
if (values.length === 0) return 0;
|
||||
let total = 0;
|
||||
for (const v of values) total += v;
|
||||
return total / values.length;
|
||||
}
|
||||
|
||||
export function peak(values: number[]): number {
|
||||
let max = 0;
|
||||
for (const v of values) if (v > max) max = v;
|
||||
return max;
|
||||
}
|
||||
|
||||
/* the seed bucket must be in the backend's allowedHistoryBuckets whitelist;
|
||||
2s is the smallest and matches the status poll cadence */
|
||||
export function useOverviewHistory(status: Status, hasData: boolean): OverviewHistory {
|
||||
const [trend, setTrend] = useState<HistoryWindow>(emptyWindow);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const seed = async () => {
|
||||
const responses = new Map<OverviewSeriesKey, HistoryPoint[]>();
|
||||
await Promise.all(
|
||||
SERIES_KEYS.map(async (key) => {
|
||||
const msg = await HttpUtil.get<HistoryPoint[]>(
|
||||
`/panel/api/server/history/${key}/${SEED_BUCKET_SECONDS}`,
|
||||
undefined,
|
||||
{ silent: true },
|
||||
);
|
||||
if (msg?.success && Array.isArray(msg.obj)) responses.set(key, msg.obj);
|
||||
}),
|
||||
);
|
||||
if (cancelled || responses.size === 0) return;
|
||||
|
||||
let axis: HistoryPoint[] = [];
|
||||
for (const points of responses.values()) {
|
||||
if (points.length > axis.length) axis = points;
|
||||
}
|
||||
axis = tailWindow(axis);
|
||||
if (axis.length === 0) return;
|
||||
|
||||
const seedTimes = axis.map((p) => Number(p.t) || 0);
|
||||
const seedSeries = emptySeries();
|
||||
for (const key of SERIES_KEYS) {
|
||||
const byTs = new Map<number, number>();
|
||||
for (const p of responses.get(key) ?? []) byTs.set(Number(p.t) || 0, Number(p.v) || 0);
|
||||
seedSeries[key] = seedTimes.map((ts) => byTs.get(ts) ?? 0);
|
||||
}
|
||||
|
||||
setTrend((prev) => {
|
||||
const merged = emptyWindow();
|
||||
merged.times = tailWindow(seedTimes.concat(prev.times));
|
||||
for (const key of SERIES_KEYS) {
|
||||
merged.series[key] = tailWindow(seedSeries[key].concat(prev.series[key]));
|
||||
}
|
||||
return merged;
|
||||
});
|
||||
};
|
||||
|
||||
seed().catch(() => undefined);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Each polled status is appended during render; an effect would show the
|
||||
// chart one sample behind the numbers beside it.
|
||||
const [sampledStatus, setSampledStatus] = useState<Status | null>(null);
|
||||
if (hasData && status !== sampledStatus) {
|
||||
setSampledStatus(status);
|
||||
setTrend((prev) => {
|
||||
const point = sampleOf(status);
|
||||
const next = emptyWindow();
|
||||
next.times = tailWindow(prev.times.concat(Math.floor(Date.now() / 1000)));
|
||||
for (const key of SERIES_KEYS) {
|
||||
next.series[key] = tailWindow(prev.series[key].concat(point[key]));
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
const labels = useMemo(() => trend.times.map(TimeFormatter.formatClock), [trend.times]);
|
||||
|
||||
return useMemo(() => ({ series: trend.series, labels }), [trend.series, labels]);
|
||||
}
|
||||
Reference in New Issue
Block a user