Greasy Fork is available in English.
In kibana 7.5's apm, all span's background color is the same blue.
当前为
// ==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
// ==/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]
}
}
}