mirror/bazarr
1
0
Fork 0
mirror of https://github.com/morpheus65535/bazarr synced 2024-12-26 17:47:20 +00:00
Code Issues Releases Wiki Activity

no log: Fix uptime in the system status view (with the approach that doesn't hurt performance)

Browse source
This commit is contained in:
LASER-Yi 2022-06-14 18:08:31 +08:00
parent 101bca90bf
commit 27f4c41a0e
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/pages/System/Status/index.tsx
View file

@ -1,6 +1,7 @@
import { useSystemHealth, useSystemStatus } from "@/apis/hooks"; import { useSystemHealth, useSystemStatus } from "@/apis/hooks";
import { QueryOverlay } from "@/components/async"; import { QueryOverlay } from "@/components/async";
import { GithubRepoRoot } from "@/constants"; import { GithubRepoRoot } from "@/constants";
import { useInterval } from "@/utilities";
import { IconDefinition } from "@fortawesome/fontawesome-common-types"; import { IconDefinition } from "@fortawesome/fontawesome-common-types";
import { import {
faDiscord, faDiscord,
@ -10,9 +11,9 @@ import {
import { faPaperPlane } from "@fortawesome/free-solid-svg-icons"; import { faPaperPlane } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Anchor, Container, Divider, Grid, Stack, Text } from "@mantine/core"; import { Anchor, Container, Divider, Grid, Stack, Text } from "@mantine/core";
import { useDocumentTitle, useInterval } from "@mantine/hooks"; import { useDocumentTitle } from "@mantine/hooks";
import moment from "moment"; import moment from "moment";
import { FunctionComponent, ReactNode, useEffect, useState } from "react"; import { FunctionComponent, ReactNode, useCallback, useState } from "react";
import Table from "./table"; import Table from "./table";
interface InfoProps { interface InfoProps {
@ -71,10 +72,11 @@ const SystemStatusView: FunctionComponent = () => {
const [uptime, setUptime] = useState<string>(); const [uptime, setUptime] = useState<string>();
const interval = useInterval(() => { const update = useCallback(() => {
if (status) { const startTime = status?.start_time;
if (startTime) {
const duration = moment.duration( const duration = moment.duration(
moment().utc().unix() - status.start_time, moment().utc().unix() - startTime,
"seconds" "seconds"
), ),
days = duration.days(), days = duration.days(),
@ -83,13 +85,9 @@ const SystemStatusView: FunctionComponent = () => {
seconds = duration.seconds().toString().padStart(2, "0"); seconds = duration.seconds().toString().padStart(2, "0");
setUptime(days + "d " + hours + ":" + minutes + ":" + seconds); setUptime(days + "d " + hours + ":" + minutes + ":" + seconds);
} }
}, 1000); }, [status?.start_time]);
useEffect(() => { useInterval(update, 1000);
interval.start();
return interval.stop();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [interval]);
useDocumentTitle("Status - Bazarr (System)"); useDocumentTitle("Status - Bazarr (System)");

12
frontend/src/utilities/hooks.ts
View file

@ -150,3 +150,15 @@ export function useOnValueChange<T>(value: T, onChange: (value: T) => void) {
} }
}, [value]); }, [value]);
} }
// Mantine's useInterval has some weird issues. This is a workaround.
export function useInterval(fn: VoidFunction, ms: number) {
const timer = useRef<number>();
useEffect(() => {
timer.current = window.setInterval(fn, ms);
return () => {
clearInterval(timer.current);
};
}, [fn, ms]);
}