shipit-engine 0.8.9 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e8a76aee01307d253747b6e49c6c7be3bb4c3cf2
-  data.tar.gz: 511372e610c0dfcdad6038607733841ee2752d0b
+  metadata.gz: 22eb132c6bbb6e9af2fdfca03481022aa47ccbeb
+  data.tar.gz: 6415095a2772724f3b2ad364411ad3d5956039f4
 SHA512:
-  metadata.gz: ed8a88d84aa2f2d6e845fadad57c9aa39ebb78986f60ccd351a502bc6f5753c9a17e99bb7e3baf2c5b9e9c6fe716d3358c65bf704c7dbf4bffed69ae5c8595f3
-  data.tar.gz: d9bf4e7c3550d38705f5482971f84177eb64cddc42248e42c5197009d6fa12bbdc0914360c722fa7298b4d596e7e8a0c44f00d3af8ba2c2f4cbb0c119e222ae9
+  metadata.gz: 2d5f6b17d2f1b9f4a52b4ed208524dd13f4ddddd8d178e0235eaeecd318c872ee29b480b87f5f905bfc9990274e82e1addca61feefa98aa373b09f03d245176a
+  data.tar.gz: d17ad59449f3a8a801689d991ff4092efe67c6c88ea83f51de1c70257fdf3c919ea0181d1d206099fea76550824602c65b85432cdf88e879c770d99954a5a709

data/app/assets/javascripts/shipit_bs.js.coffee

@@ -0,0 +1,2 @@
+#= require jquery
+#= require bootstrap-sprockets

data/app/assets/javascripts/task.js.coffee

@@ -1,9 +1,20 @@
+#= require string_includes
+#= require mousetrap
+#= require mousetrap-global-bind
+#= require lodash
+#= require clusterize
 #= require_tree ./task
 #= require_self
 
 @OutputStream = new Stream
 
 jQuery ->
+  $code = $('code')
+  initialOutput = $code.attr('data-output')
+  $code.removeAttr('data-output')
+
+  search = new SearchBar($('.search-bar'))
+
   OutputStream.addEventListener 'status', (status, response) ->
     $('[data-status]').attr('data-status', status)
 
@@ -11,16 +22,14 @@ jQuery ->
       window.location = response.rollback_url
 
   tty = new TTY($('body'))
+  search.addEventListener('query', tty.filterOutput)
+  search.immediateBroadcastQueryChange()
   OutputStream.addEventListener('chunk', tty.appendChunk)
 
   if task = $('[data-task]').data('task')
     Notifications.init(OutputStream, task)
 
-  $code = $('code')
   OutputStream.init
     status: $code.closest('[data-status]').data('status')
     url: $code.data('next-chunks-url')
-    text: tty.popInitialOutput()
-
-  StickyElement.init('.deploy-banner')
-  StickyElement.init('.sidebar')
+    text: initialOutput

data/app/assets/javascripts/task/search_bar.js.coffee

