fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: keep chart time when navigating with arrow keys

Browse Source
This commit is contained in:
henrygd
2025-03-06 02:23:30 -05:00
parent dd21c18939
commit 28589455bf
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
beszel/site/src/components/routes/system.tsx
View File

@@ -115,6 +115,7 @@ export default function SystemDetail({ name }: { name: string }) {
const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[]) const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
const [containerData, setContainerData] = useState([] as ChartData["containerData"]) const [containerData, setContainerData] = useState([] as ChartData["containerData"])
const netCardRef = useRef<HTMLDivElement>(null) const netCardRef = useRef<HTMLDivElement>(null)
const persistChartTime = useRef(false)
const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element) const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
const [bottomSpacing, setBottomSpacing] = useState(0) const [bottomSpacing, setBottomSpacing] = useState(0)
const [chartLoading, setChartLoading] = useState(true) const [chartLoading, setChartLoading] = useState(true)
@@ -123,8 +124,10 @@ export default function SystemDetail({ name }: { name: string }) {
useEffect(() => { useEffect(() => {
document.title = `${name} / Beszel` document.title = `${name} / Beszel`
return () => { return () => {
if (!persistChartTime.current) {
$chartTime.set($userSettings.get().chartTime) $chartTime.set($userSettings.get().chartTime)
// resetCharts() }
persistChartTime.current = false
setSystemStats([]) setSystemStats([])
setContainerData([]) setContainerData([])
setContainerFilterBar(null) setContainerFilterBar(null)
@@ -263,7 +266,7 @@ export default function SystemDetail({ name }: { name: string }) {
// hide if hostname is same as host or name // hide if hostname is same as host or name
hide: system.info.h === system.host || system.info.h === system.name, hide: system.info.h === system.host || system.info.h === system.name,
}, },
{ value: uptime, Icon: ClockArrowUp, label: t`Uptime` }, { value: uptime, Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
{ value: system.info.k, Icon: TuxIcon, label: t({ comment: "Linux kernel", message: "Kernel" }) }, { value: system.info.k, Icon: TuxIcon, label: t({ comment: "Linux kernel", message: "Kernel" }) },
{ {
value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ""})`, value: `${system.info.m} (${system.info.c}c${system.info.t ? `/${system.info.t}t` : ""})`,
@@ -294,6 +297,9 @@ export default function SystemDetail({ name }: { name: string }) {
// keyboard navigation between systems // keyboard navigation between systems
useEffect(() => { useEffect(() => {
if (!systems.length) {
return
}
const handleKeyUp = (e: KeyboardEvent) => { const handleKeyUp = (e: KeyboardEvent) => {
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
return return
@@ -306,15 +312,17 @@ export default function SystemDetail({ name }: { name: string }) {
case "ArrowLeft": case "ArrowLeft":
case "h": case "h":
const prevIndex = (currentIndex - 1 + systems.length) % systems.length const prevIndex = (currentIndex - 1 + systems.length) % systems.length
return navigate(getPagePath($router, "system", { name: systems[prevIndex].name })) persistChartTime.current = true
return navigate(getPagePath($router, "system", { name: systems[prevIndex].name}))
case "ArrowRight": case "ArrowRight":
case "l": case "l":
const nextIndex = (currentIndex + 1) % systems.length const nextIndex = (currentIndex + 1) % systems.length
return navigate(getPagePath($router, "system", { name: systems[nextIndex].name })) persistChartTime.current = true
return navigate(getPagePath($router, "system", { name: systems[nextIndex].name}))
} }
} }
return listen(document, "keyup", handleKeyUp) return listen(document, "keyup", handleKeyUp)
}, [name]) }, [name, systems])
if (!system.id) { if (!system.id) {
return null return null