diff --git a/src/frontend/src/components/forms/AuthFormOptions.tsx b/src/frontend/src/components/forms/AuthFormOptions.tsx index 373d090bd5..bdf91ccaaf 100644 --- a/src/frontend/src/components/forms/AuthFormOptions.tsx +++ b/src/frontend/src/components/forms/AuthFormOptions.tsx @@ -1,6 +1,7 @@ -import { Center, Group, Tooltip } from '@mantine/core'; +import { Center, Group, Text, Tooltip } from '@mantine/core'; import { IconServer } from '@tabler/icons-react'; +import { useServerApiState } from '../../states/ApiState'; import { ColorToggle } from '../items/ColorToggle'; import { LanguageToggle } from '../items/LanguageToggle'; @@ -11,6 +12,8 @@ export function AuthFormOptions({ hostname: string; toggleHostEdit: () => void; }) { + const [server] = useServerApiState((state) => [state.server]); + return (
@@ -19,6 +22,9 @@ export function AuthFormOptions({ + + {server.version} | {server.apiVersion} +
); diff --git a/src/frontend/src/components/forms/InstanceOptions.tsx b/src/frontend/src/components/forms/InstanceOptions.tsx index d359798b75..5fad7cd007 100644 --- a/src/frontend/src/components/forms/InstanceOptions.tsx +++ b/src/frontend/src/components/forms/InstanceOptions.tsx @@ -3,6 +3,7 @@ import { Divider, Group, Select, Text, Title } from '@mantine/core'; import { useToggle } from '@mantine/hooks'; import { IconCheck } from '@tabler/icons-react'; +import { useServerApiState } from '../../states/ApiState'; import { useLocalState } from '../../states/LocalState'; import { HostList } from '../../states/states'; import { EditButton } from '../items/EditButton'; @@ -23,7 +24,6 @@ export function InstanceOptions({ state.setHostList, state.hostList ]); - const hostListData = Object.keys(hostList).map((key) => ({ value: key, label: hostList[key].name @@ -63,7 +63,8 @@ export function InstanceOptions({ saveIcon={} /> - {HostListEdit && ( + + {HostListEdit ? ( <> @@ -71,7 +72,46 @@ export function InstanceOptions({ + ) : ( + <> + + + )} ); } + +function ServerInfo({ + hostList, + hostKey +}: { + hostList: HostList; + hostKey: string; +}) { + const [server] = useServerApiState((state) => [state.server]); + + return ( + + {hostList[hostKey].host} +
+ Version: {server.version} +
+ API:{server.apiVersion} +
+ Name: {server.instance} +
+ + State:{' '} + + worker + {' '} + ({server.worker_pending_tasks}),{' '} + + plugins + + {server.plugins_enabled ? ` (${server.active_plugins.length})` : null} + +
+ ); +} diff --git a/src/frontend/src/components/nav/NavHoverMenu.tsx b/src/frontend/src/components/nav/NavHoverMenu.tsx index 2bd31475e0..29d8ac0234 100644 --- a/src/frontend/src/components/nav/NavHoverMenu.tsx +++ b/src/frontend/src/components/nav/NavHoverMenu.tsx @@ -14,7 +14,7 @@ import { useEffect, useState } from 'react'; import { menuItems } from '../../defaults/menuItems'; import { InvenTreeStyle } from '../../globalStyle'; -import { useApiState } from '../../states/ApiState'; +import { useServerApiState } from '../../states/ApiState'; import { useLocalState } from '../../states/LocalState'; import { InvenTreeLogo } from '../items/InvenTreeLogo'; import { MenuLinks } from '../items/MenuLinks'; @@ -29,7 +29,7 @@ export function NavHoverMenu({ state.hostKey, state.hostList ]); - const [servername] = useApiState((state) => [state.server.instance]); + const [servername] = useServerApiState((state) => [state.server.instance]); const [instanceName, setInstanceName] = useState(); useEffect(() => { diff --git a/src/frontend/src/functions/auth.tsx b/src/frontend/src/functions/auth.tsx index b4b48ab086..e3e98823e0 100644 --- a/src/frontend/src/functions/auth.tsx +++ b/src/frontend/src/functions/auth.tsx @@ -4,7 +4,12 @@ import { IconCheck } from '@tabler/icons-react'; import axios from 'axios'; import { api } from '../App'; -import { ApiPaths, url, useApiState } from '../states/ApiState'; +import { + ApiPaths, + url, + useApiState, + useServerApiState +} from '../states/ApiState'; import { useLocalState } from '../states/LocalState'; import { useSessionState } from '../states/SessionState'; @@ -58,9 +63,11 @@ export const doSimpleLogin = async (email: string) => { export const doTokenLogin = (token: string) => { const { setToken } = useSessionState.getState(); const { fetchApiState } = useApiState.getState(); + const { fetchServerApiState } = useServerApiState.getState(); setToken(token); fetchApiState(); + fetchServerApiState(); }; export function handleReset(navigate: any, values: { email: string }) { diff --git a/src/frontend/src/pages/Auth/Login.tsx b/src/frontend/src/pages/Auth/Login.tsx index 42fdb79a92..2cd11b7005 100644 --- a/src/frontend/src/pages/Auth/Login.tsx +++ b/src/frontend/src/pages/Auth/Login.tsx @@ -7,6 +7,7 @@ import { AuthFormOptions } from '../../components/forms/AuthFormOptions'; import { AuthenticationForm } from '../../components/forms/AuthenticationForm'; import { InstanceOptions } from '../../components/forms/InstanceOptions'; import { defaultHostKey } from '../../defaults/defaultHostList'; +import { useServerApiState } from '../../states/ApiState'; import { useLocalState } from '../../states/LocalState'; export default function Login() { @@ -15,6 +16,10 @@ export default function Login() { state.setHost, state.hostList ]); + const [server, fetchServerApiState] = useServerApiState((state) => [ + state.server, + state.fetchServerApiState + ]); const hostname = hostList[hostKey] === undefined ? t`No selection` : hostList[hostKey].name; const [hostEdit, setHostEdit] = useToggle([false, true] as const); @@ -22,6 +27,7 @@ export default function Login() { // Data manipulation functions function ChangeHost(newHost: string): void { setHost(hostList[newHost].host, newHost); + fetchServerApiState(); } // Set default host to localhost if no host is selected @@ -30,6 +36,12 @@ export default function Login() { ChangeHost(defaultHostKey); } }, []); + // Fetch server data on mount if no server data is present + useEffect(() => { + if (server.server === null) { + fetchServerApiState(); + } + }, [server]); // Main rendering block return ( diff --git a/src/frontend/src/states/ApiState.tsx b/src/frontend/src/states/ApiState.tsx index 4a51e0841b..e0fe131a4a 100644 --- a/src/frontend/src/states/ApiState.tsx +++ b/src/frontend/src/states/ApiState.tsx @@ -7,16 +7,12 @@ import { ServerAPIProps, UserProps } from './states'; interface ApiStateProps { user: UserProps | undefined; setUser: (newUser: UserProps) => void; - server: ServerAPIProps; - setServer: (newServer: ServerAPIProps) => void; fetchApiState: () => void; } export const useApiState = create((set, get) => ({ user: undefined, setUser: (newUser: UserProps) => set({ user: newUser }), - server: emptyServerAPI, - setServer: (newServer: ServerAPIProps) => set({ server: newServer }), fetchApiState: async () => { // Fetch user data await api.get(url(ApiPaths.user_me)).then((response) => { @@ -27,6 +23,19 @@ export const useApiState = create((set, get) => ({ }; set({ user: user }); }); + } +})); + +interface ServerApiStateProps { + server: ServerAPIProps; + setServer: (newServer: ServerAPIProps) => void; + fetchServerApiState: () => void; +} + +export const useServerApiState = create((set, get) => ({ + server: emptyServerAPI, + setServer: (newServer: ServerAPIProps) => set({ server: newServer }), + fetchServerApiState: async () => { // Fetch server data await api.get('/').then((response) => { set({ server: response.data });