Enabled AppInsights integration (#149)

* Enabled AppInsights integration - Filter events are changed as there are new filter categories. - Added open in vs code event. * Included id property in event data * Download count stat on click of deploy and open in vs code link
2019-04-25 17:59:50 -07:00 · 2019-04-25 17:59:50 -07:00 · 0cf5d13f99
--- a/ServerlessLibraryAPI/ClientApp/.env.development
+++ b/ServerlessLibraryAPI/ClientApp/.env.development
@ -0,0 +1 @@
+REACT_APP_INSTRUMENTATION_KEY=
--- a/ServerlessLibraryAPI/ClientApp/.env.production
+++ b/ServerlessLibraryAPI/ClientApp/.env.production
@ -0,0 +1 @@
+REACT_APP_INSTRUMENTATION_KEY=d35b5caf-a276-467c-9ac7-f7f7d84ea171
--- a/ServerlessLibraryAPI/ClientApp/public/index.html
+++ b/ServerlessLibraryAPI/ClientApp/public/index.html
@ -21,7 +21,19 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>ServerlessLibraryAPI</title>
+    <title>Azure Serverless Community Library</title>
+    <script type="text/javascript">
+      var aiInstrumentationKey="%REACT_APP_INSTRUMENTATION_KEY%";
+      if (aiInstrumentationKey !== "")
+      {
+        var appInsights=window.appInsights||function(a){
+            function b(a){c[a]=function(){var b=arguments;c.queue.push(function(){c[a].apply(c,b)})}}var c={config:a},d=document,e=window;setTimeout(function(){var b=d.createElement("script");b.src=a.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js",d.getElementsByTagName("script")[0].parentNode.appendChild(b)});try{c.cookie=d.cookie}catch(a){}c.queue=[];for(var f=["Event","Exception","Metric","PageView","Trace","Dependency"];f.length;)b("track"+f.pop());if(b("setAuthenticatedUserContext"),b("clearAuthenticatedUserContext"),b("startTrackEvent"),b("stopTrackEvent"),b("startTrackPage"),b("stopTrackPage"),b("flush"),!a.disableExceptionTracking){f="onerror",b("_"+f);var g=e[f];e[f]=function(a,b,d,e,h){var i=g&&g(a,b,d,e,h);return!0!==i&&c["_"+f](a,b,d,e,h),i}}return c
+        }({
+            instrumentationKey: aiInstrumentationKey
+        });
+        window.appInsights=appInsights,appInsights.queue&&0===appInsights.queue.length&&appInsights.trackPageView();
+      }
+    </script>
 </head>
  <body>
    <noscript>
--- a/ServerlessLibraryAPI/ClientApp/src/components/ContentHeader/ContentHeader.js
+++ b/ServerlessLibraryAPI/ClientApp/src/components/ContentHeader/ContentHeader.js
@ -8,7 +8,11 @@ import {
  Link as FabricLink
 } from "office-ui-fabric-react";
 import { Link } from "react-router-dom";
-import { paramsToQueryString, queryStringToParams } from "../../helpers";
+import {
+  paramsToQueryString,
+  queryStringToParams,
+  trackEvent
+} from "../../helpers";
 import { registerIcons } from "office-ui-fabric-react";
 import { ReactComponent as ContributionSvg } from "../../assets/contribution.svg";
 import "./ContentHeader.css";
@ -37,6 +41,7 @@ class ContentHeader extends Component {

    this.setState({ filterText: newValue });
    this.props.history.push(paramsToQueryString(params));
+    trackEvent("/filter/change/searchtext", newValue);
  }

  sortbyChanged(newValue) {
@ -47,6 +52,7 @@ class ContentHeader extends Component {
    }
    this.setState({ sortby: newValue });
    this.props.history.push(paramsToQueryString(params));
+    trackEvent("/sortby/change", newValue);
  }

  render() {
--- a/ServerlessLibraryAPI/ClientApp/src/components/DetailView/ActionBar.js
+++ b/ServerlessLibraryAPI/ClientApp/src/components/DetailView/ActionBar.js
@ -1,8 +1,23 @@
 import React, { Component } from "react";
 import { Icon, Link as FabricLink } from "office-ui-fabric-react";
+import { trackEvent } from "../../helpers";
+import { libraryService } from "../../services";
 import "./ActionBar.scss";

 class ActionBar extends Component {
+  constructor(props) {
+    super(props);
+    this.outboundRepoClick = this.outboundRepoClick.bind(this);
+    this.outboundDeployClick = this.outboundDeployClick.bind(this);
+    this.openInVSCodeClick = this.openInVSCodeClick.bind(this);
+    this.trackUserActionEvent = this.trackUserActionEvent.bind(this);
+  }
+
+  outboundDeployClick() {
+    libraryService.updateDownloadCount(this.props.id);
+    this.trackUserActionEvent("/sample/deploy/agree");
+  }
+
  getDeployLink(template) {
    return (
      "https://portal.azure.com/#create/Microsoft.Template/uri/" +
@ -10,10 +25,29 @@ class ActionBar extends Component {
    );
  }

+  outboundRepoClick() {
+    this.trackUserActionEvent("/sample/source");
+  }
+
  getOpenInVSCodeLink(repository) {
    return "vscode://vscode.git/clone?url=" + encodeURIComponent(repository);
  }

+  openInVSCodeClick() {
+    libraryService.updateDownloadCount(this.props.id);
+    this.trackUserActionEvent("/sample/openinvscode");
+  }
+
+  trackUserActionEvent(eventName) {
+    let eventData = {
+      id: this.props.id,
+      repository: this.props.repository,
+      template: this.props.template
+    };
+
+    trackEvent(eventName, eventData);
+  }
+
  render() {
    let { repository, template } = this.props;
    let deployDisabled = false;
@ -28,6 +62,7 @@ class ActionBar extends Component {
            href={this.getDeployLink(template)}
            disabled={deployDisabled}
            target="_blank"
+            onClick={this.outboundDeployClick}
          >
            <div className="action-link-wrapper">
              <Icon iconName="Deploy" className="fabric-icon-link" />
@ -36,7 +71,10 @@ class ActionBar extends Component {
          </FabricLink>
        </div>
        <div className="action-item">
-          <FabricLink href={this.getOpenInVSCodeLink(repository)}>
+          <FabricLink
+            href={this.getOpenInVSCodeLink()}
+            onClick={this.openInVSCodeClick}
+          >
            <div className="action-link-wrapper">
              <Icon iconName="Edit" className="fabric-icon-link" />
              <span className="action-link-text">Edit in VS Code</span>
@ -44,7 +82,11 @@ class ActionBar extends Component {
          </FabricLink>
        </div>
        <div className="action-item">
-          <FabricLink href={repository} target="_blank">
+          <FabricLink
+            href={repository}
+            target="_blank"
+            onClick={this.outboundRepoClick}
+          >
            <div className="action-link-wrapper">
              <Icon iconName="GitHub-12px" className="githubicon" />
              <span className="action-link-text">Open in Github</span>
--- a/ServerlessLibraryAPI/ClientApp/src/components/DetailView/DetailView.js
+++ b/ServerlessLibraryAPI/ClientApp/src/components/DetailView/DetailView.js
@ -59,6 +59,7 @@ class DetailView extends Component {
          dislikes={dislikes}
        />
        <ActionBar
+          id={this.state.sample.id}
          template={this.state.sample.template}
          repository={this.state.sample.repository}
        />
--- a/ServerlessLibraryAPI/ClientApp/src/components/sidebar/SideBar.js
+++ b/ServerlessLibraryAPI/ClientApp/src/components/sidebar/SideBar.js
@ -2,7 +2,11 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import { Checkbox } from "office-ui-fabric-react/lib/index";
-import { paramsToQueryString, queryStringToParams } from "../../helpers";
+import {
+  paramsToQueryString,
+  queryStringToParams,
+  trackEvent
+} from "../../helpers";
 import "./SideBar.css";

 const technologies = [
@ -59,6 +63,7 @@ class SideBar extends Component {

    currentFilters[category] = categoryArray;
    this.setState({ filters: currentFilters }, () => this.ChangeUrl());
+    trackEvent(`/filter/change/${category}`, currentFilters);
  }

  ChangeUrl() {
--- a/ServerlessLibraryAPI/ClientApp/src/helpers/appinsights.js
+++ b/ServerlessLibraryAPI/ClientApp/src/helpers/appinsights.js
@ -0,0 +1,6 @@
+export function trackEvent(eventName, eventData) {
+  let appInsights = window.appInsights;
+  if (typeof appInsights !== "undefined") {
+    appInsights.trackEvent(eventName, eventData);
+  }
+}
--- a/ServerlessLibraryAPI/ClientApp/src/helpers/index.js
+++ b/ServerlessLibraryAPI/ClientApp/src/helpers/index.js
@ -1,2 +1,3 @@
-export * from './handle-response';
-export * from './query-param';
+export * from "./handle-response";
+export * from "./query-param";
+export * from "./appinsights";
--- a/ServerlessLibraryAPI/ClientApp/src/services/library.service.js
+++ b/ServerlessLibraryAPI/ClientApp/src/services/library.service.js
@ -4,7 +4,8 @@ import { useMockApi } from "./index";
 export const libraryService = {
  getAllSamples,
  submitNewSample,
-  updateUserSentimentStats
+  updateUserSentimentStats,
+  updateDownloadCount
 };

 function getAllSamples() {
@ -44,8 +45,16 @@ function updateUserSentimentStats(sentimentPayload) {
      "Content-Type": "application/json"
    }
  };
-  return fetch(
-    "/api/metrics/sentiment",
-    requestOptions
-  ).then(handleResponse);
+  return fetch("/api/metrics/sentiment", requestOptions).then(handleResponse);
+}
+
+function updateDownloadCount(id) {
+  const requestOptions = {
+    method: "PUT",
+    body: '"' + id + '"',
+    headers: {
+      "Content-Type": "application/json"
+    }
+  };
+  return fetch("/api/metrics", requestOptions).then(handleResponse);
 }
				`@ -0,0 +1 @@`
				`REACT_APP_INSTRUMENTATION_KEY=d35b5caf-a276-467c-9ac7-f7f7d84ea171`