chore(telemetry): telemetry improvements VSCODE-673

package.json

@@ -1313,6 +1313,7 @@
     "@types/chai": "^4.3.20",
     "@types/debug": "^4.1.12",
     "@types/glob": "^7.2.0",
+    "@types/lodash": "^4.17.14",
     "@types/micromatch": "^4.0.9",
     "@types/mkdirp": "^2.0.0",
     "@types/mocha": "^8.2.3",

src/connectionController.ts

@@ -331,7 +331,7 @@ export default class ConnectionController {
     }
   }
 
-  public sendTelemetry(
+  private sendTelemetry(
     newDataService: DataService,
     connectionType: ConnectionTypes
   ): void {
@@ -442,7 +442,7 @@ export default class ConnectionController {
         oidc: {
           ...cloneDeep(connectionOptions.oidc),
           openBrowser: browserAuthCommand
-            ? { command: browserAuthCommand }
+            ? { command: browserAuthCommand as string }
             : async ({ signal, url }): Promise<void> => {
                 try {
                   await openLink(url);

src/explorer/explorerController.ts

@@ -1,38 +1,42 @@
-import * as vscode from 'vscode';
+import type * as vscode from 'vscode';
 
 import type ConnectionController from '../connectionController';
 import { DataServiceEventTypes } from '../connectionController';
 import ExplorerTreeController from './explorerTreeController';
+import { createTrackedTreeView } from '../utils/treeViewHelper';
+import type { TelemetryService } from '../telemetry';
 
 export default class ExplorerController {
-  private _connectionController: ConnectionController;
   private _treeController: ExplorerTreeController;
   private _treeView?: vscode.TreeView<vscode.TreeItem>;
 
-  constructor(connectionController: ConnectionController) {
-    this._connectionController = connectionController;
-    this._treeController = new ExplorerTreeController(connectionController);
+  constructor(
+    private _connectionController: ConnectionController,
+    private _telemetryService: TelemetryService
+  ) {
+    this._treeController = new ExplorerTreeController(
+      this._connectionController
+    );
   }
 
-  createTreeView = (): void => {
+  private createTreeView = (): void => {
     // Remove the listener that called this function.
     this._connectionController.removeEventListener(
       DataServiceEventTypes.CONNECTIONS_DID_CHANGE,
       this.createTreeView
     );
 
     if (!this._treeView) {
-      this._treeView = vscode.window.createTreeView(
+      this._treeView = createTrackedTreeView(
         'mongoDBConnectionExplorer',
-        {
-          treeDataProvider: this._treeController,
-        }
+        this._treeController,
+        this._telemetryService
       );
       this._treeController.activateTreeViewEventHandlers(this._treeView);
     }
   };
 
-  activateConnectionsTreeView(): void {
+  public activateConnectionsTreeView(): void {
     // Listen for a change in connections to occur before we create the tree
     // so that we show the `viewsWelcome` before any connections are added.
     this._connectionController.addEventListener(
@@ -41,7 +45,7 @@ export default class ExplorerController {
     );
   }
 
-  deactivate(): void {
+  public deactivate(): void {
     if (this._treeController) {
       this._treeController.removeListeners();
     }
@@ -52,7 +56,7 @@ export default class ExplorerController {
     }
   }
 
-  refresh(): boolean {
+  public refresh(): boolean {
     if (this._treeController) {
       return this._treeController.refresh();
     }

src/explorer/helpExplorer.ts

@@ -1,23 +1,26 @@
-import * as vscode from 'vscode';
+import type * as vscode from 'vscode';
 import HelpTree from './helpTree';
 import type { TelemetryService } from '../telemetry';
+import { createTrackedTreeView } from '../utils/treeViewHelper';
 
 export default class HelpExplorer {
   _treeController: HelpTree;
   _treeView?: vscode.TreeView<vscode.TreeItem>;
 
-  constructor() {
+  constructor(private _telemetryService: TelemetryService) {
     this._treeController = new HelpTree();
   }
 
-  activateHelpTreeView(telemetryService: TelemetryService): void {
+  activateHelpTreeView(): void {
     if (!this._treeView) {
-      this._treeView = vscode.window.createTreeView('mongoDBHelpExplorer', {
-        treeDataProvider: this._treeController,
-      });
+      this._treeView = createTrackedTreeView(
+        'mongoDBHelpExplorer',
+        this._treeController,
+        this._telemetryService
+      );
       this._treeController.activateTreeViewEventHandlers(
         this._treeView,
-        telemetryService
+        this._telemetryService
       );
     }
   }

src/explorer/playgroundsExplorer.ts

@@ -1,21 +1,22 @@
-import * as vscode from 'vscode';
+import type * as vscode from 'vscode';
 import PlaygroundsTree from './playgroundsTree';
+import type { TelemetryService } from '../telemetry';
+import { createTrackedTreeView } from '../utils/treeViewHelper';
 
 export default class PlaygroundsExplorer {
   private _treeController: PlaygroundsTree;
   private _treeView?: vscode.TreeView<vscode.TreeItem>;
 
-  constructor() {
+  constructor(private _telemetryService: TelemetryService) {
     this._treeController = new PlaygroundsTree();
   }
 
   private createPlaygroundsTreeView = (): void => {
     if (!this._treeView) {
-      this._treeView = vscode.window.createTreeView(
+      this._treeView = createTrackedTreeView(
         'mongoDBPlaygroundsExplorer',
-        {
-          treeDataProvider: this._treeController,
-        }
+        this._treeController,
+        this._telemetryService
       );
       this._treeController.activateTreeViewEventHandlers(this._treeView);
     }

src/mdbExtensionController.ts

@@ -103,10 +103,11 @@ export default class MDBExtensionController implements vscode.Disposable {
     });
     this._languageServerController = new LanguageServerController(context);
     this._explorerController = new ExplorerController(
-      this._connectionController
+      this._connectionController,
+      this._telemetryService
     );
-    this._helpExplorer = new HelpExplorer();
-    this._playgroundsExplorer = new PlaygroundsExplorer();
+    this._helpExplorer = new HelpExplorer(this._telemetryService);
+    this._playgroundsExplorer = new PlaygroundsExplorer(this._telemetryService);
     this._editDocumentCodeLensProvider = new EditDocumentCodeLensProvider(
       this._connectionController
     );
@@ -175,7 +176,7 @@ export default class MDBExtensionController implements vscode.Disposable {
 
   async activate(): Promise<void> {
     this._explorerController.activateConnectionsTreeView();
-    this._helpExplorer.activateHelpTreeView(this._telemetryService);
+    this._helpExplorer.activateHelpTreeView();
     this._playgroundsExplorer.activatePlaygroundsTreeView();
     this._telemetryService.activateSegmentAnalytics();
     this._participantController.createParticipant(this._context);

src/telemetry/telemetryEvents.ts

@@ -627,6 +627,20 @@ export class PresetConnectionEditedTelemetryEvent
   }
 }
 
+/** Reported when the extension side panel is opened. VSCode doesn't expose
+ * a subscribable event for this, so we're inferring it by subscribing to
+ * treeView.onDidChangeVisibility for all the extension treeviews and throttling
+ * the events.
+ */
+export class PanelOpenedTelemetryEvent implements TelemetryEventBase {
+  type = 'Side Panel Opened';
+  properties: {};
+
+  constructor() {
+    this.properties = {};
+  }
+}
+
 export type TelemetryEvent =
   | PlaygroundExecutedTelemetryEvent
   | LinkClickedTelemetryEvent

src/telemetry/telemetryService.ts

@@ -4,6 +4,7 @@ import { config } from 'dotenv';
 import type { DataService } from 'mongodb-data-service';
 import fs from 'fs';
 import { Analytics as SegmentAnalytics } from '@segment/analytics-node';
+import { throttle } from 'lodash';
 
 import type { ConnectionTypes } from '../connectionController';
 import { createLogger } from '../logging';
@@ -14,6 +15,7 @@ import type { ParticipantResponseType } from '../participant/participantTypes';
 import type { TelemetryEvent } from './telemetryEvents';
 import {
   NewConnectionTelemetryEvent,
+  PanelOpenedTelemetryEvent,
   ParticipantResponseFailedTelemetryEvent,
 } from './telemetryEvents';
 
@@ -189,4 +191,12 @@ export class TelemetryService {
       new ParticipantResponseFailedTelemetryEvent(command, errorName, errorCode)
     );
   }
+
+  trackTreeViewActivated: () => void = throttle(
+    () => {
+      this.track(new PanelOpenedTelemetryEvent());
+    },
+    5000,
+    { leading: true, trailing: false }
+  );
 }

src/test/suite/explorer/helpExplorer.test.ts

@@ -16,30 +16,26 @@ suite('Help Explorer Test Suite', function () {
   });
 
   test('tree view should be not created until it is activated', () => {
-    const testHelpExplorer = new HelpExplorer();
-    assert(testHelpExplorer._treeView === undefined);
-    testHelpExplorer.activateHelpTreeView(
+    const testHelpExplorer = new HelpExplorer(
       mdbTestExtension.testExtensionController._telemetryService
     );
+    assert(testHelpExplorer._treeView === undefined);
+    testHelpExplorer.activateHelpTreeView();
     assert(testHelpExplorer._treeView !== undefined);
   });
 
   test('the tree should have 5 help tree items', async () => {
     const testHelpExplorer =
       mdbTestExtension.testExtensionController._helpExplorer;
-    testHelpExplorer.activateHelpTreeView(
-      mdbTestExtension.testExtensionController._telemetryService
-    );
+    testHelpExplorer.activateHelpTreeView();
     const helpTreeItems = await testHelpExplorer._treeController.getChildren();
     assert(helpTreeItems.length === 6);
   });
 
   test('the tree should have an atlas item with a url and atlas icon', async () => {
     const testHelpExplorer =
       mdbTestExtension.testExtensionController._helpExplorer;
-    testHelpExplorer.activateHelpTreeView(
-      mdbTestExtension.testExtensionController._telemetryService
-    );
+    testHelpExplorer.activateHelpTreeView();
     const helpTreeItems = await testHelpExplorer._treeController.getChildren();
     const atlasHelpItem = helpTreeItems[5];
 
@@ -62,9 +58,7 @@ suite('Help Explorer Test Suite', function () {
     const testHelpExplorer =
       mdbTestExtension.testExtensionController._helpExplorer;
 
-    testHelpExplorer.activateHelpTreeView(
-      mdbTestExtension.testExtensionController._telemetryService
-    );
+    testHelpExplorer.activateHelpTreeView();
 
     const stubExecuteCommand = sandbox.fake();
     sandbox.replace(vscode.commands, 'executeCommand', stubExecuteCommand);
@@ -90,9 +84,7 @@ suite('Help Explorer Test Suite', function () {
     const testHelpExplorer =
       mdbTestExtension.testExtensionController._helpExplorer;
 
-    testHelpExplorer.activateHelpTreeView(
-      mdbTestExtension.testExtensionController._telemetryService
-    );
+    testHelpExplorer.activateHelpTreeView();
 
     const stubExecuteCommand = sandbox.fake();
     sandbox.replace(linkHelper, 'openLink', stubExecuteCommand);
@@ -116,9 +108,7 @@ suite('Help Explorer Test Suite', function () {
       'track',
       stubTrackTelemetry
     );
-    testHelpExplorer.activateHelpTreeView(
-      mdbTestExtension.testExtensionController._telemetryService
-    );
+    testHelpExplorer.activateHelpTreeView();
 
     sandbox.replace(vscode.commands, 'executeCommand', sandbox.fake());
     const helpTreeItems = await testHelpExplorer._treeController.getChildren();

src/test/suite/telemetry/telemetryService.test.ts

@@ -24,6 +24,7 @@ import {
   PlaygroundSavedTelemetryEvent,
   SavedConnectionsLoadedTelemetryEvent,
 } from '../../../telemetry';
+import type { SegmentProperties } from '../../../telemetry/telemetryService';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { version } = require('../../../../package.json');
@@ -739,4 +740,40 @@ suite('Telemetry Controller Test Suite', () => {
       ).to.not.be.undefined;
     }
   });
+
+  test('trackTreeViewActivated throttles invocations', async function () {
+    this.timeout(6000);
+
+    const verifyEvent = (call: sinon.SinonSpyCall): void => {
+      const event = call.args[0] as SegmentProperties;
+      expect(event.event).to.equal('Side Panel Opened');
+      expect(event.properties).to.have.keys(['extension_version']);
+      expect(Object.keys(event.properties)).to.have.length(1);
+    };
+
+    expect(fakeSegmentAnalyticsTrack.getCalls()).has.length(0);
+
+    // First time we call track - should be reported immediately
+    testTelemetryService.trackTreeViewActivated();
+    expect(fakeSegmentAnalyticsTrack.getCalls()).has.length(1);
+    verifyEvent(fakeSegmentAnalyticsTrack.getCall(0));
+
+    // Calling track again without waiting - call should be throttled
+    testTelemetryService.trackTreeViewActivated();
+    expect(fakeSegmentAnalyticsTrack.getCalls()).has.length(1);
+
+    // Wait less than the throttle time - call should still be throttled
+    for (let i = 0; i < 4; i++) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      testTelemetryService.trackTreeViewActivated();
+      expect(fakeSegmentAnalyticsTrack.getCalls()).has.length(1);
+    }
+
+    // Wait more than throttle time - 4x1000 + 1100 = 5100 ms, this time the
+    // call should be reported.
+    await new Promise((resolve) => setTimeout(resolve, 1100));
+    testTelemetryService.trackTreeViewActivated();
+    expect(fakeSegmentAnalyticsTrack.getCalls()).has.length(2);
+    verifyEvent(fakeSegmentAnalyticsTrack.getCall(1));
+  });
 });

src/utils/treeViewHelper.ts

@@ -0,0 +1,20 @@
+import * as vscode from 'vscode';
+import type { TelemetryService } from '../telemetry';
+
+export function createTrackedTreeView(
+  viewId: string,
+  provider: vscode.TreeDataProvider<vscode.TreeItem>,
+  telemetryService: TelemetryService
+): vscode.TreeView<vscode.TreeItem> {
+  const result = vscode.window.createTreeView(viewId, {
+    treeDataProvider: provider,
+  });
+
+  result.onDidChangeVisibility((event) => {
+    if (event.visible) {
+      telemetryService.trackTreeViewActivated();
+    }
+  });
+
+  return result;
+}