NR Transaction Trace formatter

trace.js

const THRESHOLD = 1000;
const FONTS = {google: {families: ['Open Sans Condensed:300,300i,700']}};
const STYLESHEET = "body{font-family:'Open Sans Condensed',sans-serif}span.default{color:#00f}span.summary{color:gray;font-style:italic}span.hilite{color:red;font-weight:700}ul.tree li{list-style-type:none;position:relative}ul.tree li ul{display:none}ul.tree li.open>ul{display:block}ul.tree li a{color:#000;text-decoration:none}ul.tree li a:before{height:1em;padding:0 .1em;font-size:.8em;display:block;position:absolute;left:-1.3em;top:.2em}ul.tree li>a:not(:last-child):before{content:'+'}ul.tree li.open>a:not(:last-child):before{content:'-'}";

(function init(doc) {
  function summaryElements(txt) {
    var ret = [];
    var br = doc.createElement('br');
    ret.push(br);
    var summarySpan = doc.createElement('span');
    summarySpan.className = 'summary';
    var summaryText = doc.createTextNode('' + txt);
    summarySpan.appendChild(summaryText);
    ret.push(summarySpan);
    return ret;
  }

  function treeify(obj, level, elem) {
    var nextElem;
    if (level===0) nextElem = elem;
    if (level>0) {
      var link = doc.createElement('a');
      var linkSpan = doc.createElement('span');
      var dur = obj[1] - obj[0];
      var spanText = doc.createTextNode('' + dur + ' ms ');
      linkSpan.appendChild(spanText);
      linkSpan.className = 'default';
      if (THRESHOLD && dur > THRESHOLD) linkSpan.className = 'hilite';
      link.appendChild(linkSpan);
      var linkText = doc.createTextNode(' ' + obj[5] + ' - ' + obj[6]);
      link.appendChild(linkText);
      if (obj[3]) {
        if ('uri' in obj[3]) summaryElements(obj[3]['uri']).forEach((se) => link.appendChild(se));
        if ('host' in obj[3] && 'database_name' in obj[3]) summaryElements(obj[3]['host'] + ' - ' + obj[3]['database_name']).forEach((se) => link.appendChild(se));
        if ('sql_obfuscated' in obj[3]) summaryElements(obj[3]['sql_obfuscated']).forEach((se) => link.appendChild(se));
      }
      link.href = '#';
      var list = doc.createElement("li");
      list.appendChild(link);
      elem.appendChild(list);
    }

    if (obj[4] && obj[4].length) {
      if (level>0) {
        var ul = doc.createElement("ul");
        list.appendChild(ul);
        nextElem = ul;
      }
      var child = obj[4];
      level += 1;
      child.forEach(c => treeify(c, level, nextElem));
    }
  }
  WebFontConfig = FONTS;
  var gf = doc.createElement('script');
  gf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
  var trace = JSON.parse(doc.body.innerText);
  var head = doc.getElementsByTagName('head')[0];
  head.appendChild(gf);
  var style = doc.createElement('style');
  style.type= 'text/css';
  head.appendChild(style);
  style.innerHTML = STYLESHEET;
  var tree = doc.createElement('ul');
  tree.className = 'tree';
  if (trace[3]) treeify(trace[3], 0, tree);

  var body = doc.createElement('body');
  doc.body = body;
  doc.body.appendChild(tree);

  var leaves = doc.querySelectorAll('ul.tree a:not(:last-child)');
  for (var i=0; i<leaves.length; i+=1) {
    leaves[i].addEventListener('click', function(e) {
      var parent = e.target.parentElement;
      var classList = parent.classList;
      if (classList.contains('open')) {
        classList.remove('open');
        var opensubs = parent.querySelectorAll(':scope .open');
        for (var i=0; i<opensubs.length; i+=1) {
          opensubs[i].classList.remove('open');
        }
      } else {
        classList.add('open');
      }
    });
  }
})(document);