From 4e74e161f032c4cf091406abdf5682a1c47718e9 Mon Sep 17 00:00:00 2001
From: Brad Rydzewski <brad.rydzewski@gmail.com>
Date: Wed, 11 May 2016 00:36:01 -0700
Subject: [PATCH] quick hack to enable log sections

---
 server/build.go                |  8 +++----
 static/scripts/build.js        | 42 ++++++++++++++++++++++++++++++----
 static/scripts/term_buf.js     |  2 +-
 static/styles/pages/build.sass | 28 +++++++++++++++++++++--
 static/styles_gen/style.css    |  6 +++++
 template/amber/build.amber     |  2 +-
 6 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/server/build.go b/server/build.go
index c996a9f67..e3d50052e 100644
--- a/server/build.go
+++ b/server/build.go
@@ -1,7 +1,6 @@
 package server
 
 import (
-	"io"
 	"net/http"
 	"strconv"
 	"time"
@@ -12,6 +11,7 @@ import (
 	"github.com/drone/drone/remote"
 	"github.com/drone/drone/shared/httputil"
 	"github.com/drone/drone/store"
+	"github.com/drone/drone/stream"
 	"github.com/gin-gonic/gin"
 	"github.com/square/go-jose"
 
@@ -108,10 +108,10 @@ func GetBuildLogs(c *gin.Context) {
 
 	defer r.Close()
 	if full {
-		io.Copy(c.Writer, r)
-	} else {
-		io.Copy(c.Writer, io.LimitReader(r, 2000000))
+		// TODO implement limited streaming to avoid crashing the browser
 	}
+
+	stream.Copy(c.Writer, r)
 }
 
 func DeleteBuild(c *gin.Context) {
diff --git a/static/scripts/build.js b/static/scripts/build.js
index 98615810d..a152d09bf 100644
--- a/static/scripts/build.js
+++ b/static/scripts/build.js
@@ -5,7 +5,7 @@ function JobViewModel(repo, build, job, status) {
 	self.status = status;
 
 	self.stream = function() {
-		$( "#output" ).html("");
+		$("#output").html("");
 		$("#restart").hide();
 		$("#cancel").show();
 
@@ -69,7 +69,7 @@ function JobViewModel(repo, build, job, status) {
 		});
 	})
 
-			
+
 	Subscribe(repo, function(data){
 		if (!data.jobs) {
 			return;
@@ -141,10 +141,42 @@ function Logs(repo, build, job) {
 
 	$.get( "/api/repos/"+repo+"/logs/"+build+"/"+job, function( data ) {
 
-		var convert = new Filter({stream: false, newline: false});
-		var escaped = convert.toHtml(escapeHTML(data));
+		var lines = JSON.parse(data);
 
-		$( "#output" ).html( escaped );
+		var groups = {}
+		for (var i=0; i<lines.length; i++) {
+			var line = lines[i];
+
+			if (!line.proc) {
+				continue
+			}
+
+			var group = groups[line.proc];
+
+			if (!group) {
+
+				// create an element to hold the group of output
+				var pre = $("<pre>").attr("data-title", line.proc);
+				$("#output").append(pre);
+
+				// create the buffer for the group of output
+				var buf = new Drone.Buffer();
+				buf.start(pre[0]);
+
+				// add items to the group
+				group = {
+					pre: pre,
+					buf: buf,
+				};
+				groups[line.proc]=group;
+			}
+
+			group.buf.write(line.out+"\n");
+		}
+
+		for (var i=0; i<groups.length; i++) {
+			groups[i].buf.stop();
+		}
 	});
 }
 
diff --git a/static/scripts/term_buf.js b/static/scripts/term_buf.js
index a1e8545b9..a2fed63a7 100644
--- a/static/scripts/term_buf.js
+++ b/static/scripts/term_buf.js
@@ -49,4 +49,4 @@ if(typeof(Drone) === 'undefined') { Drone = {}; }
 		}
 	};
 
-})();
\ No newline at end of file
+})();
diff --git a/static/styles/pages/build.sass b/static/styles/pages/build.sass
index c76844303..325223e6d 100644
--- a/static/styles/pages/build.sass
+++ b/static/styles/pages/build.sass
@@ -17,6 +17,30 @@
 	font-family: "Roboto Mono";
 	min-height: calc(100vh - 205px);
 
+#output > pre
+	font-size: 13px;
+	color: #eff1f5;
+	border-radius: 2px;
+	background: #2b303b;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	box-sizing: border-box;
+	padding: 0px;
+	font-family: "Roboto Mono";
+	margin: 0px;
+	margin-top:25px;
+
+#output > pre:first-child
+	margin-top: 0px;
+
+#output > pre:before
+	content: attr(data-title);
+	display: block;
+	padding: 5px;
+	margin-bottom: 10px;
+	border-bottom: 1px solid rgba(255,255,255,0.3);
+	padding-left: 0px;
+
 #follow
 	position: absolute;
 
@@ -49,7 +73,7 @@
 	dd
 		color: #747C84;
 		text-decoration: none;
-		font-style: normal;	
+		font-style: normal;
 
 .build-summary > div
 	h3
@@ -155,7 +179,7 @@
 	border: none;
 	outline: none;
 	display: none;
- 
+
 .tail i
 	color: rgba(255,255,255,0.5);
 	line-height: 38px;
diff --git a/static/styles_gen/style.css b/static/styles_gen/style.css
index b626299e4..27f33570b 100644
--- a/static/styles_gen/style.css
+++ b/static/styles_gen/style.css
@@ -134,6 +134,12 @@ input[type=range]:focus::-ms-fill-upper { background: #367ebd; }
 
 #output { background: #0d1926; color: #d9e6f2; margin-right: 15px; font-size: 13px; color: #eff1f5; border-radius: 2px; background: #2b303b; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; padding: 35px 40px; font-family: "Roboto Mono"; min-height: calc(100vh - 205px); }
 
+#output > pre { font-size: 13px; color: #eff1f5; border-radius: 2px; background: #2b303b; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; padding: 0px; font-family: "Roboto Mono"; margin: 0px; margin-top: 25px; }
+
+#output > pre:first-child { margin-top: 0px; }
+
+#output > pre:before { content: attr(data-title); display: block; padding: 5px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-left: 0px; }
+
 #follow { position: absolute; }
 
 .build-summary { padding-left: 20px; }
diff --git a/template/amber/build.amber b/template/amber/build.amber
index 3ff2d60e9..4308f718d 100644
--- a/template/amber/build.amber
+++ b/template/amber/build.amber
@@ -84,7 +84,7 @@ block content
                 if Job.Error != ""
                     div.alert.alert-danger #{Job.Error}
                 else
-                    pre#output
+                    div#output
                     button.tail#tail
                         i.material-icons expand_more