Moved ansi2html into the frontend JS

3 files changed, 90 insertions, 2 deletions

diff --git a/app/assets/javascripts/ci/ansi2html.js.coffee b/app/assets/javascripts/ci/ansi2html.js.coffee
new file mode 100644
index 00000000000..ce1660a5822
--- /dev/null
+++ b/app/assets/javascripts/ci/ansi2html.js.coffee
@@ -0,0 +1,73 @@
+class @Ansi2Html
+  constructor: ->
+    @_colorRegex = /\[[0-9]+;[0-9]?m/g
+    @_colors = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white']
+    @_html = []
+
+  html: ->
+    @_html
+
+  convertTrace: (trace) ->
+    if trace?
+      @trace = trace.trim().split('\n')
+
+      for line, i in @trace
+        @convertLine(line, i+1)
+
+    return @
+
+  convertLine: (line, number) ->
+    lineText = if line is '' then ' ' else line
+    codes = @getAnsiCodes(line)
+
+    lineEl = @createLine(lineText, number)
+    lineEl.prepend @lineLink(number)
+
+    if codes?
+      lineEl
+        .find('span')
+        .addClass @getColorClass(codes.color, codes.modifier)
+
+    @_html.push(lineEl)
+
+  createLine: (line, number) ->
+    $('<p />',
+      id: "line-#{number}"
+      class: 'build-trace-line'
+    ).append $('<span />',
+      text: @removeAnsiCodes(line)
+    )
+
+  lineLink: (number) ->
+    $('<a />',
+      class: 'build-trace-line-number'
+      href: "#line-#{number}"
+      text: number
+    )
+
+  getAnsiCodes: (line) ->
+    matches = line.match(@_colorRegex)
+
+    if matches?
+      match = matches[0]
+      modifierSplit = match.split(';')
+      color = modifierSplit[0].substring(1)
+      colorText = @_colors[color[1]]
+      modifier = modifierSplit[1][0]
+
+      if colorText?
+        return {
+          color: colorText
+          modifier: modifier
+        }
+
+  removeAnsiCodes: (line) ->
+    line.replace(@_colorRegex, '')
+
+  getColorClass: (color, modifier) ->
+    if modifier? and modifier is "1"
+      modifier = "l-"
+    else
+      modifier = ''
+
+    "term-fg-#{modifier}#{color}"
diff --git a/app/assets/javascripts/ci/build.coffee b/app/assets/javascripts/ci/build.coffee
index 74691b2c1b5..e49b362567d 100644
--- a/app/assets/javascripts/ci/build.coffee
+++ b/app/assets/javascripts/ci/build.coffee
@@ -5,6 +5,8 @@ class @CiBuild
   constructor: (@page_url, @build_url, @build_status, @state) ->
     clearInterval(CiBuild.interval)
 
+    @ansi = new Ansi2Html()
+
     # Init breakpoint checker
     @bp = Breakpoints.get()
     @hideSidebar()
@@ -49,8 +51,9 @@ class @CiBuild
     $.ajax
       url: @build_url
       dataType: 'json'
-      success: (build_data) ->
-        $('.js-build-output').html build_data.trace_html
+      success: (build_data) =>
+        html = @ansi.convertTrace(build_data.trace).html()
+        $('.js-build-output').replaceWith html
 
         if build_data.status is 'success' or build_data.status is 'failed'
           $('.js-build-refresh').remove()
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index e8f1935d239..6d774c97614 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -142,3 +142,15 @@ table.builds {
   right: 0;
   margin-top: -17px;
 }
+
+.build-trace-line {
+  margin: 0;
+  padding: 0;
+}
+
+.build-trace-line-number {
+  display: inline-block;
+  padding-right: 10px;
+  min-width: 40px;
+  text-align: right;
+}