feat: integrate analytics

Signed-off-by: Pianist038801 <steven@union.ai>

README.rst

@@ -148,6 +148,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 DISABLE_GA environment variable.
+By default, it's disabled like this: ``DISABLE_GA=true``. If you want to enable it, set it to false. (ex. ``DISABLE_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 || '';
@@ -27,6 +27,10 @@ const STATUS_URL = process.env.STATUS_URL;
 // This should only be used when Admin is also in unsecured mode.
 const DISABLE_AUTH = process.env.DISABLE_AUTH;
 
+// Configure Google Analytics
+const DISABLE_GA = process.env.DISABLE_GA;
+const GA_TRACKING_ID = process.env.GA_TRACKING_ID || 'G-0QW4DJWJ20';
+
 module.exports = {
  ADMIN_API_URL,
  ADMIN_API_USE_SSL,
@@ -36,11 +40,15 @@ module.exports = {
  NODE_ENV,
  PLUGINS_MODULE,
  STATUS_URL,
+ DISABLE_GA,
+ GA_TRACKING_ID,
  processEnv: {
  ADMIN_API_URL,
  BASE_URL,
  CORS_PROXY_PREFIX,
  DISABLE_AUTH,
+ DISABLE_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 { DISABLE_GA, GA_TRACKING_ID } = env;
+
+ if (DISABLE_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/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"