mirror of
https://github.com/openziti/zrok.git
synced 2025-06-21 02:07:44 +02:00
panel improvements (#804)
This commit is contained in:
parent
3751d0b75a
commit
8da300b263
@ -192,7 +192,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
<Grid2 size="grow">
|
<Grid2 size="grow">
|
||||||
{mainPanel}
|
{mainPanel}
|
||||||
</Grid2>
|
</Grid2>
|
||||||
{sidePanel ? <Grid2 size={4}>{sidePanel}</Grid2> : null}
|
{sidePanel ? <Grid2 size={5}>{sidePanel}</Grid2> : null}
|
||||||
</Grid2>
|
</Grid2>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -83,7 +83,8 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const labels = {
|
const labels = {
|
||||||
zId: "OpenZiti Service"
|
createdAt: "Created",
|
||||||
|
updatedAt: "Updated"
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -98,6 +99,7 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
|
|||||||
let env = d.environment!;
|
let env = d.environment!;
|
||||||
delete env.activity;
|
delete env.activity;
|
||||||
delete env.limited;
|
delete env.limited;
|
||||||
|
delete env.zId;
|
||||||
setDetail(env);
|
setDetail(env);
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
|
@ -4,7 +4,6 @@ import ShareIcon from "@mui/icons-material/Share";
|
|||||||
import {Configuration, MetadataApi, Share} from "./api";
|
import {Configuration, MetadataApi, Share} from "./api";
|
||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import PropertyTable from "./PropertyTable.tsx";
|
import PropertyTable from "./PropertyTable.tsx";
|
||||||
import SecretToggle from "./SecretToggle.tsx";
|
|
||||||
import useStore from "./model/store.ts";
|
import useStore from "./model/store.ts";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
|
|
||||||
@ -17,10 +16,17 @@ const SharePanel = ({ share }: SharePanelProps) => {
|
|||||||
const [detail, setDetail] = useState<Share>(null);
|
const [detail, setDetail] = useState<Share>(null);
|
||||||
|
|
||||||
const customProperties = {
|
const customProperties = {
|
||||||
zId: row => <SecretToggle secret={row.value} />,
|
|
||||||
createdAt: row => new Date(row.value).toLocaleString(),
|
createdAt: row => new Date(row.value).toLocaleString(),
|
||||||
updatedAt: 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(() => {
|
useEffect(() => {
|
||||||
@ -34,7 +40,11 @@ const SharePanel = ({ share }: SharePanelProps) => {
|
|||||||
.then(d => {
|
.then(d => {
|
||||||
delete d.activity;
|
delete d.activity;
|
||||||
delete d.limited;
|
delete d.limited;
|
||||||
delete d.reserved;
|
delete d.zId;
|
||||||
|
if(d.shareMode === "private") {
|
||||||
|
delete d.frontendEndpoint;
|
||||||
|
delete d.frontendSelection;
|
||||||
|
}
|
||||||
setDetail(d);
|
setDetail(d);
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
@ -55,7 +65,7 @@ const SharePanel = ({ share }: SharePanelProps) => {
|
|||||||
</Grid2>
|
</Grid2>
|
||||||
<Grid2 container sx={{ flexGrow: 1 }}>
|
<Grid2 container sx={{ flexGrow: 1 }}>
|
||||||
<Grid2 display="flex">
|
<Grid2 display="flex">
|
||||||
<PropertyTable object={detail} custom={customProperties}/>
|
<PropertyTable object={detail} custom={customProperties} labels={labels} />
|
||||||
</Grid2>
|
</Grid2>
|
||||||
</Grid2>
|
</Grid2>
|
||||||
</Typography>
|
</Typography>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user