Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 <head>2  <title>Trace viewer 2</title>3  <style type="text/css">4  5  html {6  font-family: sans-serif;7  }8 9  .logs {10  font-family: monospace;11  }12 13  .logs .log-entry {14  font-family: monospace;15  white-space: pre-wrap;16  }17 18  .logs .log-entry[level="DEBUG"] { color: darkblue; }19  .logs .log-entry[level="INFO"] { color: green; }20  .logs .log-entry[level="WARNING"] { color: darkorange; }21  .logs .log-entry[level="ERROR"] { color: purple; }22  .logs .log-entry[level="FATAL"] { color: red; }23 24  .logs .log-entry[select="1"] { background-color: rgba(0,0,0,0.05); }25  .logs .log-entry[select="2"] { background-color: rgba(0,0,255,0.05); }26  .logs .log-entry[select="3"] { background-color: rgba(0,255,0,0.05); }27  .logs .log-entry[select="4"] { background-color: rgba(0,255,255,0.05); }28  .logs .log-entry[select="5"] { background-color: rgba(255,0,0,0.05); }29  .logs .log-entry[select="6"] { background-color: rgba(255,0,255,0.05); }30  .logs .log-entry[select="7"] { background-color: rgba(255,255,0,0.05); }31  .logs .log-entry[select="8"] { background-color: rgba(0,0,127,0.05); }32  .logs .log-entry[select="9"] { background-color: rgba(0,127,0,0.05); }33  .logs .log-entry[select="0"] { background-color: rgba(0,127,127,0.05); }34  .logs .log-entry[select="10"] { background-color: rgba(127,0,0,0.05); }35  .logs .log-entry[select="11"] { background-color: rgba(127,0,127,0.05); }36  .logs .log-entry[select="12"] { background-color: rgba(127,127,0,0.05); }37  .logs .log-entry[select="13"] { background-color: rgba(127,127,127,0.05); }38 39  .logs[select="1"] .log-entry[select="1"],40  .logs[select="2"] .log-entry[select="2"],41  .logs[select="3"] .log-entry[select="3"],42  .logs[select="4"] .log-entry[select="4"],43  .logs[select="5"] .log-entry[select="5"],44  .logs[select="6"] .log-entry[select="6"],45  .logs[select="7"] .log-entry[select="7"],46  .logs[select="8"] .log-entry[select="8"],47  .logs[select="9"] .log-entry[select="9"],48  .logs[select="0"] .log-entry[select="0"],49  .logs[select="10"] .log-entry[select="10"],50  .logs[select="11"] .log-entry[select="11"],51  .logs[select="12"] .log-entry[select="12"],52  .logs[select="13"] .log-entry[select="13"] {53  background-color: rgba(0,255,0,0.45);54  }55  56  .viewer {57  position: relative;58  _border: solid silver 1px;59  height: 200px;60  }61 62  .viewer .span {63  background-color: rgba(200,220,255,0.6);64  position: absolute;65  height: 16px;66  cursor: pointer;67  text-align: center;68  font-size: 10px;69  line-height: 16px;70  text-overflow: ellipsis;71  overflow: hidden;72  white-space: nowrap;73  font-family: monospace;74  transition: all 0.5s ease;75  }76 77  .viewer[span_parallel="true"] .span[paralell_index="0"] { top: 0px !important; }78  .viewer[span_parallel="true"] .span[paralell_index="1"] { top: 18px !important; }79  .viewer[span_parallel="true"] .span[paralell_index="2"] { top: 36px !important; }80  .viewer[span_parallel="true"] .span[paralell_index="3"] { top: 54px !important; }81  .viewer[span_parallel="true"] .span[paralell_index="4"] { top: 72px !important; }82  .viewer[span_parallel="true"] .span[paralell_index="5"] { top: 90px !important; }83  .viewer[span_parallel="true"] .span[paralell_index="6"] { top: 108px !important; }84  .viewer[span_parallel="true"] .span[paralell_index="7"] { top: 126px !important; }85  .viewer[span_parallel="true"] .span[paralell_index="8"] { top: 144px !important; }86  .viewer[span_parallel="true"] .span[paralell_index="9"] { top: 162px !important; }87  .viewer[span_parallel="true"] .span[paralell_index="10"] { top: 180px !important; }88 89  .viewer[colorize_mrs="true"] .span[mrcolor="0"] { background-color: rgba(0,0,255,0.3); }90  .viewer[colorize_mrs="true"] .span[mrcolor="1"] { background-color: rgba(0,255,0,0.3); }91  .viewer[colorize_mrs="true"] .span[mrcolor="2"] { background-color: rgba(0,255,255,0.3); }92  .viewer[colorize_mrs="true"] .span[mrcolor="3"] { background-color: rgba(255,0,0,0.3); }93  .viewer[colorize_mrs="true"] .span[mrcolor="4"] { background-color: rgba(255,0,255,0.3); }94  .viewer[colorize_mrs="true"] .span[mrcolor="5"] { background-color: rgba(255,255,0,0.3); }95  .viewer[colorize_mrs="true"] .span[mrcolor="6"] { background-color: rgba(255,255,255,0.3); }96  .viewer[colorize_mrs="true"] .span[mrcolor="7"] { background-color: rgba(0,0,0,0.3); }97 98  .viewer .span:hover {99  box-shadow: 0 0 1px blue;100  } 101 102  .traces [trace_id] {103  font-family: monospace;104  white-space: pre-wrap;105  cursor: pointer;106  }107 108  .traces [trace_id]:hover {109  color: blue;110  }111  112  .traces [selected="true"] {113  color: blue;114  font-weight: bold;115  }116  117  .details {118  display: none;119  position: fixed;120  top: 0;121  bottom: 0;122  right: 0;123  left: 0;124  background-color: rgba(255,255,255,0.8);125  }126  127  .detail {128  position: absolute;129  top: 50%;130  left: 50%;131  min-width: 400px;132  min-height: 300px;133  max-width: 90%;134  max-height: 90%;135  transform: translate(-50%, -50%);136  border: solid silver 1px;137  background-color: rgba(255,255,255,0.6);138  padding: 16px;139  border-radius: 3px;140  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);141  overflow: auto;142  }143 144  .detail-content {145  font-family: monospace;146  white-space: pre-wrap;147  }148 149  .detail-close {150  color: blue;151  text-align: right;152  cursor: pointer;153  position: absolute;154  top: 0;155  right: 0;156  padding: 3px 6px;157  font-size: 85%;158  }159 160 161  </style>162 </head>163 <body>164 165  <h1>Trace viewer 2</h1>166 167  <div>168  <label>Spans parallel <input id="checkbox_spans_parallel" type="checkbox"> </label> &nbsp;&nbsp;&nbsp;&nbsp;169  <label>Colorize MRs <input id="checkbox_colorize_mrs" type="checkbox"> </label> &nbsp;&nbsp;&nbsp;&nbsp;170  </div>171 172  <div class="viewer" id="viewer"></div>173 174  <div style="float:left; width: 340px;">175  <h2>Traces</h2>176  <div>Paste your traces here <textarea id="input_traces" rows="1"></textarea></div>177  <div class="traces" id="div_traces"></div> 178  </div>179 180  <div style="margin-left: 340px;"> 181  <h2>Logs</h2>182  <div class="logs" id="div_logs"></div>183 184  <!--185  <h2>Spare logs</h2>186  <div class="logs" id="spare_logs"></div>187  -->188  </div>189  190  <div id="details" class="details">191  <div id="detail" class="detail">192  <div id="detail-close" class="detail-close">close</div>193  <div id="detail-content" class="detail-content">194  hello195  </div>196  </div>197  </div>198 199  <script type="text/javascript">200  201  var details = document.getElementById('details');202  var detail_content = document.getElementById('detail-content');203  var detail_close = document.getElementById('detail-close');204 205  function closeDetail() {206  details.style.display = 'none';207  }208 209  function showDetail(content) {210  details.style.display = 'block';211  detail_content.textContent = content;212  }213 214  detail_close.addEventListener('click', closeDetail, true);215 216 217  var checkbox_spans_parallel = document.getElementById('checkbox_spans_parallel');218  checkbox_spans_parallel.addEventListener('click', function() {219  var viewer = document.getElementById('viewer');220  viewer.setAttribute('span_parallel', this.checked);221  }, true);222 223  var checkbox_colorize_mrs = document.getElementById('checkbox_colorize_mrs');224  checkbox_colorize_mrs.addEventListener('click', function() {225  var viewer = document.getElementById('viewer');226  viewer.setAttribute('colorize_mrs', this.checked);227  }, true);228 229  var lines = [];230 231  var add_line = function(line) {232  lines.push(line);233  };234 235  var span_parallell = true;236 237  var traces = {};238 239  var add_trace = function(line) {240 241  var parts = line.split('|');242 243  if ('TRACE.CREATE' == parts[1]) {244  var details = JSON.parse(parts[4]);245  var traceId = details.traceId;246 247  if (traceId in traces) {248  return true; // Already created :D249  }250 251  var trace = {252  id: traceId,253  namespace: parts[2],254  timestamp: parts[3],255  spans: {},256  }257  traces[traceId] = trace;258 259  print_trace_index(trace);260 261  return true; // Trace created :D262 263  } else if ('TRACE.SPAN.START' == parts[1]) {264  // "V1|TRACE.SPAN.START|ns|ac115589-d06d-49c7-81d5-525eedb48989|1517055732001191061|{"spanId":"71e51a26-c5d8-4de1-a258-463ca8f167af","monitoredResource":{"_id":"59bb80e520988c09f76c8e1f"},"startTime":1517055732001191061,"name":"","kind":"HTTP_SERVER","details":{"protocol":"http"}}"265 266  var traceId = parts[3];267 268  var trace = traces[traceId];269  if (!trace) {270  return false;271  }272 273  var details = JSON.parse(parts[5]);274 275  var spanId = details.spanId;276 277  var span = trace.spans[spanId];278  if (!span) {279  details.logs = [];280  trace.spans[spanId] = details;281  }282 283  return true;284 285  } else if ('TRACE.SPAN.FINISH' == parts[1]) {286  // "V1|TRACE.SPAN.FINISH|ns|ac115589-d06d-49c7-81d5-525eedb48989|1517055732005564980|{"spanId":"71e51a26-c5d8-4de1-a258-463ca8f167af","monitoredResource":{"_id":"59bb80e520988c09f76c8e1f"},"endTime":1517055732005500355,"details":{"http_response_status":201},"properties":{"handler":"/v0/organizations/{organization}:createNamespace","method":"POST","path":"/v0/organizations/jj:createNamespace","url":"/v0/organizations/jj:createNamespace"}}"287 288  var traceId = parts[3];289 290  var trace = traces[traceId];291  if (!trace) {292  return false;293  }294 295  var details = JSON.parse(parts[5]);296 297  var spanId = details.spanId;298 299  var span = trace.spans[spanId];300  if (!span) {301  console.log('span not started :_( ');302  return false;303  }304 305  span.endTime = details.endTime;306  span.properties = details.properties;307  span.details = details.details;308 309  return true;310  }311 312  };313 314  var last_selected_trace = null;315  var select_trace = function(div) {316  if (last_selected_trace) {317  last_selected_trace.setAttribute('selected', 'false');318  }319  last_selected_trace = div;320  last_selected_trace.setAttribute('selected', 'true');321  var trace_id = div.getAttribute('trace_id');322  print_trace(trace_id);323  };324  325  var print_trace_index = function(trace) {326  var parent = document.getElementById('div_traces');327 328  var div = document.createElement('div');329  div.setAttribute('trace_id', trace.id);330  div.textContent = trace.id; 331  div.addEventListener('click', function(e) {332  select_trace(this);333  }, true);334 335  parent.appendChild(div);336  };337 338 339  var pretty_nanos = function(nanos) {340 341  var power = 1000;342  var units = ['ns', 'µs', 'ms'];343  var i = 0;344  for (; nanos > power;) {345  i++;346  nanos /= power;347  }348 349  return nanos.toFixed(1) + units[i];350 351  };352 353  var print_trace = function(traceId) {354 355  var viewer = document.getElementById('viewer');356  viewer.innerHTML = '';357 358  var div_logs = document.getElementById('div_logs');359  div_logs.innerHTML = '';360 361  var trace = traces[traceId];362 363  var timestamp_min = null;364  var timestamp_max = null;365 366  var span2color={};367  var color2span={};368  var spanCounter=0;369  370  var mr2color={};371  var mrCounter=0;372 373  for (var spanId in trace.spans) {374  var span = trace.spans[spanId];375 376  if (null === timestamp_min || timestamp_min>span.startTime) {377  timestamp_min = span.startTime;378  }379 380  if (null === timestamp_max || timestamp_max<span.endTime) {381  timestamp_max = span.endTime;382  }383 384  var color = span2color[spanId]385  if (!color) {386  span2color[spanId] = spanCounter;387  color2span[spanCounter] = spanId;388  spanCounter++;389  }390 391  }392 393  var timestamp_range = timestamp_max - timestamp_min;394 395  var span_deep = function(span) {396 397  var MAX_DEEP = 100;398 399  for (var deep = 0; deep<MAX_DEEP; deep++) {400 401  var parentSpanId = span.parentSpanId;402  if (!parentSpanId) {403  return deep;404  }405 406  span = trace.spans[parentSpanId];407  if (!span) {408  return deep;409  }410  }411 412  return undefined;413  };414 415  var logs = [];416  var i=0;417  for (var spanId in trace.spans) {418  var span = trace.spans[spanId];419 420  var span_delay = span.endTime-span.startTime;421 422  span.logs.map(function(log) {logs.push(log); });423 424  var left = (100*(span.startTime-timestamp_min)/timestamp_range).toFixed(2)425 426  var div = document.createElement('div');427  div.setAttribute('span_id', span.spanId);428  div.className = 'span';429  div.style.top = i*18 + 'px';430  div.setAttribute('paralell_index', span_deep(span));431  /*432  if (span_parallell) {433  div.style.top = span_deep(span)*18 + 'px';434  } else {435  div.style.top = i*18 + 'px';436  }*/437  div.style.left = left + '%';438  div.style.width = 100*(span.endTime-span.startTime)/timestamp_range + '%';439  div.addEventListener('mouseover', function(e){440  div_logs.setAttribute('select', span2color[this.getAttribute('span_id')] );441  }, true);442  div.addEventListener('click', function() {443  var s = trace.spans[this.getAttribute('span_id')];444  showDetail(JSON.stringify(s, '', ' '));445  }, true);446  447  var content = ' ';448  // content += '[' + span_deep(span) + ']';449  if (span.name) {450  content += span.name + ' ';451  } else {452  content += '<no-name> ';453  }454  content += '(' + pretty_nanos(span_delay) + ') ';455  if (span.logs.length) {456  content += span.logs[0].message;457  }458 459  div.textContent = content;460  div.setAttribute('title', content);461  462  var mr = span.monitoredResource._id;463  var mrColor = mr2color[mr];464  if (mrColor===undefined) {465  mr2color[mr] = mrCounter;466  mrColor = mrCounter;467  mrCounter++;468  }469  div.setAttribute('mrColor', mrColor);470  471 472  viewer.appendChild(div);473 474  i++;475  }476 477  // TODO: sort logs by timestamp...478  logs.sort( (a,b) => a.timestamp - b.timestamp );479 480  logs.map(function(log) {481  var div = document.createElement('div');482  div.className = 'log-entry';483  div.setAttribute('level', log.level);484  div.setAttribute('span_id', log.spanId);485  div.setAttribute('select', span2color[log.spanId]);486  div.textContent = (new Date(log.timestamp/1000000))+ '\t' +log.level + '\t' + log.message;487  div_logs.appendChild(div);488  });489 490  };491 492  var spare_logs = document.getElementById('spare_logs');493 494  var add_log = function(log) {495 496  //V1|LOG.INFO|ns|59bb80e520988c09f76c8e1f|7b35c96c-7405-4705-bba2-417e5f6415dc|78c84606-f966-41f1-8509-fc71c473e0d8|1517069566344381262|Response status: '200 OK'497 498  var parts = log.split('|');499 500  var traceId = parts[4];501 502  var trace = traces[traceId];503  if (!trace) {504  return false;505  }506 507  var spanId = parts[5];508  var span = trace.spans[spanId];509  if (!span) {510  return false;511  }512 513  var level = parts[1].split('.')[1];514  var message = parts[7];515 516  span.logs.push({517  spanId: spanId,518  level: level,519  message: message,520  timestamp: parts[6],521  });522 523  return true;524  };525  526  var input_traces = document.getElementById('input_traces');527  input_traces.addEventListener('paste', function(e) {528  var text = e.clipboardData.getData('text');529  process_text(text);530  if (!last_selected_trace) {531  var trace = document.getElementById('div_traces').firstElementChild;532  if (trace) {533  select_trace(trace);534  }535  }536  }, true);537 538  input_traces.addEventListener('keyup', function(e) {539  if (13 == e.keyCode) {540  process_text(this.value);541  }542  }, true);543 544  var process_text = function(text) {545  var lines = text.split('\n');546  lines.map(add_line);547  process_lines();548  };549 550  var process_lines = function() {551  var n = 1;552  while (n) {553  n = process_lines_iterative();554  }555  };556 557  var process_lines_iterative = function() {558 559  var remove = [];560 561  for (var i in lines) {562  var line = lines[i];563 564  var processed = false;565  if (line.startsWith('V1|LOG')) {566  processed = add_log(line);567  } else if (line.startsWith('V1|TRACE')) {568  processed = add_trace(line);569  }570 571  if (processed) {572  remove.push(i);573  }574  }575 576  for (var i=remove.length-1; i>=0; i--) {577  var j = remove[i];578  lines.splice(j, 1);579  }580 581  return remove.length;582  };583 584  </script>585 586 </body>587 


Este ShareCode tiene versiones:
  1. Trace viewer 2 html { ... (21/09/2018)
Enlace
El enlace para compartir es:

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados