mirror of
https://github.com/openziti/zrok.git
synced 2025-06-01 15:48:21 +02:00
polish (#724)
This commit is contained in:
parent
06ae147963
commit
39b173d0af
@ -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} />;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -162,6 +162,9 @@ const TabularView = () => {
|
||||
}
|
||||
},
|
||||
positionToolbarAlertBanner: "bottom",
|
||||
mrtTheme: (theme) => ({
|
||||
matchHighlightColor: 'rgba(155, 243, 22, 1)'
|
||||
}),
|
||||
});
|
||||
|
||||
return (
|
||||
|
Loading…
x
Reference in New Issue
Block a user