Merge pull request #20000 from mozilla/PAY-3472

feat(shared-metrics): Set up Glean frontend metrics for Churn intervention

Author: xlisachan

.circleci/config.yml

@@ -299,12 +299,34 @@ commands:
           name: Wait for Customs
           command: yarn workspace fxa-customs-server start
 
+  ensure-glean-venv:
+    steps:
+      - run:
+          name: Ensure Python venv has pip and glean_parser
+          command: |
+            set -euxo pipefail
+
+            unset PYTHONDONTWRITEBYTECODE
+            export PIP_NO_COMPILE=1
+
+            python3 --version
+            rm -rf .venv
+            python3 -m venv .venv --without-pip
+            . .venv/bin/activate
+
+            curl -sSL https://bootstrap.pypa.io/get-pip.py -o /tmp/get-pip.py
+            python /tmp/get-pip.py --no-compile
+
+            python -m pip install --no-compile --upgrade 'glean_parser~=14.5'
+            python -m pip --version
+
   lint:
     parameters:
       nx_run:
         type: string
         default: run-many
     steps:
+      - ensure-glean-venv
       - run:
           name: Linting
           command: npx nx << parameters.nx_run >> --parallel=1 -t lint
@@ -315,6 +337,7 @@ commands:
         type: string
         default: run-many
     steps:
+      - ensure-glean-venv
       - run:
           name: Pre building shared libraries
           command: NODE_OPTIONS="--max-old-space-size=7168" npx nx run-many -t build --projects=tag:scope:shared:lib --parallel=2 --verbose
@@ -428,6 +451,7 @@ commands:
         type: string
         default: run-many
     steps:
+      - ensure-glean-venv
       - run:
           name: Build
           command: NODE_OPTIONS="--max-old-space-size=7168" npx nx << parameters.nx_run >> -t build --parallel=2 --all --verbose
@@ -712,6 +736,7 @@ jobs:
       - git-checkout
       - restore-workspace
       - gcp-cli/setup
+      - ensure-glean-venv
       - run:
           name: Build shared libs
           command: NODE_OPTIONS="--max-old-space-size=7168" npx nx run-many -t build --projects=tag:scope:shared:lib --parallel=2

apps/payments/api/.env

@@ -57,3 +57,9 @@ GLEAN_CONFIG__APPLICATION_ID=
 GLEAN_CONFIG__VERSION=0.0.0
 GLEAN_CONFIG__CHANNEL='development'
 GLEAN_CONFIG__LOGGER_APP_NAME='fxa-payments-next'
+
+# Glean Client Config
+GLEAN_CLIENT_CONFIG__ENABLED=true
+GLEAN_CLIENT_CONFIG__APPLICATION_ID=
+GLEAN_CLIENT_CONFIG__VERSION=0.0.0
+GLEAN_CLIENT_CONFIG__CHANNEL='development'

apps/payments/next/.env

@@ -110,6 +110,12 @@ GLEAN_CONFIG__APPLICATION_ID=
 GLEAN_CONFIG__CHANNEL='development'
 GLEAN_CONFIG__LOGGER_APP_NAME='fxa-payments-next'
 
+# Glean Client Config
+GLEAN_CLIENT_CONFIG__ENABLED=true
+GLEAN_CLIENT_CONFIG__APPLICATION_ID=
+# GLEAN_CLIENT_CONFIG__VERSION= # Set in next.config.js
+GLEAN_CLIENT_CONFIG__CHANNEL='development'
+
 # CSP Config
 CSP__ACCOUNTS_STATIC_CDN=https://cdn.accounts.firefox.com
 CSP__PAYPAL_API='https://www.sandbox.paypal.com'

apps/payments/next/app/[locale]/layout.tsx

