@microsoft/applicationinsights-debugplugin-js 3.0.0-beta.2303-11 → 3.0.0-nightly3.2304-28

package/src/components/Dashboard.ts

@@ -1,288 +0,0 @@
-import dynamicProto from "@microsoft/dynamicproto-js";
-import { arrForEach, arrIndexOf } from "@microsoft/applicationinsights-core-js";
-import { ITimerHandler, scheduleTimeout } from "@nevware21/ts-utils";
-import { LogEntry } from "./LogEntry";
-import { FilterList } from "./filterList";
-import { copySelectedTree } from "./helpers";
-import { tempStyle } from "./styleNodeSrc";
-
-export interface IDashboardConfig {
-    prefix: string;
-    trackers: string[];
-    excludeKeys: string[],
-    maxMessages: number,
-    includeFunctions: boolean
-}
-
-export class Dashboard {
-    constructor(config: IDashboardConfig) {
-        let msgTracker: LogEntry[] = [];
-
-        let textFilter: string ="";
-
-        /**
-         * the root element of the logger
-         */
-        let rootElement: HTMLDivElement;
-
-        /**
-         * the style that is only on the webpage when the log is active
-         */
-        let tempStyleEl: HTMLStyleElement;
-
-        let filterList: FilterList;
-
-        let loggerEl: HTMLElement;
-
-        dynamicProto(Dashboard, this, (_self) => {
-            let prefix = config.prefix;
-            let trackers = config.trackers;
-            const rootEl = rootElement = document.createElement("div");
-            rootEl.className = `${prefix}-dbg-lgr-dashboard`;
-
-            tempStyleEl = document.createElement("style");
-            tempStyleEl.innerHTML = tempStyle(prefix);
-
-            // TODO: research more accessibility (aria)
-            rootEl.style.position = "fixed";
-            rootEl.style.width = "100vw";
-            rootEl.style.height = "100vh";
-            rootEl.style.backgroundColor = "#ffffff";
-            rootEl.style.opacity = "1";
-            rootEl.style.pointerEvents = "auto";
-            rootEl.style.top = "-100%";
-            rootEl.style.transition = ".2s top cubic-bezier(0.87, 0, 0.13, 1)";
-
-            const logHeading = document.createElement("h1");
-            logHeading.textContent = "dashboard";
-            logHeading.style.fontFamily = "monospace";
-            logHeading.style.textAlign = "center";
-            rootEl.appendChild(logHeading);
-
-            _createLogger(rootEl, prefix, trackers);
-
-            _self.getElm = () => {
-                return rootEl;
-            };
-
-            _self.isDisplayed = () => {
-                return !!(rootEl.parentElement || rootEl.parentNode);
-            };
-
-            _self.getTextFilter = () => {
-                return textFilter;
-            };
-
-            _self.setTextFilter = (value: string) => {
-                if (value !== textFilter) {
-                    textFilter = value;
-                    _self.render();
-                }
-            };
-
-            _self.getTrackers = () => {
-                return trackers;
-            };
-
-            _self.newLogEntry = (target: Object, tm: number, key?: string, level?: number, kind?: string, keep?: boolean) => {
-                const _self = this;
-                msgTracker.push(new LogEntry(target, tm, key, level, kind, keep));
-                if (msgTracker.length > config.maxMessages) {
-                    let lp = 0;
-                    while (lp < msgTracker.length) {
-                        let entry = msgTracker[lp];
-                        if (!entry.isKeep()) {
-                            let el = entry.getEl();
-                            if (el && el.parentElement) {
-                                el.parentElement.removeChild(el);
-                            }
-                            msgTracker.splice(lp, 1);
-                            break;
-                        }
-
-                        lp++;
-                    }
-                }
-                _self.render();
-            };
-
-            _self.show = () => {
-                if (!this.isDisplayed()) {
-                    document.body.appendChild(rootEl);
-                    document.head.appendChild(tempStyleEl);
-                    rootEl.style.top = "0%";
-                    rootEl.style.pointerEvents = "auto";
-                    _self.render();
-                }
-            };
-
-            _self.hide = () => {
-                if (_self.isDisplayed()) {
-                    rootEl.style.top = "-100%";
-                    rootEl.style.pointerEvents = "none";
-                    document.head.removeChild(tempStyleEl);
-                    document.body.removeChild(rootEl);
-                }
-            };
-
-            _self.render = () => {
-                if (_self.isDisplayed()) {
-                    const excludedTypes = filterList.getCurrentFilter();
-                    arrForEach(msgTracker, (entry) => {
-                        let el = entry.getEl();
-                        if (el && el.parentElement) {
-                            el.parentElement.removeChild(el);
-                        }
-
-                        if (!entry.isMatch(textFilter, config.excludeKeys, config.includeFunctions)) {
-                            return;
-                        }
-
-                        let type = entry.getKind();
-                        let allowOther = arrIndexOf(excludedTypes, "other") === -1;     // Other types are not excluded
-                        if (arrIndexOf(trackers, type) === -1 && !allowOther) {
-                            // Not a tracked type and we are not allowing other types
-                            return;
-                        } else if (arrIndexOf(excludedTypes, type) !== -1) {
-                            // This type is explicitly excluded
-                            return;
-                        }
-
-                        let newEl = entry.render(textFilter, config.excludeKeys, config.includeFunctions);
-                        if (newEl) {
-                            loggerEl.appendChild(newEl);
-                        }
-                    });
-                }
-            };
-
-            function clearEvents() {
-                let newEvents: LogEntry[] = [];
-                arrForEach(msgTracker, (entry) => {
-                    if (entry.isKeep()) {
-                        newEvents.push(entry);
-                    } else {
-                        let el = entry.getEl();
-                        if (el && el.parentElement) {
-                            el.parentElement.removeChild(el);
-                        }
-                    }
-                });
-
-                msgTracker = newEvents;
-                _self.render();
-            }
-
-            function closeDashboard() {
-                _self.hide();
-            }
-
-            function _createLogger(hostDiv: HTMLElement, prefix: string, trackers: string[]) {
-                loggerEl = document.createElement("div");
-                loggerEl.className = `${prefix}-dbg-lgr`;
-        
-                const controlDiv = document.createElement("div");
-                controlDiv.className = "controls";
-
-                const textFilterInput = document.createElement("input");
-                textFilterInput.className = "text-filter-input";
-                textFilterInput.setAttribute("placeholder", "filter text");
-                textFilterInput.onchange = (evt: Event) => {
-                    _self.setTextFilter(textFilterInput.value);
-                };
-        
-                textFilterInput.onblur = (evt: Event) => {
-                    _self.setTextFilter(textFilterInput.value);
-                };
-        
-                textFilterInput.onkeyup = (evt: Event) => {
-                    keyupTimer && keyupTimer.cancel();
-                    keyupTimer = null;
-        
-                    let newValue = textFilterInput.value;
-                    if (newValue !== _self.getTextFilter()) {
-                        keyupTimer = scheduleTimeout(() => {
-                            keyupTimer = null;
-                            _self.setTextFilter(textFilterInput.value);
-                        }, 200);
-                    }
-                };
-
-                controlDiv.appendChild(textFilterInput);
-
-                const copyButton = document.createElement("button");
-                copyButton.innerText = "copy current node";
-                copyButton.className = "btn-secondary";
-                copyButton.onclick = copySelectedTree;
-                copyButton.ontouchend = copySelectedTree;
-        
-                let keyupTimer: ITimerHandler = null;
-        
-                filterList = new FilterList(controlDiv, trackers.slice(0), () => _self.render());
-
-                controlDiv.appendChild(copyButton);
-
-                const clearEventsBtn = document.createElement("button");
-                clearEventsBtn.innerText = "clear events";
-                clearEventsBtn.className = "btn-secondary";
-                clearEventsBtn.onclick = clearEvents;
-                clearEventsBtn.ontouchend = clearEvents;
-        
-                controlDiv.appendChild(clearEventsBtn);
-
-                const closeEventsBtn = document.createElement("button");
-                closeEventsBtn.id = "close-dashboard";
-                closeEventsBtn.innerText = "close dashboard";
-                closeEventsBtn.className = "btn-primary";
-                closeEventsBtn.onclick = closeDashboard;
-                closeEventsBtn.ontouchend = closeDashboard;
-        
-                controlDiv.appendChild(closeEventsBtn);
-        
-                hostDiv.appendChild(controlDiv);
-        
-                hostDiv.appendChild(loggerEl);
-            }
-        });
-    }
-
-    public getElm(): HTMLElement {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-        return null;
-    }
-
-    public isDisplayed(): boolean {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-        return false;
-    }
-
-    public getTextFilter(): string {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-        return null;
-    }
-
-    public setTextFilter(value: string) {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-    }
-
-    public getTrackers(): string[] {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-        return null;
-    }
-
-    public newLogEntry(target: Object, tm: number, key?: string, level?: number, kind?: string, keep?: boolean) {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-    }
-
-    public render(): void {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-    }
-
-    public show(): void {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-    }
-
-    public hide(): void {
-        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
-    }
-}

