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