指标按页面分组显示

try to take over the world!

目前為 2016-06-14 提交的版本,檢視 最新版本

// ==UserScript==
// @name         指标按页面分组显示
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       You
// @match        *://*.growingio.com/projects/*/events
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    /*
    var originalMethod = XMLHttpRequest.prototype.setRequestHeader;
    XMLHttpRequest.prototype.setRequestHeader = function(key, value) {
        console.log("setting " + key + " to " + value);
        originalMethod(key, value);
    };
    */
    function fetch(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('load', () => {
            callback(JSON.parse(xhr.responseText));
        });
        xhr.open('GET', url);
        xhr.setRequestHeader('accept', 'application/json');
        xhr.send();
    }

    var PLATFORM_TEMPLATE = "<div id=\"debugio-platform-title\">" +
        "    Android</div>" +
        "<div id=\"debugio-platform-container\">" +
        "    <ul id=\"debugio-domain-list\">" +
        "        <!-- generated by domain-list-template.html -->" +
        "    </ul>" +
        "</div>";
    var DOMAIN_TEMPLATE = "<div id=\"debugio-domain-title\">joker.li.test</div>" +
        "<dir id=\"debugio-domain-container\">" +
        "    <ul id=\"debugio-page-list\">" +
        "        <!-- generated by page-list-template.html -->" +
        "    </ul>" +
        "</dir>";
    var PAGE_TEMPLATE = "<div id=\"debugio-page-title\">\n" +
        "    <span id=\"debugio-page-name\">MainActivity</span>\n" +
        "</div>\n" +
        "<div id=\"debugio-page-container\">\n" +
        "    <ol id=\"debugio-tags-list\">\n" +
        "        <!-- generated by tag-template.html -->\n" +
        "    </ol>\n" +
        "</div>";
    var TAG_TEMPLATE = "<div class=\"debugio-tag-button\">\n" +
        "    <button id=\"debugio-tag-modify\">modify</button>\n" +
        "    <button id=\"debugio-tag-archive\">archive</button>\n" +
        "</div>\n" +
        "<div id=\"debugio-tag-attr-contaienr\">\n" +
        "    <table class=\"debugio-tag-table\">\n" +
        "        <tr>\n" +
        "            <td>name</td>\n" +
        "            <td id=\"debugio-attr-name\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>type</td>\n" +
        "            <td id=\"debugio-attr-type\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>xpath</td>\n" +
        "            <td id=\"debugio-attr-xpath\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>content</td>\n" +
        "            <td id=\"debugio-attr-content\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>query</td>\n" +
        "            <td id=\"debugio-attr-query\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>position</td>\n" +
        "            <td id=\"debugio-attr-position\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>href</td>\n" +
        "            <td id=\"debugio-attr-href\"></td>\n" +
        "        </tr>\n" +
        "    </table>\n" +
        "</div>\n" +
        "<div id=\"debugio-tag-filter-container\">\n" +
        "    <table class=\"debugio-tag-table\">\n" +
        "        <tr>\n" +
        "            <td>domain</td>\n" +
        "            <td id=\"debugio-filter-domain\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>path</td>\n" +
        "            <td id=\"debugio-filter-page\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>xpath</td>\n" +
        "            <td id=\"debugio-filter-xpath\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>content</td>\n" +
        "            <td id=\"debugio-filter-content\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>query</td>\n" +
        "            <td id=\"debugio-filter-query\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>position</td>\n" +
        "            <td id=\"debugio-filter-position\"></td>\n" +
        "        </tr>\n" +
        "        <tr>\n" +
        "            <td>href</td>\n" +
        "            <td id=\"debugio-filter-href\"></td>\n" +
        "        </tr>\n" +
        "    </table>\n" +
        "</div>";
    var DEBUGIO_STYLE = "ol,ul {\n" +
        "    list-style-type: none;\n" +
        "}\n" +
        "\n" +
        "div#debugio-tag-attr-contaienr {\n" +
        "    display: inline-block;\n" +
        "    vertical-align: top;\n" +
        "    width: 30%;\n" +
        "}\n" +
        "\n" +
        "div#debugio-tag-filter-container {\n" +
        "    display: inline-block;\n" +
        "    width: 60%;\n" +
        "    overflow-wrap: break-word;\n" +
        "}\n" +
        "\n" +
        "table.debugio-tag-table > tbody > tr > td:nth-child(1) {\n" +
        "    background-color: rgba(185, 197, 197, 0.27);\n" +
        "    -webkit-user-select: none;\n" +
        "    cursor: default;\n" +
        "    color: rgba(0, 0, 0, 0.8);\n" +
        "}\n" +
        "\n" +
        "ol#debugio-tags-list {\n" +
        "    background-color: rgba(185, 197, 197, 0.27);\n" +
        "}\n" +
        "\n" +
        "div#debugio-platform-container {\n" +
        "    background-color: rgba(185, 197, 197, 0.27);\n" +
        "}\n" +
        "\n" +
        "table.debugio-tag-table {\n" +
        "    text-align: start;\n" +
        "    width: 100%;\n" +
        "    display: block;\n" +
        "}\n" +
        "\n" +
        "ol#debugio-tags-list > li {\n" +
        "    border-bottom: solid gray 1.5px;\n" +
        "    border-top: solid gray 1.5px;\n" +
        "}\n" +
        "\n" +
        "div.debugio-tag-button {\n" +
        "    color: red;\n" +
        "    position: absolute;\n" +
        "    right: 0;\n" +
        "    margin-right: 10px;\n" +
        "}\n" +
        "\n" +
        "\n" +
        "button#debugio-tag-archive {\n" +
        "}\n" +
        "\n" +
        "div#debugio-tag-group-container {\n" +
        "    font-family: monospace;\n" +
        "    font-weight: 400;\n" +
        "    color: rgba(0, 0, 0, 0.9);\n" +
        "}\n" +
        "\n" +
        "table.debugio-tag-table > tbody > tr > td:nth-child(2) {\n" +
        "    word-break: break-all;\n" +
        "}";

    function generateTagContentWith(tag) {
        var tag_content = document.createElement('li');
        tag_content.innerHTML = TAG_TEMPLATE;
        if (tag.name) tag_content.querySelector("#debugio-attr-name").textContent = tag.name;
        if (tag.eventType) tag_content.querySelector("#debugio-attr-type").textContent = tag.eventType;
        if (tag.attrs.xpath) tag_content.querySelector("#debugio-attr-xpath").textContent = tag.attrs.xpath;
        if (tag.attrs.content) tag_content.querySelector("#debugio-attr-content").textContent = tag.attrs.content;
        if (tag.attrs.query) tag_content.querySelector("#debugio-attr-query").textContent = tag.attrs.query;
        if (tag.attrs.position) tag_content.querySelector("#debugio-attr-position").textContent = tag.attrs.position;
        if (tag.attrs.href) tag_content.querySelector("#debugio-attr-href").textContent = tag.attrs.href;

        if (tag.filter.domain) tag_content.querySelector("#debugio-filter-domain").textContent = tag.filter.domain;
        if (tag.filter.path) tag_content.querySelector("#debugio-filter-page").textContent = tag.filter.path;
        if (tag.filter.xpath) tag_content.querySelector("#debugio-filter-xpath").textContent = tag.filter.xpath;
        if (tag.filter.content) tag_content.querySelector("#debugio-filter-content").textContent = tag.filter.content;
        if (tag.filter.query) tag_content.querySelector("#debugio-filter-query").textContent = tag.filter.query;
        if (tag.filter.index) tag_content.querySelector("#debugio-filter-position").textContent = tag.filter.index;
        if (tag.filter.href) tag_content.querySelector("#debugio-filter-href").textContent = tag.filter.href;
        return tag_content;
    }

    function generatePageContentWith(page_name, page_tags) {
        var page_content = document.createElement('li');
        page_content.innerHTML = PAGE_TEMPLATE;
        page_content.querySelector("#debugio-page-name").textContent = page_name;
        var tag_list_container = page_content.querySelector("#debugio-tags-list");
        page_tags.forEach((tag) => {
            tag_list_container.appendChild(generateTagContentWith(tag));
        })
        return page_content;
    }

    function generatDomainContentWith(domain_name, domain_tags) {
        var domain_content = document.createElement('li');
        domain_content.innerHTML = DOMAIN_TEMPLATE;
        domain_content.querySelector("#debugio-domain-title").textContent = domain_name;
        var page_list_container = domain_content.querySelector("#debugio-page-list");
        for (var page in domain_tags) {
            page_list_container.appendChild(generatePageContentWith(page, domain_tags[page]));
        }
        return domain_content;
    }

    function generatePlatformContentWith(platform_name, platform_tags) {
        var platform_content = document.createElement('li');
        platform_content.innerHTML = PLATFORM_TEMPLATE;
        platform_content.querySelector("#debugio-platform-title").textContent = platform_name;
        var domain_list_containter = platform_content.querySelector("#debugio-domain-list");
        for (var domain in platform_tags) {
            domain_list_containter.appendChild(generatDomainContentWith(domain, platform_tags[domain]));
        }
        return platform_content;
    }

    var debugButton = document.createElement('button');
    debugButton.className = 'ant-btn';
    debugButton.textContent = '分组显示简单指标';
    var platform_list_container = null;
    var buttonContainer = document.querySelector('#viewport > div.app-main-container > div.app-main-content > div > div.top-second-menu-bar.clearfix > div.pull-right');
    if (buttonContainer) {
        buttonContainer.appendChild(debugButton);
        var eventsContainer = document.querySelector('#viewport > div.app-main-container > div.app-main-content > div > div.gr-feature-hybrid-event-content');
        debugButton.addEventListener('click', (e) => {
            if (debugButton.classList.contains('ant-btn-primary')) {
                debugButton.classList.remove('ant-btn-primary');
            } else {
                debugButton.classList.add('ant-btn-primary');
            }
            eventsContainer.childNodes.forEach((child) => {
                eventsContainer.removeChild(child);
            });
            if (platform_list_container) {
                eventsContainer.appendChild(platform_list_container);
                return;
            }
            fetch(location.href, (tags) => {
                var platformGroups = {};
                for (var i = 0; i < tags.length; i++) {
                    var tag = tags[i];
                    var platformTags = platformGroups[tag.platform];
                    if (!platformTags) {
                        platformTags = {};
                        platformGroups[tag.platform] = platformTags;
                    }
                    var domainTags = platformTags[tag.filter.domain];
                    if (!domainTags) {
                        domainTags = {};
                        platformTags[tag.filter.domain] = domainTags;
                    }
                    var pageTags = domainTags[tag.filter.path];
                    if (!pageTags) {
                        pageTags = [];
                        domainTags[tag.filter.path] = pageTags;
                    }
                    pageTags.push(tag);
                }
                if (!document.querySelector("#debgio_style")) {
                    var debgio_style = document.createElement('style');
                    debgio_style.id = "debgio_style";
                    debgio_style.innerHTML = DEBUGIO_STYLE;
                    document.head.appendChild(debgio_style);
                }
                platform_list_container = document.createElement('div');
                platform_list_container.id = "debugio-tag-group-container";
                for (var platform in platformGroups) {
                    platform_list_container.appendChild(generatePlatformContentWith(platform, platformGroups[platform]));
                }
                eventsContainer.appendChild(platform_list_container);
            });
        });
    }
})();