support custom labels (implement selected) for panels (#804)

openziti · Jan 7, 2025 · f5a08b2 · f5a08b2
1 parent 4949b39
commit f5a08b2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/ui100/src/AccountPanel.tsx b/ui100/src/AccountPanel.tsx
@@ -16,6 +16,10 @@ const AccountPanel = ({ account}: AccountPanelProps) => {
         token: row => <SecretToggle secret={row.value} />
     }
 
+    const label = {
+        token: "Account Token"
+    }
+
     return (
         <Typography component="div">
             <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
@@ -24,7 +28,7 @@ const AccountPanel = ({ account}: AccountPanelProps) => {
             </Grid2>
             <Grid2 container sx={{ flexGrow: 1 }}>
                 <Grid2 display="flex">
-                    <PropertyTable object={user} custom={customProps} />
+                    <PropertyTable object={user} custom={customProps} labels={label} />
                 </Grid2>
             </Grid2>
         </Typography>

diff --git a/ui100/src/EnvironmentPanel.tsx b/ui100/src/EnvironmentPanel.tsx
@@ -21,6 +21,10 @@ const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
         updatedAt: row => new Date(row.value).toLocaleString()
     }
 
+    const labels = {
+        zId: "OpenZiti Service"
+    }
+
     useEffect(() => {
         let cfg = new Configuration({
             headers: {
@@ -48,7 +52,7 @@ const EnvironmentPanel = ({ environment }: EnvironmentPanelProps) => {
             </Grid2>
             <Grid2 container sx={{ flexGrow: 1 }}>
                 <Grid2 display="flex">
-                    <PropertyTable object={detail} custom={customProperties} />
+                    <PropertyTable object={detail} custom={customProperties} labels={labels} />
                 </Grid2>
             </Grid2>
         </Typography>

diff --git a/ui100/src/PropertyTable.tsx b/ui100/src/PropertyTable.tsx
@@ -5,9 +5,10 @@ import {Paper, Table, TableBody, TableCell, TableRow} from "@mui/material";
 type PropertyTableProps = {
     object: any;
     custom: any;
+    labels: any;
 }
 
-const PropertyTable = ({ object, custom }: PropertyTableProps) => {
+const PropertyTable = ({ object, custom, labels }: PropertyTableProps) => {
     const [data, setData] = useState([]);
 
     useEffect(() => {
@@ -23,13 +24,22 @@ const PropertyTable = ({ object, custom }: PropertyTableProps) => {
         return row.value;
     }
 
+    const renderLabel = (row) => {
+        if(labels) {
+            if(row.property in labels) {
+                return labels[row.property];
+            }
+        }
+        return camelToWords(row.property);
+    }
+
     return (
         <Paper>
             <Table>
                 <TableBody>
                     {data.map((row) => (
                         <TableRow key={row.id}>
-                            <TableCell sx={{ width: 100 }}><strong>{camelToWords(row.property)}</strong></TableCell>
+                            <TableCell sx={{ width: 100 }}><strong>{renderLabel(row)}</strong></TableCell>
                             <TableCell sx={{ width: 1000 }}>{value(row)}</TableCell>
                         </TableRow>
                     ))}