@@ -26,6 +26,12 @@ export default async function RootProviderLayout({
       config={{
         stripePublicApiKey: config.stripePublicApiKey,
         paypalClientId: config.paypal.clientId,
+        glean: {
+          enabled: config.gleanClientConfig.enabled,
+          applicationId: config.gleanClientConfig.applicationId,
+          version: config.gleanClientConfig.version,
+          channel: config.gleanClientConfig.channel,
+        },
         sentry: {
           ...config.sentry, //spread to make sure its a POJO
         },

apps/payments/next/auth.ts

@@ -44,6 +44,7 @@ export const {
           name: profile.displayName,
           email: profile.email,
           image: profile.avatar,
+          metricsEnabled: profile.metricsEnabled ?? true,
         };
       },
       userinfo: {
@@ -71,6 +72,7 @@ export const {
           name: profile.displayName,
           email: profile.email,
           image: profile.avatar,
+          metricsEnabled: profile.metricsEnabled ?? true,
         };
       }
       return {

apps/payments/next/config/index.ts

@@ -19,6 +19,7 @@ import {
   validate,
 } from '@fxa/payments/ui/server';
 import { SP2MapConfig, SP2RedirectConfig } from '@fxa/payments/legacy';
+import { PaymentsGleanClientConfig } from '@fxa/payments/metrics';
 
 class CspConfig {
   @IsUrl()
@@ -140,6 +141,11 @@ export class PaymentsNextConfig extends NestAppRootConfig {
   @IsBoolean()
   featureFlagSubManage!: boolean;
 
+  @Type(() => PaymentsGleanClientConfig)
+  @ValidateNested()
+  @IsDefined()
+  gleanClientConfig!: PaymentsGleanClientConfig;
+
   /**
    * Nextjs Public Environment Variables
    */
@@ -159,6 +165,7 @@ export const config = validate(
   {
     ...process.env,
     GLEAN_CONFIG__VERSION: process.env['GLEAN_CONFIG__VERSION'],
+    GLEAN_CLIENT_CONFIG__VERSION: process.env['GLEAN_CLIENT_CONFIG__VERSION'],
   },
   PaymentsNextConfig
 );

apps/payments/next/next.config.js

@@ -21,6 +21,7 @@ const nextConfig = {
   env: {
     version,
     GLEAN_CONFIG__VERSION: version,
+    GLEAN_CLIENT_CONFIG__VERSION: version,
   },
   distDir: 'build',
   experimental: {
@@ -96,11 +97,11 @@ const nextConfig = {
         headers: [
           {
             key: 'Strict-Transport-Security',
-            value: 'max-age=63072000; includeSubDomains; preload'
-          }
+            value: 'max-age=63072000; includeSubDomains; preload',
+          },
         ],
       },
-    ]
+    ];
   },
 };
 

apps/payments/next/project.json

@@ -5,7 +5,7 @@
   "projectType": "application",
   "targets": {
     "build": {
-      "dependsOn": ["l10n-bundle", "glean-generate"]
+      "dependsOn": ["l10n-bundle", "glean-generate", "payments-metrics:glean-generate-frontend"]
     },
     "dev": {
       "options": {
@@ -39,7 +39,7 @@
     },
     "start": {
       "command": "pm2 start apps/payments/next/pm2.config.js && yarn check:url localhost:3035/__heartbeat__",
-      "dependsOn": ["l10n-bundle", "glean-generate"]
+      "dependsOn": ["l10n-bundle", "glean-generate", "payments-metrics:glean-generate-frontend"]
     },
     "stop": {
       "command": "pm2 stop apps/payments/next/pm2.config.js"

libs/payments/metrics/jest.config.ts

@@ -28,6 +28,7 @@ const config: Config = {
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../../coverage/libs/payments/metrics',
+  setupFilesAfterEnv: ['<rootDir>/test/jest.setup.ts'],
   reporters: [
     'default',
     [

libs/payments/metrics/project.json

@@ -15,11 +15,11 @@
         "assets": ["libs/payments/metrics/*.md"],
         "declaration": true
       },
-      "dependsOn": ["glean-generate"]
+      "dependsOn": ["glean-generate", "glean-generate-frontend"]
     },
     "compile": {
       "command": "tsc -p libs/payments/metrics/tsconfig.json --noEmit",
-      "dependsOn": ["glean-generate"]
+      "dependsOn": ["glean-generate", "glean-generate-frontend"]
     },
     "glean-generate": {
       "dependsOn": ["glean-lint"],
@@ -28,6 +28,13 @@
     "glean-lint": {
       "command": "yarn glean glinter libs/shared/metrics/glean/src/registry/subplat-backend-metrics.yaml"
     },
+    "glean-generate-frontend": {
+      "dependsOn": ["glean-lint-frontend"],
+      "command": "yarn glean translate libs/shared/metrics/glean/src/registry/subplat-frontend-metrics.yaml -f typescript -o libs/payments/metrics/src/lib/glean/__generated__"
+    },
+    "glean-lint-frontend": {
+      "command": "yarn glean glinter libs/shared/metrics/glean/src/registry/subplat-frontend-metrics.yaml"
+    },
     "test-unit": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],