Enhance the non-PII telemetry capture to improve the user experience

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,16 @@ 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]: [] } }, {}))
+  useAITracking("PageNav", urlParams.get('preset') || 'defaultOps')
   // 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'))
   // 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 [tabState, setTab] = useState("");
+  const [fieldState, setField] = useState("");
 
   function initSelected (currentPreset) {
     return {
@@ -195,8 +198,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 +285,15 @@ export default function PortalNav({ config }) {
   }
 
   function mergeState(tab, field, value, previewLink) {
-
     let updatevals
     let newFields = new Map()
+    if(tabState !== tab || fieldState !== field){
+      console.log("AI:- Field Selected " + tab + "-" + field)
+      appInsights.trackEvent({name: "FieldSelected." + tab + "." + field});
+    }
+
+    setTab(tab)
+    setField(field)
     if (typeof field === "string") {
       updatevals = { [field]: value }
       newFields.set(`${tab}.${field}`, value)