[Chrome-ext] Update nightly download link and add version check (#1720)

tools/chrome-debug-extension/README.md

@@ -8,7 +8,7 @@ We recommend building a configuration file to represent the schema of the teleme
 
 ## Installing the tool
 
-1. Download either the [official](https://js.monitor.azure.com/release/tools/ai.chrome-ext.zip) or [nightly](https://js.monitor.azure.com/nightly/tools/ai.chrome-ext.zip) build and unzip it into a folder on your PR
+1. Download either the [official](https://js.monitor.azure.com/release/tools/ai.chrome-ext.zip) or [nightly](https://js.monitor.azure.com/nightly/tools/ai.chrome-ext.nightly.zip) build and unzip it into a folder on your PR
 1. Open the Manage Extensions page in either Chrome or Edge
    - Browse to either edge://extensions or chrome://extensions/ respectively
    - Or choose Extensions from the ... menu

tools/chrome-debug-extension/src/UpdateCheck.ts

@@ -0,0 +1,46 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { dumpObj } from "@microsoft/applicationinsights-core-js";
+
+export declare type VersionCheckCallback = (newVersion: string, details: string) => void;
+
+export function checkForUpdate(callback: VersionCheckCallback, currentVer?: string) {
+    if (!currentVer && chrome && chrome.runtime) {
+        let manifest = chrome.runtime.getManifest();
+        currentVer = manifest.version_name || manifest.version || "";
+    }
+
+    let newVersionLink = "https://js.monitor.azure.com/";
+    let versionCheck = newVersionLink;
+
+    if (currentVer && currentVer.indexOf("-nightly") !== -1) {
+        newVersionLink += "nightly/tools/ai.chrome-ext.nightly.zip";
+        versionCheck += "nightly/tools/ai.chrome-ext.nightly.integrity.json";
+    } else {
+        newVersionLink += "release/tools/ai.chrome-ext.zip";
+        versionCheck += "release/tools/ai.chrome-ext.integrity.json";
+    }
+
+    function _updateCheckFailed(reason: any) {
+        console && console.log("Version check failed -- " + reason);
+    }
+
+    function _checkVersion(value: string) {
+        if (value) {
+            try {
+                let integrity = JSON.parse(value);
+                if (currentVer !== integrity.version) {
+                    callback && callback(integrity.version, newVersionLink)
+                }
+            } catch (e) {
+                // CDN can return an error which will be HTML
+                _updateCheckFailed(dumpObj(e));
+            }
+        }
+    }
+
+    fetch(versionCheck).then((resp) => {
+        resp.text().then(_checkVersion, _updateCheckFailed);
+    }, _updateCheckFailed);
+}

tools/chrome-debug-extension/src/components/configurationSelection.tsx

@@ -154,7 +154,7 @@ export const ConfigurationSelection = (
                 <div className='configurationDescription'>
                     <p>Currently updates must be done manually.</p>
                     <p>
-                        To update the tool, download either the <a href="https://js.monitor.azure.com/release/tools/ai.chrome-ext.zip" target="_blank">official</a> or <a href="https://js.monitor.azure.com/nightly/tools/ai.chrome-ext.zip" target="_blank">nightly</a> build and unzip it into the folder where you originally installed the tool.
+                        To update the tool, download either the <a href="https://js.monitor.azure.com/release/tools/ai.chrome-ext.zip" target="_blank">official</a> or <a href="https://js.monitor.azure.com/nightly/tools/ai.chrome-ext.nightly.zip" target="_blank">nightly</a> build and unzip it into the folder where you originally installed the tool.
                     </p>
                     <p>
                         For more information, see the instructions <a href="https://github.com/microsoft/ApplicationInsights-JS/blob/master/tools/chrome-debug-extension/README.md" target="_blank">here</a>.

tools/chrome-debug-extension/src/telemetryViewerPopup.tsx

@@ -8,6 +8,7 @@ import { getConfiguration } from "./configuration/configuration";
 import { ConfigurationType, ConfigurationURLs } from "./configuration/Configuration.types";
 import { IConfiguration } from "./configuration/IConfiguration";
 import { Session } from "./session";
+import { checkForUpdate } from "./UpdateCheck";
 
 type AppPhase =
     | "Startup"
@@ -17,11 +18,14 @@ type AppPhase =
     | "ConfigurationLoadFailed";
 
 const configurationTypeStorageKey = "configurationType";
+const defaultVersion = "#version#";
 
 export const TelemetryViewerPopup = (): React.ReactElement => {
     const [appPhase, setAppPhase] = React.useState<AppPhase>("Startup");
     const [session, setSession] = React.useState<Session | undefined>(undefined);
     const [configurationType, setConfigurationType] = React.useState<ConfigurationType>(undefined);
+    let newAvailableVersion: string;
+    // let newVersionDownload: string;
 
     function applyConfigurationType(newConfigurationType: ConfigurationType): void {
         if (newConfigurationType) {
@@ -72,7 +76,43 @@ export const TelemetryViewerPopup = (): React.ReactElement => {
         }
     }
 
+    function highlightNewVersion() {
+        let orgTitle = document.title;
+        let count = 0;
+        let interval = setInterval(() => {
+            count ++;
+            if ((count % 2) == 0) {
+                document.title = orgTitle;
+            } else {
+                document.title = orgTitle + " *** v" + encodeURIComponent(newAvailableVersion) + " Available ***"
+            }
+            if (count > 10) {
+                clearInterval(interval);
+            }
+        }, 1500);
+    }
+
+    function versionCheck() {
+        let manifestVersion = defaultVersion;
+        if (chrome && chrome.runtime) {
+            let manifest = chrome.runtime.getManifest();
+            manifestVersion = manifest.version_name || manifest.version || "";
+        }
+
+        if (manifestVersion) {
+            let newTitle = "Telemetry Viewer - v" + encodeURIComponent(manifestVersion);
+            document.title = newTitle;
+            checkForUpdate((newVersion, details) => {
+                newAvailableVersion = newVersion;
+                // newVersionDownload = details;
+                highlightNewVersion();
+            }, manifestVersion);
+        }
+    }
+
     React.useEffect(() => {
+        versionCheck();
+
         let configurationTypeToSet = undefined;
         try {
             const savedValue = localStorage.getItem(configurationTypeStorageKey);

tools/release-tools/setVersion.js

@@ -462,7 +462,7 @@ const setPackageJsonRelease = () => {
                 }
 
                 if (theFilename.indexOf("/package.json") !== -1) {
-                    let srcFolder = theFilename.replace("/package.json", "/**/*.ts");
+                    let srcFolder = theFilename.replace("/package.json", "/**/*.ts", "/**/*.tsx", "/**/*.html");
                     console.log("        - Checking source files: " + srcFolder);
                     const tsFiles = globby.sync(srcFolder);
                     tsFiles.map(sourceFile => {