api call semantics cleanup (#724)

ui100/src/AccessPanel.tsx

@@ -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({
+        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 => {
                 delete d.id;
                 delete d.zId;

ui100/src/AccountPanel.tsx

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

ui100/src/ApiConsole.tsx

@@ -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({
+        getMetadataApi(user).overview()
-            headers: {
-                "X-TOKEN": user.token
-            }
-        });
-        let api = new MetadataApi(cfg);
-        api.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({
+        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 => {
                 if(d.sparklines) {
                     let sparkdataIn = new Map<string, Number[]>();

ui100/src/EnvironmentPanel.tsx

@@ -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({
+        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 => {
                 let env = d.environment!;
                 delete env.activity;

ui100/src/Login.tsx

@@ -16,8 +16,7 @@ const Login = ({ onLogin }: LoginProps) => {
     const [tou, setTou] = useState(null as string);
 
     useEffect(() => {
-        let api = new MetadataApi();
+        new MetadataApi()._configuration()
-        api._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();
+        new AccountApi().login({body: {"email": email, "password": password}})
-        api.login({body: {"email": email, "password": password}})
             .then(d => {
                 onLogin({email: email, token: d.toString()});
             })

ui100/src/ReleaseAccessModal.tsx

@@ -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({
+            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 => {
                     close();
                 })

ui100/src/ReleaseEnvironmentModal.tsx

@@ -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");
+            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 => {
                     close();
                 })

ui100/src/ReleaseShareModal.tsx

@@ -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({
+            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 => {
                     close();
                 })

ui100/src/SharePanel.tsx

@@ -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({
+        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 => {
                 delete d.activity;
                 delete d.limited;

ui100/src/model/api.ts

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