update UI with bootstrap

app/assets/javascripts/tail/application.js

@@ -1,13 +1,3 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require_tree .
+//= require jquery
+//= require bootstrap/dropdown
+//= require tail/logs

app/assets/javascripts/tail/logs.js

@@ -1,71 +1,44 @@
-// Place all the behaviors and hooks related to the matching controller here.
-// All this logic will automatically be available in application.js.
-document.onreadystatechange = function () {
-    if (document.readyState == "interactive") {
-        initApplication();
-    }
-}
-
-function initApplication(){
-    var appended = false, up_arrow = document.querySelector("#up");
-
-    onscroll = function () {
-        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-        if (scrollTop > 500) {
-            if (!appended) {
-                up_arrow.hidden = false;
-                appended = true;
-            }
-        } else {
-            if (appended) {
-                up_arrow.hidden = true;
-                appended = false;
-            }
-        }
-    };
-
-}
-
-function getPageVar(sVar) {
-    return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
-}
+$(function () {
+  window.scrollTo(0, document.body.scrollHeight);
+  $('input#grep').change(function () {
+    getGrep(this.value);
+  });
+});
 
 function getGrep(text) {
-    var sign;
-    if (location.search == "") sign = "?"; else sign = "&";
-    var search = sign + 'query=' + text;
-    var query = location.pathname + 'grep' + location.search + search;
-    sendRequest(query, true)
+  var sign;
+  if (location.search == "") sign = "?"; else sign = "&";
+  var search = sign + 'query=' + text;
+  var query = location.pathname + 'grep' + location.search + search;
+  sendRequest(query, true);
 }
 
 function sendRequest(url, isGoToBottom) {
-    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
-        httpRequest = new XMLHttpRequest();
-    } else if (window.ActiveXObject) { // IE
-        try {
-            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
-        }
-        catch (e) {
-            try {
-                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
-            }
-            catch (e) {
-            }
-        }
+  if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    httpRequest = new XMLHttpRequest();
+  } else if (window.ActiveXObject) { // IE
+    try {
+      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
+    }
+    catch (e) {
+      try {
+        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+      }
+      catch (e) {
+      }
     }
-    if (!httpRequest) {
-        return false;
+  }
+  if (!httpRequest) {
+    return false;
+  }
+  httpRequest.open("GET", url);
+  httpRequest.onreadystatechange = function () {
+    if (httpRequest.readyState != 4 || httpRequest.status != 200) return;
+    document.getElementById('main').innerHTML = httpRequest.responseText;
+    if (isGoToBottom) {
+        window.scrollTo(0, document.body.scrollHeight);
     }
-    httpRequest.open("GET", url);
-    httpRequest.onreadystatechange = function () {
-        if (httpRequest.readyState != 4 || httpRequest.status != 200) return;
-        document.getElementById('main').innerHTML = httpRequest.responseText;
-        if (isGoToBottom) {
-            window.scrollTo(0, document.body.scrollHeight);
-        }
-    };
-    httpRequest.send();
-    return true;
+  };
+  httpRequest.send();
+  return true;
 }
-
-

app/assets/stylesheets/tail/_bootstrap-custom.scss

@@ -0,0 +1,16 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/grid";
+@import "bootstrap/forms";
+
+// Components
+@import "bootstrap/dropdowns";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";

app/assets/stylesheets/tail/application.scss

@@ -0,0 +1,3 @@
+@import 'bootstrap-sprockets';
+@import 'bootstrap-custom';
+@import 'tail/logs';

app/assets/stylesheets/tail/logs.scss

@@ -0,0 +1,37 @@
+body {
+  margin-bottom: 60px;
+  background: #1d1f21;
+  & > .container-fluid {
+    padding: 50px 15px 10px;
+  }
+}
+a {
+  color: #333333;
+}
+.code {
+  font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
+  color: white;
+}
+.footer {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 60px;
+  position: fixed;
+  background-color: #f5f5f5;
+}
+.log td:empty {
+  padding: 5px;
+}
+.size_30 {
+  font-size: 30px;
+}
+.query {
+  color: #cd6a51;
+}
+.left_10 {
+  margin-left: 10px;
+}
+.top_10 {
+  margin-top: 10px;
+}

