feat: integrate analytics (#244)

* feat: integrate analytics

Signed-off-by: Pianist038801 <[email protected]>

* fix: remove DISABLE_AUTH

Signed-off-by: Pianist038801 <[email protected]>

* fix: typo in the README

Signed-off-by: Pianist038801 <[email protected]>

* fix: analytics configuration

Signed-off-by: Pianist038801 <[email protected]>

Co-authored-by: Pianist038801 <[email protected]>
Signed-off-by: csirius <[email protected]>

README.rst

@@ -167,6 +167,14 @@ a single module, you can specify that one specifically
 (ex. ``localStorage.debug = 'flyte:adminEntity'`` to only see decoded Flyte
 Admin API requests).
 
+============
+Google Analytics
+============
+
+This application makes use of the `react-ga4 <https://github.com/PriceRunner/react-ga4>`_
+libary to include Google Analytics tracking code in a website or app. For all the environments, it is configured using ENABLE_GA environment variable.
+By default, it's enabled like this: ``ENABLE_GA=true``. If you want to disable it, just set it false. (ex. ``ENABLE_GA=false``).
+
 .. _cors-proxying:
 
 ================================

env.js

@@ -8,7 +8,7 @@ const NODE_ENV = process.env.NODE_ENV || 'development';
 
 // If this is unset, API calls will default to the same host used to serve this app
 const ADMIN_API_URL = process.env.ADMIN_API_URL;
-// Use this to create SSL server 
+// Use this to create SSL server
 const ADMIN_API_USE_SSL = process.env.ADMIN_API_USE_SSL || 'http';
 
 const BASE_URL = process.env.BASE_URL || '';
@@ -23,6 +23,10 @@ const PLUGINS_MODULE = process.env.PLUGINS_MODULE;
 // If it has no protocol, it will be treated as relative to window.location.origin
 const STATUS_URL = process.env.STATUS_URL;
 
+// Configure Google Analytics
+const ENABLE_GA = process.env.ENABLE_GA || false;
+const GA_TRACKING_ID = process.env.GA_TRACKING_ID || 'G-0QW4DJWJ20';
+
 module.exports = {
     ADMIN_API_URL,
     ADMIN_API_USE_SSL,
@@ -31,10 +35,14 @@ module.exports = {
     NODE_ENV,
     PLUGINS_MODULE,
     STATUS_URL,
+    ENABLE_GA,
+    GA_TRACKING_ID,
     processEnv: {
         ADMIN_API_URL,
         BASE_URL,
         CORS_PROXY_PREFIX,
+        ENABLE_GA,
+        GA_TRACKING_ID,
         NODE_ENV,
         STATUS_URL
     }

package.json

@@ -58,6 +58,7 @@
     "memory-fs": "^0.4.1",
     "morgan": "^1.8.2",
     "react-flow-renderer": "^9.6.3",
+    "react-ga4": "^1.4.1",
     "react-helmet": "^5.1.3",
     "react-responsive": "^4.1.0",
     "react-transition-group": "^2.3.1",

src/client.tsx

@@ -3,6 +3,7 @@ import 'intersection-observer';
 import 'protobuf';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import ReactGA from 'react-ga4';
 
 const render = (Component: React.FC) => {
     ReactDOM.render(<Component />, document.getElementById('react-app'));
@@ -11,6 +12,12 @@ const render = (Component: React.FC) => {
 const initializeApp = () => {
     const App = require('./components/App/App').App;
 
+    const { ENABLE_GA, GA_TRACKING_ID } = env;
+
+    if (ENABLE_GA != 'false') {
+        ReactGA.initialize(GA_TRACKING_ID as string);
+    }
+
     if (env.NODE_ENV === 'development') {
         // We use style-loader in dev mode, but it causes a FOUC and some initial styling issues
         // so we'll give it time to add the styles before initial render.

src/components/Executions/useNodeExecutionDetails.ts

@@ -1,5 +1,3 @@
-
-
 import { log } from 'common/log';
 import { QueryType } from 'components/data/types';
 import { fetchTaskTemplate } from 'components/Task/taskQueries';
@@ -73,7 +71,7 @@ function createBranchNodeExecutionDetails(
 ): NodeExecutionDetails {
     return {
         displayId: node.id,
-        displayName: "branchNode",
+        displayName: 'branchNode',
         displayType: NodeExecutionDisplayType.BranchNode
     };
 }

src/components/Navigation/VersionDisplayModal.tsx

@@ -1,9 +1,10 @@
 import { Dialog, DialogContent } from '@material-ui/core';
 import Link from '@material-ui/core/Link';
 import { makeStyles, Theme } from '@material-ui/core/styles';
+import * as React from 'react';
 import { ClosableDialogTitle } from 'components/common/ClosableDialogTitle';
 import { useVersion } from 'components/hooks/useVersion';
-import * as React from 'react';
+import { env } from 'common/env';
 
 const { version: platformVersion } = require('../../../package.json');
 
@@ -72,6 +73,8 @@ export const VersionDisplayModal: React.FC<VersionDisplayModalProps> = ({
               )
             : null;
 
+    const { DISABLE_GA } = env;
+
     return (
         <Dialog
             PaperProps={{ className: styles.dialog }}
@@ -108,6 +111,16 @@ export const VersionDisplayModal: React.FC<VersionDisplayModalProps> = ({
                         {adminVersion}
                     </Link>
                 </div>
+                <div className={styles.versionWrapper}>
+                    <span>Google Analytics</span>
+                    <Link
+                        href={`https://github.com/flyteorg/flyteconsole#google-analytics`}
+                        className={styles.version}
+                        target="_blank"
+                    >
+                        {DISABLE_GA === 'false' ? 'Active' : 'Inactive'}
+                    </Link>
+                </div>
                 <div className={styles.link}>Documentation Link:</div>
                 <Link
                     href="https://docs.flyte.org/en/latest/"

yarn.lock

@@ -15778,6 +15778,11 @@ react-focus-lock@^2.1.0:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
+react-ga4@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-1.4.1.tgz#6ee2a2db115ed235b2f2092bc746b4eeeca9e206"
+  integrity sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w==
+
 react-helmet-async@^1.0.2:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.7.tgz#b988fbc3abdc4b704982bb74b9cb4a08fcf062c1"