jfuerth/logviewer.html

## logviewer.html
<!DOCTYPE html>
        <html>
<head>
    <title>Log visualizer</title>
    <style type="text/css">
        div.logEntry {
          border-bottom: 1px;
          border-bottom-color: black;
          border-bottom-style: solid;
          position: relative;
          overflow: hidden;
        }
        .logEntry span {
           position: absolute;
           bottom: 0;
           left: 0;
        }
    </style>
</head>

<textarea id="input"></textarea>
<button onclick="viewlogs()">Show it!</button>

<div id="logview">
    Paste a log above then press the button!
</div>

<script type="application/javascript">
//2016-07-11T18:02:28.32-0400
//var datePattern = //;

function extractMilliTime(logEntry) {
  return Date.parse(logEntry.substring(0, 27));
}

function viewlogs() {
  var log = document.getElementById("input").value;
  var view = document.getElementById("logview")
  var lines = log.split("\n");

  var startTime = extractMilliTime(lines[0]);
  var lastTime = startTime;

  for (var lineNum = 0; lineNum < lines.length; lineNum++) {
    var logEntry = lines[lineNum];
    var thisTime = extractMilliTime(logEntry);
    var delta = thisTime - lastTime;

    var div = document.createElement("div");
    var span = document.createElement("span");
    span.innerText = delta + "ms " + logEntry;
    div.style.height = delta + "px";
    div.className = "logEntry";
    div.appendChild(span);
    view.appendChild(div);

    lastTime = thisTime;
  }
}
</script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Log visualizer</title>
	<style type="text/css">
	div.logEntry {
	border-bottom: 1px;
	border-bottom-color: black;
	border-bottom-style: solid;
	position: relative;
	overflow: hidden;
	}
	.logEntry span {
	position: absolute;
	bottom: 0;
	left: 0;
	}
	</style>
	</head>

	<textarea id="input"></textarea>
	<button onclick="viewlogs()">Show it!</button>

	<div id="logview">
	Paste a log above then press the button!
	</div>

	<script type="application/javascript">
	//2016-07-11T18:02:28.32-0400
	//var datePattern = //;

	function extractMilliTime(logEntry) {
	return Date.parse(logEntry.substring(0, 27));
	}

	function viewlogs() {
	var log = document.getElementById("input").value;
	var view = document.getElementById("logview")
	var lines = log.split("\n");

	var startTime = extractMilliTime(lines[0]);
	var lastTime = startTime;

	for (var lineNum = 0; lineNum < lines.length; lineNum++) {
	var logEntry = lines[lineNum];
	var thisTime = extractMilliTime(logEntry);
	var delta = thisTime - lastTime;

	var div = document.createElement("div");
	var span = document.createElement("span");
	span.innerText = delta + "ms " + logEntry;
	div.style.height = delta + "px";
	div.className = "logEntry";
	div.appendChild(span);
	view.appendChild(div);

	lastTime = thisTime;
	}
	}
	</script>

	</html>