[OGUI-1701] Implement session-service

Configuration/docker-compose.yml

@@ -7,6 +7,8 @@ services:
     command: ["npm", "install", "--no-save", "--silent"]
   webapp:
     image: node:22-alpine
+    depends_on:
+      - install-webapp
     working_dir: /var/workspace
     volumes:
       - ./webapp:/var/workspace
@@ -19,6 +21,8 @@ services:
 
   reverse-proxy:
     image: nginx:1.27
+    depends_on:
+      - webapp
     volumes:
       - ./docker/provisioning/nginx/conf.d/:/etc/nginx/conf.d/
     ports:

Configuration/docker/provisioning/nginx/conf.d/default.conf

@@ -9,6 +9,10 @@ server {
 
     client_max_body_size 32M;
 
+    location /control/ {
+        proxy_pass http://host.docker.internal:8081/;
+    }
+
     location / {
         proxy_pass http://webapp:5173;
 

Configuration/webapp/app/components/user-section/UserSection.tsx

@@ -14,6 +14,7 @@
 
 import { useState, type FC, type MouseEvent } from 'react';
 import { Box, IconButton, Menu, MenuItem, Avatar } from '@mui/material';
+import { getSessionData } from '~/services/session';
 
 interface UserSectionProps {
   userName: string;
@@ -36,6 +37,15 @@ export const UserSection: FC<UserSectionProps> = ({ userName }) => {
     setAnchorEl(null);
   };
 
+  const displayProfileData = () => {
+    const getData = async () => {
+      const data = await getSessionData();
+      alert(JSON.stringify(data));
+    };
+
+    void getData();
+  };
+
   return (
     <Box sx={{ flexGrow: 0 }} className="user-section">
       <IconButton sx={{ p: 0 }} onClick={handleClick}>
@@ -55,7 +65,7 @@ export const UserSection: FC<UserSectionProps> = ({ userName }) => {
         onClose={handleClose}
         className="user-section__menu"
       >
-        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={displayProfileData}>Profile</MenuItem>
         <MenuItem onClick={handleClose}>My account</MenuItem>
         <MenuItem onClick={handleClose}>Logout</MenuItem>
       </Menu>

Configuration/webapp/app/routes/runs/details.tsx

@@ -21,15 +21,15 @@ import { RunLogs } from '~/components/runs/run-logs';
 import { Spinner } from '~/ui/spinner';
 
 const getRun = async (runNumber: number): Promise<Run> => {
-  const response = await fetch(`http://localhost:8080/api/runs/${runNumber}`);
+  const response = await fetch(`http://localhost:8080/control/api/runs/${runNumber}`);
   if (!response.ok) {
     throw data(`Failed to fetch run with run number ${runNumber}`, { status: response.status });
   }
   return response.json() as Promise<Run>;
 };
 
 const getLogs = async (runNumber: number): Promise<Log[]> => {
-  const response = await fetch(`http://localhost:8080/api/runs/${runNumber}/logs`);
+  const response = await fetch(`http://localhost:8080/control/api/runs/${runNumber}/logs`);
   if (!response.ok) {
     throw data(`Failed to fetch logs related to run with run number ${runNumber}`, {
       status: response.status,

Configuration/webapp/app/routes/runs/overview.tsx

@@ -17,7 +17,7 @@ import type { Route } from './+types/overview';
 import { Link } from 'react-router';
 
 export const clientLoader = async (): Promise<Run[]> => {
-  const response = await fetch('http://localhost:8080/api/runs');
+  const response = await fetch('http://localhost:8080/control/api/runs');
   if (!response.ok) {
     throw new Error('An error occurred!');
   }

Configuration/webapp/app/services/session.ts

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+const sessionData: Record<string, string> = {};
+
+/**
+ * Function for fetching session data from the Control server
+ */
+async function fetchSessionData() {
+  // only to get the data from server redirect
+  // (line 264, commit 3ba4600 of github.com/AliceO2Group/WebUi/blob/dev/Framework/Backend/http/server.js)
+  // this should be replaced with endpoint designed for authentication only
+  const response = await fetch('http://localhost:8080/control');
+  const { searchParams } = new URL(response.url);
+  searchParams.forEach((value, key) => {
+    sessionData[key] = value;
+  });
+}
+
+/**
+ * Function for reading session data fetched from the Control server
+ * @returns {Record<string, string>} sessionData
+ */
+export async function getSessionData(): Promise<Record<string, string>> {
+  if (Object.keys(sessionData).length === 0) {
+    await fetchSessionData();
+  }
+  return sessionData;
+}
+
+/**
+ * Function for deleting session data fetched from the Control server
+ * Intended to logout the user
+ */
+export function deleteSessionData() {
+  for (const key in sessionData) {
+    delete sessionData[key];
+  }
+}

Configuration/webapp/app/ui/navbar.tsx

@@ -14,6 +14,7 @@
 
 import { NavLink } from 'react-router';
 import type { NavLinkProps } from 'react-router';
+import { getSessionData } from '~/services/session';
 
 const StyledNavLink = ({ children, ...props }: NavLinkProps) => (
   <NavLink {...props} className={({ isActive }) => `btn btn-tab ${isActive ? 'selected' : ''}`}>
@@ -28,7 +29,7 @@ export const Navbar = () => (
       <StyledNavLink className={'btnStyledNav btn-tab'} to={'/runs'}>
         Runs
       </StyledNavLink>
+      <button onClick={() => alert(JSON.stringify(getSessionData()))}>Log session data</button>
     </div>
-    <div></div>
   </nav>
 );

Configuration/webapp/eslint.config.js

@@ -284,7 +284,7 @@ export default tseslint.config(
     },
   },
   {
-    files: ['app/test/**/*.cjs', 'app/test/**/*.js'],
+    files: ['test/**'],
     extends: [
       pluginJs.configs.recommended,
       mochaPlugin.configs.recommended,
@@ -293,7 +293,7 @@ export default tseslint.config(
       mocha: mochaPlugin,
     },
     languageOptions: {
-      sourceType: 'script', // For .cjs and plain .js files
+      sourceType: 'module',
       ecmaVersion: 'latest',
       globals: {
         ...globals.node,
@@ -303,6 +303,15 @@ export default tseslint.config(
     },
     rules: {
       'mocha/no-setup-in-describe': 'off',
+      'no-console': 'off',
+      'prefer-arrow-callback': 'off'
     },
   },
+  {
+    files: ['app/test/**'],
+    rules: {
+      'no-console': 'off',
+      'prefer-arrow-callback': 'off'
+    }
+  },
 );