Add .env file

src/client/App.tsx

@@ -19,7 +19,7 @@ const Main = () => {
   const dynamicQuery = useQuery({
     queryKey: ['dynamic'],
     queryFn: fetchDynamicData,
-    refetchInterval: 500,
+    refetchInterval: Number(import.meta.env.CLIENT_REFETCH_INTERVAL),
   });
 
   const isLoading = staticQuery.isLoading || dynamicQuery.isLoading;

src/client/api/index.ts

@@ -1,6 +1,6 @@
 const getApiUrl = (path: string) => {
   const url = new URL(window.location.href);
-  url.port = '3001';
+  url.port = import.meta.env.SERVER_PORT;
   url.pathname = path;
 
   return url;

src/client/components/chart-cards/cpu.tsx

@@ -5,7 +5,7 @@ import { ChartCard } from './index';
 export const Cpu = () => {
   const { data: staticData } = useQuery<StaticData>({ queryKey: ['static'] });
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
-  const [history, setHistory] = useState<number[][]>(new Array(150).fill([]));
+  const [history, setHistory] = useState<number[][]>(new Array(Number(import.meta.env.CLIENT_GRAPH_STEPS)).fill([]));
 
   useEffect(() => {
     if (dynamicData) {

src/client/components/chart-cards/disks.tsx

@@ -4,7 +4,7 @@ import { ChartCard } from './index';
 
 export const Disks = () => {
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
-  const [history, setHistory] = useState<number[][]>(new Array(150).fill([]));
+  const [history, setHistory] = useState<number[][]>(new Array(Number(import.meta.env.CLIENT_GRAPH_STEPS)).fill([]));
 
   useEffect(() => {
     if (dynamicData) {

src/client/components/chart-cards/memory.tsx

@@ -8,7 +8,7 @@ const formatOptions = { units: 'B' };
 export const Memory = () => {
   const { data: staticData } = useQuery<StaticData>({ queryKey: ['static'] });
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
-  const [history, setHistory] = useState<number[][]>(new Array(150).fill([]));
+  const [history, setHistory] = useState<number[][]>(new Array(Number(import.meta.env.CLIENT_GRAPH_STEPS)).fill([]));
 
   useEffect(() => {
     if (dynamicData) {

src/client/components/chart-cards/network.tsx

@@ -4,7 +4,7 @@ import { ChartCard } from './index';
 
 export const Network = () => {
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
-  const [history, setHistory] = useState<number[][]>(new Array(150).fill([]));
+  const [history, setHistory] = useState<number[][]>(new Array(Number(import.meta.env.CLIENT_GRAPH_STEPS)).fill([]));
 
   useEffect(() => {
     if (dynamicData) {

src/client/components/chart-cards/temps.tsx

@@ -5,7 +5,7 @@ import { ChartCard } from './index';
 export const Temps = () => {
   const { data: staticData } = useQuery<StaticData>({ queryKey: ['static'] });
   const { data: dynamicData } = useQuery<DynamicData>({ queryKey: ['dynamic'] });
-  const [history, setHistory] = useState<number[][]>(new Array(150).fill([]));
+  const [history, setHistory] = useState<number[][]>(new Array(Number(import.meta.env.CLIENT_GRAPH_STEPS)).fill([]));
 
   useEffect(() => {
     if (dynamicData) {

src/client/vite-env.d.ts

@@ -1 +1,14 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly CLIENT_GRAPH_STEPS: string;
+  readonly CLIENT_PORT: string;
+  readonly CLIENT_REFETCH_INTERVAL: string;
+  readonly SERVER_ACTIVE_WINDOW: string;
+  readonly SERVER_PORT: string;
+  readonly SERVER_REFRESH_INTERVAL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/stats-server/main.rs

@@ -1,4 +1,5 @@
 use axum::{extract::State, http::Response, response::IntoResponse, routing::get, Router, Server};
+use dotenv::dotenv;
 use serde_json::{json, Value};
 use std::{
     sync::{Arc, Mutex},
@@ -27,6 +28,18 @@ impl Default for AppState {
 
 #[tokio::main]
 async fn main() {
+    dotenv().ok();
+    let refresh_interval = Duration::from_millis(
+        std::env::var("SERVER_REFRESH_INTERVAL")
+            .unwrap()
+            .parse::<u64>()
+            .unwrap(),
+    );
+    let active_window = std::env::var("SERVER_ACTIVE_WINDOW")
+        .unwrap()
+        .parse::<u128>()
+        .unwrap();
+    let port = std::env::var("SERVER_PORT").unwrap();
     let app_state = AppState::default();
 
     let router = Router::new()
@@ -45,7 +58,7 @@ async fn main() {
             let now = Instant::now();
             let latest = app_state.latest.lock().unwrap().clone();
 
-            if (now - latest).as_millis() < 10000 {
+            if (now - latest).as_millis() < active_window {
                 sys.refresh_cpu();
                 sys.refresh_memory();
                 components.refresh();
@@ -82,11 +95,12 @@ async fn main() {
                 }
             }
 
-            std::thread::sleep(Duration::from_millis(200));
+            std::thread::sleep(refresh_interval);
         }
     });
 
-    let server = Server::bind(&"0.0.0.0:3001".parse().unwrap()).serve(router.into_make_service());
+    let server = Server::bind(&format!("0.0.0.0:{}", port).parse().unwrap())
+        .serve(router.into_make_service());
     let addr = server.local_addr();
     println!("Listening on {addr}");