package/src/components/LogEntry.ts

@@ -1,102 +0,0 @@
-import { isArray, isBoolean, isError, isNumber, isObject, isString, objToString } from "@microsoft/applicationinsights-core-js";
-import { MAX_DEPTH, formatLogElements, getTargetKeys, getTargetName, makeRegex, toggleClassName, traverseAndReplace } from "./helpers";
-
-export class LogEntry {
-    isKeep: () => boolean;
-    isMatch: (textFilter: string, excludedKeys: string[], includeFunctions: boolean) => boolean;
-    render: (searchText: string, excludeKeys: string[], includeFunctions: boolean) => HTMLElement;
-    getEl: () => HTMLElement;
-    getKind: () => string;
-
-    constructor(target: Object, tm: number, key?: string, level?: number, kind?: string, keep?: boolean) {
-        let _self = this;
-        let searchContent: any = null;
-        let lastTextFilter: string;
-        let theEl: HTMLElement = null;
-
-        _self.isKeep = () => {
-            return !!keep;
-        }
-
-        function _testValue(rg: RegExp, value: string) {
-            if (rg && value) {
-                return rg.exec(value) !== null;
-            }
-
-            return false;
-        }
-
-        function _testObj(rg: RegExp, value: any, excludedKeys: string[], includeFunctions: boolean): boolean {
-            if (value !== null && value !== undefined && value !== "") {
-                if (isArray(value)) {
-                    for (let lp = 0; lp < value.length; lp++) {
-                        if (_testObj(rg, value[lp], excludedKeys, includeFunctions)) {
-                            return true;
-                        }
-                    }
-                } else if (isObject(value) || isError(value)) {
-                    let keys = getTargetKeys(value, excludedKeys, includeFunctions);
-                    for (let lp = 0; lp < keys.length; lp++) {
-                        let key = keys[lp];
-                        if (_testValue(rg, key) || _testObj(rg, value[key], excludedKeys, includeFunctions)) {
-                            return true;
-                        }
-                    }
-                } else if (isString(value) || isNumber(value) || isBoolean(value)) {
-                    return _testValue(rg, objToString(value));
-                }
-            }
-
-            return false;
-        }
-
-        _self.isMatch = (textFilter: string, excludedKeys: string[], includeFunctions: boolean) => {
-            let rg = makeRegex(textFilter);
-            if (rg) {
-                if (_testValue(rg, key)) {
-                    return true;
-                }
-
-                if (_testValue(rg, getTargetName(_self))) {
-                    return true;
-                }
-
-                if (!searchContent) {
-                    // Delaying creating the search optimization until needed -- for performance
-                    searchContent = traverseAndReplace(target, MAX_DEPTH, level, [], excludedKeys, includeFunctions);
-                }
-                
-                return _testObj(rg, searchContent, excludedKeys, includeFunctions);
-            }
-
-            return true;
-        }
-
-        _self.render = (textFilter: string, excludeKeys: string[], includeFunctions: boolean): HTMLElement => {
-            if (!theEl || lastTextFilter !== textFilter) {
-                lastTextFilter = textFilter;
-                let ms: string = "" + tm;
-                while (ms.length < 4) {
-                    ms = "0" + ms;
-                }
-
-                ms = ms.replace(/(.)(\d{3}){1}$/g, "$1.$2s")
-                while (ms.length <= 9) {
-                    ms = " " + ms;
-                }
-                theEl = formatLogElements(target, `[${ms}]`, key, level, textFilter, excludeKeys, [], includeFunctions).root;
-                toggleClassName(theEl, " tree-root");
-            }
-
-            return theEl;
-        }
-
-        _self.getEl = () => {
-            return theEl;
-        }
-
-        _self.getKind = () => {
-            return kind;
-        }
-    }
-}

