Telemetry update

Author: estruyf

.circleci/config.yml

@@ -26,6 +26,23 @@ jobs:
       - persist_to_workspace:
           root: .
           paths: .
+  build_next:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/sp-dev-fx-controls-react
+      - run:
+          name: Stamp beta to package version
+          command: node scripts/update-package-version.js $CIRCLE_SHA1
+      - run:
+          name: Update version number for telemetry
+          command: npm run versionUpdater
+      - run:
+          name: build
+          command: npm run build
+      - persist_to_workspace:
+          root: .
+          paths: .
   test:
     <<: *defaults
     steps:
@@ -113,12 +130,18 @@ workflows:
           filters:
             branches:
               only: dev
-      - test:
+      - build_next:
           requires:
             - build
           filters:
             branches:
               only: dev
+      - test:
+          requires:
+            - build_next
+          filters:
+            branches:
+              only: dev
       - publish_next:
           requires:
             - test

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Releases
 
+## 1.1.0
+
+- Telemetry added
+
 ## 1.0.0
 - **New control**: WebPartTilte control got added.
 - **Enhancement**: ListView control got extended with the ability to specify a set of preselected items.

docs/documentation/docs/about/release-notes.md

@@ -1,5 +1,9 @@
 # Releases
 
+## 1.1.0
+
+- Telemetry added
+
 ## 1.0.0
 - **New control**: WebPartTilte control got added.
 - **Enhancement**: ListView control got extended with the ability to specify a set of preselected items.

gulpfile.js

@@ -2,6 +2,18 @@
 
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
+const fs = require('fs');
+
+// Update the version number in the version.ts file
+gulp.task('versionUpdater', (done) => {
+  const pkgContents = require('./package.json');
+  const filePath = './src/common/appInsights/version.ts';
+  const fileContents = `export const version: string = "{versionPlaceholder}";`;
+  const newContents = fileContents.replace("{versionPlaceholder}", pkgContents.version);
+  console.log(`Updating version number to: ${pkgContents.version}`);
+  fs.writeFileSync(filePath, newContents, { encoding: "utf8" });
+  done();
+});
 
 build.initialize(gulp);
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -10,9 +10,12 @@
     "clean": "gulp clean",
     "test": "gulp test",
     "prepublishOnly": "gulp",
+    "versionUpdater": "gulp versionUpdater",
     "karma": "karma start --circle true"
   },
-  "dependencies": {},
+  "dependencies": {
+    "applicationinsights-js": "1.0.14"
+  },
   "devDependencies": {
     "@microsoft/sp-build-web": "~1.3.0",
     "@microsoft/sp-core-library": "~1.3.0",

src/common/appInsights/index.ts

@@ -0,0 +1,13 @@
+import { AppInsights } from "applicationinsights-js";
+import { version } from './version';
+import {Environment,EnvironmentType} from "@microsoft/sp-core-library";
+
+AppInsights.downloadAndSetup({ instrumentationKey: "9f59b81e-d2ed-411e-a961-8bcf3f7f04d0" });
+
+export function track(componentName: string): void {
+  AppInsights.trackEvent(componentName, {
+    version,
+    debug: DEBUG ? "true" : "false",
+    environment: EnvironmentType[Environment.type]
+  });
+}

src/common/appInsights/version.ts

@@ -0,0 +1 @@
+export const version: string = "1.1.0";

src/controls/fileTypeIcon/FileTypeIcon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { findIndex } from '@microsoft/sp-lodash-subset';
 import { IFileTypeIconProps, ApplicationType, ApplicationIconList, IconType, IconSizes, ImageSize, IImageResult, ICON_GENERIC_16, ICON_GENERIC_48, ICON_GENERIC_96 } from './IFileTypeIcon';
+import * as appInsights from '../../common/appInsights';
 
 const ICON_GENERIC = 'Page';
 const ICON_DEFAULT_SIZE = 'icon16';
@@ -11,6 +12,8 @@ const ICON_DEFAULT_SIZE = 'icon16';
 export class FileTypeIcon extends React.Component<IFileTypeIconProps, {}> {
     constructor(props: IFileTypeIconProps) {
         super(props);
+
+        appInsights.track('ReactFileTypeIcon');
     }
 
     /**

src/controls/listView/ListView.tsx

@@ -6,6 +6,7 @@ import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
 import { IGroupsItems } from './IListView';
+import * as appInsights from '../../common/appInsights';
 
 /**
  * File type icon component
@@ -16,6 +17,8 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   constructor(props: IListViewProps) {
     super(props);
 
+    appInsights.track('ReactListView');
+
     // Initialize state
     this.state = {
       items: []

src/controls/placeholder/PlaceholderComponent.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { IPlaceholderProps } from './IPlaceholderComponent';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import styles from './PlaceholderComponent.module.scss';
+import * as appInsights from '../../common/appInsights';
 
 /**
  * Placeholder component
@@ -13,6 +14,8 @@ export class Placeholder extends React.Component<IPlaceholderProps, {}> {
   constructor(props: IPlaceholderProps) {
     super(props);
 
+    appInsights.track('ReactPlaceholder');
+
     this._handleBtnClick = this._handleBtnClick.bind(this);
   }