Fix websockets

.env

@@ -1,4 +1,5 @@
 EXTEND_ESLINT=true
+REACT_APP_DEBUG_REQUESTS=false
 
 REACT_APP_API_GATEWAY=/api/gateway
 REACT_APP_WS_GATEWAY=/ws/gateway

package.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
-        "@gridsuite/commons-ui": "^0.44.0",
+        "@gridsuite/commons-ui": "^0.46.0",
         "@hookform/resolvers": "^3.3.1",
         "@mui/icons-material": "^5.5.1",
         "@mui/lab": "^5.0.0-alpha.75",

src/components/app.tsx

@@ -37,12 +37,12 @@ import {
 import { AppState } from '../redux/reducer';
 import {
     ConfigSrv,
+    ConfigNotif,
     ConfigParameter,
     ConfigParameters,
     UserAdminSrv,
     AppsMetadataSrv,
 } from '../services';
-import { connectNotificationsWsUpdateConfig } from '../utils/rest-api';
 import { UserManager } from 'oidc-client';
 import {
     APP_NAME,
@@ -104,7 +104,7 @@ const App: FunctionComponent = () => {
 
     const connectNotificationsUpdateConfig: () => ReconnectingWebSocket =
         useCallback(() => {
-            const ws = connectNotificationsWsUpdateConfig();
+            const ws = ConfigNotif.connectNotificationsWsUpdateConfig();
             ws.onmessage = function (event) {
                 let eventData = JSON.parse(event.data);
                 if (eventData?.headers?.parameterName) {
@@ -174,7 +174,7 @@ const App: FunctionComponent = () => {
                     })
                 );
 
-            ConfigSrv.fetchConfigParameters(APP_NAME)
+            ConfigSrv.fetchConfigParameters(APP_NAME.toLowerCase())
                 .then((params) => updateParams(params))
                 .catch((error) =>
                     snackError({

src/services/apps-metadata.ts

@@ -1,4 +1,4 @@
-import { ReqResponse } from '../utils/rest-api';
+import { ReqResponse } from '../utils/api-rest';
 
 export type EnvJson = typeof import('../../public/env.json');
 

src/services/config-notification.ts

@@ -0,0 +1,20 @@
+import ReconnectingWebSocket, { Event } from 'reconnecting-websocket';
+import { APP_NAME } from '../utils/config-params';
+import { getUrlWithToken, getWsBase } from '../utils/api-ws';
+
+const PREFIX_CONFIG_NOTIFICATION_WS = `${process.env.REACT_APP_WS_GATEWAY}/config-notification`;
+
+export function connectNotificationsWsUpdateConfig(): ReconnectingWebSocket {
+    const webSocketUrl = `${getWsBase()}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?appName=${APP_NAME.toLowerCase()}`;
+    const reconnectingWebSocket = new ReconnectingWebSocket(
+        () => getUrlWithToken(webSocketUrl),
+        undefined,
+        { debug: process.env.REACT_APP_DEBUG_REQUESTS === 'true' }
+    );
+    reconnectingWebSocket.onopen = function (event: Event) {
+        console.info(
+            `Connected Websocket update config ui ${webSocketUrl} ...`
+        );
+    };
+    return reconnectingWebSocket;
+}

src/services/config.ts

@@ -1,5 +1,5 @@
 import { getAppName } from '../utils/config-params';
-import { backendFetch, backendFetchJson } from '../utils/rest-api';
+import { backendFetch, backendFetchJson } from '../utils/api-rest';
 
 const PREFIX_CONFIG_QUERIES = `${process.env.REACT_APP_API_GATEWAY}/config`;
 

src/services/index.ts

@@ -1,10 +1,12 @@
 import * as Config from './config';
+import * as ConfigNotif from './config-notification';
 import * as AppsMetadata from './apps-metadata';
 import * as Study from './study';
 import * as UserAdmin from './user-admin';
 
 const _ = {
     ...Config,
+    ...ConfigNotif,
     ...AppsMetadata,
     ...Study,
     ...UserAdmin,
@@ -14,6 +16,9 @@ export default _;
 export * as ConfigSrv from './config';
 export type * from './config';
 
+export * as ConfigNotif from './config-notification';
+export type * from './config-notification';
+
 export * as AppsMetadataSrv from './apps-metadata';
 export type * from './apps-metadata';
 

src/services/study.ts

@@ -4,7 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { backendFetchJson, Token } from '../utils/rest-api';
+import { backendFetchJson, Token } from '../utils/api-rest';
 
 const STUDY_URL = `${process.env.REACT_APP_API_GATEWAY}/study/v1`;
 

src/services/user-admin.ts

@@ -1,4 +1,4 @@
-import { backendFetch, ReqResponse } from '../utils/rest-api';
+import { backendFetch, ReqResponse } from '../utils/api-rest';
 
 const USER_ADMIN_URL = `${process.env.REACT_APP_API_GATEWAY}/user-admin`;
 

src/setupProxy.js

@@ -1,13 +1,19 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
+const GATEWAY_URL = 'http://localhost:9000';
+const debugReqs = process.env.REACT_APP_DEBUG_REQUESTS === 'true';
 module.exports = function (app) {
     app.use(
-        createProxyMiddleware('http://localhost:9000/api/gateway', {
-            pathRewrite: { [`^${process.env.REACT_APP_API_GATEWAY}`]: '/' },
+        createProxyMiddleware(process.env.REACT_APP_API_GATEWAY, {
+            logLevel: debugReqs ? 'debug' : 'info',
+            target: GATEWAY_URL,
+            pathRewrite: { [`^${process.env.REACT_APP_API_GATEWAY}/`]: '/' },
         })
     );
     app.use(
-        createProxyMiddleware('http://localhost:9000/ws/gateway', {
-            pathRewrite: { [`^${process.env.REACT_APP_WS_GATEWAY}`]: '/' },
+        createProxyMiddleware(process.env.REACT_APP_WS_GATEWAY, {
+            logLevel: debugReqs ? 'debug' : 'info',
+            target: GATEWAY_URL,
+            pathRewrite: { [`^${process.env.REACT_APP_WS_GATEWAY}/`]: '/' },
             ws: true,
         })
     );

src/utils/rest-api.ts → src/utils/api-rest.ts

@@ -5,52 +5,18 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { APP_NAME } from './config-params';
-import { store } from '../redux/store';
-import ReconnectingWebSocket, { Event } from 'reconnecting-websocket';
-import { AppState } from '../redux/reducer';
+import { getToken, parseError, Token } from './api';
+
+export type * from './api';
 
 export interface ErrorWithStatus extends Error {
     status?: number;
 }
 
 export type Url = Exclude<Parameters<typeof fetch>[0], Request>; //string | URL;
 export type InitRequest = Partial<Parameters<typeof fetch>[1]>; //Partial<RequestInit>;
-export type Token = string;
 export type ReqResponse = Awaited<ReturnType<typeof fetch>>;
 
-const PREFIX_CONFIG_NOTIFICATION_WS = `${process.env.REACT_APP_WS_GATEWAY}/config-notification`;
-
-export function connectNotificationsWsUpdateConfig(): ReconnectingWebSocket {
-    const webSocketBaseUrl = document.baseURI
-        .replace(/^http:\/\//, 'ws://')
-        .replace(/^https:\/\//, 'wss://');
-    const webSocketUrl = `${webSocketBaseUrl}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?appName=${APP_NAME}`;
-
-    const reconnectingWebSocket = new ReconnectingWebSocket(
-        () => `${webSocketUrl}&access_token=${getToken()}`
-    );
-    reconnectingWebSocket.onopen = function (event: Event) {
-        console.info(
-            `Connected Websocket update config ui ${webSocketUrl} ...`
-        );
-    };
-    return reconnectingWebSocket;
-}
-
-function getToken(): Token {
-    const state: AppState = store.getState();
-    return state.user?.id_token;
-}
-
-function parseError(text: string): any {
-    try {
-        return JSON.parse(text);
-    } catch (err) {
-        return null;
-    }
-}
-
 function handleError(response: ReqResponse): Promise<never> {
     return response.text().then((text: string) => {
         const errorName = 'HttpResponseError : ';

src/utils/api-ws.ts

@@ -0,0 +1,14 @@
+import { getToken } from './api';
+
+export type * from './api';
+
+export function getWsBase(): string {
+    return document.baseURI
+        .replace(/^http(s?):\/\//, 'ws$1://')
+        .replace(/\/$/, '');
+}
+
+export function getUrlWithToken(baseUrl: string): string {
+    const querySymbol = baseUrl.includes('?') ? '&' : '?';
+    return `${baseUrl}${querySymbol}access_token=${getToken()}`;
+}

src/utils/api.ts

@@ -0,0 +1,17 @@
+import { AppState } from '../redux/reducer';
+import { store } from '../redux/store';
+
+export type Token = string;
+
+export function getToken(): Token {
+    const state: AppState = store.getState();
+    return state.user?.id_token;
+}
+
+export function parseError(text: string): any {
+    try {
+        return JSON.parse(text);
+    } catch (err) {
+        return null;
+    }
+}