use promise.allsettled to stop docker chart from populating later

hub/site/src/components/charts/cpu-chart.tsx

@@ -73,8 +73,8 @@ export default function CpuChart({
 						stroke="hsl(var(--chart-1))"
 						isAnimationActive={false}
 						// animationEasing="ease-out"
-						animationDuration={700}
+						// animationDuration={1200}
-						animateNewValues={true}
+						// animateNewValues={true}
 					/>
 				</AreaChart>
 			</ChartContainer>

hub/site/src/components/routes/system.tsx

@@ -27,25 +27,32 @@ export default function ServerDetail({ name }: { name: string }) {
 	const [ticks, setTicks] = useState([] as number[])
 	const [server, setServer] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
-	const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>()
+	const [hasDockerStats, setHasDocker] = useState(false)
-	const [dockerMemChartData, setDockerMemChartData] = useState<Record<string, number | string>[]>()
+	const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>(
-	const [dockerNetChartData, setDockerNetChartData] =
+		[]
-		useState<Record<string, number | number[]>[]>()
+	)
+	const [dockerMemChartData, setDockerMemChartData] = useState<Record<string, number | string>[]>(
+		[]
+	)
+	const [dockerNetChartData, setDockerNetChartData] = useState<Record<string, number | number[]>[]>(
+		[]
+	)
 
 	useEffect(() => {
 		document.title = `${name} / Beszel`
 		return () => {
 			resetCharts()
 			$chartTime.set('1h')
+			setHasDocker(false)
 		}
 	}, [name])
 
-	const resetCharts = useCallback(() => {
+	function resetCharts() {
 		setSystemStats([])
-		setDockerCpuChartData(undefined)
+		setDockerCpuChartData([])
-		setDockerMemChartData(undefined)
+		setDockerMemChartData([])
-		setDockerNetChartData(undefined)
+		setDockerNetChartData([])
-	}, [])
+	}
 
 	useEffect(resetCharts, [chartTime])
 
@@ -66,28 +73,38 @@ export default function ServerDetail({ name }: { name: string }) {
 		}
 	}, [updatedSystem])
 
+	async function getStats<T>(collection: string): Promise<T[]> {
+		return await pb.collection<T>(collection).getFullList({
+			filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+				id: server.id,
+				created: getPbTimestamp(chartTime),
+				type: chartTimeData[chartTime].type,
+			}),
+			fields: 'created,stats',
+			sort: 'created',
+		})
+	}
+
 	// get stats
 	useEffect(() => {
 		if (!server.id || !chartTime) {
 			return
 		}
-		pb.collection<SystemStatsRecord>('system_stats')
+		Promise.allSettled([
-			.getFullList({
+			getStats<SystemStatsRecord>('system_stats'),
-				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+			getStats<ContainerStatsRecord>('container_stats'),
-					id: server.id,
+		]).then(([systemStats, containerStats]) => {
-					created: getPbTimestamp(chartTime),
+			if (containerStats.status === 'fulfilled' && containerStats.value.length) {
-					type: chartTimeData[chartTime].type,
+				setHasDocker(true)
-				}),
+				makeContainerData(containerStats.value)
-				fields: 'created,stats',
+			}
-				sort: 'created',
+			if (systemStats.status === 'fulfilled') {
-			})
+				for (const record of systemStats.value) {
-			.then((records) => {
-				// convert created time to ms value
-				for (const record of records) {
 					record.created = new Date(record.created).getTime()
 				}
-				setSystemStats(records)
+				setSystemStats(systemStats.value)
-			})
+			}
+		})
 	}, [server, chartTime])
 
 	useEffect(() => {
@@ -100,30 +117,7 @@ export default function ServerDetail({ name }: { name: string }) {
 		setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
 	}, [chartTime, systemStats])
 
-	// get container stats
+	// make container stats for charts
-	useEffect(() => {
-		if (!server.id || !chartTime) {
-			return
-		}
-		pb.collection<ContainerStatsRecord>('container_stats')
-			.getFullList({
-				filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
-					id: server.id,
-					created: getPbTimestamp(chartTime),
-					type: chartTimeData[chartTime].type,
-				}),
-				fields: 'created,stats',
-				sort: 'created',
-			})
-			.then((records) => {
-				if (records.length) {
-					makeContainerData(records)
-				}
-				// setContainers(records)
-			})
-	}, [server, chartTime])
-
-	// container stats for charts
 	const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
 		// console.log('containers', containers)
 		const dockerCpuData = []
@@ -221,7 +215,7 @@ export default function ServerDetail({ name }: { name: string }) {
 				<CpuChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
-			{dockerCpuChartData && (
+			{hasDockerStats && (
 				<ChartCard title="Docker CPU Usage" description="CPU utilization of docker containers">
 					<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
 				</ChartCard>
@@ -231,7 +225,7 @@ export default function ServerDetail({ name }: { name: string }) {
 				<MemChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
-			{dockerMemChartData && (
+			{hasDockerStats && (
 				<ChartCard title="Docker Memory Usage" description="Memory usage of docker containers">
 					<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
 				</ChartCard>
@@ -252,7 +246,7 @@ export default function ServerDetail({ name }: { name: string }) {
 				<BandwidthChart ticks={ticks} systemData={systemStats} />
 			</ChartCard>
 
-			{dockerNetChartData && (
+			{hasDockerStats && (
 				<ChartCard
 					title="Docker Network I/O"
 					description="Includes traffic between internal services"