From 0cf5d13f9977deb533eabbef767733d07a71a1cc Mon Sep 17 00:00:00 2001
From: Pravakar Garnayak <pravagar@microsoft.com>
Date: Thu, 25 Apr 2019 17:59:50 -0700
Subject: [PATCH] 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
---
 .../ClientApp/.env.development                |  1 +
 .../ClientApp/.env.production                 |  1 +
 .../ClientApp/public/index.html               | 14 +++++-
 .../components/ContentHeader/ContentHeader.js |  8 +++-
 .../src/components/DetailView/ActionBar.js    | 46 ++++++++++++++++++-
 .../src/components/DetailView/DetailView.js   |  1 +
 .../src/components/sidebar/SideBar.js         |  7 ++-
 .../ClientApp/src/helpers/appinsights.js      |  6 +++
 .../ClientApp/src/helpers/index.js            |  5 +-
 .../ClientApp/src/services/library.service.js | 19 ++++++--
 10 files changed, 96 insertions(+), 12 deletions(-)
 create mode 100644 ServerlessLibraryAPI/ClientApp/.env.development
 create mode 100644 ServerlessLibraryAPI/ClientApp/.env.production
 create mode 100644 ServerlessLibraryAPI/ClientApp/src/helpers/appinsights.js
diff --git a/ServerlessLibraryAPI/ClientApp/.env.development b/ServerlessLibraryAPI/ClientApp/.env.development
new file mode 100644
index 0000000..97dbc56
--- /dev/null
+++ b/ServerlessLibraryAPI/ClientApp/.env.development
@@ -0,0 +1 @@
+REACT_APP_INSTRUMENTATION_KEY=
\ No newline at end of file
diff --git a/ServerlessLibraryAPI/ClientApp/.env.production b/ServerlessLibraryAPI/ClientApp/.env.production
new file mode 100644
index 0000000..061e090
--- /dev/null
+++ b/ServerlessLibraryAPI/ClientApp/.env.production
@@ -0,0 +1 @@
+REACT_APP_INSTRUMENTATION_KEY=d35b5caf-a276-467c-9ac7-f7f7d84ea171
\ No newline at end of file
diff --git a/ServerlessLibraryAPI/ClientApp/public/index.html b/ServerlessLibraryAPI/ClientApp/public/index.html
index 8082ecc..5714b44 100644
--- 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>
diff --git a/ServerlessLibraryAPI/ClientApp/src/components/ContentHeader/ContentHeader.js b/ServerlessLibraryAPI/ClientApp/src/components/ContentHeader/ContentHeader.js
index f51eba7..03eb2bc 100644
--- 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() {
diff --git a/ServerlessLibraryAPI/ClientApp/src/components/DetailView/ActionBar.js b/ServerlessLibraryAPI/ClientApp/src/components/DetailView/ActionBar.js
index 9473982..8e7879e 100644
--- 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>
diff --git a/ServerlessLibraryAPI/ClientApp/src/components/DetailView/DetailView.js b/ServerlessLibraryAPI/ClientApp/src/components/DetailView/DetailView.js
index 2e955e0..d7a2cc2 100644
--- 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}
         />
diff --git a/ServerlessLibraryAPI/ClientApp/src/components/sidebar/SideBar.js b/ServerlessLibraryAPI/ClientApp/src/components/sidebar/SideBar.js
index 8e4ce11..72a27ec 100644
--- 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() {
diff --git a/ServerlessLibraryAPI/ClientApp/src/helpers/appinsights.js b/ServerlessLibraryAPI/ClientApp/src/helpers/appinsights.js
new file mode 100644
index 0000000..2d2361e
--- /dev/null
+++ 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);
+  }
+}
diff --git a/ServerlessLibraryAPI/ClientApp/src/helpers/index.js b/ServerlessLibraryAPI/ClientApp/src/helpers/index.js
index b6a7c18..5addf0b 100644
--- 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";
diff --git a/ServerlessLibraryAPI/ClientApp/src/services/library.service.js b/ServerlessLibraryAPI/ClientApp/src/services/library.service.js
index 82c0e67..9c77c73 100644
--- 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);
 }
