TelemetryViewer: Add Chrome debug extension to master (#1713)

* init commit

* update rollup

* Fixed popup - now runs the React application

* Now building the popup and background task seperately so that one doesn't have to export the other to make it build

* Updated browser extension code with latest from odsp-web

* Update window title of the popup

* Readme update

* Added custom configuration UI for in-tool authoring of the configuration file

* New icon

* Name update

* Filter text now uses column values from configuration instead of Stream hardcoded field names

* Enable some more automatic eslint fixes (#1690)

* Update dependencies in package.json

* Add ability to zip the extension during build

* Update SetVersion script to include the chrome-debug-extension
Synchronize manifest.json version with package.json
Add CDN publishing scripts
Rework package zipping for more flexibility

* Bump version to v0.1.1
Fixup Content-Type for publishing to CDN

* Add archiver package to devDependencies

* Update shrinkwrap for archiver

* Update Stream URL

* Break circular dependency

* Add 'TimeDelta' column type, fix details view to allow for deep paths to be excluded via config

* Network data source now handles arrays of events as well

* Add default configuration feature

* Default configuration updates to flag errors, perf events, add a dynamic value for each event type, and exclude the last tag field in consolidated view

* Fix bug where boolean fields would not be displayed

* Updated icons for better contrast on the task bar when in dark mode

* Add sessionidRegex option

* Added jsonFieldNames

* Table header no longer scrolls

* Update setActiveVersion script to support publishing an unversioned value

* Update icons to ensure they are from the set we are allowed to use

* Update to version 0.1.2

* Code tidy up and added prettier rule file

* Chrome debug extension UI (#1703)

* [BUG] Field 'ai.operation.name' on type 'ContextTagKeys' is too long. Expected: 1024 characters" #1692 (#1693)

* [BUG] Multiple errors are getting thrown and swallowed during initialization when no instrumentation Key is provided #1691 (#1695)

* Governance Updates -- update used dependencies (#1694)

* init

* working

* add css

* copy over helper and debugplugin ui

* update style

* Shrinkwrap update after rush update

* Accessibility fixes

* Fix accessibility in the configuration page

* Fix missing red line between sessions

* align styles

* Added update instructions to the configuration page, and replaced placeholder link for preset creation instructions

* fix build

Co-authored-by: Nev <54870357+MSNev@users.noreply.github.com>
Co-authored-by: Kevin Brown <kevbrown@microsoft.com>

* Merge remote-tracking branch 'origin/master' into ChromeDebugExtension

* Fixes
- EsLint integration and auto fixes
- Add integrity.json generation

* Update Chrome Debug extension to use new v.2.7.1 base components

* Add files via upload (#1711)

* Update README.md in ChromeExtension (#1710)

* Update README.md

* chrome-extension-readme: Update to relative path

* Add files via upload

* Fix popup looping (causing dead UI) issue

* Update file comments

* Add DbgExtensionUtils to AI core with notification support and defaults for AI and OneDs

* Performance improvements
- Only populate the condensedDetails when required
- dont save the condensed details to the "saved" files

Functional changes
- Add filter match highlighting to the lower window
- Add option to include the event content when filtering
- Add UI components to enable/disable networking and Sdk event capturing

* Enable expand/collapse and address PR comments

* Fix CodeScanning issues

* Add wildcard support to event table filtering and match highlighting

* Added tooltips to new optionsBar UI, removing the need for the "capture" label and explaining the "Content" checkbox, also fixing issue prevent mouse clicks on the new labels from toggling the checkboxes

* Readme updates

* Change default height to be taller, capitalize SDK

* Fixed bug on fresh install when there is no saved filter state which prevented configurations from being loaded

* Address Security issues identified by internal component governance services (#1715)

* Fix package version differences

* Make syntax highlighting in the detail (tree) view case-insensitive

* Add Simple Hello World sample

* Rename NetworkDataSource and clean up the data source type list

* Add defaultNetworkCaptureValue and defaultSDKCaptureValue to IConfiguration

* Extract DebugPlugin debug message to a function

* Add capturing network requests for sendBeacon() ("ping" requests)

* Consolidate the DebugPlugin logging functions

Co-authored-by: xiao-lix <lixiao900921@gmail.com>
Co-authored-by: Kevin Brown <kevbrown@microsoft.com>
Co-authored-by: Karlie-777 <79606506+Karlie-777@users.noreply.github.com>
Co-authored-by: KevBrown-MSFT <51932180+KevBrown-MSFT@users.noreply.github.com>

.eslintrc

@@ -12,6 +12,7 @@
         "plugin:security/recommended"
     ],
     "rules": {
+        //"indent": ["error", 4],                                     // Re-Enable for auto fixing after merging ChromeDebugExtension Branch
         "quotes": ["warn", "double"],                               // Enabled for auto fixing
         "prefer-const": "off",
         "prefer-spread": "off",

AISKU/samples/HelloWorld/index-snippet.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello World!</title>
+
+    <!-- import Application Insights JS SDK from CDN -->
+    <script type="text/javascript">!function(T,l,y){var S=T.location,k="script",D="instrumentationKey",C="ingestionendpoint",I="disableExceptionTracking",E="ai.device.",b="toLowerCase",w="crossOrigin",N="POST",e="appInsightsSDK",t=y.name||"appInsights";(y.name||T[e])&&(T[e]=t);var n=T[t]||function(d){var g=!1,f=!1,m={initialize:!0,queue:[],sv:"5",version:2,config:d};function v(e,t){var n={},a="Browser";return n[E+"id"]=a[b](),n[E+"type"]=a,n["ai.operation.name"]=S&&S.pathname||"_unknown_",n["ai.internal.sdkVersion"]="javascript:snippet_"+(m.sv||m.version),{time:function(){var e=new Date;function t(e){var t=""+e;return 1===t.length&&(t="0"+t),t}return e.getUTCFullYear()+"-"+t(1+e.getUTCMonth())+"-"+t(e.getUTCDate())+"T"+t(e.getUTCHours())+":"+t(e.getUTCMinutes())+":"+t(e.getUTCSeconds())+"."+((e.getUTCMilliseconds()/1e3).toFixed(3)+"").slice(2,5)+"Z"}(),iKey:e,name:"Microsoft.ApplicationInsights."+e.replace(/-/g,"")+"."+t,sampleRate:100,tags:n,data:{baseData:{ver:2}}}}var h=d.url||y.src;if(h){function a(e){var t,n,a,i,r,o,s,c,u,p,l;g=!0,m.queue=[],f||(f=!0,t=h,s=function(){var e={},t=d.connectionString;if(t)for(var n=t.split(";"),a=0;a<n.length;a++){var i=n[a].split("=");2===i.length&&(e[i[0][b]()]=i[1])}if(!e[C]){var r=e.endpointsuffix,o=r?e.location:null;e[C]="https://"+(o?o+".":"")+"dc."+(r||"services.visualstudio.com")}return e}(),c=s[D]||d[D]||"",u=s[C],p=u?u+"/v2/track":d.endpointUrl,(l=[]).push((n="SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details)",a=t,i=p,(o=(r=v(c,"Exception")).data).baseType="ExceptionData",o.baseData.exceptions=[{typeName:"SDKLoadFailed",message:n.replace(/\./g,"-"),hasFullStack:!1,stack:n+"\nSnippet failed to load ["+a+"] -- Telemetry is disabled\nHelp Link: https://go.microsoft.com/fwlink/?linkid=2128109\nHost: "+(S&&S.pathname||"_unknown_")+"\nEndpoint: "+i,parsedStack:[]}],r)),l.push(function(e,t,n,a){var i=v(c,"Message"),r=i.data;r.baseType="MessageData";var o=r.baseData;return o.message='AI (Internal): 99 message:"'+("SDK LOAD Failure: Failed to load Application Insights SDK script (See stack for details) ("+n+")").replace(/\"/g,"")+'"',o.properties={endpoint:a},i}(0,0,t,p)),function(e,t){if(JSON){var n=T.fetch;if(n&&!y.useXhr)n(t,{method:N,body:JSON.stringify(e),mode:"cors"});else if(XMLHttpRequest){var a=new XMLHttpRequest;a.open(N,t),a.setRequestHeader("Content-type","application/json"),a.send(JSON.stringify(e))}}}(l,p))}function i(e,t){f||setTimeout(function(){!t&&m.core||a()},500)}var e=function(){var n=l.createElement(k);n.src=h;var e=y[w];return!e&&""!==e||"undefined"==n[w]||(n[w]=e),n.onload=i,n.onerror=a,n.onreadystatechange=function(e,t){"loaded"!==n.readyState&&"complete"!==n.readyState||i(0,t)},n}();y.ld<0?l.getElementsByTagName("head")[0].appendChild(e):setTimeout(function(){l.getElementsByTagName(k)[0].parentNode.appendChild(e)},y.ld||0)}try{m.cookie=l.cookie}catch(p){}function t(e){for(;e.length;)!function(t){m[t]=function(){var e=arguments;g||m.queue.push(function(){m[t].apply(m,e)})}}(e.pop())}var n="track",r="TrackPage",o="TrackEvent";t([n+"Event",n+"PageView",n+"Exception",n+"Trace",n+"DependencyData",n+"Metric",n+"PageViewPerformance","start"+r,"stop"+r,"start"+o,"stop"+o,"addTelemetryInitializer","setAuthenticatedUserContext","clearAuthenticatedUserContext","flush"]),m.SeverityLevel={Verbose:0,Information:1,Warning:2,Error:3,Critical:4};var s=(d.extensionConfig||{}).ApplicationInsightsAnalytics||{};if(!0!==d[I]&&!0!==s[I]){var c="onerror";t(["_"+c]);var u=T[c];T[c]=function(e,t,n,a,i){var r=u&&u(e,t,n,a,i);return!0!==r&&m["_"+c]({message:e,url:t,lineNumber:n,columnNumber:a,error:i}),r},d.autoExceptionInstrumented=!0}return m}(y.cfg);function a(){y.onInit&&y.onInit(n)}(T[t]=n).queue&&0===n.queue.length?(n.queue.push(a),n.trackPageView({})):a()}(window,document,{
+        src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js", // The SDK URL Source for the CDN
+        //src: "../../browser/ai.2.min.js", // The URL Source for the local build
+        crossOrigin: "anonymous", // When supplied this will add the provided value as the cross origin attribute on the script tag
+        cfg: { // Application Insights Configuration
+            instrumentationKey: "INSTRUMENTATION_KEY"
+        }});
+    </script>
+
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+</html>