feat(ui): add grafana faro on UI (#149)

* feat(ui): add grafana faro sdk (WIP) * faet(ui): add apiKey fro grafana tracking * feat(ui): add cookie consent to manage tracking choice * feat(ui): fix text and style of CookieConsent component * feat(ui): fix button style * feat(ui): add margin-right
radicalbit · Jul 31, 2024 · eb440ec · eb440ec
1 parent 40c8732
commit eb440ec
Show file tree

Hide file tree

Showing 4 changed files with 417 additions and 12 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -15,28 +15,30 @@
   },
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@grafana/faro-react": "^1.8.2",
     "@radicalbit/formbit": "1.0.0",
     "@radicalbit/radicalbit-design-system": "1.1.0",
     "@reduxjs/toolkit": "^2.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "ace-builds": "^1.33.2",
     "axios": "1.7.2",
     "buffer": "^6.0.3",
-    "echarts-for-react": "^3.0.2",
     "echarts": "^5.5.0",
+    "echarts-for-react": "^3.0.2",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "papaparse": "5.4.1",
     "query-string": "^9.0.0",
+    "react": "^18.2.0",
     "react-ace": "^11.0.1",
+    "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.23.0",
     "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
     "react-virtuoso": "^4.7.11",
-    "react": "^18.2.0",
-    "vite-plugin-svgr": "^4.2.0",
     "vite": "^5.2.0",
+    "vite-plugin-svgr": "^4.2.0",
     "yup": "^1.4.0"
   },
   "devDependencies": {

diff --git a/ui/src/container/app/index.jsx b/ui/src/container/app/index.jsx
@@ -7,14 +7,15 @@ import { actions as layoutActions, selectors as layoutSelectors } from '@State/l
 import '@Styles/index.less';
 import '@Styles/tailwind.less';
 import { Layout } from '@radicalbit/radicalbit-design-system';
+import CookieConsent from 'react-cookie-consent';
 import { useDispatch, useSelector } from 'react-redux';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { createRoutes } from '../layout';
 import { useLayoutProvider } from '../layout/layout-provider';
+import BottomMenu from './bottom-menu';
 import MainHeaderContentSwitch from './content-switch/header';
 import SecondaryContentSwitch from './content-switch/secondary-column/content';
 import SecondaryHeaderContentSwitch from './content-switch/secondary-column/header';
-import BottomMenu from './bottom-menu';
 
 export default function App() {
   const dispatch = useDispatch();
@@ -57,6 +58,10 @@ export default function App() {
     navigate('/');
   };
 
+  const handleOnAccept = () => {
+    window.location.reload();
+  };
+
   return (
     <>
 
@@ -96,6 +101,30 @@ export default function App() {
       />
 
       <ModalsProvider />
+
+      <CookieConsent
+        buttonClasses="ant-btn ant-btn-primary m-button px-8"
+        buttonText="Allow anonymous"
+        buttonWrapperClasses="flex gap-8 mr-5"
+        cookieName="rbit-tracking"
+        declineButtonClasses="ant-btn ant-btn-primary-light m-button px-16"
+        declineButtonText="Do not allow"
+        disableButtonStyles
+        enableDeclineButton
+        expires={365}
+        location="bottom"
+        onAccept={handleOnAccept}
+        style={{ alignItems: 'center' }}
+      >
+        <h3>We Value Your Privacy</h3>
+
+        <p>
+          We collect anonymous usage data to improve our software. This information helps us understand how the software is used and identify areas for improvement.
+          <br />
+          No personally identifiable information is collected.
+        </p>
+
+      </CookieConsent>
     </>
   );
 }
diff --git a/ui/src/main.jsx b/ui/src/main.jsx
@@ -1,11 +1,15 @@
+import { initializeFaro, withFaroRouterInstrumentation } from '@grafana/faro-react';
 import React, { StrictMode, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { store } from './store/configureStore';
-import { modelsRoutes } from './container/models/routes';
-import App from './container/app';
+import { getCookieConsentValue } from 'react-cookie-consent';
 import { notFoundRoute } from './components/ErrorPage';
+import App from './container/app';
+import { modelsRoutes } from './container/models/routes';
+import { store } from './store/configureStore';
+
+const enableGrafanaTracking = getCookieConsentValue('rbit-tracking');
 
 const router = createBrowserRouter([
   {
@@ -18,12 +22,27 @@ const router = createBrowserRouter([
   },
 ]);
 
+if (enableGrafanaTracking === 'true') {
+  initializeFaro({
+    // required: the URL of the Grafana collector
+    url: 'https://telemetry.oss.radicalbit.ai',
+    apiKey: 'rbitoss-JpIYMVC677edETUbJN9Me3iLS7ngGaE2RYLzQWCOYVljUJh5JJk5o2FE',
+
+    // required: the identification label of your application
+    app: {
+      name: 'radicalbit-ai-monitoring',
+    },
+  });
+}
+
+const browserRouter = (enableGrafanaTracking === 'true') ? withFaroRouterInstrumentation(router) : router;
+
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <Provider store={store}>
       <Suspense fallback={<div />}>
         <StrictMode>
-          <RouterProvider router={router} />
+          <RouterProvider router={browserRouter} />
         </StrictMode>
       </Suspense>
     </Provider>