chore: add tracking to the performance tab COMPASS-4899 (#4909)

Add tracking to the performance tab

Author: lerouxb

package-lock.json

@@ -29,10 +29,12 @@
   "license": "SSPL",
   "peerDependencies": {
     "@mongodb-js/compass-components": "^1.14.0",
+    "@mongodb-js/compass-logging": "^1.2.0",
     "react": "^17.0.2"
   },
   "dependencies": {
-    "@mongodb-js/compass-components": "^1.14.0"
+    "@mongodb-js/compass-components": "^1.14.0",
+    "@mongodb-js/compass-logging": "^1.2.0"
   },
   "devDependencies": {
     "@mongodb-js/mocha-config-compass": "^1.3.1",

packages/compass-serverstats/package.json

@@ -1,8 +1,10 @@
 const timer = require('d3-timer');
 const React = require('react');
 const PropTypes = require('prop-types');
+const { createLoggerAndTelemetry } = require('@mongodb-js/compass-logging');
 const Actions = require('../actions');
 const DBErrorStore = require('../stores/dberror-store');
+const { track } = createLoggerAndTelemetry('COMPASS-PERFORMANCE-UI');
 
 // const debug = require('debug')('mongodb-compass:server-stats:current-op-component');
 
@@ -92,6 +94,7 @@ class CurrentOpComponent extends React.Component {
    * @param {Object} data - The row data.
    */
   showOperationDetails(data) {
+    track('CurrentOp showOperationDetails');
     Actions.showOperationDetails(data);
   }
 

packages/compass-serverstats/src/components/current-op-component.jsx

@@ -1,6 +1,8 @@
 const React = require('react');
 const Actions = require('../actions');
 const { Button, Icon } = require('@mongodb-js/compass-components');
+const { createLoggerAndTelemetry } = require('@mongodb-js/compass-logging');
+const { track } = createLoggerAndTelemetry('COMPASS-PERFORMANCE-UI');
 
 // const debug = require('debug')('mongodb-compass:server-stats:detailview-component');
 
@@ -37,6 +39,7 @@ class DetailViewComponent extends React.Component {
   }
 
   killOp() {
+    track('DetailView killOp');
     Actions.killOp(this.state.data.opid);
     this.hideOperationDetails();
   }
@@ -45,6 +48,7 @@ class DetailViewComponent extends React.Component {
    * Fire the show operation detail action with the row data.
    */
   hideOperationDetails() {
+    track('DetailView hideOperationDetails');
     Actions.hideOperationDetails();
   }
 

packages/compass-serverstats/src/components/detailview-component.jsx

@@ -1,10 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import d3 from 'd3';
 import { Button, Icon, css, cx, spacing, palette, useDarkMode } from '@mongodb-js/compass-components';
+import { createLoggerAndTelemetry } from '@mongodb-js/compass-logging';
 
 import Actions from '../actions';
 import ServerStatsStore from '../stores/server-stats-graphs-store';
 
+const { track } = createLoggerAndTelemetry('COMPASS-PERFORMANCE-UI');
+
 const serverStatsToolbarStyles = css({
   display: 'flex',
   flexDirection: 'row',
@@ -63,6 +66,12 @@ function ServerStatsToolbar({
   }, []);
 
   const onPlayPauseClicked = useCallback(() => {
+    if (isPaused) {
+      track('Performance Resumed');
+    }
+    else {
+      track('Performance Paused');
+    }
     setPaused(!isPaused)
     Actions.pause();
   }, [ isPaused ]);