Merge pull request #365 from etkecc/add-etke-server-commands

Add etke server commands panel inside server status page

.dockerignore

@@ -0,0 +1 @@
+/testdata

Dockerfile.build

@@ -0,0 +1,11 @@
+FROM node:lts AS builder
+ARG BASE_PATH=./
+WORKDIR /src
+COPY . /src
+RUN yarn config set enableTelemetry 0 && \
+    yarn install --immutable --network-timeout=300000 && \
+    yarn build --base=$BASE_PATH
+
+FROM ghcr.io/static-web-server/static-web-server:2
+ENV SERVER_ROOT=/app
+COPY --from=builder /src/dist /app

README.md

@@ -118,6 +118,7 @@ The following list contains such features - they are only available for [etke.cc
 
 * 📊 [Server Status indicator and page](https://github.com/etkecc/synapse-admin/pull/182)
 * 📬 [Server Notifications indicator and page](https://github.com/etkecc/synapse-admin/pull/240)
+* 🛠️ [Server Commands panel](https://github.com/etkecc/synapse-admin/pull/365)
 
 ### Development
 
@@ -261,6 +262,7 @@ You have three options:
       hostname: synapse-admin
       build:
         context: https://github.com/etkecc/synapse-admin.git
+        dockerfile: Dockerfile.build
         args:
           - BUILDKIT_CONTEXT_KEEP_GIT_DIR=1
         #   - NODE_OPTIONS="--max_old_space_size=1024"
@@ -289,7 +291,7 @@ Example for Traefik:
 ```yml
 services:
   traefik:
-    image: traefik:mimolette
+    image: traefik:v3
     restart: unless-stopped
     ports:
       - 80:80
@@ -302,11 +304,12 @@ services:
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.synapse-admin.rule=Host(`example.com`)&&PathPrefix(`/admin`)"
-      - "traefik.http.routers.synapse-admin.middlewares=admin,admin_path"
-      - "traefik.http.middlewares.admin.redirectregex.regex=^(.*)/admin/?"
-      - "traefik.http.middlewares.admin.redirectregex.replacement=$${1}/admin/"
-      - "traefik.http.middlewares.admin_path.stripprefix.prefixes=/admin"
+      - "traefik.http.routers.admin.rule=Host(`example.com`) && PathPrefix(`/admin`)"
+      - "traefik.http.services.admin.loadbalancer.server.port=80"
+      - "traefik.http.middlewares.admin-slashless-redirect.redirectregex.regex=(/admin)$$"
+      - "traefik.http.middlewares.admin-slashless-redirect.redirectregex.replacement=$${1}/"
+      - "traefik.http.middlewares.admin-strip-prefix.stripprefix.prefixes=/admin"
+      - "traefik.http.routers.admin.middlewares=admin-slashless-redirect,admin-strip-prefix"
 ```
 
 ## Development

docker-compose.yml

@@ -5,6 +5,7 @@ services:
     image: ghcr.io/etkecc/synapse-admin:latest
     # build:
     #   context: .
+    #   dockerfile: Dockerfile.build
 
     # to use the docker-compose as standalone without a local repo clone,
     # replace the context definition with this:

jest.config.ts

@@ -2,7 +2,7 @@ import type { JestConfigWithTsJest } from "ts-jest";
 
 const config: JestConfigWithTsJest = {
   preset: "ts-jest",
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-fixed-jsdom",
   collectCoverage: true,
   coveragePathIgnorePatterns: ["node_modules", "dist"],
   coverageDirectory: "<rootDir>/coverage/",

package.json

@@ -11,36 +11,36 @@
     "url": "https://github.com/etkecc/synapse-admin"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.19.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.14",
-    "@types/node": "^22.10.5",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.13.8",
     "@types/papaparse": "^5.3.15",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "^8.18.2",
-    "@typescript-eslint/parser": "^8.19.0",
+    "@typescript-eslint/parser": "^8.24.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-yaml": "^1.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "prettier": "^3.4.2",
-    "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.2.5",
+    "prettier": "^3.5.3",
+    "react-test-renderer": "^19.0.0",
+    "ts-jest": "^29.2.6",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.19.0",
-    "vite": "^6.0.7",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.26.0",
+    "vite": "^6.2.0",
     "vite-plugin-version-mark": "^0.1.4"
   },
   "dependencies": {
@@ -48,28 +48,29 @@
     "@emotion/styled": "^11.14.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.3.1",
-    "@mui/material": "^6.3.1",
-    "@mui/utils": "^5.16.13",
-    "@tanstack/react-query": "^5.62.15",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/material": "^6.4.6",
+    "@mui/utils": "^6.4.2",
+    "@tanstack/react-query": "^5.67.1",
     "history": "^5.3.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "lodash": "^4.17.21",
-    "papaparse": "^5.4.1",
-    "ra-core": "^5.4.1",
-    "ra-i18n-polyglot": "^5.3.4",
-    "ra-language-english": "^5.3.4",
+    "papaparse": "^5.5.1",
+    "ra-core": "^5.4.4",
+    "ra-i18n-polyglot": "^5.4.4",
+    "ra-language-english": "^5.4.4",
     "ra-language-farsi": "^5.1.0",
-    "ra-language-french": "^5.4.3",
+    "ra-language-french": "^5.6.2",
     "ra-language-italian": "^3.13.1",
-    "ra-language-russian": "^4.14.2",
-    "react": "^18.3.1",
-    "react-admin": "^5.4.3",
-    "react-dom": "^18.3.1",
+    "ra-language-russian": "^5.4.3",
+    "react": "^19.0.0",
+    "react-admin": "^5.6.2",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
-    "react-is": "^18.3.1",
-    "react-router": "^6.28.1",
-    "react-router-dom": "^6.28.1",
-    "ts-jest-mock-import-meta": "^1.2.1"
+    "react-is": "^19.0.0",
+    "ts-jest-mock-import-meta": "^1.2.1",
+    "react-router": "^7.2.0",
+    "react-router-dom": "^7.2.0"
   },
   "scripts": {
     "start": "vite serve",

src/App.test.tsx

@@ -1,12 +1,32 @@
 import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
 import fetchMock from "jest-fetch-mock";
 fetchMock.enableMocks();
 
+jest.mock("./synapse/authProvider", () => ({
+  __esModule: true,
+  default: {
+    logout: jest.fn().mockResolvedValue(undefined),
+  },
+}));
+
 import App from "./App";
 
 describe("App", () => {
+  beforeEach(() => {
+    // Reset all mocks before each test
+    fetchMock.resetMocks();
+    // Mock any fetch call to return empty JSON immediately
+    fetchMock.mockResponseOnce(JSON.stringify({}));
+  });
+
   it("renders", async () => {
-    render(<App />);
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
     await screen.findAllByText("Welcome to Synapse Admin");
   });
 });

src/components/AdminLayout.tsx

@@ -1,4 +1,4 @@
-import { CheckForApplicationUpdate, AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
+import { CheckForApplicationUpdate, AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu, useStore } from "react-admin";
 import { LoginMethod } from "../pages/LoginPage";
 import { useEffect, useState, Suspense } from "react";
 import { Icons, DefaultIcon } from "../utils/icons";
@@ -6,6 +6,8 @@ import { MenuItem, GetConfig, ClearConfig } from "../utils/config";
 import Footer from "./Footer";
 import ServerStatusBadge from "./etke.cc/ServerStatusBadge";
 import { ServerNotificationsBadge } from "./etke.cc/ServerNotificationsBadge";
+import { ServerProcessResponse, ServerStatusResponse } from "../synapse/dataProvider";
+import { ServerStatusStyledBadge } from "./etke.cc/ServerStatusBadge";
 
 const AdminUserMenu = () => {
   const [open, setOpen] = useState(false);
@@ -59,9 +61,20 @@ const AdminAppBar = () => {
 const AdminMenu = (props) => {
   const [menu, setMenu] = useState([] as MenuItem[]);
   useEffect(() => setMenu(GetConfig().menu), []);
+  const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const [serverStatus, setServerStatus] = useStore<ServerStatusResponse>("serverStatus", { success: false, ok: false, host: "", results: [] });
 
   return (
     <Menu {...props}>
+      {menu && menu.length > 0 && <Menu.Item to="/server_status" leftIcon={
+        <ServerStatusStyledBadge
+          inSidebar={true}
+          command={serverProcess.command}
+          locked_at={serverProcess.locked_at}
+          isOkay={serverStatus.ok} />
+        }
+        primaryText="Server Status" />
+      }
       <Menu.ResourceItems />
       {menu && menu.map((item, index) => {
         const { url, icon, label } = item;

src/components/UserImport.tsx

@@ -558,7 +558,7 @@ const FilePicker = () => {
       </CardActions>
     );
 
-  const allCards: JSX.Element[] = [];
+  const allCards: React.JSX.Element[] = [];
   if (uploadCard) allCards.push(uploadCard);
   if (errorCards) allCards.push(errorCards);
   if (conflictCards) allCards.push(conflictCards);

src/components/etke.cc/README.md

@@ -18,6 +18,10 @@ In the application bar the new monitoring icon is displayed that shows the curre
 * 🟡 (yellow) - the server is up and running, but there is a command in progress (likely [maintenance](https://etke.cc/help/extras/scheduler/#maintenance)), so some temporary issues may occur - that's totally fine
 * 🔴 (red) - there is at least 1 issue with one of the server's components
 
+![Server Status icon in sidebar](../../../screenshots/etke.cc/server-status/indicator-sidebar.webp)
+
+The same icon (and link to the [Server Status page](#server-status-page)) is displayed in the sidebar.
+
 ### Server Status page
 
 ![Server Status Page](../../../screenshots/etke.cc/server-status/page.webp)
@@ -29,6 +33,8 @@ Server Status page. This page contains the following information:
 * Details about the currently running command (if any)
 * Details about the server's components statuses (up/down with error details and suggested actions) by categories
 
+This is [a Monitoring report](https://etke.cc/services/monitoring/)
+
 ### Server Notifications icon
 
 ![Server Notifications icon](../../../screenshots/etke.cc/server-notifications/badge.webp)
@@ -40,3 +46,11 @@ In the application bar the new notifications icon is displayed that shows the nu
 ![Server Notifications Page](../../../screenshots/etke.cc/server-notifications/page.webp)
 
 When you click on a notification from the [Server Notifications icon](#server-notifications-icon)'s list in the application bar, you will be redirected to the Server Notifications page. This page contains the full text of all the notifications you have about your server.
+
+### Server Commands Panel
+
+![Server Commands Panel](../../../screenshots/etke.cc/server-commands/panel.webp)
+
+When you open [Server Status page](#server-status-page), you will see the Server Commands panel. This panel contains all
+[the commands](https://etke.cc/help/extras/scheduler/#commands) you can run on your server in 1 click. Once command is finished, you will get a notification about the
+result.

src/components/etke.cc/ServerCommandsPanel.tsx

@@ -0,0 +1,182 @@
+import { useEffect, useState } from "react";
+import { Button, Loading, useDataProvider, useCreatePath, useStore } from "react-admin";
+import { useAppContext } from "../../Context";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Alert, TextField, Box } from "@mui/material";
+import { PlayArrow, CheckCircle } from "@mui/icons-material";
+import { Icons } from "../../utils/icons";
+import { ServerCommand, ServerProcessResponse } from "../../synapse/dataProvider";
+import { Link } from 'react-router-dom';
+
+
+const renderIcon = (icon: string) => {
+  const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
+  return IconComponent ? <IconComponent sx={{ verticalAlign: "middle", mr: 1 }} /> : null;
+}
+
+const ServerCommandsPanel = () => {
+  const { etkeccAdmin } = useAppContext();
+  const createPath = useCreatePath();
+
+  const [ isLoading, setLoading ] = useState(true);
+    const [serverCommands, setServerCommands] = useState<{ [key: string]: ServerCommand }>({});
+    const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+    const [commandIsRunning, setCommandIsRunning] = useState<boolean>(serverProcess.command !== "");
+    const [commandResult, setCommandResult] = useState<any[]>([]);
+
+    const dataProvider = useDataProvider();
+
+    useEffect(() => {
+      const fetchIsAdmin = async () => {
+        const serverCommandsResponse = await dataProvider.getServerCommands(etkeccAdmin);
+        if (serverCommandsResponse) {
+          const serverCommands = serverCommandsResponse;
+          Object.keys(serverCommandsResponse).forEach((command: string) => {
+            serverCommands[command].additionalArgs = "";
+          });
+          setServerCommands(serverCommands);
+        }
+        setLoading(false);
+      }
+      fetchIsAdmin();
+    }, []);
+
+    useEffect(() => {
+      if (serverProcess.command === "") {
+        setCommandIsRunning(false);
+      }
+    }, [serverProcess]);
+
+    const setCommandAdditionalArgs = (command: string, additionalArgs: string) => {
+      const updatedServerCommands = {...serverCommands};
+      updatedServerCommands[command].additionalArgs = additionalArgs;
+      setServerCommands(updatedServerCommands);
+    }
+
+    const runCommand = async (command: string) => {
+      setCommandResult([]);
+      setCommandIsRunning(true);
+
+      try {
+        const additionalArgs = serverCommands[command].additionalArgs || "";
+        const requestParams = additionalArgs ? { args: additionalArgs } : {};
+
+        const response = await dataProvider.runServerCommand(etkeccAdmin, command, requestParams);
+
+        if (!response.success) {
+          setCommandIsRunning(false);
+          return;
+        }
+
+        // Update UI with success message
+        const commandResults = buildCommandResultMessages(command, additionalArgs);
+        setCommandResult(commandResults);
+
+        // Reset the additional args field
+        resetCommandArgs(command);
+
+        // Update server process status
+        await updateServerProcessStatus(serverCommands[command]);
+      } catch (error) {
+        setCommandIsRunning(false);
+      }
+    };
+
+    const buildCommandResultMessages = (command: string, additionalArgs: string): React.ReactNode[] => {
+      const results: React.ReactNode[] = [];
+
+      let commandScheduledText = `Command scheduled: ${command}`;
+      if (additionalArgs) {
+        commandScheduledText += `, with additional args: ${additionalArgs}`;
+      }
+
+      results.push(<Box>{commandScheduledText}</Box>);
+      results.push(
+        <Box>
+          Expect your result in the <Link to={createPath({ resource: "server_notifications", type: "list" })}>Notifications</Link> page soon.
+        </Box>
+      );
+
+      return results;
+    };
+
+    const resetCommandArgs = (command: string) => {
+      const updatedServerCommands = {...serverCommands};
+      updatedServerCommands[command].additionalArgs = "";
+      setServerCommands(updatedServerCommands);
+    };
+
+    const updateServerProcessStatus = async (command: ServerCommand) => {
+      const commandIsLocking = command.with_lock;
+      const serverProcess = await dataProvider.getServerRunningProcess(etkeccAdmin, true);
+      if (!commandIsLocking && serverProcess.command === "") {
+        // if command is not locking, we simulate the "lock" mechanism so notifications will be refetched
+        serverProcess["command"] = command.name;
+        serverProcess["locked_at"] = new Date().toISOString();
+      }
+
+      setServerProcess({...serverProcess});
+    };
+
+    if (isLoading) {
+        return <Loading />
+    }
+
+    return (<>
+        <h2>Server Commands</h2>
+        <TableContainer component={Paper}>
+          <Table sx={{ minWidth: 450 }} size="small" aria-label="simple table">
+            <TableHead>
+            <TableRow>
+              <TableCell>Command</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {Object.entries(serverCommands).map(([command, { icon, args, description, additionalArgs }]) => (
+              <TableRow
+                key={command}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Box>
+                    {renderIcon(icon)}
+                    {command}
+                  </Box>
+                </TableCell>
+                <TableCell>{description}</TableCell>
+                <TableCell>
+                  {args && <TextField
+                    size="small"
+                    variant="standard"
+                    onChange={(e) => {
+                      setCommandAdditionalArgs(command, e.target.value);
+                    }}
+                    value={additionalArgs}
+                  />}
+                  <Button
+                    size="small"
+                    variant="contained"
+                    color="primary"
+                    label="Run"
+                    startIcon={<PlayArrow />}
+                    onClick={() => { runCommand(command); }}
+                    disabled={commandIsRunning || (args && typeof additionalArgs === 'string' && additionalArgs.length === 0)}
+                  ></Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {commandResult.length > 0 && <Alert icon={<CheckCircle fontSize="inherit" />} severity="success">
+        {commandResult.map((result, index) => (
+          <div key={index}>{result}</div>
+        ))}
+      </Alert>}
+    </>
+  )
+};
+
+export default ServerCommandsPanel;

src/components/etke.cc/ServerNotificationsBadge.tsx

@@ -5,21 +5,28 @@ import { useDataProvider, useStore } from "react-admin";
 import { useNavigate } from "react-router";
 import { Fragment, useEffect, useState } from "react";
 import { useAppContext } from "../../Context";
-import { ServerNotificationsResponse } from "../../synapse/dataProvider";
+import { ServerNotificationsResponse, ServerProcessResponse } from "../../synapse/dataProvider";
+import { getTimeSince } from "../../utils/date";
 
+// 5 minutes
 const SERVER_NOTIFICATIONS_INTERVAL_TIME = 300000;
 
 const useServerNotifications = () => {
   const [serverNotifications, setServerNotifications] = useStore<ServerNotificationsResponse>("serverNotifications", { notifications: [], success: false });
+  const [ serverProcess, setServerProcess ] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const { command, locked_at } = serverProcess;
+
   const { etkeccAdmin } = useAppContext();
   const dataProvider = useDataProvider();
   const { notifications, success } = serverNotifications;
 
   const fetchNotifications = async () => {
-    const notificationsResponse: ServerNotificationsResponse = await dataProvider.getServerNotifications(etkeccAdmin);
+    const notificationsResponse: ServerNotificationsResponse = await dataProvider.getServerNotifications(etkeccAdmin, command !== "");
+    const serverNotifications = [...notificationsResponse.notifications];
+    serverNotifications.reverse();
     setServerNotifications({
       ...notificationsResponse,
-      notifications: notificationsResponse.notifications,
+      notifications: serverNotifications,
       success: notificationsResponse.success
     });
   };
@@ -27,26 +34,34 @@ const useServerNotifications = () => {
   const deleteServerNotifications = async () => {
     const deleteResponse = await dataProvider.deleteServerNotifications(etkeccAdmin);
     if (deleteResponse.success) {
-      await fetchNotifications();
+      setServerNotifications({
+        notifications: [],
+        success: true,
+      });
     }
   };
 
   useEffect(() => {
-    let serverNotificationsInterval: NodeJS.Timeout;
+    let serverNotificationsInterval: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
+
     if (etkeccAdmin) {
       fetchNotifications();
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         // start the interval after the SERVER_NOTIFICATIONS_INTERVAL_TIME to avoid too many requests
         serverNotificationsInterval = setInterval(fetchNotifications, SERVER_NOTIFICATIONS_INTERVAL_TIME);
       }, SERVER_NOTIFICATIONS_INTERVAL_TIME);
     }
 
     return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
       if (serverNotificationsInterval) {
         clearInterval(serverNotificationsInterval);
       }
     }
-  }, [etkeccAdmin]);
+  }, [etkeccAdmin, command, locked_at]);
 
   return { success, notifications, deleteServerNotifications };
 };
@@ -105,6 +120,7 @@ export const ServerNotificationsBadge = () => {
             sx={{
               p: 1,
               maxHeight: "350px",
+              paddingTop: 0,
               overflowY: "auto",
               minWidth: "300px",
               maxWidth: {
@@ -123,7 +139,6 @@ export const ServerNotificationsBadge = () => {
                     justifyContent: "space-between",
                     alignItems: "center",
                     fontWeight: "bold",
-                    backgroundColor: "inherit",
                   }}
                 >
                     <Typography variant="h6">Notifications</Typography>
@@ -131,10 +146,14 @@ export const ServerNotificationsBadge = () => {
                   </ListSubheader>
                 <Divider />
                 {notifications.map((notification, index) => {
-                  return (<Fragment key={notification.event_id ? notification.event_id : index }>
+                  return (<Fragment key={notification.event_id ? notification.event_id + index : index }>
                     <ListItem
                       onClick={() => handleSeeAllNotifications()}
                       sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "flex-start",
+                        overflow: "hidden",
                         "&:hover": {
                           backgroundColor: "action.hover",
                           cursor: "pointer"
@@ -148,12 +167,16 @@ export const ServerNotificationsBadge = () => {
                             sx={{
                               overflow: "hidden",
                               textOverflow: "ellipsis",
-                              whiteSpace: "nowrap"
                             }}
                             dangerouslySetInnerHTML={{ __html: notification.output.split("\n")[0] }}
                           />
                         }
                       />
+                      <ListItemText
+                        primary={
+                          <Typography variant="body2" sx={{ color: theme.palette.text.secondary }}>{getTimeSince(notification.sent_at) + " ago"}</Typography>
+                        }
+                      />
                     </ListItem>
                     <Divider />
                   </Fragment>

src/components/etke.cc/ServerNotificationsPage.tsx

@@ -4,9 +4,12 @@ import { useStore } from "react-admin"
 import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider"
 import { useAppContext } from "../../Context";
 import DeleteIcon from "@mui/icons-material/Delete";
+import { getTimeSince } from "../../utils/date";
+import { Tooltip } from "@mui/material";
+
 const DisplayTime = ({ date }: { date: string }) => {
-  const dateFromDateString = new Date(date);
-  return <>{dateFromDateString.toLocaleString()}</>;
+  const dateFromDateString = new Date(date.replace(" ", "T") + "Z");
+  return <Tooltip title={dateFromDateString.toLocaleString()}>{<span>{getTimeSince(date) + " ago"}</span>}</Tooltip>;
 };
 
 const ServerNotificationsPage = () => {

src/components/etke.cc/ServerStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Badge, Theme, Tooltip } from "@mui/material";
+import { Avatar, Badge, Box, Theme, Tooltip } from "@mui/material";
 import { useEffect } from "react";
 import { useAppContext } from "../../Context";
 import { Button, useDataProvider, useStore } from "react-admin";
@@ -52,13 +52,15 @@ const SERVER_CURRENT_PROCCESS_INTERVAL_TIME = 5 * 1000;
 
 const useServerStatus = () => {
   const [serverStatus, setServerStatus] = useStore<ServerStatusResponse>("serverStatus", { ok: false, success: false, host: "", results: [] });
+  const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const { command, locked_at } = serverProcess;
   const { etkeccAdmin } = useAppContext();
   const dataProvider = useDataProvider();
   const isOkay = serverStatus.ok;
   const successCheck = serverStatus.success;
 
   const checkServerStatus = async () => {
-    const serverStatus: ServerStatusResponse = await dataProvider.getServerStatus(etkeccAdmin);
+    const serverStatus: ServerStatusResponse = await dataProvider.getServerStatus(etkeccAdmin, command !== "");
     setServerStatus({
       ok: serverStatus.ok,
       success: serverStatus.success,
@@ -68,10 +70,12 @@ const useServerStatus = () => {
   };
 
   useEffect(() => {
-    let serverStatusInterval: NodeJS.Timeout;
+    let serverStatusInterval: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
+
     if (etkeccAdmin) {
       checkServerStatus();
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         // start the interval after 10 seconds to avoid too many requests
         serverStatusInterval = setInterval(checkServerStatus, SERVER_STATUS_INTERVAL_TIME);
       }, 10000);
@@ -80,11 +84,14 @@ const useServerStatus = () => {
     }
 
     return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
       if (serverStatusInterval) {
         clearInterval(serverStatusInterval);
       }
     }
-  }, [etkeccAdmin]);
+  }, [etkeccAdmin, command]);
 
   return { isOkay, successCheck };
 };
@@ -96,7 +103,7 @@ const useCurrentServerProcess = () => {
   const { command, locked_at } = serverProcess;
 
   const checkServerRunningProcess = async () => {
-    const serverProcess: ServerProcessResponse = await dataProvider.getServerRunningProcess(etkeccAdmin);
+    const serverProcess: ServerProcessResponse = await dataProvider.getServerRunningProcess(etkeccAdmin, command !== "");
     setServerProcess({
       ...serverProcess,
       command: serverProcess.command,
@@ -105,10 +112,12 @@ const useCurrentServerProcess = () => {
   }
 
   useEffect(() => {
-    let serverCheckInterval: NodeJS.Timeout;
+    let serverCheckInterval: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
+
     if (etkeccAdmin) {
       checkServerRunningProcess();
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         serverCheckInterval = setInterval(checkServerRunningProcess, SERVER_CURRENT_PROCCESS_INTERVAL_TIME);
       }, 5000);
     } else {
@@ -116,19 +125,48 @@ const useCurrentServerProcess = () => {
     }
 
     return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
       if (serverCheckInterval) {
         clearInterval(serverCheckInterval);
       }
     }
-  }, [etkeccAdmin]);
+  }, [etkeccAdmin, command]);
 
   return { command, locked_at };
 };
 
+export const ServerStatusStyledBadge = ({ command, locked_at, isOkay, inSidebar = false }: { command: string, locked_at: string, isOkay: boolean, inSidebar: boolean }) => {
+  const theme = useTheme();
+  let badgeBackgroundColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
+  let badgeColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
+
+  if (command && locked_at) {
+    badgeBackgroundColor = 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
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      variant="dot"
+      backgroundColor={badgeBackgroundColor}
+      badgeColor={badgeColor}
+    >
+      <Avatar sx={{ height: 24, width: 24, background: avatarBackgroundColor }}>
+        <MonitorHeartIcon sx={{ height: 22, width: 22, color: theme.palette.common.white }} />
+      </Avatar>
+  </StyledBadge>
+};
+
 const ServerStatusBadge = () => {
     const { isOkay, successCheck } = useServerStatus();
     const { command, locked_at } = useCurrentServerProcess();
-    const theme = useTheme();
     const navigate = useNavigate();
 
     if (!successCheck) {
@@ -140,28 +178,16 @@ const ServerStatusBadge = () => {
     };
 
     let tooltipText = "Click to view Server Status";
-    let badgeBackgroundColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
-    let badgeColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
 
     if (command && locked_at) {
-      badgeBackgroundColor = theme.palette.warning.main;
-      badgeColor = theme.palette.warning.main;
       tooltipText = `Running: ${command}; ${tooltipText}`;
     }
 
     return <Button onClick={handleServerStatusClick} size="medium" sx={{ minWidth: "auto", ".MuiButton-startIcon": { m: 0 }}}>
       <Tooltip title={tooltipText} sx={{ cursor: "pointer" }}>
-        <StyledBadge
-          overlap="circular"
-          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-          variant="dot"
-          backgroundColor={badgeBackgroundColor}
-          badgeColor={badgeColor}
-        >
-          <Avatar sx={{ height: 24, width: 24, background: theme.palette.mode === "dark" ? theme.palette.background.default : "#2196f3" }}>
-            <MonitorHeartIcon sx={{ height: 22, width: 22, color: theme.palette.common.white }} />
-          </Avatar>
-        </StyledBadge>
+          <Box>
+            <ServerStatusStyledBadge inSidebar={false} command={command || ""} locked_at={locked_at || ""} isOkay={isOkay} />
+          </Box>
       </Tooltip>
     </Button>
 };

src/components/etke.cc/ServerStatusPage.tsx

@@ -4,16 +4,8 @@ import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from "@mui/icons-material/Close";
 import EngineeringIcon from '@mui/icons-material/Engineering';
 import { ServerProcessResponse, ServerStatusComponent, ServerStatusResponse } from "../../synapse/dataProvider";
-
-const getTimeSince = (date: string) => {
-  const now = new Date();
-  const past = new Date(date);
-  const diffInMinutes = Math.floor((now.getTime() - past.getTime()) / (1000 * 60));
-
-  if (diffInMinutes < 1) return "a couple of seconds";
-  if (diffInMinutes === 1) return "1 minute";
-  return `${diffInMinutes} minutes`;
-};
+import ServerCommandsPanel from "./ServerCommandsPanel";
+import { getTimeSince } from "../../utils/date";
 
 const StatusChip = ({ isOkay, size = "medium", command }: { isOkay: boolean, size?: "small" | "medium", command?: string   }) => {
   let label = "OK";
@@ -102,6 +94,8 @@ const ServerStatusPage = () => {
       </Stack>
       )}
 
+      <ServerCommandsPanel />
+
       <Stack spacing={2} direction="row">
         {Object.keys(groupedResults).map((category, idx) => (
           <Box key={`category_${category}`} sx={{ flex: 1 }}>

src/components/media.tsx

@@ -35,6 +35,7 @@ import { useMutation } from "@tanstack/react-query";
 import { dateParser } from "../utils/date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -481,7 +482,7 @@ export const MediaIDField = ({ source }) => {
 
   let uploadName = mediaID;
   if (get(record, "upload_name")) {
-    uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
+    uploadName = decodeURLComponent(get(record, "upload_name")?.toString());
   }
 
   let mxcURL = mediaID;
@@ -504,7 +505,10 @@ export const ReportMediaContent = ({ source }) => {
     return null;
   }
 
-  const uploadName = decodeURIComponent(get(record, "event_json.content.body")?.toString());
+  let uploadName = "";
+  if (get(record, "event_json.content.body")) {
+    uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
+  }
 
   return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type}/>;
 };

src/i18n/de.ts

@@ -12,9 +12,14 @@ const fixedGermanMessages = {
       clear_filters: "Alle Filter entfernen",
       add_filter: "Filter hinzufügen",
     },
+    auth: {
+      ...formalGermanMessages.ra.auth,
+      email: "E-Mail",
+    },
     action: {
       ...formalGermanMessages.ra.action,
       update_application: "Anwendung aktualisieren",
+      select_all_button: "Alle auswählen",
     },
     page: {
       ...formalGermanMessages.ra.page,
@@ -28,6 +33,7 @@ const fixedGermanMessages = {
         "Sie haben nicht die erforderlichen Berechtigungen um auf diese Seite zuzugreifen.",
       authentication_error:
         "Der Authentifizierungsserver hat einen Fehler zurückgegeben und Ihre Anmeldedaten konnten nicht überprüft werden.",
+      select_all_limit_reached: "Es gibt zu viele Elemente, um sie alle auszuwählen. Es wurden nur die ersten %{max} Elemente ausgewählt.",
     },
   },
 }

src/i18n/ru.ts

@@ -11,6 +11,10 @@ const fixedRussianMessages = {
       no_filtered_results: "Нет результатов",
       clear_filters: "Все фильтры сбросить",
     },
+    action: {
+      ...russianMessages.ra.action,
+      select_all_button: "Выбрать все",
+    },
     page: {
       ...russianMessages.ra.page,
       empty: "Пусто",
@@ -23,6 +27,7 @@ const fixedRussianMessages = {
         "У вас нет прав доступа к этой странице.",
       authentication_error:
         "Сервер аутентификации вернул ошибку и не смог проверить ваши учетные данные.",
+      select_all_limit_reached: "Слишком много элементов для выбора. Были выбраны только первые %{max} элементов.",
     },
   },
 }

src/i18n/zh.ts

@@ -11,9 +11,14 @@ const fixedChineseMessages = {
       no_filtered_results: "没有结果",
       clear_filters: "清除所有过滤器",
     },
+    auth: {
+      ...chineseMessages.ra.auth,
+      email: "邮箱",
+    },
     action: {
       ...chineseMessages.ra.action,
-      update_application: "Anwendung aktualisieren",
+      update_application: "更新应用",
+      select_all_button: "全部选择",
     },
     page: {
       ...chineseMessages.ra.page,
@@ -26,6 +31,7 @@ const fixedChineseMessages = {
         "您没有访问此页面的权限。",
       authentication_error:
         "身份验证服务器返回错误，无法验证您的凭据。",
+      select_all_limit_reached: "选择的元素太多。只选择了前 %{max} 个元素。",
     },
   },
 }

src/pages/LoginPage.test.tsx

@@ -2,6 +2,7 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 
 import { render, screen } from "@testing-library/react";
 import { AdminContext } from "react-admin";
+import { BrowserRouter } from "react-router-dom";
 
 import LoginPage from "./LoginPage";
 import { AppContext } from "../Context";
@@ -14,9 +15,11 @@ describe("LoginForm", () => {
   it("renders with no restriction to homeserver", async () => {
     await act(async () => {
       render(
+        <BrowserRouter>
           <AdminContext i18nProvider={i18nProvider}>
             <LoginPage />
           </AdminContext>
+        </BrowserRouter>
       );
     });
 
@@ -33,6 +36,7 @@ describe("LoginForm", () => {
 
   it("renders with single restricted homeserver", () => {
     render(
+      <BrowserRouter>
         <AppContext.Provider
           value={{ restrictBaseUrl: "https://matrix.example.com", asManagedUsers: [], menu: [] }}
         >
@@ -40,6 +44,7 @@ describe("LoginForm", () => {
           <LoginPage />
           </AdminContext>
         </AppContext.Provider>
+      </BrowserRouter>
     );
 
     screen.getByText(englishMessages.synapseadmin.auth.welcome);
@@ -63,7 +68,9 @@ describe("LoginForm", () => {
         }}
       >
         <AdminContext i18nProvider={i18nProvider}>
+          <BrowserRouter>
             <LoginPage />
+          </BrowserRouter>
         </AdminContext>
       </AppContext.Provider>
     );

src/resources/rooms.tsx

@@ -376,6 +376,7 @@ export const RoomList = (props: ListProps) => {
         <ReferenceField reference="rooms" source="id" label="resources.users.fields.avatar" link={false} sortable={false}>
           <AvatarField source="avatar" sx={{ height: "40px", width: "40px" }} />
         </ReferenceField>
+        <RaTextField source="id" label="resources.rooms.fields.room_id" sortable={false} />
         <WrapperField source="encryption" sortBy="is_encrypted" label="resources.rooms.fields.encryption">
           <BooleanField
             source="is_encrypted"

src/resources/users.tsx

@@ -83,6 +83,7 @@ import UserRateLimits from "../components/UserRateLimits";
 import { User, UsernameAvailabilityResult } from "../synapse/dataProvider";
 import { MakeAdminBtn } from "./rooms";
 import UserAccountData from "../components/UserAccountData";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -496,7 +497,7 @@ export const UserEdit = (props: EditProps) => {
             target="user_id"
             label={false}
             pagination={<UserPagination />}
-            perPage={50}
+            perPage={10}
             sort={{ field: "created_ts", order: "DESC" }}
           >
             <Datagrid sx={{ width: "100%" }} bulkActionButtons={<BulkDeleteButton/>}>
@@ -505,7 +506,7 @@ export const UserEdit = (props: EditProps) => {
               <DateField source="last_access_ts" showTime options={DATE_FORMAT} />
               <NumberField source="media_length" />
               <TextField source="media_type" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <FunctionField source="upload_name" render={record => decodeURIComponent(record.upload_name)} />
+              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURLComponent(record.upload_name) : ""} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
@@ -515,7 +516,7 @@ export const UserEdit = (props: EditProps) => {
         </FormTab>
 
         <FormTab label={translate("resources.rooms.name", { smart_count: 2 })} icon={<ViewListIcon />} path="rooms">
-          <ReferenceManyField reference="joined_rooms" target="user_id" label={false}>
+          <ReferenceManyField reference="joined_rooms" target="user_id" label={false} perPage={10} pagination={<Pagination />}>
               <Datagrid sx={{ width: "100%" }} rowClick={id => "/rooms/" + id + "/show"} bulkActionButtons={false}>
                 <ReferenceField reference="rooms" source="id" label={false} link={false} sortable={false}>
                   <AvatarField source="avatar" sx={{ height: "40px", width: "40px" }} />
@@ -527,7 +528,9 @@ export const UserEdit = (props: EditProps) => {
                 <ReferenceField reference="rooms" source="id" label="resources.rooms.fields.joined_members" link={false} sortable={false}>
                   <TextField source="joined_members" sortable={false} />
                 </ReferenceField>
+                <ReferenceField reference="rooms" source="id" label={false} link={false} sortable={false}>
                   <MakeAdminBtn />
+                </ReferenceField>
               </Datagrid>
           </ReferenceManyField>
         </FormTab>

src/synapse/authProvider.ts

@@ -2,7 +2,8 @@ import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 
 import { MatrixError, displayError } from "../utils/error";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
-import { FetchConfig, ClearConfig } from "../utils/config";
+import { FetchConfig, ClearConfig, GetConfig } from "../utils/config";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -57,7 +58,7 @@ const authProvider: AuthProvider = {
     base_url = base_url.replace(/\/+$/g, "");
     localStorage.setItem("base_url", base_url);
 
-    const decoded_base_url = window.decodeURIComponent(base_url);
+    const decoded_base_url = decodeURLComponent(base_url);
     let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;
@@ -80,9 +81,16 @@ const authProvider: AuthProvider = {
       localStorage.setItem("access_token", accessToken ? accessToken : json.access_token);
       localStorage.setItem("device_id", json.device_id);
       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) {
       const error = err as HttpError;
       const errorStatus = error.status;

src/synapse/dataProvider.ts

@@ -16,6 +16,8 @@ import {
 import { returnMXID } from "../utils/mxid";
 import { MatrixError, displayError } from "../utils/error";
 
+const CACHED_MANY_REF: Record<string, any> = {};
+
 // Adds the access token to all requests
 const jsonClient = async (url: string, options: Options = {}) => {
   const token = localStorage.getItem("access_token");
@@ -298,8 +300,8 @@ export interface ServerStatusResponse {
 }
 
 export interface ServerProcessResponse {
-  locked_at?: string;
-  command?: string;
+  locked_at: string;
+  command: string;
 }
 
 export interface ServerNotification {
@@ -313,6 +315,19 @@ export interface ServerNotificationsResponse {
   notifications: ServerNotification[];
 }
 
+export interface ServerCommand {
+  icon: string;
+  name: string;
+  description: string;
+  args: boolean;
+  with_lock: boolean;
+  additionalArgs?: string;
+}
+
+export interface ServerCommandsResponse {
+  [command: string]: ServerCommand;
+}
+
 export interface SynapseDataProvider extends DataProvider {
   deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
   purgeRemoteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
@@ -327,6 +342,7 @@ export interface SynapseDataProvider extends DataProvider {
   getServerStatus: (etkeAdminUrl: string) => Promise<ServerStatusResponse>;
   getServerNotifications: (etkeAdminUrl: string) => Promise<ServerNotificationsResponse>;
   deleteServerNotifications: (etkeAdminUrl: string) => Promise<{ success: boolean }>;
+  getServerCommands: (etkeAdminUrl: string) => Promise<ServerCommandsResponse>;
 }
 
 const resourceMap = {
@@ -706,18 +722,37 @@ const baseDataProvider: SynapseDataProvider = {
       dir: getSearchOrder(order),
     };
 
+
+
     const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
 
     const ref = res.reference(params.id);
-    const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
+    const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
+    let CACHE_KEY = ref.endpoint;
+    let jsonData = [];
+    let total = 0;
+
+    if (CACHED_MANY_REF[CACHE_KEY]) {
+        jsonData = CACHED_MANY_REF[CACHE_KEY]["data"].slice(from, from + perPage);
+        total = CACHED_MANY_REF[CACHE_KEY]["total"];
+    } else {
       const { json } = await jsonClient(endpoint_url);
+      jsonData = json[res.data]
+      total = res.total(json, from, perPage);
+      if (resource === "joined_rooms") {
+        // cache will be applied only for joined_rooms
+        CACHED_MANY_REF[CACHE_KEY] = { data: jsonData, total: total };
+        jsonData = jsonData.slice(from, from + perPage);
+      }
+    }
+
     return {
-      data: json[res.data].map(res.map),
-      total: res.total(json, from, perPage),
+      data: jsonData.map(res.map),
+      total: total,
     };
   },
 
@@ -973,12 +1008,17 @@ const baseDataProvider: SynapseDataProvider = {
       throw error;
     }
   },
-  getServerRunningProcess: async (runningProcessUrl: string): Promise<ServerProcessResponse> => {
+  getServerRunningProcess: async (etkeAdminUrl: string, burstCache: boolean = false): Promise<ServerProcessResponse> => {
     const locked_at = "";
     const command = "";
 
+    let serverURL = `${etkeAdminUrl}/lock`;
+    if (burstCache) {
+      serverURL += `?time=${new Date().getTime()}`;
+    }
+
     try {
-      const response = await fetch(`${runningProcessUrl}/lock`, {
+      const response = await fetch(serverURL, {
         headers: {
           "Authorization": `Bearer ${localStorage.getItem("access_token")}`
         }
@@ -1003,9 +1043,14 @@ const baseDataProvider: SynapseDataProvider = {
 
     return { locked_at, command };
   },
-  getServerStatus: async (serverStatusUrl: string): Promise<ServerStatusResponse> => {
+  getServerStatus: async (etkeAdminUrl: string, burstCache: boolean = false): Promise<ServerStatusResponse> => {
+    let serverURL = `${etkeAdminUrl}/status`;
+    if (burstCache) {
+      serverURL += `?time=${new Date().getTime()}`;
+    }
+
     try {
-      const response = await fetch(`${serverStatusUrl}/status`, {
+      const response = await fetch(serverURL, {
         headers: {
           "Authorization": `Bearer ${localStorage.getItem("access_token")}`
         }
@@ -1027,9 +1072,14 @@ const baseDataProvider: SynapseDataProvider = {
 
     return { success: false, ok: false, host: "", results: [] };
   },
-  getServerNotifications: async (serverNotificationsUrl: string): Promise<ServerNotificationsResponse> => {
+  getServerNotifications: async (serverNotificationsUrl: string, burstCache: boolean = false): Promise<ServerNotificationsResponse> => {
+    let serverURL = `${serverNotificationsUrl}/notifications`;
+    if (burstCache) {
+      serverURL += `?time=${new Date().getTime()}`;
+    }
+
     try {
-      const response = await fetch(`${serverNotificationsUrl}/notifications`, {
+      const response = await fetch(serverURL, {
         headers: {
           "Authorization": `Bearer ${localStorage.getItem("access_token")}`
         }
@@ -1080,6 +1130,66 @@ const baseDataProvider: SynapseDataProvider = {
     }
 
     return { success: false };
+  },
+  getServerCommands: async (serverCommandsUrl: string) => {
+    try {
+      const response = await fetch(`${serverCommandsUrl}/commands`, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+      });
+      if (!response.ok) {
+        console.error(`Error fetching server commands: ${response.status} ${response.statusText}`);
+        return {};
+      }
+
+      const status = response.status;
+
+      if (status === 200) {
+        const json = await response.json();
+        return json as ServerCommandsResponse;
+      }
+
+      return {};
+    } catch (error) {
+      console.error("Error fetching server commands, error");
+    }
+
+    return {};
+  },
+  runServerCommand: async (serverCommandsUrl: string, command: string, additionalArgs: Record<string, any> = {}) => {
+    const endpoint_url = `${serverCommandsUrl}/commands`;
+    const body = {
+      command: command,
+      ...additionalArgs
+    }
+    const response = await fetch(endpoint_url, {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+    });
+
+    if (!response.ok) {
+      console.error(`Error running server command: ${response.status} ${response.statusText}`);
+      return {
+        success: false,
+      };
+    }
+
+    const status = response.status;
+
+    if (status === 204) {
+      return {
+        success: true,
+      }
+    }
+
+    return {
+      success: false,
+    }
   }
 };
 

src/utils/date.ts

@@ -26,3 +26,29 @@ export const dateFormatter = (v: string | number | Date | undefined | null): str
   // target format yyyy-MM-ddThh:mm
   return `${year}-${month}-${day}T${hour}:${minute}`;
 };
+
+// assuming date is in format "2025-02-26 20:52:00" where no timezone is specified
+export const getTimeSince = (dateToCompare: string) => {
+  const nowUTC = new Date().getTime();
+  if (!dateToCompare.includes("Z")) {
+    dateToCompare = dateToCompare + "Z";
+  }
+  const past = new Date(dateToCompare);
+
+  const pastUTC = past.getTime();
+  const diffInMs = nowUTC - pastUTC;
+
+  const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+
+  if (diffInMinutes < 1) return "a couple of seconds";
+  if (diffInMinutes === 1) return "1 minute";
+  if (diffInMinutes < 60) return `${diffInMinutes} minutes`;
+  if (diffInMinutes < 120) return "1 hour";
+  if (diffInMinutes < 24 * 60) return `${Math.floor(diffInMinutes / 60)} hours`;
+  if (diffInMinutes < 48 * 60) return "1 day";
+  if (diffInMinutes < 7 * 24 * 60) return `${Math.floor(diffInMinutes / (24 * 60))} days`;
+  if (diffInMinutes < 14 * 24 * 60) return "1 week";
+  if (diffInMinutes < 30 * 24 * 60) return `${Math.floor(diffInMinutes / (7 * 24 * 60))} weeks`;
+  if (diffInMinutes < 60 * 24 * 60) return "1 month";
+  return `${Math.floor(diffInMinutes / (30 * 24 * 60))} months`;
+};

src/utils/decodeURLComponent.ts

@@ -0,0 +1,15 @@
+/**
+ * Decode a URI component, and if it fails, return the original string.
+ * @param str The string to decode.
+ * @returns The decoded string, or the original string if decoding fails.
+ * @example decodeURIComponent("Hello%20World") // "Hello World"
+ */
+const decodeURLComponent = (str: any): any => {
+  try {
+    return decodeURIComponent(str);
+  } catch (e) {
+    return str;
+  }
+}
+
+export default decodeURLComponent;

src/utils/icons.ts

@@ -3,6 +3,11 @@ import EngineeringIcon from '@mui/icons-material/Engineering';
 import HelpCenterIcon from '@mui/icons-material/HelpCenter';
 import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import UpgradeIcon from '@mui/icons-material/Upgrade';
+import RouterIcon from '@mui/icons-material/Router';
+import PriceCheckIcon from '@mui/icons-material/PriceCheck';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 
 export const Icons = {
   Announcement: AnnouncementIcon,
@@ -10,6 +15,11 @@ export const Icons = {
   HelpCenter: HelpCenterIcon,
   SupportAgent: SupportAgentIcon,
   Default: OpenInNewIcon,
+  PieChart: PieChartIcon,
+  Upgrade: UpgradeIcon,
+  Router: RouterIcon,
+  PriceCheck: PriceCheckIcon,
+  RestartAlt: RestartAltIcon,
   // Add more icons as needed
 };