Enhance the non-PII telemetry capture to improve the user experience (#…

…539)

* Initial commit.

* Bug fixes and enhancements to AI.

* Incorporated PR feedback.

helper/src/components/common.js

@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import {CommandBarButton} from '@fluentui/react'
+import { appInsights } from '../index.js'
 
 export function arrayAdd(array, key) {
     return array.includes(key) ? array : array.concat(key)
@@ -25,12 +26,16 @@ export function CodeBlock({deploycmd, testId, lang, filename, error, hideSave})
     const [ copied, setCopied ] = useState(false)
 
     function copyIt() {
+        //console.log("AI:- Button.Copy." + testId)
+        appInsights.trackEvent({name: "Button.Copy."+ testId});
         navigator.clipboard.writeText(deploycmd)
         setCopied(true)
         setTimeout(() => setCopied(false), 1000)
     }
 
     function downloadIt(){
+        //console.log("AI:- Button.Save." + testId)
+        appInsights.trackEvent({name: "Button.Save."+ testId});
         function dataUrl(data) {return "data:x-application/text," + escape(deploycmd);}
         window.open(dataUrl());
     }

helper/src/components/deployTab.js

@@ -466,7 +466,7 @@ az role assignment create --role "Managed Identity Operator" --assignee-principa
               </Stack.Item>
             </Stack>
 
-            <CodeBlock key="github-auth" lang="shell script" hideSave={true} error={allok ? false : 'Configuration not complete, please correct the tabs with the warning symbol before running'} deploycmd={`# Create resource group, and an identity with contributor access that github can federate
+            <CodeBlock testId={'deploy-github-shellscript'} key="github-auth" lang="shell script" hideSave={true} error={allok ? false : 'Configuration not complete, please correct the tabs with the warning symbol before running'} deploycmd={`# Create resource group, and an identity with contributor access that github can federate
 az group create -l WestEurope -n ${deploy.rg}
 
 app=($(az ad app create --display-name ${ghRepo} --query "[appId,id]" -o tsv | tr ' ' "\\n"))
@@ -489,7 +489,7 @@ gh secret set --repo ${deploy.githubrepo} USER_OBJECT_ID -b $spId
 <Separator></Separator>
 
             <Text style={{marginTop: '20px'}}>Add the following code to a new file in your repos <code>.github/workflows</code> folder, this will call the AKS-Construction reusable workflow.  NOTE: This example creates a manually triggered Action</Text>
-            <CodeBlock  lang="github actions"  deploycmd={`name: Deploy AKS-Construction
+            <CodeBlock testId={'deploy-github-actions'} lang="github actions"  deploycmd={`name: Deploy AKS-Construction
 
 on:
   workflow_dispatch:

helper/src/components/portalnav.js

@@ -109,13 +109,15 @@ export default function PortalNav({ config }) {
   const { tabLabels, defaults, presets } = config
   const [pivotkey, setPivotkey] = useState(Object.keys(tabLabels)[0])
   useAITracking("PortalNav", tabLabels[pivotkey])
-
   const [urlParams, setUrlParams] = useState(new URLSearchParams(window.location.search))
   const [invalidArray, setInvalidArray] = useState(() => Object.keys(defaults).reduce((a, c) => { return { ...a, [c]: [] } }, {}))
   // The selected cards within the sections for the chosen preset, for example { "ops": "normal", "secure": "high" }
   const [selected, setSelected] = useState(initSelected(urlParams.get('preset') || 'defaultOps'))
+  useAITracking("PageNav", selected.preset)
   // The tabValues, for example { "deploy": { "clusterName": "az234"}}
   const [tabValues, setTabValues] = useState(initTabValues(selected, defaults, true))
+  // Field Selections - Used to keep track of the last FieldSelections monitored by App Insights to prevent logging the same entry continuously
+  const [lastAIUpdated, setLastAIUpdated] = useState ({tab: null, field: null})
 
   function initSelected (currentPreset) {
     return {
@@ -169,9 +171,9 @@ export default function PortalNav({ config }) {
 
 
   function updateTabValues(currenttabValues, sections, sectionKey, cardKey) {
-    console.log(`updateTabValues`)
+    //console.log(`updateTabValues`)
     const card_values = sections.find(s => s.key === sectionKey).cards.find(c => c.key === cardKey).values
-    console.log(`updateTabValues: sectionKey=${sectionKey} cardKey=${cardKey}, setting tabs ${JSON.stringify(Object.keys(card_values))}`)
+    //console.log(`updateTabValues: sectionKey=${sectionKey} cardKey=${cardKey}, setting tabs ${JSON.stringify(Object.keys(card_values))}`)
     return Object.keys(card_values).reduce((acc, curr) => {
       return {
         ...acc,
@@ -186,7 +188,7 @@ export default function PortalNav({ config }) {
               val.reduce((a, c) => a === undefined ? (c.page && c.field ? (currenttabValues[c.page][c.field] === c.value ? c.set : undefined) : c.set) : a, undefined)
               :
               val
-            console.log(`updateTabValues: setting tab=${curr}, field=${c} val=${JSON.stringify(val)} targetVal=${JSON.stringify(targetVal)}`)
+            //console.log(`updateTabValues: setting tab=${curr}, field=${c} val=${JSON.stringify(val)} targetVal=${JSON.stringify(targetVal)}`)
             return { ...a, [c]: targetVal }
           }, {})
         }
@@ -195,8 +197,8 @@ export default function PortalNav({ config }) {
   }
 
   function updateSelected(sectionKey, cardKey) {
-    console.log("Update Selected Fired " + sectionKey + " - " + cardKey)
-
+    //console.log("AI:- Card update fired " + sectionKey + " - " + cardKey)
+    appInsights.trackEvent({name: "Card." + sectionKey + "." + cardKey});
     setUrlParams((currentUrlParams) => {
       currentUrlParams.set(sectionKey, cardKey)
       window.history.replaceState(null, null, "?"+currentUrlParams.toString())
@@ -282,9 +284,14 @@ export default function PortalNav({ config }) {
   }
 
   function mergeState(tab, field, value, previewLink) {
-
     let updatevals
     let newFields = new Map()
+    if(lastAIUpdated.tab !== tab || lastAIUpdated.field !== field){
+      //console.log("AI:- Field Selected " + tab + "-" + field)
+      appInsights.trackEvent({name: "FieldSelected." + tab + "." + field});
+      setLastAIUpdated({tab: tab, field: field})
+    }
+
     if (typeof field === "string") {
       updatevals = { [field]: value }
       newFields.set(`${tab}.${field}`, value)