bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-07-27 05:28:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added API Server Health Check to Status Bar

Browse Source
This commit is contained in:
Nicole Rappe
2025-05-01 03:35:23 -06:00
parent 0f6a474817
commit f4eff0619b
1 changed files with 61 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
Data/Server/WebUI/src/Status_Bar.jsx
View File

@ -1,9 +1,17 @@
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Status_Bar.jsx ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Status_Bar.jsx
import React from "react"; import React, { useEffect, useState } from "react";
import { Box, Button, Divider } from "@mui/material"; import { Box, Button, Divider } from "@mui/material";
export default function StatusBar() { export default function StatusBar() {
const [apiStatus, setApiStatus] = useState("checking");
useEffect(() => {
fetch("/health")
.then((res) => (res.ok ? setApiStatus("online") : setApiStatus("offline")))
.catch(() => setApiStatus("offline"));
}, []);
const applyRate = () => { const applyRate = () => {
const val = parseInt( const val = parseInt(
document.getElementById("updateRateInput")?.value document.getElementById("updateRateInput")?.value
@ -26,46 +34,60 @@ export default function StatusBar() {
py: 1, py: 1,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: 2 justifyContent: "space-between"
}} }}
> >
<b>Nodes</b>: <span id="nodeCount">0</span> <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
<Divider <b>Nodes</b>: <span id="nodeCount">0</span>
orientation="vertical" <Divider orientation="vertical" flexItem sx={{ borderColor: "#444" }} />
flexItem <b>Update Rate (ms):</b>
sx={{ borderColor: "#444" }} <input
/> id="updateRateInput"
<b>Update Rate (ms):</b> type="number"
<input min="50"
id="updateRateInput" step="50"
type="number" defaultValue={window.BorealisUpdateRate}
min="50" style={{
step="50" width: "80px",
defaultValue={window.BorealisUpdateRate} background: "#121212",
style={{ color: "#fff",
width: "80px", border: "1px solid #444",
background: "#121212", borderRadius: "3px",
color: "#fff", padding: "3px",
border: "1px solid #444", fontSize: "0.8rem"
borderRadius: "3px", }}
padding: "3px", />
fontSize: "0.8rem" <Button
}} variant="outlined"
/> size="small"
<Button onClick={applyRate}
variant="outlined" sx={{
size="small" color: "#58a6ff",
onClick={applyRate} borderColor: "#58a6ff",
sx={{ fontSize: "0.75rem",
color: "#58a6ff", textTransform: "none",
borderColor: "#58a6ff", px: 1.5
fontSize: "0.75rem", }}
textTransform: "none", >
px: 1.5 Apply Rate
}} </Button>
> </Box>
Apply Rate
</Button> <Box sx={{ fontSize: "1.0rem", display: "flex", alignItems: "center", gap: 1 }}>
<strong style={{ color: "#58a6ff" }}>API Server</strong>:
<a
href="http://localhost:5000/health"
target="_blank"
rel="noopener noreferrer"
style={{
color: apiStatus === "online" ? "#00d18c" : "#ff4f4f",
textDecoration: "none",
fontWeight: "bold"
}}
>
{apiStatus === "checking" ? "..." : apiStatus.charAt(0).toUpperCase() + apiStatus.slice(1)}
</a>
</Box>
</Box> </Box>
); );
} }