extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-12-22 23:02:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

share and access cards ported (#221)

Browse Source
This commit is contained in:
Michael Quigley 2024-11-19 12:55:25 -05:00
parent 7f9f610302
commit 0f2418e921
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 47 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
agent/agentUiTs/src/AccessCard.tsx Normal file
View File

@ -0,0 +1,44 @@
import {AgentObject} from "./model/overview.ts";
import {AppBar, Box, Button, Card, Chip, Grid2, Toolbar, Typography} from "@mui/material";
import LanIcon from "@mui/icons-material/Lan";
import {AccessDetail} from "./api";
import DeleteIcon from "@mui/icons-material/Delete";
interface AccessCardProps {
accessObject: AgentObject;
}
function AccessCard({ accessObject }: AccessCardProps) {
let access = (accessObject.v as AccessDetail);
return (
<Card>
<AppBar position="sticky">
<Toolbar variant="dense">
<LanIcon />
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex" justifyContent="center" size="grow">
<Typography variant="h6" component="div">{access.frontendToken}</Typography>
</Grid2>
</Grid2>
<Grid2 container>
<Grid2 display="flex" justifyContent="right">
<Chip label="private" size="small" color="warning" />
</Grid2>
</Grid2>
</Toolbar>
</AppBar>
<Box sx={{ p: 2, textAlign: "center" }}>
<Typography variant="h6" component="div">
{access.token} &rarr; {access.bindAddress}
</Typography>
</Box>
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex" justifyContent="right" size="grow">
<Button variant="contained"><DeleteIcon /></Button>
</Grid2>
</Grid2>
</Card>
);
}
export default AccessCard;

5
agent/agentUiTs/src/Overview.tsx
View File

@ -3,6 +3,7 @@ import {Card, Grid2} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
import LanIcon from "@mui/icons-material/Lan";
import ShareCard from "./ShareCard.tsx";
import AccessCard from "./AccessCard.tsx";
interface OverviewProps {
overview: Array<AgentObject>;
@ -14,7 +15,7 @@ function Overview({ overview }: OverviewProps) {
overview.forEach(row => {
switch(row.type) {
case "access":
cards.push(<Grid2 size={{ xs: 12, md: 6 }}><h6>{row.id}</h6></Grid2>);
cards.push(<Grid2 size={{ xs: 12, md: 6 }}><AccessCard accessObject={row} /></Grid2>);
break;
case "share":
@ -30,7 +31,7 @@ function Overview({ overview }: OverviewProps) {
</Grid2>);
}
return (
<Grid2 container spacing="2">
<Grid2 container spacing={2}>
{cards}
</Grid2>
);