package/src/components/debugBins.ts

@@ -1,127 +0,0 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-import { scheduleTimeout } from "@nevware21/ts-utils";
-
-export class DebugBinParent {
-    public showChildren: boolean = false;
-
-    private el: HTMLDivElement;
-    private elSpan: HTMLSpanElement;
-    private value: number = 0;
-    constructor(
-        private parent: HTMLDivElement,
-        private children: Array<DebugBin | HTMLButtonElement>,
-        bottomDistance: number,
-        prefix: string
-    ) {
-        const _self = this;
-
-        _self.el = document.createElement("div");
-        _self.el.setAttribute("tabindex", "0");
-        _self.el.className = `${prefix}-debug-bin-parent`;
-        _self.el.style.bottom = `${20 + bottomDistance}px`;
-
-        _self.elSpan = document.createElement("span");
-        _self.elSpan.innerText = `${_self.value}`;
-        _self.elSpan.setAttribute("data-name", "AppInsights");
-        _self.el.appendChild(_self.elSpan);
-
-        _self.el.onclick = () => {
-            _self.showChildren = !_self.showChildren;
-            _self.el.className = (_self.showChildren) ? `${prefix}-debug-bin-parent active` : `${prefix}-debug-bin-parent`;
-            _self.render();
-        }
-
-        _self.el.onkeydown = (evt: KeyboardEvent) => {
-            if (evt.which === 13 || evt.which === 32) {
-                evt.preventDefault();
-                (evt.target as HTMLElement).click();
-            }
-        }
-
-        _self.render();
-    }
-
-    addClassToEl(name: string) {
-        const _self = this;
-        if (_self.el.className.indexOf(name) === -1) {
-            _self.el.className += ` ${name}`;
-        }
-    }
-
-    addChild(bin: DebugBin | HTMLButtonElement) {
-        this.children.push(bin);
-    }
-
-    addButton(handler: (evt: MouseEvent) => void, label: string) {
-        const btn = document.createElement("button");
-        btn.innerText = label;
-        btn.onclick = handler;
-        this.addChild(btn);
-    }
-
-    increment() {
-        const _self = this;
-        _self.elSpan.innerText = `${++_self.value}`;
-    }
-
-    render() {
-        const _self = this;
-        if (!_self.el.parentElement) {
-            _self.parent.appendChild(_self.el);
-        }
-        for (const ch of _self.children) {
-            if (ch instanceof DebugBin) {
-                if (ch.el.parentElement !== _self.el && _self.showChildren) {
-                    _self.el.appendChild(ch.el);
-                } else if (ch.el.parentElement === _self.el && !_self.showChildren) {
-                    _self.el.removeChild(ch.el);
-                }
-            } else {
-                if (_self.showChildren) {
-                    _self.el.appendChild(ch);
-                } else {
-                    _self.el.removeChild(ch);
-                }
-            }
-        }
-    }
-}
-
-export class DebugBin {
-    public el: HTMLDivElement;
-    private elName: HTMLSpanElement;
-    private elValue: HTMLSpanElement;
-
-    constructor(
-        private name: string,
-        private value: number,
-        private parent: DebugBinParent,
-        bottomDistance: number,
-        backgroundColor?: string
-    ) {
-        const _self = this;
-        parent.addChild(_self);
-
-        _self.el = document.createElement("div");
-
-        _self.elName = document.createElement("span");
-        _self.elName.innerText = `${name}: `;
-        _self.elName.className = "el-name";
-        _self.el.appendChild(_self.elName);
-
-        _self.elValue = document.createElement("span");
-        _self.elValue.innerText = `${value}`;
-        _self.elValue.className = "el-value";
-        _self.el.appendChild(_self.elValue);
-    }
-
-    increment() {
-        const _self = this;
-        _self.elValue.innerText = `${++_self.value}`;
-        _self.parent.increment();
-        _self.elValue.className = "el-value incremented";
-        scheduleTimeout(() => _self.elValue.className = "el-value", 1);
-    }
-}