@@ -0,0 +1,52 @@
+class @SearchBar
+  DEBOUNCE = 300
+
+  constructor: (@$bar) ->
+    @eventListeners = {}
+    @query = window.location.hash.replace(/^#/, '')
+    @$input = @$bar.find('.search-input')
+    @$input.on('blur', @closeIfEmpty)
+    @$input.on('input', @updateQuery)
+    @broadcastQueryChange = _.debounce(@immediateBroadcastQueryChange, DEBOUNCE)
+    Mousetrap.bindGlobal(['command+f', 'ctrl+f'], @open)
+
+    if @query
+      @open()
+      @setQuery(@query)
+
+  addEventListener: (type, handler) ->
+    @listeners(type).push(handler)
+
+  listeners: (type) ->
+    @eventListeners[type] ||= []
+
+  setQuery: (query) ->
+    @$input.val(query)
+    @updateQuery()
+
+  updateQuery: =>
+    oldQuery = @query
+    @query = @$input.val()
+    @broadcastQueryChange() unless @query == oldQuery
+
+  immediateBroadcastQueryChange: =>
+    @updateHash()
+    for handler in @listeners('query')
+      handler(@query)
+
+  updateHash: ->
+    window.location.hash = "##{@query}"
+
+  open: (event) =>
+    event?.preventDefault()
+    @$bar.removeClass('hidden')
+    @focus()
+
+  focus: ->
+    @$input.focus()[0].select()
+
+  closeIfEmpty: (event) =>
+    @close() unless @query.length
+
+  close: ->
+    @$bar.addClass('hidden')

data/app/assets/javascripts/task/stream.js.coffee

@@ -8,10 +8,15 @@ class Chunk
     @_text ||= AnsiStream.strip(@raw)
 
   rawLines: ->
-    @_rawLines ||= @raw.split(/\r?\n/)
+    @_rawLines ||= @splitLines(@raw)
 
   lines: ->
-    @_lines ||= @text().split(/\r?\n/)
+    @_lines ||= @splitLines(@text())
+
+  splitLines: (text) ->
+    lines = text.split(/\r?\n/)
+    lines.pop() unless lines[lines.length - 1]
+    lines
 
 class @Stream
   INTERVAL = 1000
@@ -49,6 +54,8 @@ class @Stream
           console?.log("Plugin error: #{error}")
 
   broadcastOutput: (raw, args...) ->
+    return unless raw
+
     chunk = new Chunk(raw)
     for handler in @listeners('chunk')
       try

data/app/assets/javascripts/task/tty.js.coffee

@@ -1,3 +1,47 @@
+class OutputLines
+  constructor: (@screen, @render) ->
+    @query = ''
+    @highlightRegexp = null
+    @raw = []
+    @renderingCache = {}
+    @stripCache = {}
+
+  setFilter: (query) ->
+    if @query = query
+      @screen.options.no_data_text = 'No matches'
+    else
+      @screen.options.no_data_text = 'Loading...'
+    @highlightRegexp = @buildHighlightRegexp(@query)
+    @reset()
+
+  reset: ->
+    @screen.update(@renderLines(@filter(@raw)))
+
+  filter: (lines) ->
+    return lines unless @query
+    line for line in lines when @strip(line).includes(@query)
+
+  strip: (line) ->
+    @stripCache[line] ||= AnsiStream.strip(line)
+
+  append: (lines) ->
+    @raw = @raw.concat(lines)
+    @screen.append(@renderLines(@filter(lines)))
+
+  renderLines: (lines) ->
+    for line in lines
+      @highlight(@renderingCache[line] ||= @render(line))
+
+  buildHighlightRegexp: (query) ->
+    pattern = query.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/(\s+)/g, '(<[^>]+>)*$1(<[^>]+>)*')
+    new RegExp("(#{pattern})", 'g')
+
+  highlight: (renderedLine) ->
+    return renderedLine unless @query
+
+    renderedLine.replace(@highlightRegexp, '<mark>$1</mark>').replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/, '$1</mark>$2<mark>$4');
+
+
 class @TTY
   FORMATTERS = []
   STICKY_SCROLL_TOLERENCE = 200
@@ -9,13 +53,19 @@ class @TTY
     FORMATTERS.unshift(formatter)
 
   constructor: ($body) ->
+    @outputLines = []
     @$code = $body.find('code')
-    @scrolling = new Scrolling(@$code)
+    @$container = @$code.closest('.clusterize-scroll')
+    scroller = new Clusterize(
+      no_data_text: 'Loading...'
+      tag: 'div'
+      contentElem: @$code[0]
+      scrollElem: @$container[0]
+    )
+    @output = new OutputLines(scroller, (line) => @createLine(@formatChunks(line)))
 
-  popInitialOutput: ->
-    output = @$code.text()
-    @$code.empty()
-    output
+  filterOutput: (query) =>
+    @output.setFilter(query)
 
   formatChunks: (chunk) ->
     for formatter in FORMATTERS
@@ -23,32 +73,29 @@ class @TTY
     chunk
 
   appendChunk: (chunk) =>
-    @scrolling.preserve =>
-      @$code.append(@formatChunks(chunk.raw))
-
-class Scrolling
-  TOLERENCE = 200
+    lines = chunk.rawLines()
+    return unless lines.length
 
-  constructor: (@$code) ->
-    @$window = $(window)
-    @initialScroll = true
+    @preserveScroll =>
+      @output.append(lines)
 
-  preserve: (callback) ->
-    wasScrolledToBottom = @isScrolledToBottom()
-    callback()
-    if wasScrolledToBottom
-      @$window.scrollTop(@codeBottomPosition() - @$window.height() + 50)
+  createLine: (fragment) ->
+    div = document.createElement('div')
+    div.appendChild(fragment)
+    div.className = 'output-line'
+    div.outerHTML
 
   isScrolledToBottom: ->
-    if @initialScroll
-      @initialScroll = (window.pageYOffset == 0)
-      true
-    else
-      codeBottom = @codeBottomPosition()
-      codeBottom + TOLERENCE > @viewportBottomPosition() >= codeBottom - TOLERENCE
+    (@getMaxScroll() - @$container.scrollTop()) < 1
+
+  scrollToBottom: ->
+    @$container.scrollTop(@getMaxScroll())
+
+  getMaxScroll: ->
+    @$code.parent().outerHeight(true) - @$container.outerHeight(true)
 
-  viewportBottomPosition: ->
-    window.pageYOffset + @$window.height()
+  preserveScroll: (callback) ->
+    wasScrolledToBottom = @isScrolledToBottom()
+    callback()
+    @scrollToBottom() if wasScrolledToBottom
 
