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.2
// @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==
// 脚本地址：https://greasyfork.org/zh-CN/scripts/395429-colorful-apm/code
// 颜色色值可以在这个函数里添加，优先匹配子类型，然后匹配类型。
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 = /app/
if (
apmPattern.test(currentURL)
) {
setInterval(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)
console.log(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 = getSpansAndTrans(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 getSpansAndTrans(result) {
var items = result.trace.items
items.sort(function(a, b){
if (a.transaction.id === b.transaction.id) {
return 0
} else if (a.transaction.id > b.transaction.id) {
return 1
}else{
return -1
}})
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]
}
}
}