package/src/components/filterList.ts

@@ -1,128 +0,0 @@
-// Copyright (c) Microsoft Corporation. All rights reserved.
-// Licensed under the MIT License.
-
-import { arrIndexOf } from "@microsoft/applicationinsights-core-js";
-
-export class FilterList {
-
-    private el: HTMLElement;
-    private filterList: string[];
-    private children: HTMLElement[] = [];
-
-    constructor(
-        parent: HTMLElement,
-        trackers: string[],
-        toggleCb: () => void
-    ) {
-        const _self = this;
-        let active = false;
-
-        trackers = trackers.concat("other");
-        _self.filterList = [];
-
-        _self.el = document.createElement("div");
-        _self.el.className = "filterlist";
-
-        const inputEl = document.createElement("div");
-        inputEl.className = "filterlist-input";
-        inputEl.innerText = "filter nodes...";
-        _self.el.appendChild(inputEl);
-
-        const dropdownMenuEl = document.createElement("div");
-        dropdownMenuEl.className = "filterlist-dropdown";
-        _self.el.appendChild(dropdownMenuEl)
-
-        dropdownMenuEl.onkeyup = (evt) => {
-            if (active && evt.keyCode === 27) {
-                evt.stopPropagation();
-                _hideDropdown();
-            }
-        }
-
-        for (const t of trackers) {
-            const chEl = document.createElement("div");
-            chEl.setAttribute("tabindex", "0");
-            chEl.setAttribute("filter-type", t);
-            chEl.className = "filterlist-toggle";
-
-            const checkbox = document.createElement("div");
-            checkbox.className = "checkbox on"
-
-            const label = document.createElement("span");
-            label.className = "label";
-            label.innerText = t;
-
-            chEl.appendChild(checkbox);
-            chEl.appendChild(label);
-
-            chEl.onkeyup = (evt) => {
-                if (active && evt.keyCode === 27) {
-                    evt.stopPropagation();
-                    _hideDropdown();
-                }
-            }
-
-            chEl.onclick = (evt) => {
-                evt.stopPropagation();
-                chEl.focus();
-                if (checkbox.className === "checkbox off") {
-                    if (evt.shiftKey) {
-                        _self.filterList = trackers.concat();
-                        for (const ch of _self.children) {
-                            (ch.childNodes[0] as HTMLElement).className = "checkbox off";
-                        }
-                    }
-                    _self.filterList.splice(arrIndexOf(_self.filterList, t), 1);
-                    checkbox.className = "checkbox on";
-                } else {
-                    if (evt.shiftKey) {
-                        _self.filterList = [];
-                        for (const ch of _self.children) {
-                            (ch.childNodes[0] as HTMLElement).className = "checkbox on";
-                        }
-                    }
-                    _self.filterList.push(t);
-                    checkbox.className = "checkbox off";
-                }
-                toggleCb();
-            }
-            _self.children.push(chEl);
-        }
-
-        function _hideDropdown() {
-            active = false;
-            for (const ch of _self.children) {
-                dropdownMenuEl.removeChild(ch);
-            }
-        }
-
-        function _showDropdown() {
-            active = true;
-            for (const ch of _self.children) {
-                dropdownMenuEl.appendChild(ch);
-            }
-            dropdownMenuEl.focus();
-        }
-
-        _self.el.onkeyup = (evt) => {
-            if (active && evt.keyCode === 27) {
-                evt.stopPropagation();
-                _hideDropdown();
-            }
-        }
-
-        _self.el.onclick = () => {
-            if (!active) {
-                _showDropdown();
-            } else {
-                _hideDropdown();
-            }
-        }
-
-        parent.appendChild(_self.el);
-    }
-
-    getCurrentFilter = () => {
-        return this.filterList;
-    }
-}