api call semantics cleanup (#724)

This commit is contained in:
Michael Quigley 2025-01-24 11:37:09 -05:00
parent e986c90185
commit 449d45c3a5
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
10 changed files with 35 additions and 69 deletions

View File

@ -3,10 +3,11 @@ import {Button, Grid2, Tooltip, Typography} from "@mui/material";
import AccessIcon from "@mui/icons-material/Lan";
import useApiConsoleStore from "./model/store.ts";
import {useEffect, useState} from "react";
import {Configuration, Frontend, MetadataApi, ShareApi} from "./api";
import {Frontend} from "./api";
import DeleteIcon from "@mui/icons-material/Delete";
import PropertyTable from "./PropertyTable.tsx";
import ReleaseAccessModal from "./ReleaseAccessModal.tsx";
import {getMetadataApi} from "./model/api.ts";
interface AccessPanelProps {
access: Node;
@ -26,13 +27,7 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
}
useEffect(() => {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let metadataApi = new MetadataApi(cfg);
metadataApi.getFrontendDetail({feId: access.data.feId as number})
getMetadataApi(user).getFrontendDetail({feId: access.data.feId as number})
.then(d => {
delete d.id;
delete d.zId;

View File

@ -28,7 +28,7 @@ const AccountPanel = ({ account }: AccountPanelProps) => {
<Grid2 display="flex"><AccountIcon sx={{ fontSize: 30, mr: 0.5 }}/></Grid2>
<Grid2 display="flex" component="h3">{String(account.data.label)}</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>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">

View File

@ -1,5 +1,4 @@
import {JSX, useCallback, useEffect, useRef, useState} from "react";
import {Configuration, MetadataApi} from "./api";
import {Graph, layout, mergeGraph, nodesEqual} from "./model/graph.ts";
import {Grid2} from "@mui/material";
import NavBar from "./NavBar.tsx";
@ -11,6 +10,7 @@ import AccessPanel from "./AccessPanel.tsx";
import useApiConsoleStore from "./model/store.ts";
import TabularView from "./TabularView.tsx";
import {Node} from "@xyflow/react";
import {getMetadataApi} from "./model/api.ts";
interface ApiConsoleProps {
logout: () => void;
@ -65,13 +65,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
}, [handleKeyPress]);
const retrieveOverview = () => {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let api = new MetadataApi(cfg);
api.overview()
getMetadataApi(user).overview()
.then(d => {
let newVov = mergeGraph(oldGraph.current, user, d.accountLimited!, d);
if(!nodesEqual(oldGraph.current.nodes, newVov.nodes)) {
@ -121,14 +115,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
});
}
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let api = new MetadataApi(cfg);
api.getSparklines({body: {environments: environments, shares: shares}})
getMetadataApi(user).getSparklines({body: {environments: environments, shares: shares}})
.then(d => {
if(d.sparklines) {
let sparkdataIn = new Map<string, Number[]>();

View File

@ -2,12 +2,13 @@ import {Node} from "@xyflow/react";
import {Button, Grid2, Tooltip, Typography} from "@mui/material";
import EnvironmentIcon from "@mui/icons-material/Computer";
import {useEffect, useState} from "react";
import {Configuration, Environment, EnvironmentApi, MetadataApi} from "./api";
import {Environment} from "./api";
import PropertyTable from "./PropertyTable.tsx";
import SecretToggle from "./SecretToggle.tsx";
import useApiConsoleStore from "./model/store.ts";
import DeleteIcon from "@mui/icons-material/Delete";
import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
import {getMetadataApi} from "./model/api.ts";
interface EnvironmentPanelProps {
environment: Node;
@ -38,13 +39,7 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
}
useEffect(() => {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let metadata = new MetadataApi(cfg);
metadata.getEnvironmentDetail({envZId: environment.data!.envZId! as string})
getMetadataApi(user).getEnvironmentDetail({envZId: environment.data!.envZId! as string})
.then(d => {
let env = d.environment!;
delete env.activity;

View File

@ -16,8 +16,7 @@ const Login = ({ onLogin }: LoginProps) => {
const [tou, setTou] = useState(null as string);
useEffect(() => {
let api = new MetadataApi();
api._configuration()
new MetadataApi()._configuration()
.then(d => {
if(d.touLink && d.touLink.trim() !== "") {
setTou(d.touLink);
@ -31,8 +30,7 @@ const Login = ({ onLogin }: LoginProps) => {
const login = async e => {
e.preventDefault();
let api = new AccountApi();
api.login({body: {"email": email, "password": password}})
new AccountApi().login({body: {"email": email, "password": password}})
.then(d => {
onLogin({email: email, token: d.toString()});
})

View File

@ -1,9 +1,10 @@
import {Configuration, Frontend, ShareApi} from "./api";
import {Frontend} from "./api";
import {useEffect, useRef, useState} from "react";
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
import {modalStyle} from "./styling/theme.ts";
import {User} from "./model/user.ts";
import {Node} from "@xyflow/react";
import {getShareApi} from "./model/api.ts";
interface ReleaseAccessProps {
close: () => void;
@ -34,13 +35,12 @@ const ReleaseAccessModal = ({ close, isOpen, user, access, detail }: ReleaseAcce
const releaseAccess = () => {
if(detail && detail.token) {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let shareApi = new ShareApi(cfg);
shareApi.unaccess({body: {frontendToken: detail.token, envZId: access.data.envZId as string, shrToken: detail.shrToken}})
getShareApi(user).unaccess({
body: {
frontendToken: detail.token,
envZId: access.data.envZId as string,
shrToken: detail.shrToken}
})
.then(d => {
close();
})

View File

@ -1,9 +1,10 @@
import {Configuration, Environment, EnvironmentApi} from "./api";
import {Environment} from "./api";
import {useEffect, useRef, useState} from "react";
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
import {modalStyle} from "./styling/theme.ts";
import {User} from "./model/user.ts";
import {Node} from "@xyflow/react";
import {getEnvironmentApi} from "./model/api.ts";
interface ReleaseEnvironmentProps {
close: () => void;
@ -35,14 +36,7 @@ const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: R
const releaseEnvironment = () => {
if(environment.data && environment.data.envZId) {
console.log("releasing");
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let environmentApi = new EnvironmentApi(cfg);
environmentApi.disable({body: {identity: environment.data.envZId as string}})
getEnvironmentApi(user).disable({body: {identity: environment.data.envZId as string}})
.then(d => {
close();
})

View File

@ -1,9 +1,10 @@
import {Configuration, Share, ShareApi} from "./api";
import {Share} from "./api";
import {useEffect, useRef, useState} from "react";
import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
import {modalStyle} from "./styling/theme.ts";
import {User} from "./model/user.ts";
import {Node} from "@xyflow/react";
import {getShareApi} from "./model/api.ts";
interface ReleaseShareProps {
close: () => void;
@ -35,13 +36,7 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
const releaseShare = () => {
if(detail) {
let cfg = new Configuration({
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}})
getShareApi(user).unshare({body: {envZId: share.data.envZId as string, shrToken: detail.token, reserved: detail.reserved}})
.then(d => {
close();
})

View File

@ -7,6 +7,7 @@ import PropertyTable from "./PropertyTable.tsx";
import useApiConsoleStore from "./model/store.ts";
import DeleteIcon from "@mui/icons-material/Delete";
import ReleaseShareModal from "./ReleaseShareModal.tsx";
import {getMetadataApi} from "./model/api.ts";
interface SharePanelProps {
share: Node;
@ -40,13 +41,7 @@ const SharePanel = ({ share }: SharePanelProps) => {
}
useEffect(() => {
let cfg = new Configuration({
headers: {
"X-TOKEN": user.token
}
});
let metadata = new MetadataApi(cfg);
metadata.getShareDetail({ shrToken: share.data!.shrToken! as string })
getMetadataApi(user).getShareDetail({ shrToken: share.data!.shrToken! as string })
.then(d => {
delete d.activity;
delete d.limited;

7
ui100/src/model/api.ts Normal file
View 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)); }