Fix: Adaptive cards instrumentation (#849)

* add JSON schema click event

* modify tab click function

* modify tab click event

src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx

@@ -5,9 +5,11 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { componentNames, telemetry } from '../../../../telemetry';
+import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
 import { IAdaptiveCardProps } from '../../../../types/adaptivecard';
+import { IQuery } from '../../../../types/query-runner';
 import { getAdaptiveCard } from '../../../services/actions/adaptive-cards-action-creator';
+import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { Monaco } from '../../common';
@@ -59,7 +61,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
 
   public render() {
     const { data, pending } = this.props.card;
-    const { body, queryStatus } = this.props;
+    const { body, queryStatus, sampleQuery } = this.props;
     const classes = classNames(this.props);
 
     if (!body) {
@@ -99,9 +101,9 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
       this.adaptiveCard!.parse(data);
       const renderedCard = this.adaptiveCard!.render();
       return (
-        <Pivot className='pivot-response'>
+        <Pivot className='pivot-response' onLinkClick={(pivotItem) => onPivotItemClick(sampleQuery, pivotItem)}>
           <PivotItem
-            key='card'
+            itemKey='card'
             ariaLabel={translateMessage('card')}
             headerText={'Card'}
             className={classes.cardStyles}
@@ -119,7 +121,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
             />
           </PivotItem>
           <PivotItem
-            key='templateJSON'
+            itemKey='JSON-schema'
             ariaLabel={translateMessage('JSON Schema')}
             headerText={'JSON Schema'}
           >
@@ -138,7 +140,10 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
               iconProps={{
                 iconName: 'copy',
               }}
-              onClick={async () => genericCopy(JSON.stringify(data, null, 4))}
+              onClick={async () => {
+                genericCopy(JSON.stringify(data, null, 4));
+                trackJsonSchemaCopyEvent(sampleQuery)
+              }}
             />
             <Monaco
               language='json'
@@ -154,6 +159,26 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
   }
 }
 
+function onPivotItemClick(query: IQuery | undefined, item?: PivotItem) {
+  if (!item) { return; }
+  const key = item.props.itemKey;
+  if (key) {
+    telemetry.trackTabClickEvent(key, query);
+  }
+}
+
+function trackJsonSchemaCopyEvent(query: IQuery | undefined) {
+  if (!query) {
+    return;
+  }
+  const sanitizedUrl = sanitizeQueryUrl(query.sampleUrl);
+  telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
+    {
+      ComponentName: componentNames.CODE_SNIPPETS_COPY_BUTTON,
+      QuerySignature: `${query.selectedVerb} ${sanitizedUrl}`
+    });
+}
+
 function mapStateToProps(state: any) {
   return {
     card: state.adaptiveCard,

src/app/views/sidebar/Sidebar.tsx

@@ -1,12 +1,12 @@
 import { Pivot, PivotItem } from 'office-ui-fabric-react';
 import React from 'react';
 
-import { componentNames, eventTypes, telemetry } from '../../../telemetry';
+import { telemetry } from '../../../telemetry';
 import History from './history/History';
 import SampleQueries from './sample-queries/SampleQueries';
 
 
-export const Sidebar = ({sampleHeaderText, historyHeaderText}: any) => {
+export const Sidebar = ({ sampleHeaderText, historyHeaderText }: any) => {
   return (
     <div>
       <Pivot onLinkClick={onPivotItemClick}>
@@ -21,26 +21,10 @@ export const Sidebar = ({sampleHeaderText, historyHeaderText}: any) => {
   );
 };
 
-function onPivotItemClick (item?: PivotItem) {
+function onPivotItemClick(item?: PivotItem) {
   if (!item) { return; }
   const key = item.props.itemKey;
   if (key) {
-    trackTabClickEvent(key);
-  }
-}
-
-function trackTabClickEvent(tabKey: string) {
-  switch (tabKey) {
-    case 'history': {
-      telemetry.trackEvent(
-        eventTypes.TAB_CLICK_EVENT,
-        {
-          ComponentName: componentNames.HISTORY_TAB
-        });
-      break;
-    }
-    default: {
-      break;
-    }
+    telemetry.trackTabClickEvent(key);
   }
 }

src/telemetry/component-names.ts

@@ -13,6 +13,7 @@ export const CODE_SNIPPETS_COPY_BUTTON = 'Code snippets copy button';
 export const VIEW_ALL_PERMISSIONS_BUTTON = 'View all permissions button';
 export const EXPORT_HISTORY_ITEM_BUTTON = 'Export history item button';
 export const DELETE_HISTORY_ITEM_BUTTON = 'Delete history item button';
+export const JSON_SCHEMA_COPY_BUTTON = 'JSON schema copy button';
 
 // List items
 export const SAMPLE_QUERY_LIST_ITEM = 'Sample query list item';
@@ -25,12 +26,13 @@ export const ACCESS_TOKEN_TAB = 'Access token tab';
 export const REQUEST_BODY_TAB = 'Request body tab';
 export const CODE_SNIPPETS_TAB = 'Code snippets tab';
 export const ADAPTIVE_CARDS_TAB = 'Adaptive cards tab';
-export const REQUEST_HEADERS_TAB= 'Request headers tab';
+export const REQUEST_HEADERS_TAB = 'Request headers tab';
 export const EXPAND_RESPONSE_TAB = 'Expand response tab';
 export const RESPONSE_PREVIEW_TAB = 'Response preview tab';
 export const RESPONSE_HEADERS_TAB = 'Response headers tab';
 export const TOOLKIT_COMPONENT_TAB = 'Toolkit component tab';
 export const MODIFY_PERMISSIONS_TAB = 'Modify permissions tab';
+export const JSON_SCHEMA_TAB = 'JSON schema tab';
 
 // Dropdowns
 export const VERSION_CHANGE_DROPDOWN = 'Version change dropdown';

src/telemetry/telemetry.ts

@@ -47,18 +47,20 @@ class Telemetry implements ITelemetry {
     return withAITracking(this.reactPlugin, ComponentToTrack, componentName);
   }
 
-  public trackTabClickEvent(tabKey: string, sampleQuery: IQuery) {
-    const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
+  public trackTabClickEvent(tabKey: string, sampleQuery: IQuery | null = null) {
     let componentName = tabKey.replace('-', ' ');
     componentName = `${componentName.charAt(0).toUpperCase()}${componentName.slice(1)} tab`;
-    telemetry.trackEvent(TAB_CLICK_EVENT,
-    {
-      ComponentName: componentName,
-      QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedUrl}`
-    });
+    const properties: { [key: string]: any } = {
+      ComponentName: componentName
+    }
+    if (sampleQuery) {
+      const sanitizedUrl = sanitizeQueryUrl(sampleQuery.sampleUrl);
+      properties.QuerySignature = `${sampleQuery.selectedVerb} ${sanitizedUrl}`;
+    }
+    telemetry.trackEvent(TAB_CLICK_EVENT, properties);
   }
 
-  public trackLinkClickEvent(url: string, componentName: string)  {
+  public trackLinkClickEvent(url: string, componentName: string) {
     telemetry.trackEvent(LINK_CLICK_EVENT, { ComponentName: componentName });
     validateExternalLink(url, componentName);
   }