ui: Remove useLogoutEffect and display an error instead of logging out in case of an issue while authenticating on Salt API

CHANGELOG.md

@@ -1,6 +1,13 @@
 # CHANGELOG
 
 ## Release 2.9.1 (in development)
+### Bug fixes
+
+- Re-support MetalK8s UI on Firefox
+  (PR[#3399](https://github.com/scality/metalk8s/pull/3330),
+
+- Remove unnecessary `View logical alerts` toggle in the Alert page
+  (PR[#3399](https://github.com/scality/metalk8s/pull/3330),
 
 ## Release 2.9.0
 ### Features Added

eve/main.yml

@@ -545,7 +545,7 @@ models:
       name: Init terraform
       command: |-
         for try in $(seq 1 $MAX_RETRIES); do
-          if terraform init; then
+          if terraform init --verify-plugins=false; then
             break
           elif [ $try -lt $MAX_RETRIES ]; then
             rm -rf .terraform/

ui/src/components/Navbar.js

@@ -72,15 +72,7 @@ function useNavbarVersion(navbarRef: { current: NavbarWebComponent | null }): st
 function useLoginEffect(navbarRef: { current: NavbarWebComponent | null }, version: string | null) {
   const [isAuthenticated, setIsAuthenticated] = useState(false);
   const dispatch = useDispatch();
-  const user = useTypedSelector((state) => state.oidc?.user);
-  const userStoredInRedux = useRef(false);
-
-  useEffect(() => {
-    if (user) {
-      userStoredInRedux.current = true;
-    }
-  }, [!!user])
-
+
   useEffect(() => {
     if (!navbarRef.current || !version) {
       return;
@@ -111,7 +103,7 @@ function useLoginEffect(navbarRef: { current: NavbarWebComponent | null }, versi
     };
   }, [navbarRef, version, dispatch]);
 
-  return { isAuthenticated: isAuthenticated && userStoredInRedux.current };
+  return { isAuthenticated };
 }
 
 function useLanguageEffect(navbarRef: { current: NavbarWebComponent | null }, version: string | null) {
@@ -180,22 +172,6 @@ function useThemeEffect(navbarRef: { current: NavbarWebComponent | null }, versi
   }, [navbarRef, version, dispatch]);
 }
 
-function useLogoutEffect(
-  navbarRef: { current: NavbarWebComponent | null },
-  isAuthenticated: boolean,
-) {
-  const user = useTypedSelector((state) => state.oidc?.user);
-  useLayoutEffect(() => {
-    if (!navbarRef.current) {
-      return;
-    }
-
-    if (isAuthenticated && !user) {
-      navbarRef.current.logOut();
-    }
-  }, [navbarRef, !user, isAuthenticated]);
-}
-
 function ErrorFallback() {
   const { language, api } = useTypedSelector((state) => state.config);
   const url_support = api?.url_support;
@@ -220,8 +196,7 @@ function InternalNavbar() {
   const navbarRef = useRef<NavbarWebComponent | null>(null);
 
   const version = useNavbarVersion(navbarRef);
-  const { isAuthenticated } = useLoginEffect(navbarRef, version);
-  useLogoutEffect(navbarRef, isAuthenticated);
+  useLoginEffect(navbarRef, version);
   useLanguageEffect(navbarRef, version);
   useThemeEffect(navbarRef, version);
 

ui/src/containers/AlertPage.js

@@ -1,5 +1,5 @@
 //@flow
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { useHistory } from 'react-router';
 import { useLocation } from 'react-router-dom';
@@ -10,7 +10,7 @@ import {
   useFilters,
   useGlobalFilter,
 } from 'react-table';
-import { EmptyTable, SearchInput, Toggle } from '@scality/core-ui';
+import { EmptyTable, SearchInput } from '@scality/core-ui';
 import { padding, fontSize } from '@scality/core-ui/dist/style/theme';
 import { useAlerts } from './AlertProvider';
 import CircleStatus from '../components/CircleStatus';
@@ -260,7 +260,7 @@ function GlobalFilter({
   );
 }
 
-function ActiveAlertTab({ columns, data, displayLogical, setDisplayLogical }) {
+function ActiveAlertTab({ columns, data }) {
   const query = useQuery();
   const querySearch = query.get('search');
   const querySort = query.get('sort');
@@ -344,22 +344,13 @@ function ActiveAlertTab({ columns, data, displayLogical, setDisplayLogical }) {
           colSpan={visibleColumns.length}
           style={{
             textAlign: 'left',
-            display: 'flex',
-            justifyItems: 'stretch',
-            alignItems: 'center',
           }}
         >
           <GlobalFilter
             preGlobalFilteredRows={preGlobalFilteredRows}
             globalFilter={state.globalFilter}
             setGlobalFilter={setGlobalFilter}
           />
-
-          <Toggle
-            label={'View logical alerts'}
-            toggle={displayLogical}
-            onChange={(evt) => setDisplayLogical(evt.target.checked)}
-          />
         </tr>
 
         {headerGroups.map((headerGroup) => {
@@ -435,21 +426,15 @@ function ActiveAlertTab({ columns, data, displayLogical, setDisplayLogical }) {
 
 export default function AlertPage() {
   const alerts = useAlerts({});
-  const [displayLogical, setDisplayLogical] = useState(false);
   const leafAlerts = useMemo(
     () => alerts?.alerts.filter((alert) => !alert.labels.children) || [],
     [JSON.stringify(alerts?.alerts)],
   );
 
-  const displayedAlerts = useMemo(
-    () => (displayLogical ? alerts?.alerts : leafAlerts) || [],
-    [JSON.stringify(alerts?.alerts), displayLogical],
-  );
-
-  const criticalAlerts = displayedAlerts.filter(
+  const criticalAlerts = leafAlerts.filter(
     (alert) => alert.severity === 'critical',
   );
-  const wariningAlerts = displayedAlerts.filter(
+  const wariningAlerts = leafAlerts.filter(
     (alert) => alert.severity === 'warning',
   );
 
@@ -483,16 +468,14 @@ export default function AlertPage() {
   return (
     <AlertPageContainer>
       <AlertPageHeader
-        activeAlerts={displayedAlerts.length}
+        activeAlerts={leafAlerts.length}
         critical={criticalAlerts.length}
         warning={wariningAlerts.length}
       />
       <AlertContent>
         <ActiveAlertTab
-          data={displayedAlerts}
+          data={leafAlerts}
           columns={columns}
-          displayLogical={displayLogical}
-          setDisplayLogical={setDisplayLogical}
         />
       </AlertContent>
     </AlertPageContainer>

ui/src/ducks/login.js

@@ -4,9 +4,11 @@ import { Effect, call, takeEvery, put, select } from 'redux-saga/effects';
 import * as ApiSalt from '../services/salt/api';
 
 import type { Config } from '../services/api';
-import { apiConfigSelector, logoutAction } from './config';
+import { apiConfigSelector } from './config';
 import { connectSaltApiAction } from './app/salt';
 import { User } from 'oidc-client';
+import { addNotificationErrorAction } from './app/notifications';
+import { intl } from '../translations/IntlGlobalProvider';
 
 // Actions
 const AUTHENTICATE_SALT_API = 'AUTHENTICATE_SALT_API';
@@ -68,7 +70,7 @@ export function* authenticateSaltApi(): Generator<Effect, void, any> {
       }),
     );
   } else {
-    yield put(logoutAction());
+    yield put(addNotificationErrorAction({title: intl.translate('salt_login_error_title'), message: intl.translate('salt_login_error_message')}))
   }
 }
 

ui/src/ducks/login.test.js

@@ -6,6 +6,12 @@ jest.mock('../index.js', () => {
   };
 });
 
+import uuidv1 from 'uuid/v1';
+jest.mock('uuid/v1', () => ({
+  __esModule: true,
+  default: () => 'uuidv1',
+}));
+
 import { call, put } from 'redux-saga/effects';
 import {
   SALT_AUTHENTICATION_FAILED,
@@ -68,6 +74,17 @@ it('Salt authentication failed', () => {
     error: 'error',
   };
 
-  expect(gen.next(result).value).toEqual(put({ type: LOGOUT }));
+  expect(gen.next(result).value).toEqual(
+    put({
+      payload: {
+        message:
+          'Some features of the UI may not work as expected (cluster expansion and displaying nodes IPs). Please try to logout and login again or contact your support if this error persist.',
+        title: 'An error occurred when authenticating on salt API',
+        uid: 'uuidv1',
+        variant: 'danger',
+      },
+      type: 'ADD_NOTIFICATION_ERROR',
+    }),
+  );
   expect(gen.next().done).toEqual(true);
 });

ui/src/translations/en.json

@@ -160,5 +160,7 @@
   "show_cluster_avg": "Show Cluster Average",
   "cluster_avg": "Cluster avg",
   "dashboard": "Dashboard",
-  "required_fields": "* Required fields"
+  "required_fields": "* Required fields",
+  "salt_login_error_title": "An error occurred when authenticating on salt API",
+  "salt_login_error_message": "Some features of the UI may not work as expected (cluster expansion and displaying nodes IPs). Please try to logout and login again or contact your support if this error persist."
 }

ui/src/translations/fr.json

@@ -160,6 +160,8 @@
   "show_cluster_avg": "Montrer la moyenne du Cluster",
   "cluster_avg": "Cluster moy",
   "dashboard": "Dashboard",
-  "required_fields": "* Champs requis"
+  "required_fields": "* Champs requis",
+  "salt_login_error_title": "L'authentification aupres de Salt a échoué",
+  "salt_login_error_message": "Certaines fonctionalité de l'interface peuvent ne pas fonctionner (deploiement d'un nouveau node ou affichage des IPs d'un node). Veuillez essayer de vous deconnecter et de vous reconnecter, ou si l'erreur persiste merci de bien vouloir contacter votre support."
 
 }