[LIVY-387][WEB UI] Update Log page to split apart different logs

[LIVY-387](https://issues.cloudera.org/browse/LIVY-387)

Added javascript string parsing that finds the stdout, stderr, and YARN Diagnostics sections of the log and displays them in separate scrollable `<pre>` tags.

The `<pre>` tags are set to `max-height: 80%`, this makes scrolling down to each log easy so there is no need for an anchor link at the top of the page, also 80% allows a good sized viewing window. Each log is also set to scroll to the bottom on page load.

Manually Tested

Screenshots
![screen shot 2017-08-01 at 2 58 50 pm](https://user-images.githubusercontent.com/13952758/28849018-f873e4b2-76c9-11e7-8c3c-a7ffded90136.png)
[more will be added tomorrow when I can use my desktop monitor for different sized screenshots, I'm currently working from my laptop]

Author: Alex Bozarth <ajbozart@us.ibm.com>

Closes #27 from ajbozarth/log2.

server/src/main/resources/org/apache/livy/server/ui/static/css/livy-ui.css

@@ -28,6 +28,15 @@ pre {
   white-space: pre-wrap;
 }
 
+#session-log pre {
+  max-height: 80%;
+  overflow: scroll;
+}
+
+#session-log h4 div {
+  display: inline-block;
+}
+
 td .progress {
   margin: 0;
 }

server/src/main/resources/org/apache/livy/server/ui/static/js/session-log.js

@@ -25,9 +25,44 @@ function getLogPath(type, id) {
   }
 }
 
+function logHeader(name) {
+  return "<h4><div data-toggle='tooltip' data-placement='right' "
+    + "title='Only the most recent log lines are displayed "
+    + "(max log lines is set by the livy.cache-log.size config)'>"
+    + name + "</div></h4>";
+}
+
 function parseLog(logLines) {
-  // TODO: [LIVY-387]: Separate out stdout, stderr, and YARN Diagnostics into different viewers
-  return preWrap(logLines.join("\n"));
+  // display non-standard log formats
+  if (!logLines[0].startsWith("stdout")) {
+    return preWrap(logLines.join("\n"));
+  }
+
+  var stderrIndex = 0;
+  var stdoutLines = logLines;
+  var stderrLines = [];
+  var yarnDiagLines = null;
+
+  for (var i = 1; i < logLines.length; i++) {
+    if (stderrIndex == 0 && logLines[i].startsWith("\nstderr")) {
+      stdoutLines = logLines.slice(1, i);
+      stderrLines = logLines.slice(i, logLines.length);
+      stderrIndex = i;
+    } else if (logLines[i].startsWith("\nYARN Diagnostics")) {
+      stderrLines = logLines.slice(stderrIndex + 1, i);
+      yarnDiagLines = logLines.slice(i + 1, logLines.length);
+      break;
+    }
+  }
+
+  var stdoutLog = logHeader("stdout") + preWrap(stdoutLines.join("\n"));
+  var stderrLog = logHeader("stderr") + preWrap(stderrLines.join("\n"));
+  var yarnDiagLog = "";
+  if (yarnDiagLines != null) {
+    yarnDiagLog = "<h4>YARN Diagnostics</h4>" + preWrap(yarnDiagLines.join("\n"));
+  }
+
+  return stdoutLog + stderrLog + yarnDiagLog;
 }
 
 $(document).ready(function () {
@@ -38,6 +73,10 @@ $(document).ready(function () {
   $.getJSON(location.origin + getLogPath(type, id), {size: -1}, function(response) {
     if (response) {
       $("#session-log").append(parseLog(response.log));
+      $('#session-log [data-toggle="tooltip"]').tooltip();
+      $("#session-log pre").each(function () {
+          $(this).scrollTop($(this)[0].scrollHeight);
+      });
     }
   });
 });