app/models/tail/log.rb

@@ -16,14 +16,13 @@ def initialize
     end
 
     def flush(file_name)
-      begin
-        f = File.open "log/#{Rails.env}.log", 'w'
-        f.close
-          Rails.logger.warn "#{Rails.env}.log flushed"
-      rescue => e
-        Rails.logger.error(e.message)
-        Rails.logger.error(e.backtrace[0..3].join("\n"))
-      end
+      log_name = "#{Rails.env}.log"
+      f = File.open Rails.root.join('log', log_name), 'w'
+      f.close
+      Rails.logger.warn "#{log_name} flushed"
+    rescue => e
+      Rails.logger.error(e.message)
+      Rails.logger.error(e.backtrace[0..3].join("\n"))
     end
 
     def n=(value)

app/views/layouts/tail/application.html.erb

@@ -7,8 +7,6 @@
   <%= csrf_meta_tags %>
 </head>
 <body>
-
-<%= yield %>
-
+  <%= yield %>
 </body>
 </html>

app/views/tail/logs/_footer.html.erb

@@ -0,0 +1,13 @@
+<footer class="footer">
+  <div class="container">
+    <div class="row top_10">
+      <div class="col-xs-10">
+        <%= text_field_tag :grep, nil, class: 'form-control', autofocus: true %>
+      </div>
+      <div class="col-xs-2">
+        <%= link_to tail.root_path(file_name: params[:file_name], n: (params[:n].to_i/1.5).to_i), id: 'less' do %><i class="glyphicon glyphicon-chevron-left size_30"></i><% end %>
+        <%= link_to tail.root_path(file_name: params[:file_name], n: (1.5 * params[:n].to_i).to_i), id: 'more' do %><i class="glyphicon glyphicon-chevron-right size_30"></i><% end %>
+      </div>
+    </div>
+  </div>
+</footer>

app/views/tail/logs/_main.html.erb

@@ -1,18 +1,16 @@
 <div id="main">
-  <table class="log_table">
+  <table class="log">
     <thead>
-    <tr>
-      <th></th>
-    </tr>
+      <tr>
+        <th></th>
+      </tr>
     </thead>
     <tbody>
     <% @files.each do |line| %>
-        <tr>
-          <td <%= 'class=error' if line.downcase.include?('error') || (params[:query].present? && line.downcase.include?(params[:query])) %>>
-            <%= line %>
-          </td>
-        </tr>
+      <tr>
+        <td class="code <%= 'query' if params[:query].present? && line.downcase.include?(params[:query]) %>"><%= line.strip %></td>
+      </tr>
     <% end %>
     </tbody>
   </table>
-</div>
+</div>

app/views/tail/logs/_navbar.html.erb

@@ -0,0 +1,22 @@
+<nav class="navbar navbar-default navbar-fixed-top">
+  <div class="container-fluid">
+    <ul class="nav navbar-nav">
+      <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Logs <span class="caret"></span></a>
+        <ul class="dropdown-menu">
+          <% @web_logger.files.each do |file| %>
+            <li><%= link_to file, tail.root_path(file_name: file, n: params[:n]) %></li>
+          <% end %>
+        </ul>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav navbar-right">
+      <li>
+        <%= link_to tail.root_path(file_name: params[:file_name], n: params[:n]) do %><i class="glyphicon glyphicon-refresh"></i><% end %>
+      </li>
+      <li class="left_10">
+        <%= link_to '#' do %><i class="glyphicon glyphicon-arrow-up"></i><% end %>
+      </li>
+    </ul>
+  </div>
+</nav>