From 2c0475bc6fd2e4929361ac9dfc100d2e7a34eaa3 Mon Sep 17 00:00:00 2001 From: will pankiewicz Date: Mon, 15 Apr 2024 11:13:53 +0200 Subject: [PATCH 1/2] relax status update interval --- packages/scorekeeper-status-ui/src/App.tsx | 8 ++++---- packages/scorekeeper-status-ui/src/EraStatsBar.tsx | 2 +- packages/scorekeeper-status-ui/src/HealthCheckBar.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/scorekeeper-status-ui/src/App.tsx b/packages/scorekeeper-status-ui/src/App.tsx index 51366e574..10581b273 100644 --- a/packages/scorekeeper-status-ui/src/App.tsx +++ b/packages/scorekeeper-status-ui/src/App.tsx @@ -50,7 +50,7 @@ const App = () => { const [jobs, setJobs] = useState([]); const [isLoading, setIsLoading] = useState(false); const [hasError, setHasError] = useState(false); - const [refreshInterval, setRefreshInterval] = useState(500); // Default refresh interval + const [refreshInterval, setRefreshInterval] = useState(5000); // Default refresh interval const [nominators, setNominators] = useState([]); const fetchData = useCallback(async () => { @@ -66,7 +66,7 @@ const App = () => { })), ); setHasError(false); - setRefreshInterval(800); // Reset to faster refresh rate on success + setRefreshInterval(5000); // Reset to faster refresh rate on success } else { // Handle empty response console.log("Received empty response"); @@ -122,12 +122,12 @@ const App = () => { }, [currentEndpoint]); useEffect(() => { - const interval = setInterval(fetchData, 500); + const interval = setInterval(fetchData, 5000); return () => clearInterval(interval); }, [fetchData]); useEffect(() => { - const interval = setInterval(fetchNominatorsData, 500); + const interval = setInterval(fetchNominatorsData, 5000); return () => clearInterval(interval); }, [fetchNominatorsData]); diff --git a/packages/scorekeeper-status-ui/src/EraStatsBar.tsx b/packages/scorekeeper-status-ui/src/EraStatsBar.tsx index ff2f37f6e..936c52536 100644 --- a/packages/scorekeeper-status-ui/src/EraStatsBar.tsx +++ b/packages/scorekeeper-status-ui/src/EraStatsBar.tsx @@ -29,7 +29,7 @@ const EraStatsBar = ({ currentEndpoint }) => { } }; - const interval = setInterval(fetchEraStats, 500); + const interval = setInterval(fetchEraStats, 5000); return () => clearInterval(interval); }, [currentEndpoint]); diff --git a/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx b/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx index d7684c201..3b76fc483 100644 --- a/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx +++ b/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx @@ -28,7 +28,7 @@ const HealthCheckBar = ({ currentEndpoint }) => { } }; - const interval = setInterval(fetchHealthData, 500); + const interval = setInterval(fetchHealthData, 5000); return () => clearInterval(interval); }, [currentEndpoint]); From 41d2247c009d2129ec8f637de8088cfdd1021bb1 Mon Sep 17 00:00:00 2001 From: will pankiewicz Date: Tue, 16 Apr 2024 11:00:06 +0200 Subject: [PATCH 2/2] make refresh interval a constant --- packages/scorekeeper-status-ui/src/App.tsx | 11 ++++++----- packages/scorekeeper-status-ui/src/Constants.ts | 1 + packages/scorekeeper-status-ui/src/EraStatsBar.tsx | 3 ++- packages/scorekeeper-status-ui/src/HealthCheckBar.tsx | 5 +++-- 4 files changed, 12 insertions(+), 8 deletions(-) create mode 100644 packages/scorekeeper-status-ui/src/Constants.ts diff --git a/packages/scorekeeper-status-ui/src/App.tsx b/packages/scorekeeper-status-ui/src/App.tsx index 10581b273..a0dc8dc8d 100644 --- a/packages/scorekeeper-status-ui/src/App.tsx +++ b/packages/scorekeeper-status-ui/src/App.tsx @@ -23,6 +23,7 @@ import HealthCheckBar from "./HealthCheckBar"; import { Identicon } from "@polkadot/react-identicon"; import EraStatsBar from "./EraStatsBar"; import { debounce } from "lodash"; +import { REFRESH_INTERVAL } from "./Constants"; interface Job { name: string; @@ -50,7 +51,7 @@ const App = () => { const [jobs, setJobs] = useState([]); const [isLoading, setIsLoading] = useState(false); const [hasError, setHasError] = useState(false); - const [refreshInterval, setRefreshInterval] = useState(5000); // Default refresh interval + const [refreshInterval, setRefreshInterval] = useState(REFRESH_INTERVAL); // Default refresh interval const [nominators, setNominators] = useState([]); const fetchData = useCallback(async () => { @@ -71,12 +72,12 @@ const App = () => { // Handle empty response console.log("Received empty response"); setHasError(true); - setRefreshInterval(5000); // Slow down the refresh rate + setRefreshInterval(REFRESH_INTERVAL); // Slow down the refresh rate } } catch (error) { console.error("Error fetching job data:", error); setHasError(true); - setRefreshInterval(5000); // Slow down the refresh rate on error + setRefreshInterval(REFRESH_INTERVAL); // Slow down the refresh rate on error // Provide more specific error handling if (error.response) { @@ -122,12 +123,12 @@ const App = () => { }, [currentEndpoint]); useEffect(() => { - const interval = setInterval(fetchData, 5000); + const interval = setInterval(fetchData, REFRESH_INTERVAL); return () => clearInterval(interval); }, [fetchData]); useEffect(() => { - const interval = setInterval(fetchNominatorsData, 5000); + const interval = setInterval(fetchNominatorsData, REFRESH_INTERVAL); return () => clearInterval(interval); }, [fetchNominatorsData]); diff --git a/packages/scorekeeper-status-ui/src/Constants.ts b/packages/scorekeeper-status-ui/src/Constants.ts new file mode 100644 index 000000000..d237de5a6 --- /dev/null +++ b/packages/scorekeeper-status-ui/src/Constants.ts @@ -0,0 +1 @@ +export const REFRESH_INTERVAL = 5000; diff --git a/packages/scorekeeper-status-ui/src/EraStatsBar.tsx b/packages/scorekeeper-status-ui/src/EraStatsBar.tsx index 936c52536..cb1a1c551 100644 --- a/packages/scorekeeper-status-ui/src/EraStatsBar.tsx +++ b/packages/scorekeeper-status-ui/src/EraStatsBar.tsx @@ -7,6 +7,7 @@ import { FiServer, FiUserCheck, } from "react-icons/fi"; +import { REFRESH_INTERVAL } from "./Constants"; const EraStatsBar = ({ currentEndpoint }) => { const [eraStats, setEraStats] = useState({ @@ -29,7 +30,7 @@ const EraStatsBar = ({ currentEndpoint }) => { } }; - const interval = setInterval(fetchEraStats, 5000); + const interval = setInterval(fetchEraStats, REFRESH_INTERVAL); return () => clearInterval(interval); }, [currentEndpoint]); diff --git a/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx b/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx index 3b76fc483..ebf443ba8 100644 --- a/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx +++ b/packages/scorekeeper-status-ui/src/HealthCheckBar.tsx @@ -6,7 +6,8 @@ import { FiClock, FiInfo, FiWifi, -} from "react-icons/fi"; // Added FiClock for the uptime icon +} from "react-icons/fi"; +import { REFRESH_INTERVAL } from "./Constants"; // Added FiClock for the uptime icon const HealthCheckBar = ({ currentEndpoint }) => { const [healthData, setHealthData] = useState({ @@ -28,7 +29,7 @@ const HealthCheckBar = ({ currentEndpoint }) => { } }; - const interval = setInterval(fetchHealthData, 5000); + const interval = setInterval(fetchHealthData, REFRESH_INTERVAL); return () => clearInterval(interval); }, [currentEndpoint]);