ui: migrate analytics and isInternalUser to embedder server

ui/src/core/analytics_impl.ts

@@ -61,7 +61,10 @@ function getReferrer(): string {
 
 // Interface exposed only to core (for the initialize method).
 export interface AnalyticsInternal extends Analytics {
-  initialize(isInternalUser: boolean): void;
+  addDimension(
+    arg: {key: string; value: string} | Promise<{key: string; value: string}>,
+  ): void;
+  initialize(): Promise<void>;
 }
 
 export function initAnalytics(
@@ -88,7 +91,10 @@ const gtagGlobals = window as {} as {
 };
 
 class NullAnalytics implements AnalyticsInternal {
-  initialize(_: boolean) {}
+  addDimension(
+    _arg: {key: string; value: string} | Promise<{key: string; value: string}>,
+  ) {}
+  async initialize() {}
   logEvent(_category: TraceCategories | null, _event: string) {}
   logError(_err: ErrorDetails) {}
   isEnabled(): boolean {
@@ -99,6 +105,8 @@ class NullAnalytics implements AnalyticsInternal {
 class AnalyticsImpl implements AnalyticsInternal {
   private initialized_ = false;
   private readonly analyticsId: string;
+  private readonly dimensions: Array<Promise<{key: string; value: string}>> =
+    [];
 
   constructor(analyticsId: string) {
     this.analyticsId = analyticsId;
@@ -121,10 +129,18 @@ class AnalyticsImpl implements AnalyticsInternal {
     gtagGlobals.gtag('js', new Date());
   }
 
-  // This is callled only after the script that sets isInternalUser loads.
+  addDimension(
+    arg: {key: string; value: string} | Promise<{key: string; value: string}>,
+  ) {
+    if (this.initialized_) {
+      throw new Error('Cannot add analytics dimensions after initialization');
+    }
+    this.dimensions.push(Promise.resolve(arg));
+  }
+
   // It is fine to call updatePath() and log*() functions before initialize().
   // The gtag() function internally enqueues all requests into |dataLayer|.
-  initialize(isInternalUser: boolean) {
+  async initialize() {
     if (this.initialized_) return;
     this.initialized_ = true;
     const script = document.createElement('script');
@@ -133,10 +149,15 @@ class AnalyticsImpl implements AnalyticsInternal {
     script.defer = true;
     document.head.appendChild(script);
     const route = window.location.href;
-    console.log(
-      `GA initialized. route=${route}`,
-      `isInternalUser=${isInternalUser}`,
-    );
+
+    // Await all dimension promises and build a map of extra dimensions.
+    const resolvedDimensions = await Promise.all(this.dimensions);
+    const extraDimensions: Record<string, string> = {};
+    for (const {key, value} of resolvedDimensions) {
+      extraDimensions[key] = value;
+    }
+
+    console.log(`GA initialized. route=${route}`);
     // GA's recommendation for SPAs is to disable automatic page views and
     // manually send page_view events. See:
     // https://developers.google.com/analytics/devguides/collection/gtagjs/pages#manual_pageviews
@@ -148,12 +169,12 @@ class AnalyticsImpl implements AnalyticsInternal {
       page_referrer: getReferrer(),
       send_page_view: false,
       page_title: PAGE_TITLE,
-      perfetto_is_internal_user: isInternalUser ? '1' : '0',
       perfetto_version: VERSION,
       // Release channel (canary, stable, autopush)
       perfetto_channel: getCurrentChannel(),
       // Referrer *if overridden* via the query string else empty string.
       perfetto_referrer_override: getReferrerOverride() ?? '',
+      ...extraDimensions,
     });
 
     gtagGlobals.gtag('event', 'page_view', {

ui/src/core/app_impl.ts

@@ -185,10 +185,12 @@ export class AppImpl implements App {
     return this._isInternalUser;
   }
 
-  set isInternalUser(value: boolean) {
-    localStorage.setItem('isInternalUser', value ? '1' : '0');
-    this._isInternalUser = value;
-    raf.scheduleFullRedraw();
+  setIsInternalUser(promise: Promise<boolean>) {
+    promise.then((value) => {
+      this._isInternalUser = value;
+      localStorage.setItem('isInternalUser', value ? '1' : '0');
+      raf.scheduleFullRedraw();
+    });
   }
 
   get trace(): TraceImpl | undefined {

ui/src/core_plugins/dev.perfetto.ExtensionServers/add_extension_server_modal.ts

@@ -58,11 +58,11 @@ class AddExtensionServerModal {
   );
   private userInput: UserInput;
   private loadedState?: LoadedState;
-  private readonly locked: boolean;
+  private readonly isEmbedderManaged: boolean;
 
   constructor(server?: ExtensionServer, prefill?: ExtensionServer) {
     this.userInput = createInitial(server ?? prefill);
-    this.locked = server?.locked ?? false;
+    this.isEmbedderManaged = server?.origin === 'embedder_managed';
     this.scheduleManifestFetch(
       server?.enabledModules ?? prefill?.enabledModules,
     );
@@ -97,7 +97,7 @@ class AddExtensionServerModal {
         enabledModules,
         enabled: true,
         auth: this.userInput.auth,
-        locked: this.locked,
+        origin: this.isEmbedderManaged ? 'embedder_managed' : 'user_added',
       };
     }
     return {
@@ -106,7 +106,7 @@ class AddExtensionServerModal {
       enabledModules,
       enabled: true,
       auth: this.userInput.auth,
-      locked: this.locked,
+      origin: this.isEmbedderManaged ? 'embedder_managed' : 'user_added',
     };
   }
 
@@ -128,7 +128,7 @@ class AddExtensionServerModal {
         {label: 'HTTPS', icon: 'public'},
       ],
       selectedOption: this.userInput.type === 'github' ? 0 : 1,
-      disabled: this.locked,
+      disabled: this.isEmbedderManaged,
       onOptionSelected: (idx: number) => {
         if (idx === 0 && this.userInput.type !== 'github') {
           this.userInput = {
@@ -153,7 +153,7 @@ class AddExtensionServerModal {
       m(TextInput, {
         placeholder: 'owner/repo (e.g., perfetto-dev/extension-server-test)',
         value: input.repo,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.repo = value;
           this.debouncedFetch();
@@ -163,7 +163,7 @@ class AddExtensionServerModal {
       m(TextInput, {
         placeholder: 'e.g., main',
         value: input.ref,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.ref = value;
           this.debouncedFetch();
@@ -173,7 +173,7 @@ class AddExtensionServerModal {
       m(TextInput, {
         placeholder: '(default: /)',
         value: input.path,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.path = value;
           this.debouncedFetch();
@@ -209,7 +209,7 @@ class AddExtensionServerModal {
         Select,
         {
           value: input.auth.type,
-          disabled: this.locked,
+          disabled: this.isEmbedderManaged,
           onchange: (e: Event) => {
             const value = (e.target as HTMLSelectElement).value;
             input.auth =
@@ -227,7 +227,7 @@ class AddExtensionServerModal {
           placeholder: 'github_pat_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
           type: 'password',
           value: input.auth.pat,
-          disabled: this.locked,
+          disabled: this.isEmbedderManaged,
           onInput: (value: string) => {
             input.auth = {type: 'github_pat', pat: value};
             this.debouncedFetch();
@@ -242,7 +242,7 @@ class AddExtensionServerModal {
       m(TextInput, {
         placeholder: 'https://example.com/path/to/extensions',
         value: input.url,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.url = value;
           this.debouncedFetch();
@@ -284,7 +284,7 @@ class AddExtensionServerModal {
         Select,
         {
           value: input.auth.type,
-          disabled: this.locked,
+          disabled: this.isEmbedderManaged,
           onchange: (e: Event) => {
             const value = (e.target as HTMLSelectElement).value;
             if (value === 'https_basic') {
@@ -321,7 +321,7 @@ class AddExtensionServerModal {
       m(TextInput, {
         placeholder: 'Username',
         value: auth.username,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.auth = {...auth, username: value};
           this.debouncedFetch();
@@ -331,7 +331,7 @@ class AddExtensionServerModal {
         placeholder: 'Password',
         type: 'password',
         value: auth.password,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.auth = {...auth, password: value};
           this.debouncedFetch();
@@ -373,7 +373,7 @@ class AddExtensionServerModal {
         Select,
         {
           value: auth.keyType,
-          disabled: this.locked,
+          disabled: this.isEmbedderManaged,
           onchange: (e: Event) => {
             const keyType = (e.target as HTMLSelectElement).value as
               | 'bearer'
@@ -395,7 +395,7 @@ class AddExtensionServerModal {
         m(TextInput, {
           placeholder: 'Header name',
           value: auth.customHeaderName,
-          disabled: this.locked,
+          disabled: this.isEmbedderManaged,
           onInput: (value: string) => {
             input.auth = {...auth, customHeaderName: value};
             this.debouncedFetch();
@@ -405,7 +405,7 @@ class AddExtensionServerModal {
         placeholder: 'API key',
         type: 'password',
         value: auth.key,
-        disabled: this.locked,
+        disabled: this.isEmbedderManaged,
         onInput: (value: string) => {
           input.auth = {...auth, key: value};
           this.debouncedFetch();

ui/src/core_plugins/dev.perfetto.ExtensionServers/extension_server_unittest.ts

@@ -85,7 +85,7 @@ function testExtServer(
     enabledModules: overrides.enabledModules ?? ['default'],
     enabled: overrides.enabled ?? true,
     auth: {type: 'none'},
-    locked: false,
+    origin: 'user_added',
   };
 }