mirror of
https://github.com/openziti/zrok.git
synced 2025-06-21 18:21:34 +02:00
api call semantics cleanup (#724)
This commit is contained in:
parent
e986c90185
commit
449d45c3a5
@ -3,10 +3,11 @@ import {Button, Grid2, Tooltip, Typography} from "@mui/material";
|
|||||||
import AccessIcon from "@mui/icons-material/Lan";
|
import AccessIcon from "@mui/icons-material/Lan";
|
||||||
import useApiConsoleStore from "./model/store.ts";
|
import useApiConsoleStore from "./model/store.ts";
|
||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import {Configuration, Frontend, MetadataApi, ShareApi} from "./api";
|
import {Frontend} from "./api";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
import PropertyTable from "./PropertyTable.tsx";
|
import PropertyTable from "./PropertyTable.tsx";
|
||||||
import ReleaseAccessModal from "./ReleaseAccessModal.tsx";
|
import ReleaseAccessModal from "./ReleaseAccessModal.tsx";
|
||||||
|
import {getMetadataApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface AccessPanelProps {
|
interface AccessPanelProps {
|
||||||
access: Node;
|
access: Node;
|
||||||
@ -26,13 +27,7 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cfg = new Configuration({
|
getMetadataApi(user).getFrontendDetail({feId: access.data.feId as number})
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let metadataApi = new MetadataApi(cfg);
|
|
||||||
metadataApi.getFrontendDetail({feId: access.data.feId as number})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
delete d.id;
|
delete d.id;
|
||||||
delete d.zId;
|
delete d.zId;
|
||||||
|
@ -28,7 +28,7 @@ const AccountPanel = ({ account }: AccountPanelProps) => {
|
|||||||
<Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
|
<Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
|
||||||
<Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
|
<Grid2 display="flex" component="h3">{String(account.data.label)}</Grid2>
|
||||||
</Grid2>
|
</Grid2>
|
||||||
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
|
<Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2 }} alignItems="center">
|
||||||
<h5 style={{ margin: 0 }}>Your zrok account, <code>{user.email}</code></h5>
|
<h5 style={{ margin: 0 }}>Your zrok account, <code>{user.email}</code></h5>
|
||||||
</Grid2>
|
</Grid2>
|
||||||
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
|
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import {JSX, useCallback, useEffect, useRef, useState} from "react";
|
import {JSX, useCallback, useEffect, useRef, useState} from "react";
|
||||||
import {Configuration, MetadataApi} from "./api";
|
|
||||||
import {Graph, layout, mergeGraph, nodesEqual} from "./model/graph.ts";
|
import {Graph, layout, mergeGraph, nodesEqual} from "./model/graph.ts";
|
||||||
import {Grid2} from "@mui/material";
|
import {Grid2} from "@mui/material";
|
||||||
import NavBar from "./NavBar.tsx";
|
import NavBar from "./NavBar.tsx";
|
||||||
@ -11,6 +10,7 @@ import AccessPanel from "./AccessPanel.tsx";
|
|||||||
import useApiConsoleStore from "./model/store.ts";
|
import useApiConsoleStore from "./model/store.ts";
|
||||||
import TabularView from "./TabularView.tsx";
|
import TabularView from "./TabularView.tsx";
|
||||||
import {Node} from "@xyflow/react";
|
import {Node} from "@xyflow/react";
|
||||||
|
import {getMetadataApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface ApiConsoleProps {
|
interface ApiConsoleProps {
|
||||||
logout: () => void;
|
logout: () => void;
|
||||||
@ -65,13 +65,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
}, [handleKeyPress]);
|
}, [handleKeyPress]);
|
||||||
|
|
||||||
const retrieveOverview = () => {
|
const retrieveOverview = () => {
|
||||||
let cfg = new Configuration({
|
getMetadataApi(user).overview()
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let api = new MetadataApi(cfg);
|
|
||||||
api.overview()
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
let newVov = mergeGraph(oldGraph.current, user, d.accountLimited!, d);
|
let newVov = mergeGraph(oldGraph.current, user, d.accountLimited!, d);
|
||||||
if(!nodesEqual(oldGraph.current.nodes, newVov.nodes)) {
|
if(!nodesEqual(oldGraph.current.nodes, newVov.nodes)) {
|
||||||
@ -121,14 +115,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let cfg = new Configuration({
|
getMetadataApi(user).getSparklines({body: {environments: environments, shares: shares}})
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let api = new MetadataApi(cfg);
|
|
||||||
api.getSparklines({body: {environments: environments, shares: shares}})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
if(d.sparklines) {
|
if(d.sparklines) {
|
||||||
let sparkdataIn = new Map<string, Number[]>();
|
let sparkdataIn = new Map<string, Number[]>();
|
||||||
|
@ -2,12 +2,13 @@ import {Node} from "@xyflow/react";
|
|||||||
import {Button, Grid2, Tooltip, Typography} from "@mui/material";
|
import {Button, Grid2, Tooltip, Typography} from "@mui/material";
|
||||||
import EnvironmentIcon from "@mui/icons-material/Computer";
|
import EnvironmentIcon from "@mui/icons-material/Computer";
|
||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import {Configuration, Environment, EnvironmentApi, MetadataApi} from "./api";
|
import {Environment} from "./api";
|
||||||
import PropertyTable from "./PropertyTable.tsx";
|
import PropertyTable from "./PropertyTable.tsx";
|
||||||
import SecretToggle from "./SecretToggle.tsx";
|
import SecretToggle from "./SecretToggle.tsx";
|
||||||
import useApiConsoleStore from "./model/store.ts";
|
import useApiConsoleStore from "./model/store.ts";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
|
import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
|
||||||
|
import {getMetadataApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface EnvironmentPanelProps {
|
interface EnvironmentPanelProps {
|
||||||
environment: Node;
|
environment: Node;
|
||||||
@ -38,13 +39,7 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cfg = new Configuration({
|
getMetadataApi(user).getEnvironmentDetail({envZId: environment.data!.envZId! as string})
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let metadata = new MetadataApi(cfg);
|
|
||||||
metadata.getEnvironmentDetail({envZId: environment.data!.envZId! as string})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
let env = d.environment!;
|
let env = d.environment!;
|
||||||
delete env.activity;
|
delete env.activity;
|
||||||
|
@ -16,8 +16,7 @@ const Login = ({ onLogin }: LoginProps) => {
|
|||||||
const [tou, setTou] = useState(null as string);
|
const [tou, setTou] = useState(null as string);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let api = new MetadataApi();
|
new MetadataApi()._configuration()
|
||||||
api._configuration()
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
if(d.touLink && d.touLink.trim() !== "") {
|
if(d.touLink && d.touLink.trim() !== "") {
|
||||||
setTou(d.touLink);
|
setTou(d.touLink);
|
||||||
@ -31,8 +30,7 @@ const Login = ({ onLogin }: LoginProps) => {
|
|||||||
const login = async e => {
|
const login = async e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
let api = new AccountApi();
|
new AccountApi().login({body: {"email": email, "password": password}})
|
||||||
api.login({body: {"email": email, "password": password}})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
onLogin({email: email, token: d.toString()});
|
onLogin({email: email, token: d.toString()});
|
||||||
})
|
})
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
import {Configuration, Frontend, ShareApi} from "./api";
|
import {Frontend} from "./api";
|
||||||
import {useEffect, useRef, useState} from "react";
|
import {useEffect, useRef, useState} from "react";
|
||||||
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
|
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
|
||||||
import {modalStyle} from "./styling/theme.ts";
|
import {modalStyle} from "./styling/theme.ts";
|
||||||
import {User} from "./model/user.ts";
|
import {User} from "./model/user.ts";
|
||||||
import {Node} from "@xyflow/react";
|
import {Node} from "@xyflow/react";
|
||||||
|
import {getShareApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface ReleaseAccessProps {
|
interface ReleaseAccessProps {
|
||||||
close: () => void;
|
close: () => void;
|
||||||
@ -34,13 +35,12 @@ const ReleaseAccessModal = ({ close, isOpen, user, access, detail }: ReleaseAcce
|
|||||||
|
|
||||||
const releaseAccess = () => {
|
const releaseAccess = () => {
|
||||||
if(detail && detail.token) {
|
if(detail && detail.token) {
|
||||||
let cfg = new Configuration({
|
getShareApi(user).unaccess({
|
||||||
headers: {
|
body: {
|
||||||
"X-TOKEN": user.token
|
frontendToken: detail.token,
|
||||||
}
|
envZId: access.data.envZId as string,
|
||||||
});
|
shrToken: detail.shrToken}
|
||||||
let shareApi = new ShareApi(cfg);
|
})
|
||||||
shareApi.unaccess({body: {frontendToken: detail.token, envZId: access.data.envZId as string, shrToken: detail.shrToken}})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
close();
|
close();
|
||||||
})
|
})
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
import {Configuration, Environment, EnvironmentApi} from "./api";
|
import {Environment} from "./api";
|
||||||
import {useEffect, useRef, useState} from "react";
|
import {useEffect, useRef, useState} from "react";
|
||||||
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
|
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
|
||||||
import {modalStyle} from "./styling/theme.ts";
|
import {modalStyle} from "./styling/theme.ts";
|
||||||
import {User} from "./model/user.ts";
|
import {User} from "./model/user.ts";
|
||||||
import {Node} from "@xyflow/react";
|
import {Node} from "@xyflow/react";
|
||||||
|
import {getEnvironmentApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface ReleaseEnvironmentProps {
|
interface ReleaseEnvironmentProps {
|
||||||
close: () => void;
|
close: () => void;
|
||||||
@ -35,14 +36,7 @@ const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: R
|
|||||||
|
|
||||||
const releaseEnvironment = () => {
|
const releaseEnvironment = () => {
|
||||||
if(environment.data && environment.data.envZId) {
|
if(environment.data && environment.data.envZId) {
|
||||||
console.log("releasing");
|
getEnvironmentApi(user).disable({body: {identity: environment.data.envZId as string}})
|
||||||
let cfg = new Configuration({
|
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let environmentApi = new EnvironmentApi(cfg);
|
|
||||||
environmentApi.disable({body: {identity: environment.data.envZId as string}})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
close();
|
close();
|
||||||
})
|
})
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
import {Configuration, Share, ShareApi} from "./api";
|
import {Share} from "./api";
|
||||||
import {useEffect, useRef, useState} from "react";
|
import {useEffect, useRef, useState} from "react";
|
||||||
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
|
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
|
||||||
import {modalStyle} from "./styling/theme.ts";
|
import {modalStyle} from "./styling/theme.ts";
|
||||||
import {User} from "./model/user.ts";
|
import {User} from "./model/user.ts";
|
||||||
import {Node} from "@xyflow/react";
|
import {Node} from "@xyflow/react";
|
||||||
|
import {getShareApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface ReleaseShareProps {
|
interface ReleaseShareProps {
|
||||||
close: () => void;
|
close: () => void;
|
||||||
@ -35,13 +36,7 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
|
|||||||
|
|
||||||
const releaseShare = () => {
|
const releaseShare = () => {
|
||||||
if(detail) {
|
if(detail) {
|
||||||
let cfg = new Configuration({
|
getShareApi(user).unshare({body: {envZId: share.data.envZId as string, shrToken: detail.token, reserved: detail.reserved}})
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let shareApi = new ShareApi(cfg);
|
|
||||||
shareApi.unshare({body: {envZId: share.data.envZId as string, shrToken: detail.token, reserved: detail.reserved}})
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
close();
|
close();
|
||||||
})
|
})
|
||||||
|
@ -7,6 +7,7 @@ import PropertyTable from "./PropertyTable.tsx";
|
|||||||
import useApiConsoleStore from "./model/store.ts";
|
import useApiConsoleStore from "./model/store.ts";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
import ReleaseShareModal from "./ReleaseShareModal.tsx";
|
import ReleaseShareModal from "./ReleaseShareModal.tsx";
|
||||||
|
import {getMetadataApi} from "./model/api.ts";
|
||||||
|
|
||||||
interface SharePanelProps {
|
interface SharePanelProps {
|
||||||
share: Node;
|
share: Node;
|
||||||
@ -40,13 +41,7 @@ const SharePanel = ({ share }: SharePanelProps) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cfg = new Configuration({
|
getMetadataApi(user).getShareDetail({ shrToken: share.data!.shrToken! as string })
|
||||||
headers: {
|
|
||||||
"X-TOKEN": user.token
|
|
||||||
}
|
|
||||||
});
|
|
||||||
let metadata = new MetadataApi(cfg);
|
|
||||||
metadata.getShareDetail({ shrToken: share.data!.shrToken! as string })
|
|
||||||
.then(d => {
|
.then(d => {
|
||||||
delete d.activity;
|
delete d.activity;
|
||||||
delete d.limited;
|
delete d.limited;
|
||||||
|
7
ui100/src/model/api.ts
Normal file
7
ui100/src/model/api.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import {Configuration, EnvironmentApi, MetadataApi, ShareApi} from "../api";
|
||||||
|
import {User} from "./user.ts";
|
||||||
|
|
||||||
|
export const getApiConfig = (user: User): Configuration => { return new Configuration({headers: {"X-TOKEN": user.token}}); }
|
||||||
|
export const getEnvironmentApi = (user: User): EnvironmentApi => { return new EnvironmentApi(getApiConfig(user)); }
|
||||||
|
export const getMetadataApi = (user: User): MetadataApi => { return new MetadataApi(getApiConfig(user)); }
|
||||||
|
export const getShareApi = (user: User): ShareApi => { return new ShareApi(getApiConfig(user)); }
|
Loading…
x
Reference in New Issue
Block a user