Added more keypress events tracking.

client/app/scripts/actions/app-actions.js

@@ -2,7 +2,6 @@ import debug from 'debug';
 
 import ActionTypes from '../constants/action-types';
 import { saveGraph } from '../utils/file-utils';
-import { modulo } from '../utils/math-utils';
 import { updateRoute } from '../utils/router-utils';
 import {
   bufferDeltaUpdate,
@@ -25,7 +24,8 @@ import { storageSet } from '../utils/storage-utils';
 import { loadTheme } from '../utils/contrast-utils';
 import {
   availableMetricTypesSelector,
-  selectedMetricTypeSelector,
+  nextPinnedMetricTypeSelector,
+  previousPinnedMetricTypeSelector,
   pinnedMetricSelector,
 } from '../selectors/node-metric';
 import {
@@ -160,15 +160,17 @@ export function unpinMetric() {
   };
 }
 
-export function pinNextMetric(delta) {
+export function pinNextMetric() {
   return (dispatch, getState) => {
-    const state = getState();
-    const metricTypes = availableMetricTypesSelector(state);
-    const currentIndex = metricTypes.indexOf(selectedMetricTypeSelector(state));
-    const nextIndex = modulo(currentIndex + delta, metricTypes.count());
-    const nextMetricType = metricTypes.get(nextIndex);
+    const nextPinnedMetricType = nextPinnedMetricTypeSelector(getState());
+    dispatch(pinMetric(nextPinnedMetricType));
+  };
+}
 
-    dispatch(pinMetric(nextMetricType));
+export function pinPreviousMetric() {
+  return (dispatch, getState) => {
+    const previousPinnedMetricType = previousPinnedMetricTypeSelector(getState());
+    dispatch(pinMetric(previousPinnedMetricType));
   };
 }
 

client/app/scripts/components/app.js

@@ -15,6 +15,7 @@ import { getApiDetails, getTopologies } from '../utils/web-api-utils';
 import {
   focusSearch,
   pinNextMetric,
+  pinPreviousMetric,
   hitBackspace,
   hitEsc,
   unpinMetric,
@@ -30,6 +31,7 @@ import ViewModeSelector from './view-mode-selector';
 import NetworkSelector from './networks-selector';
 import DebugToolbar, { showingDebugToolbar, toggleDebugToolbar } from './debug-toolbar';
 import { getRouter, getUrlState } from '../utils/router-utils';
+import { trackMixpanelEvent } from '../utils/tracking-utils';
 import { availableNetworksSelector } from '../selectors/node-networks';
 import {
   activeTopologyOptionsSelector,
@@ -44,10 +46,11 @@ import {
 
 const keyPressLog = debug('scope:app-key-press');
 
-class App extends React.Component {
 
+class App extends React.Component {
   constructor(props, context) {
     super(props, context);
+
     this.onKeyPress = this.onKeyPress.bind(this);
     this.onKeyUp = this.onKeyUp.bind(this);
   }
@@ -97,16 +100,28 @@ class App extends React.Component {
       keyPressLog('onKeyPress', 'keyCode', ev.keyCode, ev);
       const char = String.fromCharCode(ev.charCode);
       if (char === '<') {
-        dispatch(pinNextMetric(-1));
+        dispatch(pinPreviousMetric());
+        this.trackEvent('scope.metric.pin.previous.keypress', {
+          metricType: this.props.pinnedMetricType
+        });
       } else if (char === '>') {
-        dispatch(pinNextMetric(1));
+        dispatch(pinNextMetric());
+        this.trackEvent('scope.metric.pin.next.keypress', {
+          metricType: this.props.pinnedMetricType
+        });
       } else if (char === 'g') {
         dispatch(setGraphView());
+        this.trackEvent('scope.layout.selector.keypress');
       } else if (char === 't') {
         dispatch(setTableView());
+        this.trackEvent('scope.layout.selector.keypress');
       } else if (char === 'r') {
         dispatch(setResourceView());
+        this.trackEvent('scope.layout.selector.keypress');
       } else if (char === 'q') {
+        this.trackEvent('scope.metric.unpin.keypress', {
+          metricType: this.props.pinnedMetricType
+        });
         dispatch(unpinMetric());
       } else if (char === '/') {
         ev.preventDefault();
@@ -117,6 +132,15 @@ class App extends React.Component {
     }
   }
 
+  trackEvent(eventName, additionalProps = {}) {
+    trackMixpanelEvent(eventName, {
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+      ...additionalProps,
+    });
+  }
+
   render() {
     const { isTableViewMode, isGraphViewMode, isResourceViewMode, showingDetails, showingHelp,
       showingNetworkSelector, showingTroubleshootingMenu } = this.props;
@@ -161,9 +185,11 @@ class App extends React.Component {
 function mapStateToProps(state) {
   return {
     activeTopologyOptions: activeTopologyOptionsSelector(state),
+    currentTopology: state.get('currentTopology'),
     isResourceViewMode: isResourceViewModeSelector(state),
     isTableViewMode: isTableViewModeSelector(state),
     isGraphViewMode: isGraphViewModeSelector(state),
+    pinnedMetricType: state.get('pinnedMetricType'),
     routeSet: state.get('routeSet'),
     searchFocused: state.get('searchFocused'),
     searchQuery: state.get('searchQuery'),
@@ -172,6 +198,7 @@ function mapStateToProps(state) {
     showingTroubleshootingMenu: state.get('showingTroubleshootingMenu'),
     showingNetworkSelector: availableNetworksSelector(state).count() > 0,
     showingTerminal: state.get('controlPipes').size > 0,
+    topologyViewMode: state.get('topologyViewMode'),
     urlState: getUrlState(state)
   };
 }

client/app/scripts/components/metric-selector-item.js

@@ -34,10 +34,10 @@ class MetricSelectorItem extends React.Component {
     const pinnedMetricType = this.props.pinnedMetricType;
 
     if (metricType !== pinnedMetricType) {
-      this.trackEvent('scope.metric.resource.pin');
+      this.trackEvent('scope.metric.selector.pin.click');
       this.props.pinMetric(metricType);
     } else {
-      this.trackEvent('scope.metric.resource.unpin');
+      this.trackEvent('scope.metric.selector.unpin.click');
       this.props.unpinMetric();
     }
   }

client/app/scripts/selectors/node-metric.js

@@ -2,6 +2,7 @@ import { createSelector } from 'reselect';
 import { createMapSelector, createListSelector } from 'reselect-map';
 import { fromJS, Map as makeMap, List as makeList } from 'immutable';
 
+import { modulo } from '../utils/math-utils';
 import { isGraphViewModeSelector, isResourceViewModeSelector } from '../selectors/topology';
 import { RESOURCE_VIEW_METRICS } from '../constants/resources';
 
@@ -54,6 +55,30 @@ export const pinnedMetricSelector = createSelector(
   (availableMetrics, metricType) => availableMetrics.find(m => m.get('label') === metricType)
 );
 
+export const nextPinnedMetricTypeSelector = createSelector(
+  [
+    availableMetricTypesSelector,
+    state => state.get('pinnedMetricType'),
+  ],
+  (metricTypes, pinnedMetricType) => {
+    const currentIndex = metricTypes.indexOf(pinnedMetricType);
+    const nextIndex = modulo(currentIndex + 1, metricTypes.count());
+    return metricTypes.get(pinnedMetricType ? nextIndex : 0);
+  }
+);
+
+export const previousPinnedMetricTypeSelector = createSelector(
+  [
+    availableMetricTypesSelector,
+    state => state.get('pinnedMetricType'),
+  ],
+  (metricTypes, pinnedMetricType) => {
+    const currentIndex = metricTypes.indexOf(pinnedMetricType);
+    const previousIndex = modulo(currentIndex - 1, metricTypes.count());
+    return metricTypes.get(pinnedMetricType ? previousIndex : 0);
+  }
+);
+
 export const selectedMetricTypeSelector = createSelector(
   [
     state => state.get('pinnedMetricType'),

client/app/scripts/utils/tracking-utils.js

@@ -6,6 +6,7 @@ const log = debug('service:tracking');
 export function trackMixpanelEvent(name, props) {
   if (window.mixpanel && process.env.WEAVE_CLOUD) {
     window.mixpanel.track(name, props);
+    log('trackMixpanelEvent', name, props);
   } else {
     log('trackMixpanelEvent', name, props);
   }