Colorful APM

In kibana 7.5's apm, all span's background color is the same blue.

  1. // ==UserScript==
  2. // @name Colorful APM
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2
  5. // @description In kibana 7.5's apm, all span's background color is the same blue.
  6. // @author gukz
  7. // @match https://kiblog.shanbay.com/app/apm
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. // 脚本地址:https://gf.qytechs.cn/zh-CN/scripts/395429-colorful-apm/code
  12. // 颜色色值可以在这个函数里添加,优先匹配子类型,然后匹配类型。
  13. function subtype2color(type, subtype) {
  14. var obj = {
  15. "mysql": "rgb(51, 161, 201)",
  16. "redis": "rgb(219, 19, 116)",
  17. "grpc": "rgb(34, 139, 34)",
  18. "http": "rgb(240, 230, 140)",
  19. "pug": "rgb(48, 128, 20)",
  20. "external": "black",
  21. }
  22. if (Boolean(subtype)) {
  23. subtype = subtype.toLowerCase()
  24. if (Boolean(obj[subtype])) {
  25. return obj[subtype]
  26. }
  27. }
  28. if (Boolean(type)) {
  29. type = type.toLowerCase()
  30. if (Boolean(obj[type])) {
  31. return obj[type]
  32. }
  33. }
  34. }
  35.  
  36. (function() {
  37. 'use strict'
  38. var currentURL = window.location.href
  39. var apmPattern = /app/
  40. if (
  41. apmPattern.test(currentURL)
  42. ) {
  43. setInterval(runner, 500)
  44. }
  45. })();
  46. var trace2result = {}
  47.  
  48. function runner() {
  49. var pt1 = /services/;
  50. var pt2 = /transactions/;
  51. var pt3 = /view/;
  52. var currentURL = window.location.href;
  53. if (!(pt1.test(currentURL) &&
  54. pt2.test(currentURL) &&
  55. pt3.test(currentURL)
  56. )){
  57. return
  58. }
  59. var traceId = getQuery("traceId")
  60. var traceName = getQuery("transactionName")
  61. if (!Boolean(traceId) || !Boolean(traceName)) {
  62. return
  63. }
  64. traceName = decodeURIComponent(traceName)
  65. if (Boolean(trace2result[traceId])) {
  66. replaceGantColor(traceName, trace2result[traceId])
  67. } else {
  68. // 当前页面为apm某个服务的详情页面
  69. var url = "/api/apm/traces/" + traceId + "?start=2020-01-16T08%3A11%3A07.028Z&end=2040-01-18T09%3A11%3A07.028Z"
  70. $.ajax({
  71. url: url,
  72. type: "GET",
  73. success: function(result) {
  74. trace2result[traceId] = result
  75. replaceGantColor(traceName, result)
  76. console.log(result)
  77. },
  78. })
  79. }
  80. }
  81.  
  82. function replaceGantColor(traceName, result) {
  83. // 替换甘特图色块颜色
  84. var svg_tags = document.getElementsByClassName("rv-xy-plot__inner")
  85. 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)")
  86. var chil = fatherTags.children()
  87. var items = getSpansAndTrans(result)
  88. for(var i=0;i<items.length;i++){
  89. var item = items[i]
  90. if (Boolean(item.span)){
  91. var color = subtype2color(item.span.type, item.span.subtype)
  92. $($(chil[items.length - i-1]).children()[0]).css("background-color", color)
  93. }
  94. }
  95. }
  96. function getSpansAndTrans(result) {
  97. var items = result.trace.items
  98. items.sort(function(a, b){
  99. if (a.transaction.id === b.transaction.id) {
  100. return 0
  101. } else if (a.transaction.id > b.transaction.id) {
  102. return 1
  103. }else{
  104. return -1
  105. }})
  106. items.sort(function(a, b){return b.timestamp.us - a.timestamp.us})
  107. return items
  108. }
  109.  
  110. function getQuery(name){
  111. var url = window.location.href
  112. var query = url.substr(url.indexOf("?"))
  113. var items = query.split("&")
  114. for(var i=0; i < items.length; i++){
  115. var item = items[i].split("=")
  116. if(item[0] == name){
  117. return item[1]
  118. }
  119. }
  120. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址