Merge branch 'TMSS-Grafana-Front-End-Only-P2' into 'master'

Tmss grafana front end only p2

See merge request !1315

SAS/TMSS/frontend/tmss_webapp/src/App.js

 import { Component } from 'react';
 import { Redirect, BrowserRouter as Router  } from 'react-router-dom';
-
 import classNames from 'classnames';
 import AppTopbar from './layout/components/AppTopbar';
 import AppMenu from './layout/components/AppMenu';
@@ -10,6 +9,7 @@ import handleResponse from "./response.handler"
 import 'primeicons/primeicons.css';
 import 'primereact/resources/primereact.css';
 import 'primereact/resources/themes/nova/theme.css';
+import { withFaroProfiler ,faro} from '@grafana/faro-react';
 import './layout/layout.scss';
 import 'primeflex/primeflex.css';
 import './App.scss';
@@ -105,6 +105,7 @@ class App extends Component {
 
 
     onMenuItemClick(event) {
+        faro?.api?.pushEvent('App onMenuItemClick');
         this.setState({ currentMenu: event.item.label, currentPath: event.item.path, isBreadCrumbVisible: event.item.isBreadCrumbVisible, isDateTimeVisible: event.item.isDateTimeVisible });
     }
 
@@ -124,6 +125,7 @@ class App extends Component {
     logout() {
         Auth.logout();
         this.setState({ redirect: "/login", isLogin: false });
+        faro?.api?.pushEvent('Logout');
     }
 
     /**
@@ -269,4 +271,4 @@ class App extends Component {
     }
 }
 
-export default handleResponse(App);
\ No newline at end of file
+export default handleResponse(withFaroProfiler(App));
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js

@@ -2,7 +2,7 @@ import AuthService from "../services/auth.service";
 import AuthStore from "./auth.store";
 import PermissionStackUtil from './permission.stack.handler';
 import axios from "axios"
-
+import {faro} from  '@grafana/faro-react';
 /**
  * Global functions to authenticate user and get user details from browser local storage.
  */
@@ -52,6 +52,8 @@ const Auth = {
                 if (Auth.isDebugLoggin) console.log("  // User was a valid KeyCloak user ", currentAuthenticationState)
                 Auth.prevalidatedToken = user.token
                 Auth.isTokenCheckInProgress = false
+
+                
                 return true; // we are still having a valid session.
             }
         } else if (loginType === "Application") {
@@ -83,6 +85,11 @@ const Auth = {
                     if (Auth.isDebugLoggin) console.log("// isAuthenticated : No Valid Token")
                     return false
                 } else {
+
+                    faro?.api?.setUser({
+                        id: user.name,
+                        username: user.name
+                      });
                     if (Auth.isDebugLoggin) console.log("-  isAuthenticated : Valid Existing Token")
                 }
             } else {

SAS/TMSS/frontend/tmss_webapp/src/index.js

 import 'react-app-polyfill/ie11';
-
+import { Route } from 'react-router';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -10,7 +10,7 @@ import { TracingInstrumentation } from '@grafana/faro-web-tracing';
 import { FaroErrorBoundary, getWebInstrumentations, initializeFaro, ReactIntegration, ReactRouterVersion } from '@grafana/faro-react';
 
 
- initializeFaro({
+let faro = initializeFaro({
   url: 'https://faro-collector-prod-eu-west-2.grafana.net/collect/8b2ee2532bfff84be000d24235916b3b',
   app: {
     name: 'TMSS Front-End',
@@ -22,22 +22,30 @@ import { FaroErrorBoundary, getWebInstrumentations, initializeFaro, ReactIntegra
     ...getWebInstrumentations(),
 
     // Tracing Instrumentation is needed if you want to use the React Profiler
-    new TracingInstrumentation(),
-
-    new ReactIntegration()
+    new TracingInstrumentation({ captureConsole: true}),
 
+    new ReactIntegration({
       // Only needed if you want to use the React Router instrumentation
-     
-     
-  ]
+ 
+
+      // Or if you use react-router v4/v5
+      router2: {
+        version: ReactRouterVersion.V5, // or ReactRouterVersion.V4,
+        dependencies: {
+         
+          Route, // Route component imported from react-router package
+        },
+      },
+    }),
+  ],
 });
 
-
+faro.api.pushLog(['Faro was initialized']);
 
 
 ReactDOM.render(
   // <React.StrictMode>
-   <FaroErrorBoundary> <App />  </FaroErrorBoundary> , 
+  <FaroErrorBoundary> <App />  </FaroErrorBoundary>,
   // </React.StrictMode>,
   document.getElementById('root')
 );