// ==UserScript==
// @name         Colorful APM
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  In kibana 7.5's apm, all span's background color is the same blue.
// @author       gukz
// @match        https://kiblog.shanbay.com/app/apm
// @grant        none
// @downloadURL none
// ==/UserScript==

// 颜色色值可以在这个函数里添加，优先匹配子类型，然后匹配类型。
function subtype2color(type, subtype) {
    var obj = {
        "mysql": "rgb(51, 161, 201)",
        "redis": "rgb(219, 19, 116)",
        "grpc": "rgb(34, 139, 34)",
        "http": "rgb(240, 230, 140)",
        "pug": "rgb(48, 128, 20)",
        "external": "black",
    }
    if (Boolean(subtype)) {
        subtype = subtype.toLowerCase()
        if (Boolean(obj[subtype])) {
            return obj[subtype]
        }
    }
    if (Boolean(type)) {
        type = type.toLowerCase()
        if (Boolean(obj[type])) {
            return obj[type]
        }
    }
}

(function() {
    'use strict';
    var currentURL = window.location.href;
    var apmPattern = /apm/;
    if (
        apmPattern.test(currentURL)
    ) {
        document.onreadystatechange = subSomething;
        function subSomething(){
            if(document.readyState == "complete"){
                setInterval(runner, 500)
                // setTimeout(runner, 500)
            }
        }
    }
})();
var trace2result = {}

function runner() {
    var pt1 = /services/;
    var pt2 = /transactions/;
    var pt3 = /view/;
    var currentURL = window.location.href;
    if (!(pt1.test(currentURL) &&
        pt2.test(currentURL) &&
        pt3.test(currentURL)
    )){
        return
    }
    var traceId = getQuery("traceId")
    var traceName = getQuery("transactionName")
    if (!Boolean(traceId) || !Boolean(traceName)) {
        return
    }
    traceName = decodeURIComponent(traceName)
    if (Boolean(trace2result[traceId])) {
        replaceGantColor(traceName, trace2result[traceId])
    } else {
        // 当前页面为apm某个服务的详情页面
        var url = "/api/apm/traces/" + traceId + "?start=2020-01-16T08%3A11%3A07.028Z&end=2040-01-18T09%3A11%3A07.028Z"
        $.ajax({
            url: url,
            type: "GET",
            success: function(result) {
                trace2result[traceId] = result
                replaceGantColor(traceName, result)
           },
        })
    }
}

function replaceGantColor(traceName, result) {
    var svg_tags = document.getElementsByClassName("rv-xy-plot__inner")
    var fatherTags = $("#react-apm-root > div > div > div.euiFlexGroup.euiFlexGroup--gutterLarge.euiFlexGroup--directionRow.euiFlexGroup--responsive > div.euiFlexItem.euiFlexItem--flexGrow7 > div:nth-child(7) > div:nth-child(6) > div.sc-cmTdod.cklMTT > div > div:nth-child(2)")
    var chil = fatherTags.children()
    var items = getSpans(traceName, result)
    if (items.length <= chil.length - 1) {
        // 某些场景下，某些span会变成transaction，这里也进行颜色渲染
        items = getAllItems(result)
    }
    for(var i=0;i<items.length;i++){
        var item = items[i]
        if (Boolean(item.span)){
            var color = subtype2color(item.span.type, item.span.subtype)
            $($(chil[items.length - i-1]).children()[0]).css("background-color", color)
        }
    }
}

function getSpans(transName, result) {
    var items = result.trace.items
    // 找出 transaction 的id
    var transactionId = items[0].transaction.id
    var spans = []
    spans.push(items[0])
    for(var i=0;i<items.length;i++){
        if (items[i].transaction.name == transName){
            transactionId = items[i].transaction.id
            spans[0] = items[i]
        }
    }
    // 找出这个transaction下的所有span
    for(var j=0;j<items.length;j++){
        if (items[j].transaction.id == transactionId && Boolean(items[j].span)){
            spans.push(items[j])
        }
    }
    spans.sort(function(a,b){return b.timestamp.us - a.timestamp.us})
    return spans
}

function getAllItems(result) {
    var items = result.trace.items
    items.sort(function(a,b){return b.timestamp.us - a.timestamp.us})
    return items
}

function getQuery(name){
    var url = window.location.href
    var query = url.substr(url.indexOf("?"))
    var items = query.split("&")
    for(var i=0; i < items.length; i++){
        var item = items[i].split("=")
        if(item[0] == name){
            return item[1]
        }
    }
}