extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-02-07 22:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

share panel (#724)

Browse Source
This commit is contained in:
Michael Quigley 2024-12-19 14:24:31 -05:00
parent 5d863dd9f0
commit 58f33e390b
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui100/src/ApiConsole.tsx
View File

@ -98,7 +98,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
break;
case "share":
setSidePanel(<SharePanel share={selectedNode} />);
setSidePanel(<SharePanel share={selectedNode} user={user} />);
break;
case "access":

53
ui100/src/SharePanel.tsx
View File

@ -1,20 +1,57 @@
import {Node} from "@xyflow/react";
import {Card, Grid2, Typography} from "@mui/material";
import {Grid2, Typography} from "@mui/material";
import ShareIcon from "@mui/icons-material/Share";
import {Configuration, MetadataApi, Share} from "./api";
import {useEffect, useState} from "react";
import {User} from "./model/user.ts";
import PropertyTable from "./PropertyTable.tsx";
import SecretToggle from "./SecretToggle.tsx";
interface SharePanelProps {
share: Node;
user: User;
}
const SharePanel = ({ share }: SharePanelProps) => {
const SharePanel = ({ share, user }: SharePanelProps) => {
const [detail, setDetail] = useState<Share>(null);
const customProperties = {
zId: row => <SecretToggle secret={row.value} />,
createdAt: row => new Date(row.value).toLocaleString(),
updatedAt: row => new Date(row.value).toLocaleString(),
frontendEndpoint: row => <a href={row.value} target="_">{row.value}</a>
}
useEffect(() => {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
console.log(share);
let metadata = new MetadataApi(cfg);
metadata.getShareDetail({ shrToken: share.data!.shrToken! as string })
.then(d => {
delete d.activity;
delete d.limited;
delete d.reserved;
console.log("d", d);
setDetail(d);
})
.catch(e => {
console.log("SharePanel", e);
})
}, [share]);
return (
<Typography component="div">
<Grid2 container spacing={2}>
<Grid2 >
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><ShareIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(share.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 display="flex"><ShareIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(share.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1 }}>
<Grid2 display="flex">
<PropertyTable object={detail} custom={customProperties}/>
</Grid2>
</Grid2>
</Typography>