Inject informations into about dialog (#104)

gridsuite · Dec 11, 2023 · 634802a · 634802a
1 parent 9554e33
commit 634802a
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
     "name": "gridmerge-app",
     "version": "0.1.0",
+    "license": "MPL-2.0",
     "homepage": ".",
     "private": true,
     "dependencies": {
         "@emotion/react": "^11.8.2",
         "@emotion/styled": "^11.8.1",
-        "@gridsuite/commons-ui": "0.41.0",
+        "@gridsuite/commons-ui": "^0.42.0",
         "@mui/icons-material": "^5.5.1",
         "@mui/lab": "^5.0.0-alpha.75",
         "@mui/material": "^5.5.3",

diff --git a/src/components/app-top-bar.js b/src/components/app-top-bar.js
@@ -9,7 +9,12 @@ import { LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui';
 import Parameters, { useParameterState } from './parameters';
 import { PARAM_LANGUAGE, PARAM_THEME } from '../utils/config-params';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchAppsAndUrls, fetchMergeConfigs } from '../utils/rest-api';
+import {
+    fetchAppsAndUrls,
+    fetchMergeConfigs,
+    fetchVersion,
+    getServersInfos,
+} from '../utils/rest-api';
 import PropTypes from 'prop-types';
 import { useNavigate, useMatch } from 'react-router-dom';
 import { ReactComponent as GridMergeLogoLight } from '../images/GridMerge_logo_light.svg';
@@ -19,6 +24,7 @@ import { FormattedMessage } from 'react-intl';
 import ProcessesConfigurationDialog from './processes-configuration-dialog';
 import { makeStyles } from '@mui/styles';
 import { initProcesses } from '../redux/actions';
+import AppPackage from '../../package.json';
 
 export const PREFIX_URL_PROCESSES = '/processes';
 
@@ -81,26 +87,6 @@ const AppTopBar = ({ user, userManager }) => {
         return index !== -1 ? matchProcess.params.processName : false;
     }, [configs, matchProcess]);
 
-    function toggleTab(newTabValue) {
-        navigate(PREFIX_URL_PROCESSES + '/' + newTabValue);
-    }
-
-    function showParametersClicked() {
-        setShowParameters(true);
-    }
-
-    function hideParameters() {
-        setShowParameters(false);
-    }
-
-    function onLogoClicked() {
-        navigate('/', { replace: true });
-    }
-
-    const showPopupConfigurationProcesses = () => {
-        setShowConfigurationProcesses(true);
-    };
-
     return (
         <>
             <TopBar
@@ -113,23 +99,63 @@ const AppTopBar = ({ user, userManager }) => {
                         <GridMergeLogoDark />
                     )
                 }
-                onParametersClick={() => showParametersClicked()}
+                appVersion={AppPackage.version}
+                appLicense={AppPackage.license}
+                onParametersClick={() => setShowParameters(true)}
                 onLogoutClick={() => logout(dispatch, userManager.instance)}
-                onLogoClick={() => onLogoClicked()}
+                onLogoClick={() => navigate('/', { replace: true })}
                 user={user}
                 appsAndUrls={appsAndUrls}
                 onThemeClick={handleChangeTheme}
                 theme={themeLocal}
-                onAboutClick={() => console.debug('about')}
                 onLanguageClick={handleChangeLanguage}
                 language={languageLocal}
+                getGlobalVersion={(setGlobalVersion) =>
+                    fetchVersion()
+                        .then((res) => setGlobalVersion(res.deployVersion))
+                        .catch((reason) => {
+                            console.error(
+                                'Error while fetching the version : ' + reason
+                            );
+                            setGlobalVersion(null);
+                        })
+                }
+                getAdditionalModules={(setServers) =>
+                    getServersInfos()
+                        .then((res) =>
+                            setServers(
+                                Object.entries(res).map(([name, infos]) => ({
+                                    name:
+                                        infos?.build?.name ||
+                                        infos?.build?.artifact ||
+                                        name,
+                                    type: 'server',
+                                    version: infos?.build?.version,
+                                    gitTag:
+                                        infos?.git?.tags ||
+                                        infos?.git?.commit?.id[
+                                            'describe-short'
+                                        ],
+                                }))
+                            )
+                        )
+                        .catch((reason) => {
+                            console.error(
+                                'Error while fetching the servers infos : ' +
+                                    reason
+                            );
+                            setServers(null);
+                        })
+                }
             >
                 <Tabs
                     value={selectedTabId}
                     indicatorColor="primary"
                     variant="scrollable"
                     scrollButtons="auto"
-                    onChange={(event, newValue) => toggleTab(newValue)}
+                    onChange={(event, newValue) =>
+                        navigate(PREFIX_URL_PROCESSES + '/' + newValue)
+                    }
                     aria-label="parameters"
                     className={classes.process}
                 >
@@ -145,7 +171,7 @@ const AppTopBar = ({ user, userManager }) => {
                     <>
                         <Button
                             className={classes.btnConfigurationProcesses}
-                            onClick={showPopupConfigurationProcesses}
+                            onClick={() => setShowConfigurationProcesses(true)}
                         >
                             <FormattedMessage id="configureProcesses" />
                         </Button>
@@ -161,7 +187,7 @@ const AppTopBar = ({ user, userManager }) => {
             </TopBar>
             <Parameters
                 showParameters={showParameters}
-                hideParameters={hideParameters}
+                hideParameters={() => setShowParameters(false)}
             />
         </>
     );

diff --git a/src/utils/rest-api.js b/src/utils/rest-api.js
@@ -21,6 +21,7 @@ const PREFIX_CONFIG_NOTIFICATION_WS =
     process.env.REACT_APP_WS_GATEWAY + '/config-notification';
 const PREFIX_CONFIG_QUERIES = process.env.REACT_APP_API_GATEWAY + '/config';
 const PREFIX_BOUNDARY_QUERIES = process.env.REACT_APP_API_GATEWAY + '/boundary';
+const PREFIX_STUDY_QUERIES = process.env.REACT_APP_API_GATEWAY + '/study';
 
 function getToken() {
     const state = store.getState();
@@ -234,44 +235,48 @@ export function getExportMergeUrl(processUuid, date, format) {
     return getUrlWithToken(url);
 }
 
+function fetchEnv() {
+    return fetch('env.json').then((res) => res.json());
+}
+
 export function fetchAuthorizationCodeFlowFeatureFlag() {
     console.info(`Fetching authorization code flow feature flag...`);
-    return fetch('env.json')
+    return fetchEnv()
+        .then((res) =>
+            fetch(res.appsMetadataServerUrl + '/authentication.json')
+        )
         .then((res) => res.json())
         .then((res) => {
-            return fetch(res.appsMetadataServerUrl + '/authentication.json')
-                .then((res) => res.json())
-                .then((res) => {
-                    console.log(
-                        `Authorization code flow is ${
-                            res.authorizationCodeFlowFeatureFlag
-                                ? 'enabled'
-                                : 'disabled'
-                        }`
-                    );
-                    return res.authorizationCodeFlowFeatureFlag;
-                })
-                .catch((error) => {
-                    console.error(error);
-                    console.warn(
-                        `Something wrong happened when retrieving authentication.json: authorization code flow will be disabled`
-                    );
-                    return false;
-                });
+            console.log(
+                `Authorization code flow is ${
+                    res.authorizationCodeFlowFeatureFlag
+                        ? 'enabled'
+                        : 'disabled'
+                }`
+            );
+            return res.authorizationCodeFlowFeatureFlag;
+        })
+        .catch((error) => {
+            console.error(error);
+            console.warn(
+                `Something wrong happened when retrieving authentication.json: authorization code flow will be disabled`
+            );
+            return false;
         });
 }
 
 export function fetchAppsAndUrls() {
     console.info(`Fetching apps and urls...`);
-    return fetch('env.json')
-        .then((res) => res.json())
-        .then((res) => {
-            return fetch(
-                res.appsMetadataServerUrl + '/apps-metadata.json'
-            ).then((response) => {
-                return response.json();
-            });
-        });
+    return fetchEnv()
+        .then((env) => fetch(env.appsMetadataServerUrl + '/apps-metadata.json'))
+        .then((response) => response.json());
+}
+
+export function fetchVersion() {
+    console.info(`Fetching global metadata...`);
+    return fetchEnv()
+        .then((env) => fetch(env.appsMetadataServerUrl + '/version.json'))
+        .then((response) => response.json());
 }
 
 /**
@@ -464,3 +469,8 @@ export const MergeType = PropTypes.shape({
         })
     ),
 });
+
+export function getServersInfos() {
+    console.info('get backend servers informations');
+    return backendFetchJson(PREFIX_STUDY_QUERIES + '/v1/servers/infos');
+}