mt77/synapse-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move Server Status on top of Sidebar and fix icon background

Browse Source
This commit is contained in:
Borislav Pantaleev
2025-02-26 22:51:18 +02:00
parent c080f72062
commit 233c50571b
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AdminLayout.tsx
View File

@@ -66,15 +66,16 @@ const AdminMenu = (props) => {
return ( return (
<Menu {...props}> <Menu {...props}>
<Menu.ResourceItems /> {menu && menu.length > 0 && <Menu.Item to="/server_status" leftIcon={
{menu && <Menu.Item to="/server_status" leftIcon={
<ServerStatusStyledBadge <ServerStatusStyledBadge
inSidebar={true}
command={serverProcess.command} command={serverProcess.command}
locked_at={serverProcess.locked_at} locked_at={serverProcess.locked_at}
isOkay={serverStatus.ok} /> isOkay={serverStatus.ok} />
} }
primaryText="Server Status" /> primaryText="Server Status" />
} }
<Menu.ResourceItems />
{menu && menu.map((item, index) => { {menu && menu.map((item, index) => {
const { url, icon, label } = item; const { url, icon, label } = item;
const IconComponent = Icons[icon] as React.ComponentType<any> | undefined; const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;

10
src/components/etke.cc/ServerStatusBadge.tsx
View File

@@ -135,7 +135,7 @@ const useCurrentServerProcess = () => {
return { command, locked_at }; return { command, locked_at };
}; };
export const ServerStatusStyledBadge = ({ command, locked_at, isOkay }: { command: string, locked_at: string, isOkay: boolean }) => { export const ServerStatusStyledBadge = ({ command, locked_at, isOkay, inSidebar = false }: { command: string, locked_at: string, isOkay: boolean, inSidebar: boolean }) => {
const theme = useTheme(); const theme = useTheme();
let badgeBackgroundColor = isOkay ? theme.palette.success.light : theme.palette.error.main; let badgeBackgroundColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
let badgeColor = isOkay ? theme.palette.success.light : theme.palette.error.main; let badgeColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
@@ -144,6 +144,10 @@ export const ServerStatusStyledBadge = ({ command, locked_at, isOkay }: { comman
badgeBackgroundColor = theme.palette.warning.main; badgeBackgroundColor = theme.palette.warning.main;
badgeColor = theme.palette.warning.main; badgeColor = theme.palette.warning.main;
} }
let avatarBackgroundColor = theme.palette.mode === "dark" ? theme.palette.background.default : "#2196f3";
if (inSidebar) {
avatarBackgroundColor = theme.palette.grey[600];
}
return <StyledBadge return <StyledBadge
overlap="circular" overlap="circular"
@@ -152,7 +156,7 @@ export const ServerStatusStyledBadge = ({ command, locked_at, isOkay }: { comman
backgroundColor={badgeBackgroundColor} backgroundColor={badgeBackgroundColor}
badgeColor={badgeColor} badgeColor={badgeColor}
> >
<Avatar sx={{ height: 24, width: 24, background: theme.palette.mode === "dark" ? theme.palette.background.default : "#2196f3" }}> <Avatar sx={{ height: 24, width: 24, background: avatarBackgroundColor }}>
<MonitorHeartIcon sx={{ height: 22, width: 22, color: theme.palette.common.white }} /> <MonitorHeartIcon sx={{ height: 22, width: 22, color: theme.palette.common.white }} />
</Avatar> </Avatar>
</StyledBadge> </StyledBadge>
@@ -180,7 +184,7 @@ const ServerStatusBadge = () => {
return <Button onClick={handleServerStatusClick} size="medium" sx={{ minWidth: "auto", ".MuiButton-startIcon": { m: 0 }}}> return <Button onClick={handleServerStatusClick} size="medium" sx={{ minWidth: "auto", ".MuiButton-startIcon": { m: 0 }}}>
<Tooltip title={tooltipText} sx={{ cursor: "pointer" }}> <Tooltip title={tooltipText} sx={{ cursor: "pointer" }}>
<Box> <Box>
<ServerStatusStyledBadge command={command || ""} locked_at={locked_at || ""} isOkay={isOkay} /> <ServerStatusStyledBadge inSidebar={false} command={command || ""} locked_at={locked_at || ""} isOkay={isOkay} />
</Box> </Box>
</Tooltip> </Tooltip>
</Button> </Button>

13
src/synapse/authProvider.ts
View File

@@ -2,7 +2,7 @@ import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
import { MatrixError, displayError } from "../utils/error"; import { MatrixError, displayError } from "../utils/error";
import { fetchAuthenticatedMedia } from "../utils/fetchMedia"; import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
import { FetchConfig, ClearConfig } from "../utils/config"; import { FetchConfig, ClearConfig, GetConfig } from "../utils/config";
import decodeURLComponent from "../utils/decodeURLComponent"; import decodeURLComponent from "../utils/decodeURLComponent";
const authProvider: AuthProvider = { const authProvider: AuthProvider = {
@@ -81,9 +81,16 @@ const authProvider: AuthProvider = {
localStorage.setItem("access_token", accessToken ? accessToken : json.access_token); localStorage.setItem("access_token", accessToken ? accessToken : json.access_token);
localStorage.setItem("device_id", json.device_id); localStorage.setItem("device_id", json.device_id);
localStorage.setItem("login_type", accessToken ? "accessToken" : "credentials"); localStorage.setItem("login_type", accessToken ? "accessToken" : "credentials");
await FetchConfig();
return Promise.resolve({redirectTo: "/"}); await FetchConfig();
const config = GetConfig();
let pageToRedirectTo = "/";
if (config && config.etkeccAdmin) {
pageToRedirectTo = "/server_status";
}
return Promise.resolve({redirectTo: pageToRedirectTo});
} catch(err) { } catch(err) {
const error = err as HttpError; const error = err as HttpError;
const errorStatus = error.status; const errorStatus = error.status;