extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-20 01:37:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

centralized data retrieval (#221)

Browse Source
This commit is contained in:
Michael Quigley 2024-10-09 12:45:44 -04:00
parent c02b9c2b23
commit 6eb60fcd3d
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
agent/agentUi/src/AgentUi.jsx
View File

@ -6,6 +6,8 @@ import {AgentApi, ApiClient} from "./api/src/index.js";
const AgentUi = (props) => {
const [version, setVersion] = useState("");
const [shares, setShares] = useState([]);
const [accesses, setAccesses] = useState([]);
let api = new AgentApi(new ApiClient(window.location.protocol+'//'+window.location.host));
@ -18,14 +20,30 @@ const AgentUi = (props) => {
});
}, []);
useEffect(() => {
let mounted = true;
let interval = setInterval(() => {
api.agentStatus((err, data) => {
if(mounted) {
setShares(data.shares);
setAccesses(data.accesses);
}
});
}, 1000);
return () => {
mounted = false;
clearInterval(interval);
}
});
const router = createBrowserRouter([
{
path: "/",
element: <Overview version={version} />
element: <Overview version={version} shares={shares} accesses={accesses} />
},
{
path: "/share/:token",
element: <ShareDetail version={version} />
element: <ShareDetail version={version} shares={shares} />
}
]);

33
agent/agentUi/src/Overview.jsx
View File

@ -1,17 +1,12 @@
import "bootstrap/dist/css/bootstrap.min.css";
import {useEffect, useState} from "react";
import {AgentApi, ApiClient} from "./api/src/index.js";
import DataTable from "react-data-table-component";
import NavBar from "./NavBar.jsx";
const Overview = (props) => {
const [shares, setShares] = useState([]);
const [accesses, setAccesses] = useState([]);
const shareColumns = [
{
name: 'Token',
selector: row => row.reserved ? row.token+' (reserved)' : row.token
selector: row => <a href={"/share/"+row.token}>{row.token}</a>
},
{
name: 'Share Mode',
@ -47,42 +42,24 @@ const Overview = (props) => {
},
];
let api = new AgentApi(new ApiClient(window.location.protocol+'//'+window.location.host));
useEffect(() => {
let mounted = true;
let interval = setInterval(() => {
api.agentStatus((err, data) => {
if(mounted) {
setShares(data.shares);
setAccesses(data.accesses);
}
});
}, 1000);
return () => {
mounted = false;
clearInterval(interval);
}
});
return (
<>
<NavBar version={props.version} />
<div class={"info"}>
<div className={"info"}>
<h2>Shares</h2>
<DataTable
columns={shareColumns}
data={shares}
data={props.shares}
noDataComponent={<div/>}
/>
</div>
<div class={"info"}>
<div className={"info"}>
<h2>Accesses</h2>
<DataTable
columns={accessColumns}
data={accesses}
data={props.accesses}
noDataComponent={<div/>}
/>
</div>