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

polish (#724)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-23 13:47:14 -05:00
parent 06ae147963
commit 39b173d0af
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
6 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui100/src/AccessEdge.tsx
View File

@ -2,7 +2,11 @@ import {BaseEdge, EdgeProps} from "@xyflow/react";
const AccessEdge = (props: EdgeProps) => {
const { sourceX, sourceY, targetX, targetY, id, markerEnd } = props;
const edgePath = `M ${sourceX} ${sourceY} L ${sourceX} ${sourceY + 20} L ${targetX} ${targetY + 20} L ${targetX} ${targetY}`;
const edgePath = `M ${sourceX} ${sourceY} ` +
`L ${sourceX} ${sourceY + 20} ` +
`L ${sourceX + (targetX - sourceX) / 2} ${sourceY + 50 + ((sourceX - targetX) * .05) + (targetY - sourceY) / 2} ` +
`L ${targetX} ${targetY + 20} ` +
`L ${targetX} ${targetY}`;
return <BaseEdge path={edgePath} markerEnd={markerEnd} />;
}

5
ui100/src/AccessPanel.tsx
View File

@ -124,10 +124,13 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
<Typography component="div">
<Grid2 container spacing={2}>
<Grid2 >
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
<Grid2 display="flex"><AccessIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(access.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
<h5 style={{ margin: 0 }}>A private access frontend with the token <code>{access.id}</code></h5>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Release Access">
<Button variant="contained" color="error" onClick={openReleaseAccess}><DeleteIcon /></Button>

7
ui100/src/AccountPanel.tsx
View File

@ -11,7 +11,7 @@ interface AccountPanelProps {
account: Node;
}
const AccountPanel = ({ account}: AccountPanelProps) => {
const AccountPanel = ({ account }: AccountPanelProps) => {
const user = useStore((state) => state.user);
const customProps = {
@ -24,10 +24,13 @@ const AccountPanel = ({ account}: AccountPanelProps) => {
return (
<Typography component="div">
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
<Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
<h5 style={{ margin: 0 }}>Your zrok account identified by the email <code>{user.email}</code></h5>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Change Password">
<Button variant="contained" color="error"><PasswordIcon /></Button>

5
ui100/src/EnvironmentPanel.tsx
View File

@ -128,10 +128,13 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
return (
<>
<Typography component="div">
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
<Grid2 display="flex"><EnvironmentIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(environment.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
<h5 style={{ margin: 0 }}>An environment on a host with address <code>{detail ? detail.address : ''}</code></h5>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Release Environment">
<Button variant="contained" color="error" onClick={openReleaseEnvironment}><DeleteIcon /></Button>

9
ui100/src/SharePanel.tsx
View File

@ -130,12 +130,15 @@ const SharePanel = ({ share }: SharePanelProps) => {
return (
<>
<Typography component="div">
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Grid2 container sx={{ flexGrow: 0 }} alignItems="center">
<Grid2 display="flex"><ShareIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(share.data.label)}</Grid2>
<Grid2 display="flex" component="h4">{String(share.data.label)}</Grid2>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
<h5 style={{ margin: 0 }}>A {detail ? detail.shareMode : ''}{detail && detail.reserved ? ', reserved ' : ''} share with the token <code>{share.id}</code></h5>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Release Environment">
<Tooltip title="Release Share">
<Button variant="contained" color="error" onClick={openReleaseShare}><DeleteIcon /></Button>
</Tooltip>
</Grid2>

3
ui100/src/TabularView.tsx
View File

@ -162,6 +162,9 @@ const TabularView = () => {
}
},
positionToolbarAlertBanner: "bottom",
mrtTheme: (theme) => ({
matchHighlightColor: 'rgba(155, 243, 22, 1)'
}),
});
return (