From 8da300b263c3c6d3875b77476444928404c7e13f Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Wed, 22 Jan 2025 11:04:23 -0500
Subject: [PATCH] panel improvements (#804)

---
 ui100/src/ApiConsole.tsx       |  2 +-
 ui100/src/EnvironmentPanel.tsx |  4 +++-
 ui100/src/SharePanel.tsx       | 20 +++++++++++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/ui100/src/ApiConsole.tsx b/ui100/src/ApiConsole.tsx
index fcec2284..e1b3f07c 100644
--- a/ui100/src/ApiConsole.tsx
+++ b/ui100/src/ApiConsole.tsx
@@ -192,7 +192,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
                 <Grid2 size="grow">
                     {mainPanel}
                 </Grid2>
-                {sidePanel ? <Grid2 size={4}>{sidePanel}</Grid2> : null}
+                {sidePanel ? <Grid2 size={5}>{sidePanel}</Grid2> : null}
             </Grid2>
         </div>
     );
diff --git a/ui100/src/EnvironmentPanel.tsx b/ui100/src/EnvironmentPanel.tsx
index 0e3b9094..fed12971 100644
--- a/ui100/src/EnvironmentPanel.tsx
+++ b/ui100/src/EnvironmentPanel.tsx
@@ -83,7 +83,8 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
     }
 
     const labels = {
-        zId: "OpenZiti Service"
+        createdAt: "Created",
+        updatedAt: "Updated"
     }
 
     useEffect(() => {
@@ -98,6 +99,7 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
                 let env = d.environment!;
                 delete env.activity;
                 delete env.limited;
+                delete env.zId;
                 setDetail(env);
             })
             .catch(e => {
diff --git a/ui100/src/SharePanel.tsx b/ui100/src/SharePanel.tsx
index c63cad48..da7c34f2 100644
--- a/ui100/src/SharePanel.tsx
+++ b/ui100/src/SharePanel.tsx
@@ -4,7 +4,6 @@ import ShareIcon from "@mui/icons-material/Share";
 import {Configuration, MetadataApi, Share} from "./api";
 import {useEffect, useState} from "react";
 import PropertyTable from "./PropertyTable.tsx";
-import SecretToggle from "./SecretToggle.tsx";
 import useStore from "./model/store.ts";
 import DeleteIcon from "@mui/icons-material/Delete";
 
@@ -17,10 +16,17 @@ const SharePanel = ({ share }: 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>
+        frontendEndpoint: row => <a href={row.value} target="_">{row.value}</a>,
+        reserved: row => row.value ? "reserved" : "ephemeral"
+    }
+
+    const labels = {
+        backendProxyEndpoint: "Target",
+        createdAt: "Created",
+        reserved: "Reservation",
+        updatedAt: "Updated"
     }
 
     useEffect(() => {
@@ -34,7 +40,11 @@ const SharePanel = ({ share }: SharePanelProps) => {
             .then(d => {
                 delete d.activity;
                 delete d.limited;
-                delete d.reserved;
+                delete d.zId;
+                if(d.shareMode === "private") {
+                    delete d.frontendEndpoint;
+                    delete d.frontendSelection;
+                }
                 setDetail(d);
             })
             .catch(e => {
@@ -55,7 +65,7 @@ const SharePanel = ({ share }: SharePanelProps) => {
             </Grid2>
             <Grid2 container sx={{ flexGrow: 1 }}>
                 <Grid2 display="flex">
-                    <PropertyTable object={detail} custom={customProperties}/>
+                    <PropertyTable object={detail} custom={customProperties} labels={labels} />
                 </Grid2>
             </Grid2>
         </Typography>