Add application insights for frontend

Author: MuhammadUsama-afk-equinor

.github/workflows/frontend_lint_and_test.yml

@@ -33,6 +33,7 @@ jobs:
       - run: npm test
         env:
           PORT: 3001
+          REACT_APP_AI_CONNECTION_STRING: ""
           REACT_APP_BACKEND_URL: https://localhost:8000
           REACT_APP_BACKEND_API_SCOPE: api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
           REACT_APP_FRONTEND_URL: http://localhost:3001

docker-compose.yml

@@ -6,6 +6,7 @@ services:
     ports:
       - "3001:3001"
     environment:
+      - REACT_APP_AI_CONNECTION_STRING= 
       - REACT_APP_BACKEND_URL=http://localhost:8000
       - REACT_APP_BACKEND_API_SCOPE=api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
       - REACT_APP_FRONTEND_URL=http://localhost:3001

frontend/.env.example

@@ -1,4 +1,5 @@
 PORT=3001
+REACT_APP_AI_CONNECTION_STRING=""
 REACT_APP_BACKEND_URL=https://localhost:8000
 REACT_APP_BACKEND_API_SCOPE=api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation
 REACT_APP_FRONTEND_URL=http://localhost:3001

frontend/package-lock.json

@@ -9,6 +9,7 @@
         "@equinor/eds-core-react": "^0.20.4",
         "@equinor/eds-icons": "^0.18.0",
         "@equinor/eds-tokens": "^0.7.1",
+        "@microsoft/applicationinsights-web": "^3.0.7",
         "@microsoft/signalr": "^7.0.12",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",

frontend/package.json

@@ -39,6 +39,7 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     --></body>
     <script>
+        window.REACT_APP_AI_CONNECTION_STRING = '${REACT_APP_AI_CONNECTION_STRING}'
         window.REACT_APP_BACKEND_URL = '${REACT_APP_BACKEND_URL}'
         window.REACT_APP_BACKEND_API_SCOPE = '${REACT_APP_BACKEND_API_SCOPE}'
         window.REACT_APP_FRONTEND_URL = '${REACT_APP_FRONTEND_URL}'

frontend/public/index.html

@@ -1,6 +1,7 @@
 #!/bin/bash
 # Substitute environment variables in the index.html file using the values in the current container environment
 envsubst '
+  ${REACT_APP_AI_CONNECTION_STRING}
   ${REACT_APP_BACKEND_URL}
   ${REACT_APP_BACKEND_API_SCOPE}
   ${REACT_APP_FRONTEND_URL}

frontend/run_nginx.sh

@@ -1,3 +1,4 @@
+import { ApplicationInsights } from '@microsoft/applicationinsights-web'
 import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react'
 import { AssetSelectionPage } from 'components/Pages/AssetSelectionPage/AssetSelectionPage'
 import { FlotillaSite } from 'components/Pages/FlotillaSite'
@@ -11,6 +12,18 @@ import { InstallationProvider } from 'components/Contexts/InstallationContext'
 import { AuthProvider } from 'components/Contexts/AuthProvider'
 import { SignalRProvider } from 'components/Contexts/SignalRContext'
 import { RobotProvider } from 'components/Contexts/RobotContext'
+import { config } from 'config'
+
+const appInsights = new ApplicationInsights({
+    config: {
+        connectionString: config.AI_CONNECTION_STRING,
+    },
+})
+
+if (config.AI_CONNECTION_STRING.length > 0) {
+    appInsights.loadAppInsights()
+    appInsights.trackPageView()
+}
 
 const App = () => (
     <InstallationProvider>

frontend/src/App.tsx

@@ -18,6 +18,7 @@ const getEnvVariable = (name: string): string => {
 }
 
 export const config = {
+    AI_CONNECTION_STRING: getEnvVariable('REACT_APP_AI_CONNECTION_STRING'),
     BACKEND_URL: getEnvVariable('REACT_APP_BACKEND_URL'),
     BACKEND_API_SCOPE: getEnvVariable('REACT_APP_BACKEND_API_SCOPE'),
     BACKEND_API_SIGNALR_URL: getEnvVariable('REACT_APP_BACKEND_URL') + '/hub',

frontend/src/config.ts

@@ -22,6 +22,7 @@ spec:
       environmentConfig:
         - environment: dev
           variables:
+            REACT_APP_AI_CONNECTION_STRING: ""
             REACT_APP_BACKEND_URL: "https://backend-flotilla-dev.playground.radix.equinor.com"
             REACT_APP_BACKEND_API_SCOPE: "api://ea4c7b92-47b3-45fb-bd25-a8070f0c495c/user_impersonation"
             REACT_APP_FRONTEND_URL: "https://frontend-flotilla-dev.playground.radix.equinor.com"