extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-01-24 23:09:32 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Quigley 2025-01-07 11:39:08 -05:00
parent 4949b39494
commit f5a08b2e3c
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
3 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui100/src/AccountPanel.tsx
View File

@ -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>

6
ui100/src/EnvironmentPanel.tsx
View File

@ -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>

14
ui100/src/PropertyTable.tsx
View File

@ -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>
))}