Merge pull request #2051 from metabase/instrumentation

Instrumentation

frontend/src/card/card.controllers.js

@@ -133,14 +133,17 @@ CardControllers.controller('CardDetail', [
             onBeginEditing: function() {
                 isEditing = true;
                 renderAll();
+                MetabaseAnalytics.trackEvent('QueryBuilder', 'Edit Begin');
             },
             onCancelEditing: function() {
                 // reset back to our original card
                 isEditing = false;
                 setCard(originalCard, {resetDirty: true});
+                MetabaseAnalytics.trackEvent('QueryBuilder', 'Edit Cancel');
             },
             onRestoreOriginalQuery: function () {
                 setCard(originalCard, {resetDirty: true});
+                MetabaseAnalytics.trackEvent('QueryBuilder', 'Restore Original');
             },
             cardIsNewFn: cardIsNew,
             cardIsDirtyFn: cardIsDirty
@@ -373,6 +376,7 @@ CardControllers.controller('CardDetail', [
                 isShowingTutorial = false;
                 updateUrl();
                 renderAll();
+                MetabaseAnalytics.trackEvent('QueryBuilder', 'Tutorial Close');
             }
         }
 
@@ -989,6 +993,7 @@ CardControllers.controller('CardDetail', [
 
                 if (isShowingTutorial) {
                     setSampleDataset();
+                    MetabaseAnalytics.trackEvent('QueryBuilder', 'Tutorial Start');
                 }
             } catch (error) {
                 console.log('error getting database list', error);

frontend/src/dashboard/components/AddSeriesModal.jsx

@@ -6,6 +6,7 @@ import Icon from "metabase/components/Icon.jsx";
 import Tooltip from "metabase/components/Tooltip.jsx";
 import CheckBox from "metabase/components/CheckBox.jsx";
 
+import MetabaseAnalytics from "metabase/lib/analytics";
 import Query from "metabase/lib/query";
 
 import visualizations from "metabase/visualizations";
@@ -13,6 +14,7 @@ import visualizations from "metabase/visualizations";
 import _ from "underscore";
 import cx from "classnames";
 
+
 function getQueryColumns(card, databases) {
     let dbId = card.dataset_query.database;
     if (card.dataset_query.type !== "query") {
@@ -37,7 +39,7 @@ export default class AddSeriesModal extends Component {
             badCards: {}
         };
 
-        _.bindAll(this, "onSearchChange", "onDone", "filteredCards", "onRemoveSeries")
+        _.bindAll(this, "onSearchChange", "onSearchFocus", "onDone", "filteredCards", "onRemoveSeries")
     }
 
     static propTypes = {
@@ -64,6 +66,10 @@ export default class AddSeriesModal extends Component {
         }
     }
 
+    onSearchFocus() {
+        MetabaseAnalytics.trackEvent("Dashboard", "Edit Series Modal", "search");
+    }
+
     onSearchChange(e) {
         this.setState({ searchValue: e.target.value.toLowerCase() });
     }
@@ -87,15 +93,21 @@ export default class AddSeriesModal extends Component {
                         state: null,
                         series: this.state.series.concat(card)
                     });
+
+                    MetabaseAnalytics.trackEvent("Dashboard", "Add Series", card.display+", success");
                 } else {
                     this.setState({
                         state: "incompatible",
                         badCards: { ...this.state.badCards, [card.id]: true }
                     });
                     setTimeout(() => this.setState({ state: null }), 2000);
+
+                    MetabaseAnalytics.trackEvent("Dashboard", "Add Series", card.dataset_query.type+", "+card.display+", fail");
                 }
             } else {
                 this.setState({ series: this.state.series.filter(c => c.id !== card.id) });
+
+                MetabaseAnalytics.trackEvent("Dashboard", "Remove Series");
             }
         } catch (e) {
             console.error("onCardChange", e);
@@ -109,6 +121,7 @@ export default class AddSeriesModal extends Component {
 
     onRemoveSeries(card) {
         this.setState({ series: this.state.series.filter(c => c.id !== card.id) });
+        MetabaseAnalytics.trackEvent("Dashboard", "Remove Series");
     }
 
     onDone() {
@@ -117,6 +130,7 @@ export default class AddSeriesModal extends Component {
             attributes: { series: this.state.series }
         });
         this.props.onClose();
+        MetabaseAnalytics.trackEvent("Dashboard", "Edit Series Modal", "done");
     }
 
     filteredCards() {
@@ -214,13 +228,13 @@ export default class AddSeriesModal extends Component {
                     </div>
                     <div className="flex-no-shrink pl4 pb4 pt1">
                         <button className="Button Button--primary" onClick={this.onDone}>Done</button>
-                        <button className="Button Button--borderless" onClick={this.props.onClose}>Cancel</button>
+                        <button data-metabase-event={"Dashboard;Edit Series Modal;cancel"} className="Button Button--borderless" onClick={this.props.onClose}>Cancel</button>
                     </div>
                 </div>
                 <div className="border-left flex flex-column" style={{width: 370, backgroundColor: "#F8FAFA", borderColor: "#DBE1DF" }}>
                     <div className="flex-no-shrink border-bottom flex flex-row align-center" style={{ borderColor: "#DBE1DF" }}>
                         <Icon className="ml2" name="search" width={16} height={16} />
-                        <input className="h4 input full pl1" style={{ border: "none", backgroundColor: "transparent" }} type="search" placeholder="Search for a question" onChange={this.onSearchChange}/>
+                        <input className="h4 input full pl1" style={{ border: "none", backgroundColor: "transparent" }} type="search" placeholder="Search for a question" onFocus={this.onSearchFocus} onChange={this.onSearchChange}/>
                     </div>
                     <LoadingAndErrorWrapper className="flex flex-full" loading={!filteredCards} error={error} noBackground>
                     { () =>

frontend/src/query_builder/QueryHeader.jsx

@@ -13,6 +13,7 @@ import QueryModeToggle from './QueryModeToggle.jsx';
 import QuestionSavedModal from 'metabase/components/QuestionSavedModal.jsx';
 import SaveQuestionModal from 'metabase/components/SaveQuestionModal.jsx';
 
+import MetabaseAnalytics from "metabase/lib/analytics";
 import Query from "metabase/lib/query";
 
 import cx from "classnames";
@@ -101,6 +102,7 @@ export default React.createClass({
     onDelete: async function () {
         await this.props.cardApi.delete({ 'cardId': this.props.card.id }).$promise;
         this.onGoBack();
+        MetabaseAnalytics.trackEvent("QueryBuilder", "Delete");
     },
 
     onFollowBreadcrumb: function() {
@@ -233,7 +235,7 @@ export default React.createClass({
         if (!this.props.cardIsNewFn() && !this.props.isEditing) {
             // simply adding an existing saved card to a dashboard, so show the modal to do so
             buttonSections.push([
-                <span className="cursor-pointer text-brand-hover" onClick={() => this.setState({ modal: "add-to-dashboard" })}>
+                <span data-metabase-event={"QueryBuilder;AddToDash Modal;normal"} className="cursor-pointer text-brand-hover" onClick={() => this.setState({ modal: "add-to-dashboard" })}>
                     <Icon name="addtodash" width="16px" height="16px" />
                 </span>
             ]);
@@ -244,7 +246,7 @@ export default React.createClass({
                     key="addtodashsave"
                     ref="addToDashSaveModal"
                     triggerClasses="h4 px1 text-grey-4 text-brand-hover text-uppercase"
-                    triggerElement={<span className="text-brand-hover"><Icon name="addtodash" width="16px" height="16px" /></span>}
+                    triggerElement={<span data-metabase-event={"QueryBuilder;AddToDash Modal;pre-save"} className="text-brand-hover"><Icon name="addtodash" width="16px" height="16px" /></span>}
                 >
                     <SaveQuestionModal
                         card={this.props.card}

frontend/src/tutorial/Tutorial.jsx

@@ -7,6 +7,8 @@ import Portal from "./Portal.jsx";
 import PageFlag from "./PageFlag.jsx";
 import TutorialModal from "./TutorialModal.jsx";
 
+import MetabaseAnalytics from "metabase/lib/analytics";
+
 import _ from "underscore";
 
 export function qs(selector) {
@@ -90,6 +92,7 @@ export default class Tutorial extends Component {
     next() {
         if (this.state.step + 1 === this.props.steps.length) {
             this.close();
+            MetabaseAnalytics.trackEvent('QueryBuilder', 'Tutorial Finish');
         } else {
             this.setStep(this.state.step + 1);
         }
@@ -129,6 +132,7 @@ export default class Tutorial extends Component {
             step,
             stepTimeout: setTimeout(() => this.setState({ stepTimeout: null }), STEP_WARNING_TIMEOUT)
         });
+        MetabaseAnalytics.trackEvent('QueryBuilder', 'Tutorial Step', step);
     }
 
     close() {

frontend/src/visualizations/components/LegendHeader.jsx

@@ -107,7 +107,7 @@ class LegendItem extends Component {
 }
 
 const AddSeriesItem = ({ onAddSeries, showTitles }) =>
-    <a className={cx(styles.AddSeriesItem, "h3 ml1 mr2 cursor-pointer flex align-center text-brand-hover")} onClick={onAddSeries}>
+    <a data-metabase-event={"Dashboard;Edit Series Modal;open"} className={cx(styles.AddSeriesItem, "h3 ml1 mr2 cursor-pointer flex align-center text-brand-hover")} onClick={onAddSeries}>
         <span className="flex-no-shrink circular bordered border-brand flex layout-centered" style={{ width: 20, height: 20, marginRight: 8 }}>
             <Icon className="text-brand" name="add" width={10} height={10} />
         </span>