extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-22 16:13:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

table components and dynamic refresh for mvp (#221)

Browse Source
This commit is contained in:
Michael Quigley 2024-10-02 13:44:22 -04:00
parent 433290d74d
commit eebc6effe6
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
5 changed files with 1029 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
agent/agent-ui/.npmrc Normal file
View File

@ -0,0 +1 @@
public-hoist-pattern[]=*@nextui-org/*

4
agent/agent-ui/package.json
View File

@ -9,6 +9,10 @@
"lint": "next lint"
},
"dependencies": {
"@nextui-org/system": "^2.2.6",
"@nextui-org/table": "^2.0.40",
"@nextui-org/theme": "^2.2.11",
"framer-motion": "^11.9.0",
"next": "14.2.13",
"react": "^18",
"react-dom": "^18",

950
agent/agent-ui/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

73
agent/agent-ui/src/app/page.js
View File

@ -2,9 +2,11 @@
import {useEffect, useState} from "react";
import {AgentApi, ApiClient} from "@/api/src";
import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/table"
export default function Home() {
const [version, setVersion] = useState("");
const [status, setStatus] = useState({});
let api = new AgentApi(new ApiClient("http://localhost:8888"));
useEffect(() => {
@ -18,9 +20,76 @@ export default function Home() {
});
}, []);
useEffect(() => {
let mounted = true;
let interval = setInterval(() => {
api.agentStatus((err, data) => {
console.log(data);
if(mounted) {
setStatus(data);
}
})
}, 1000);
return () => {
mounted = false;
clearInterval(interval);
}
}, []);
return (
<div className="grid grid-rows-[20px_1fr_20px] min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-mono)]">
<p>Agent: {version}</p>
<div className="grid grid-rows-[20px_1fr_20px] p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-mono)]">
<h1>Agent: {version}</h1>
<div>
<h2>Accesses</h2>
<Table aria-label={"accesses"}>
<TableHeader>
<TableColumn key={"frontendToken"}>Frontend Token</TableColumn>
<TableColumn key={"token"}>Token</TableColumn>
<TableColumn key={"bindAddress"}>Bind Address</TableColumn>
<TableColumn key={"responseHeaders"}>Response Headers</TableColumn>
</TableHeader>
<TableBody>
{ status.accesses ? status.accesses.map((r) =>
<TableRow>
<TableCell>{r.frontendToken}</TableCell>
<TableCell>{r.token}</TableCell>
<TableCell>{r.bindAddress}</TableCell>
<TableCell>{r.responseHeaders}</TableCell>
</TableRow>
) : null
}
</TableBody>
</Table>
</div>
<div>
<h2>Shares</h2>
<Table aria-label="shares">
<TableHeader>
<TableColumn key="token">Token</TableColumn>
<TableColumn key={"reserved"}>Reserved</TableColumn>
<TableColumn key="shareMode">Share Mode</TableColumn>
<TableColumn key="backendMode">Backend Mode</TableColumn>
<TableColumn key="backendEndpoint">Target</TableColumn>
<TableColumn key="closed">Closed</TableColumn>
<TableColumn key="frontendEndpoints">Frontend Endpoints</TableColumn>
</TableHeader>
<TableBody>
{ status.shares ? status.shares.map((r) =>
<TableRow>
<TableCell>{r.token}</TableCell>
<TableCell>{''+r.reserved}</TableCell>
<TableCell>{r.shareMode}</TableCell>
<TableCell>{r.backendMode}</TableCell>
<TableCell>{r.backendEndpoint}</TableCell>
<TableCell>{''+r.closed}</TableCell>
<TableCell>{r.shareMode === 'public' ? r.frontendEndpoints : 'N/A'}</TableCell>
</TableRow>
) : null
}
</TableBody>
</Table>
</div>
</div>
);
}

4
agent/agent-ui/tailwind.config.js
View File

@ -1,9 +1,11 @@
const {nextui} = require('@nextui-org/theme');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/components/(table|checkbox|spacer).js"
],
theme: {
extend: {
@ -13,5 +15,5 @@ module.exports = {
},
},
},
plugins: [],
plugins: [nextui()],
};