polish (#724)

openziti · Jan 23, 2025 · 39b173d · 39b173d
1 parent 06ae147
commit 39b173d
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/ui100/src/AccessEdge.tsx b/ui100/src/AccessEdge.tsx
@@ -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} />;
 }

diff --git a/ui100/src/AccessPanel.tsx b/ui100/src/AccessPanel.tsx
@@ -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>

diff --git a/ui100/src/AccountPanel.tsx b/ui100/src/AccountPanel.tsx
@@ -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>

diff --git a/ui100/src/EnvironmentPanel.tsx b/ui100/src/EnvironmentPanel.tsx
@@ -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>

diff --git a/ui100/src/SharePanel.tsx b/ui100/src/SharePanel.tsx
@@ -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>

diff --git a/ui100/src/TabularView.tsx b/ui100/src/TabularView.tsx
@@ -162,6 +162,9 @@ const TabularView = () => {
             }
         },
         positionToolbarAlertBanner: "bottom",
+        mrtTheme: (theme) => ({
+            matchHighlightColor: 'rgba(155, 243, 22, 1)'
+        }),
     });
 
     return (