fix(dashboard): fixed imprecise uptime

docs/dev_notes.md

@@ -5,6 +5,7 @@
 - [x] `lipsum` suffix to all the crash reasons
 - [x] thread chart data is the cumulative sum and not the diff, so it "averages out"
 - [x] use the fxRunner PID to get the correct fxserver process - perfUtils.fetchFxsMemory
+- [x] fix the uptime detection
 - [ ] investigate player desync issues
 
 ## Highlights

panel/src/pages/Dashboard/FullPerfCard.tsx

@@ -2,7 +2,7 @@ import { LineChartIcon, Loader2Icon } from 'lucide-react';
 import React, { ReactNode, memo, useEffect, useMemo, useRef, useState } from 'react';
 import DebouncedResizeContainer from '@/components/DebouncedResizeContainer';
 import drawFullPerfChart from './drawFullPerfChart';
-import { BackendApiError, useBackendApi } from '@/hooks/fetch';
+import { useBackendApi } from '@/hooks/fetch';
 import type { PerfChartApiResp, PerfChartApiSuccessResp } from "@shared/otherTypes";
 import useSWR from 'swr';
 import { PerfSnapType, formatTickBoundary, getBucketTicketsEstimatedTime, getServerStatsData, getTimeWeightedHistogram, processPerfLog } from './chartingUtils';
@@ -16,12 +16,13 @@ import { useSetAtom } from 'jotai';
 type FullPerfChartProps = {
     threadName: string;
     apiData: PerfChartApiSuccessResp;
+    apiDataAge: number;
     width: number;
     height: number;
     isDarkMode: boolean;
 };
 
-const FullPerfChart = memo(({ threadName, apiData, width, height, isDarkMode }: FullPerfChartProps) => {
+const FullPerfChart = memo(({ threadName, apiData, apiDataAge, width, height, isDarkMode }: FullPerfChartProps) => {
     const setServerStats = useSetAtom(dashServerStatsAtom);
     const svgRef = useRef<SVGSVGElement>(null);
     const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -55,7 +56,7 @@ const FullPerfChart = memo(({ threadName, apiData, width, height, isDarkMode }:
         }
 
         //Calculate server stats here because the data comes from SWR instead of jotai
-        const serverStatsData = getServerStatsData(parsed.lifespans, 24);
+        const serverStatsData = getServerStatsData(parsed.lifespans, 24, apiDataAge);
         setServerStats(serverStatsData);
 
         return {
@@ -69,7 +70,7 @@ const FullPerfChart = memo(({ threadName, apiData, width, height, isDarkMode }:
                 });
             },
         }
-    }, [apiData, threadName, isDarkMode, renderError]);
+    }, [apiData, apiDataAge, threadName, isDarkMode, renderError]);
 
 
     //Redraw chart when data or size changes
@@ -176,6 +177,7 @@ export default function FullPerfCard() {
     const [chartSize, setChartSize] = useState({ width: 0, height: 0 });
     const [selectedThread, setSelectedThread] = useState('svMain');
     const [apiFailReason, setApiFailReason] = useState('');
+    const [apiDataAge, setApiDataAge] = useState(0);
     const isDarkMode = useIsDarkMode();
 
     const chartApi = useBackendApi<PerfChartApiResp>({
@@ -193,6 +195,7 @@ export default function FullPerfCard() {
             setApiFailReason(data.fail_reason);
             return null;
         }
+        setApiDataAge(Date.now());
         return data;
     }, {});
 
@@ -207,6 +210,7 @@ export default function FullPerfCard() {
         contentNode = <FullPerfChart
             threadName={selectedThread}
             apiData={swrChartApiResp.data as PerfChartApiSuccessResp}
+            apiDataAge={apiDataAge}
             width={chartSize.width}
             height={chartSize.height}
             isDarkMode={isDarkMode}

panel/src/pages/Dashboard/chartingUtils.ts

@@ -227,10 +227,13 @@ export const getThreadDisplayName = (thread: string) => {
 /**
  * Process the data to return the median player count and uptime in the last X hours
  */
-export const getServerStatsData = (lifespans: PerfLifeSpanType[], windowHours: number) => {
-    const now = Date.now();
+export const getServerStatsData = (
+    lifespans: PerfLifeSpanType[],
+    windowHours: number,
+    apiDataAge: number,
+) => {
     const windowMs = windowHours * 60 * 60 * 1000;
-    const windowStart = now - windowMs;
+    const windowStart = apiDataAge - windowMs;
 
     let uptime = 0;
     const playerCounts = [];
@@ -251,7 +254,9 @@ export const getServerStatsData = (lifespans: PerfLifeSpanType[], windowHours: n
     }
 
     return {
-        uptimePct: uptime / windowMs * 100,
+        uptimePct: apiDataAge
+            ? Math.min(100, uptime / windowMs * 100)
+            : undefined,
         medianPlayerCount: d3.quantile(playerCounts, 0.5) ?? 0,
     };
 }

panel/src/pages/Dashboard/dashboardHooks.ts

@@ -14,8 +14,8 @@ type DashboardPerfCursorDataType = {
 };
 
 type DashboardServerStatsDataType = {
-    uptimePct: number;
-    medianPlayerCount: number;
+    uptimePct?: number;
+    medianPlayerCount?: number;
 };
 
 /**