-  codeBottomPosition: ->
-    @$code.position().top + @$code.height()

data/app/assets/stylesheets/_base/_forms.scss

@@ -27,3 +27,8 @@ textarea {
 .field-wrapper {
   margin-bottom: 1.5rem;
 }
+
+.field_with_errors {
+  border: 1px solid $red;
+  display: inline-block;
+}

data/app/assets/stylesheets/_pages/_commits.scss

@@ -12,7 +12,7 @@
 }
 
 .commit, .task {
-  padding: 1rem 0;
+  padding: .75rem 0;
   display: flex;
   flex-direction: column;
 

data/app/assets/stylesheets/_pages/_deploy.scss

@@ -54,17 +54,27 @@
   }
 }
 
+.task-output-container {
+  height: calc(100vh - 9rem - 4rem - 1px); // .header and .deploy-banner. -1px is to floor the result
+}
+
+.output-line {
+  height: 1.5rem;
+}
+
 .deploy-banner {
+  height: 4rem;
   background-color: #f0f4f7;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   flex-wrap: wrap;
+  overflow-x: hidden;
 
   .deploy-banner-section {
     display: inline-block;
-    padding: .95rem 1.5rem 1.125rem;
+    padding: .75rem 1.5rem;
   }
 
   .stack-link {
@@ -75,26 +85,44 @@
     flex: none;
   }
 
-  &.sticky {
-    position: fixed;
-    top: 0;
+  .deploy-banner-status {
+    height: 2px;
+    position: absolute;
+    bottom: 0;
     left: 0;
-    right: 0;
+  }
 
-    .stack-link {
-      display: inline-block;
+  &[data-status="failure"],
+  &[data-status="error"] {
+    .deploy-banner-status {
+      background-color: $bright-red;
+      width: 100%;
+    }
+  }
+
+  &[data-status="aborted"],
+  &[data-status="flapping"] {
+    .deploy-banner-status {
+      background-color: $orange;
+      width: 100%;
     }
   }
 
-  &[data-status="running"]:before,
-  &[data-status="aborting"]:before {
-    content: "";
+  &[data-status="success"] .deploy-banner-status {
+    background-color: $green;
+    width: 100%;
+  }
+
+  &[data-status="running"] .deploy-banner-status {
     background-color: $blue;
-    bottom: 0;
-    left: 0;
     width: 0%;
-    height: 2px;
-    position: absolute;
+    z-index: 9999;
+    -webkit-animation: loading-slide 1.2s linear infinite;
+  }
+
+  &[data-status="aborting"] .deploy-banner-status {
+    background-color: $orange;
+    width: 0%;
     z-index: 9999;
     -webkit-animation: loading-slide 1.2s linear infinite;
   }
@@ -112,6 +140,19 @@
   }
 }
 
+.search-bar {
+  background-color: #f0f4f7;
+  border: 1px solid #f0f4f7;
+  position: absolute;
+  right: 0px;
+  padding: .125rem;
+  border-bottom-left-radius: .25rem;
+
+  input[type="search"] {
+    width: 300px;
+  }
+}
+
 @include keyframes(loading-slide) {
   0% { width: 0%; left: 0%; }
   30% {  left: 0%; }
@@ -124,27 +165,18 @@
 
 .sidebar.enabled + .deploy-main {
   margin-left: 300px;
-
-  .deploy-banner.sticky {
-    box-sizing: border-box;
-    margin-left: 300px;
-  }
 }
 
 .sidebar {
   background-color: $slate;
   color: white;
   overflow: hidden;
-  height: 100%;
+  height: calc(100vh - 9rem - 1px); // .header. -1px is to floor the result
   position: absolute;
   width: 0px;
   &.enabled {
     width: 300px;
   }
-  &.sticky {
-    top: 0;
-    position: fixed;
-  }
 }
 
 .sidebar-plugins {

data/app/assets/stylesheets/_pages/_settings.scss

@@ -8,4 +8,9 @@
   & + & {
     border-top: 1px solid #e5e5e5;
   }
+
+  .form-hint {
+    font-size: smaller;
+    font-style: italic;
+  }
 }

data/app/assets/stylesheets/_structure/_layout.scss

@@ -14,6 +14,7 @@
 // -----------------------------------------------------------------------------
 
 .header {
+  height: 9rem;
   border-bottom: 1px solid #e5e5e5;
   background-color: #fff;
   color: #999;

data/app/assets/stylesheets/_structure/_main.scss

@@ -1,6 +1,9 @@
 .main {
   @include flex(1);
   padding-bottom: 3rem;
+  &.no-footer {
+    padding-bottom: 0;
+  }
 }
 
   section {
@@ -47,6 +50,7 @@
 
 pre {
   background-color: $terminal-black;
+  min-height: 100%;
   overflow-x: auto;
   color: #fff;
   padding: 1.5rem;