[NOT FINISHED] update UI with bootstrap

README.md

@@ -7,8 +7,7 @@ Tail command for your .log files via browser. In order to have a quick access to
 
 Also you can highlight any particular string you are looking for.
 
-![How it works](how_it_works.gif)
-
+![How it works](how_it_works.png)
 
 ##Installation
 
@@ -34,8 +33,6 @@ Ruby 1.9.3+
 
 Rails 4.0+
 
-No other gems required. No jQuery or any JS frameworks required.
-
 ##License
 
 This gem uses MIT-LICENSE. Fork it or create pull request. Any contribution is appreciated.

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,47 @@
-// 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);
+  });
+  $('form.navbar-form-alt').submit(function (e) {
+    e.preventDefault();
+  });
+});
 
 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,18 @@
+// 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";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/dropdowns";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/button-groups";

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,50 @@
+body {
+  background: #1d1f21;
+  & > .container-fluid {
+    padding: 50px 15px 10px;
+  }
+}
+a {
+  color: #333333;
+}
+.code {
+  font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
+  color: white;
+  font-size: 12px;
+}
+.log td:empty {
+  padding: 5px;
+}
+.size_30 {
+  font-size: 30px;
+}
+.query {
+  color: #cd6a51;
+}
+.right_15 {
+  margin-right: 15px;
+}
+.top_10 {
+  margin-top: 10px;
+}
+.input-group {
+  display: table;
+
+  & > .form-control {
+    display: table-cell;
+    margin-left: -3px;
+  }
+
+  & > span {
+    display: table-cell;
+    width: 1%;
+    padding: 0 3px;
+  }
+}
+.navbar-form-alt {
+  margin-top: 8px;
+
+  .form-group {
+    margin-bottom: 0px;
+  }
+}

app/controllers/tail/logs_controller.rb

@@ -14,17 +14,25 @@ def grep
     end
 
     def tail
-      @web_logger ||= Tail::Log.instance
-      @web_logger.n = params[:n]
-      params[:n] = @web_logger.n
-      log_file_name = params[:file_name] || "#{Rails.env}.log"
-      @web_logger.tail(log_file_name)
+      web_logger.n = params[:n]
+      params[:n] = web_logger.n
+      web_logger.tail(log_file_name)
     end
 
     def flush
       web_logger ||= Tail::Log.instance
       web_logger.flush(params[:file_name])
       redirect_to action: :index
     end
+
+    private
+
+    def web_logger
+      @web_logger ||= Tail::Log.instance
+    end
+
+    def log_file_name
+      @log_file_name ||= params[:file_name] || "#{Rails.env}.log"
+    end
   end
 end

app/models/tail/log.rb

@@ -16,19 +16,18 @@ 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)
       if value.present? && value.to_i > 0
-        @n =value.to_i
+        @n = value.to_i
       else
         @n = N_VALUE
       end

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

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