fix(site): handle missing default chart time (#2397)

Co-authored-by: henrygd <hank@henrygd.me>

internal/site/src/components/network-monitors-table/network-monitors-table.tsx

@@ -35,7 +35,7 @@ import { useToast } from "@/components/ui/use-toast"
 import { isReadOnlyUser } from "@/lib/api"
 import { pb } from "@/lib/api"
 import { SystemStatus } from "@/lib/enums"
-import { $allSystemsById, $direction, $userSettings } from "@/lib/stores"
+import { $allSystemsById, $direction, getUserChartTime } from "@/lib/stores"
 import {
 	cn,
 	isVisuallyLonger,
@@ -503,7 +503,7 @@ function NetworkMonitorSheetContent({
 }) {
 	// Keep monitor exploration independent of the system charts' time range.
 	const [chartTimeStore] = useState(() => {
-		const defaultTime = $userSettings.get().chartTime
+		const defaultTime = getUserChartTime()
 		return atom(defaultTime === "1m" ? "1h" : defaultTime)
 	})
 	const chartTime = useStore(chartTimeStore)

internal/site/src/components/routes/settings/general.tsx

@@ -12,7 +12,7 @@ import Slider from "@/components/ui/slider"
 import { HourFormat, Unit } from "@/lib/enums"
 import { dynamicActivate } from "@/lib/i18n"
 import languages from "@/lib/languages"
-import { $userSettings, defaultLayoutWidth } from "@/lib/stores"
+import { $chartTime, $userSettings, defaultLayoutWidth, getUserChartTime } from "@/lib/stores"
 import { chartTimeData, currentHour12 } from "@/lib/utils"
 import type { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
@@ -22,6 +22,9 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 	const { i18n } = useLingui()
 	const currentUserSettings = useStore($userSettings)
 	const layoutWidth = currentUserSettings.layoutWidth ?? defaultLayoutWidth
+	// without a value the hidden select submits an empty string, which would persist
+	// a chart time that no longer loads any data (#2104)
+	const chartTime = getUserChartTime(userSettings)
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()
@@ -29,6 +32,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 		const formData = new FormData(e.target as HTMLFormElement)
 		const data = Object.fromEntries(formData) as Partial<UserSettings>
 		await saveSettings(data)
+		// apply the saved default time period to the active charts
+		$chartTime.set(getUserChartTime())
 		setIsLoading(false)
 	}
 
@@ -122,7 +127,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 							<Label className="block" htmlFor="chartTime">
 								<Trans>Default time period</Trans>
 							</Label>
-							<Select name="chartTime" key={userSettings.chartTime} defaultValue={userSettings.chartTime}>
+							<Select name="chartTime" key={chartTime} defaultValue={chartTime}>
 								<SelectTrigger id="chartTime">
 									<SelectValue />
 								</SelectTrigger>

internal/site/src/components/routes/system/use-system-data.ts

@@ -14,6 +14,7 @@ import {
 	$maxValues,
 	$systems,
 	$userSettings,
+	getUserChartTime,
 } from "@/lib/stores"
 import { chartTimeData, listen, parseSemVer } from "@/lib/utils"
 import type {
@@ -90,7 +91,7 @@ export function useSystemData(id: string) {
 	useEffect(() => {
 		return () => {
 			if (!persistChartTime.current) {
-				$chartTime.set($userSettings.get().chartTime)
+				$chartTime.set(getUserChartTime())
 			}
 			persistChartTime.current = false
 			setSystemStats([])