Show live CPU and memory usage of user session backend

backend/src/backend/user_session/routers/general.py

@@ -10,13 +10,8 @@
 START_TIME_CONTAINER = datetime.datetime.now()
 
 
-def human_readable(psutil_object: NamedTuple) -> Dict[str, Union[str, Dict[str, str]]]:
-    return {
-        key: f"{getattr(psutil_object, key):.1f} %"
-        if key == "percent"
-        else f"{getattr(psutil_object, key) / (1024**3):.2f} GiB"
-        for key in psutil_object._fields
-    }
+def _convert_psutil_object_to_dict(psutil_object: NamedTuple) -> Dict[str, Union[str, Dict[str, str]]]:
+    return {key: getattr(psutil_object, key) for key in psutil_object._fields}
 
 
 @router.get("/user_session_container")
@@ -34,8 +29,9 @@ async def user_session_container(
 
     return {
         "username": authenticated_user.get_username(),
-        "start_time_container": START_TIME_CONTAINER,
-        "root_disk_system": human_readable(psutil.disk_usage("/")),
-        "memory_system": human_readable(psutil.virtual_memory()),
-        "memory_python_process": human_readable(psutil.Process().memory_info()),
+        "startTimeContainer": START_TIME_CONTAINER,
+        "rootDiskSystem": _convert_psutil_object_to_dict(psutil.disk_usage("/")),
+        "memorySystem": _convert_psutil_object_to_dict(psutil.virtual_memory()),
+        "memoryPythonProcess": _convert_psutil_object_to_dict(psutil.Process().memory_info()),
+        "cpuPercent": psutil.cpu_percent(),
     }

frontend/src/framework/internal/components/NavBar/navBar.tsx

@@ -16,7 +16,6 @@ import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import {
     ChevronLeft,
     ChevronRight,
-    GitHub,
     GridView,
     Link,
     List,
@@ -26,6 +25,8 @@ import {
 } from "@mui/icons-material";
 import { useQueryClient } from "@tanstack/react-query";
 
+import { UserSessionState } from "./private-components/UserSessionState";
+
 type NavBarProps = {
     workbench: Workbench;
 };
@@ -249,17 +250,10 @@ export const NavBar: React.FC<NavBarProps> = (props) => {
                 <NavBarDivider />
                 <LoginButton className="w-full !text-slate-800 h-10" showText={expanded} />
                 <div className="flex-grow h-5" />
-                <NavBarDivider />
-                <Button
-                    title="Visit project on GitHub"
-                    onClick={() => window.open("https://github.com/equinor/webviz", "_blank")}
-                    className={resolveClassNames("w-full !text-slate-500 hover:!text-slate-800 h-10", {
-                        "mb-16": isDevMode(),
-                    })}
-                    startIcon={<GitHub fontSize="small" />}
-                >
-                    {expanded ? "Webviz on GitHub" : ""}
-                </Button>
+                <div className={isDevMode() ? "mb-16" : ""}>
+                    <NavBarDivider />
+                    <UserSessionState expanded={expanded} />
+                </div>
             </div>
             {ensembleDialogOpen && (
                 <SelectEnsemblesDialog selectedEnsembles={selectedEnsembles} onClose={handleEnsembleDialogClose} />

frontend/src/framework/internal/components/NavBar/private-components/UserSessionState.tsx

@@ -0,0 +1,23 @@
+import { Memory } from "@mui/icons-material";
+import { useQuery } from "@tanstack/react-query";
+
+import { apiService } from "@framework/ApiService";
+
+const useUserSessionState = () => useQuery({
+    queryKey: ["default.userSessionContainer"],
+    queryFn: () => apiService.default.userSessionContainer(),
+    refetchInterval: 2000
+});
+
+export const UserSessionState = ({expanded}: {expanded: boolean}) => {
+
+    const sessionState = useUserSessionState();
+
+    const memoryPercent = Math.round(sessionState.data?.memorySystem?.percent) || "-"
+    const cpuPercent = Math.round(sessionState.data?.cpuPercent) || "-"
+
+    return <div className="text-xs whitespace-nowrap text-gray-400">
+        <div><Memory fontSize="small" /> {expanded ? "Memory:" : "M"} {memoryPercent} %</div>
+        <div><Memory fontSize="small" /> {expanded ? "CPU:" : "C"} {cpuPercent} %</div>
+    </div>
+}