mongodb_logger 0.1.4 → 0.1.5

data/lib/mongodb_logger/server/public/stylesheets/library.css

@@ -55,30 +55,32 @@ a:hover, a:active {
 }
 
 .notice {
+    position: relative;
+    top: 1px;
     width: 10px;
     height: 10px;
     display: inline-block;
-    margin-right: 4px;
-    margin-left: -14px;
-    background: url(../images/success.png) no-repeat 0 0;
-}
-
-.arrow-down {
-    padding-right: 15px;
-    background: url(../images/arrow-down.png) no-repeat 100% 50%;
-}
-
-.notice.new {
-    background: url(../images/newlog.png) no-repeat 0 0;
+    margin-right: 5px;
+    margin-left: -17px;
+/*     background: url(../images/success.png) no-repeat 0 0; */
 }
 
 .error {
+    position: relative;
+    top: 1px;
     width: 10px;
     height: 10px;
     display: inline-block;
+    margin-right: 5px;
+    margin-left: -17px;
     background: url(../images/failure.png) no-repeat 0 0;
 }
 
+.arrow-down {
+    padding-right: 15px;
+    background: url(../images/arrow-down.png) no-repeat 100% 50%;
+}
+
 code {
     display: block;
     overflow: auto;
@@ -128,6 +130,7 @@ code {
     line-height: 24px;
     font-weight: bold;
     cursor: pointer;
+    text-shadow: 0 1px 0 #fff;
     border-bottom: 1px solid #bbb;
     background: rgb(238,238,238);
     background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(211,211,211,1) 100%);
@@ -142,14 +145,14 @@ code {
 
 .logs-time {
     width: 200px;
-    padding: 7px 15px;
+    padding: 7px 15px 7px 30px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     font: 12px arial, sans-serif;
     vertical-align: middle;
     border: 1px solid #bbb;
-    background-color: #fff;
+    background: #fff url(../images/date.png) no-repeat 9px 50%;
     border-radius: 3px;
     box-shadow: 0 1px 2px #e6e6e6 inset, 0 1px 0 #fff;
 }
@@ -163,11 +166,158 @@ code {
   display: none;
 }
 
-#logs_list{
-    table-layout: fixed;
-}
-
 
 .wrap_text {
     word-wrap: break-word;
-}
+}
+
+li.message_tab {
+  cursor: pointer;
+  cursor: hand;
+}
+
+.tab_content.hidden {
+  display:none;
+}
+
+
+.message_tabs {
+    height: 30px;
+    position: relative;
+    background: rgb(238,238,238);
+    border: 1px solid #ADB4B8;
+    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1)));
+    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
+    background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
+    background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
+    background: linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
+}
+
+.message_tabs li.message_tab {
+    float: left;
+    padding: 0 20px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;    
+    border-right: 1px solid #bbb;
+    border-top: 0;
+    color: #333;
+    background: transparent;
+}
+
+.message_tabs li:hover {
+    background: -moz-linear-gradient(top,  rgba(255,255,255,0.62) 0%, rgba(23,146,212,0.5) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.62)), color-stop(100%,rgba(23,146,212,0.5)));
+    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.62) 0%,rgba(23,146,212,0.5) 100%);
+    background: -o-linear-gradient(top,  rgba(255,255,255,0.62) 0%,rgba(23,146,212,0.5) 100%);
+    background: -ms-linear-gradient(top,  rgba(255,255,255,0.62) 0%,rgba(23,146,212,0.5) 100%);
+    background: linear-gradient(top,  rgba(255,255,255,0.62) 0%,rgba(23,146,212,0.5) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9effffff', endColorstr='#801792d4',GradientType=0 );
+    
+}
+
+.message_tabs li.active {
+    background: #f4f4f4;
+    box-shadow: 0 2px 5px #ccc inset;
+    text-shadow: 0 1px 0 #fff;
+}
+
+a[target="_blank"] {
+    display: inline-block;
+    background: url(../images/external.png) no-repeat 0 3px;
+    padding-left: 17px;
+}
+
+.not-implemented {
+    opacity: 0.3;
+    cursor: default;
+}
+
+.not-implemented:hover {
+    background: none !important;
+}
+
+.log-num {
+    padding: 3px 7px 1px;
+    background-color: #5E3B22;
+    font-size: 11px;
+    color: #fff;
+    border-radius: 20px;
+    box-shadow: 0 2px 3px rgba(0,0,0, 0.4) inset, 0 1px 0 rgba(255,255,255, 0.2);
+}
+
+.progress {
+    height: 14px;
+    position: absolute;
+    bottom: 4px;
+    left: 10px;
+    right: 10px;
+    font-size: 10px;
+    background: rgb(230,234,220);
+    background: -moz-linear-gradient(top,  rgba(230,234,220,1) 0%, rgba(223,234,197,1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,234,220,1)), color-stop(100%,rgba(223,234,197,1)));
+    background: -webkit-linear-gradient(top,  rgba(230,234,220,1) 0%,rgba(223,234,197,1) 100%);
+    background: -o-linear-gradient(top,  rgba(230,234,220,1) 0%,rgba(223,234,197,1) 100%);
+    background: -ms-linear-gradient(top,  rgba(230,234,220,1) 0%,rgba(223,234,197,1) 100%);
+    background: linear-gradient(top,  rgba(230,234,220,1) 0%,rgba(223,234,197,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6eadc', endColorstr='#dfeac5',GradientType=0 );
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset;
+}
+
+.used {
+    height: 14px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 3px;
+    background: rgb(191,210,85);
+    background: -moz-linear-gradient(top,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1)));
+    background: -webkit-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
+    background: -o-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
+    background: -ms-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
+    background: linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
+    
+}
+
+.size {
+    font-size: 10px;
+    position: absolute;
+    right: 5px;
+    top: 3px;
+    z-index: 2;
+    color: #000;
+    text-shadow: none;
+}
+
+.add {
+    color: #333;
+    text-decoration: none;
+}
+
+.warning {
+    position: absolute;
+    bottom: 1px;
+    padding: 3px 0;
+    clear: both;
+    width: 100%;
+    font-size: 10px;
+    background-color: #FCF6C4;
+    color: black;
+    text-shadow: none;
+}
+
+.warning p {
+    padding: 0 10px;
+}
+
+a.more {
+    padding-left: 0;
+    background: none;
+    font-weight: bold;
+}
+

data/lib/mongodb_logger/server/view_helpers.rb

@@ -1,6 +1,41 @@
 # view helpers
 module Sinatra::ViewHelpers
   
+  def pretty_hash(hash)
+    begin
+      Marshal::dump(hash)
+      h(hash.to_yaml).gsub("  ", "  ")
+    rescue Exception => e  # errors from Marshal or YAML
+      # Object couldn't be dumped, perhaps because of singleton methods -- this is the fallback
+      h(object.inspect)
+    end
+  end
+  
+  # TODO: improve this
+  def number_to_human_size(number, precision = 2)
+    number = begin
+      Float(number)
+    rescue ArgumentError, TypeError
+      return number
+    end
+    case
+      when number.to_i == 1 then
+        "1 Byte"
+      when number < 1024 then
+        "%d Bytes" % number
+      when number < 1048576 then
+        "%.#{precision}f KB"  % (number / 1024)
+      when number < 1073741824 then
+        "%.#{precision}f MB"  % (number / 1048576)
+      when number < 1099511627776 then
+        "%.#{precision}f GB"  % (number / 1073741824)
+      else
+        "%.#{precision}f TB"  % (number / 1099511627776)
+    end.sub(/([0-9]\.\d*?)0+ /, '\1 ' ).sub(/\. /,' ')
+  rescue
+    nil
+  end
+  
   def text_field_tag(object, name, options = {})
     value = ""
     value = options.delete(:value) if options[:value]

data/lib/mongodb_logger/server/views/layout.erb

@@ -1,27 +1,51 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>MongoDB logger</title>
+  <title>MongoDB Logger</title>
   <link href="<%=u 'stylesheets/all.css' %>" media="screen" rel="stylesheet" type="text/css">
-  <script src="<%=u 'javascripts/jquery-1.7.min.js' %>" type="text/javascript"></script>
-  <script src="<%=u 'javascripts/jquery-ui-1.8.16.effects.min.js' %>" type="text/javascript"></script>
-  <script src="<%=u 'javascripts/application.js' %>" type="text/javascript"></script>
+  
+  <script src="<%=u 'javascripts/vendors/jquery-1.7.min.js' %>" type="text/javascript"></script>
+  <script src="<%=u 'javascripts/vendors/jquery-ui-1.8.16.effects.min.js' %>" type="text/javascript"></script>
+  <script src="<%=u 'javascripts/vendors/jquery.pjax.js' %>" type="text/javascript"></script>
+  <script src="<%=u 'javascripts/vendors/highlight.pack.js' %>" type="text/javascript"></script>
+  <script src="<%=u 'javascripts/logs.js' %>" type="text/javascript"></script>
 </head>
 <body>
 <div class="page">          
   <div class="header">
     <div class="wrapper">
-      <a href="<%=h url_path("overview") %>" class="logo"><img src="<%=u 'images/logo.png'%>" alt="MongoDB Logger"></a> <span class="logger ">logger</span>
+      <div class="unit-right stats">
+        <div class="unit size2of3">
+          <div class="ptxs pls"><strong>DB:</strong> <%=h @db.name %></div>
+          <div class="pls"><strong>Collection:</strong> <%=h @collection.name %></div>
+        </div> <!-- unit -->
+        <div class="unit size1of3">
+          <div class="pts prs txtR">
+            <span id="db_collection_count" class="log-num"><%=h @collection_stats["count"] %></span></div>
+        </div> <!-- unit -->
+        <% if @collection_stats["capped"] && 1 == @collection_stats["capped"] %>
+        
+        <div class="progress">
+          <span class="size"><%=h number_to_human_size(@collection_stats["size"]) %> of <%=h number_to_human_size(@collection_stats["storageSize"]) %></span>
+          <div class="used" style="width: <%=((@collection_stats["size"].to_f / @collection_stats["storageSize"].to_f) * 100).round%>%"></div>
+        </div> <!-- progress -->
+                  
+        <% else %>
+          <div class="warning"><p>You do not use capped collection for logs. 
+            <a href="http://www.mongodb.org/display/DOCS/Capped+Collections" target="_blank" class="more">More info.</a></p>
+          </div>
+        <% end %>
+      </div>
+      <a href="<%=h url_path("overview") %>" class="logo" data-pjax='#main_pjax'><img src="<%=u 'images/logo.png'%>" alt="MongoDB Logger"></a> <span class="logger ">logger</span>
     </div> <!-- wrapper -->
   </div> <!-- header -->            
   <div class="content">
     <div class="wrapper">
-      <div class="mainbox">
+      <div id="main_pjax" class="mainbox">
         <%= yield %>
       </div> <!-- mainbox -->
     </div> <!-- wrapper -->
   </div> <!-- content -->
-  
 </div>
   
 </body>

data/lib/mongodb_logger/server/views/overview.erb

@@ -1,23 +1,8 @@
-<div class="topline">
-  <%= partial(:"shared/tabs") %>
-  <div class="unit-right">
-    <div id="tail_logs_block">
-      <div class="initial">
-        <a id="tail_logs_link" href="#" data-url="<%=h url_path("tail_logs") %>" class="button mts mrs">
-          <span class="start" data-url="<%=h url_path("tail_logs") %>">Tail</span>
-        </a>
-      </div>
-      <div class="info">
-        <span id="tail_logs_time" class="logs-time mrs"></span>
-        <a id="tail_logs_stop_link" href="#" class="button negative mts mrs">
-          <span class="stop">Stop</span>
-        </a>
-      </div>
-    </div>
-  </div> <!-- unit-right -->
-  
-  <div id="ajax_loader"><img src="<%=u 'images/spinner.gif'%>" alt="loading..."></div>
-</div> <!-- topline -->
+<% content_for :right_top_panel do %>
+  <%= partial(:"shared/tail_panel") %>
+<% end %>
+
+<%= partial(:"shared/top_panel") %>
 
 <div class="outer">
   <div class="unit size3of4">
@@ -38,43 +23,47 @@
           </div>                
             <div class="unit size1of3">
               <div class="unit size1of2">
-                <%= label_tag @filter, :limit, "Limit of logs" %>
-                <%= select_tag @filter, :limit, [50, 100, 200, 500, 1000] %>
-              </div> <!-- unit -->
+                <div class="prm">
+                  <%= select_tag @filter, :limit, [50, 100, 200, 500, 1000] %>
+                </div> <!-- prm -->                
+              </div> <!-- unit -->   
               <div class="unit size1of2">
-                <div class="plm">
-                  <%= submit_tag :submit, "Filter", :class => "button primary" %>
-                </div> <!-- plm -->                
-              </div> <!-- unit -->
-            </div>
-        </div> <!-- outer -->
-        <div class="outer mvs">
-          <div class="unit size1of3">
-            <div class="unit size1of2">
-              <div class="prm">
-                <%= text_field_tag @filter, :application_name, :placeholder => "Application Name" %>
+                <div class="prm">
+                  <%= text_field_tag @filter, :application_name, :placeholder => "Application Name" %>
+                </div>
               </div>
             </div>
-            <div class="unit size1of2">
-              <div class="prm">
-                <%= text_field_tag @filter, :ip, :placeholder => "IP" %>
+            <div class="unit size1of3">
+              <div class="unit size1of2">
+                <div class="prm">
+                  <%= text_field_tag @filter, :ip, :placeholder => "IP" %>
+                </div>
               </div>
-            </div>
-          </div>
-          <div class="unit size1of3">
-            <div class="unit size1of2">
-              <div class="prm ptxs">
+              <div class="unit size1of2">
                 <%= check_box_tag @filter, :is_exception %>
-                <%= label_tag @filter, :is_exception, "Filter exceptions" %>
-              </div>
-            </div>
-            <div class="unit size1of2">
-              <div class="ptxs plm">
-                <a href="<%=h url_path("overview") %>">Clear</a>
-              </div> <!-- ptxs -->              
+                <%= label_tag @filter, :is_exception, "Exceptions" %>
+              </div> <!-- unit -->
             </div> <!-- unit -->
-          </div> <!-- unit -->
         </div> <!-- outer -->
+        
+        <div class="outer">
+              <ul id="more_filter_list">
+                <% @filter.more_filters.each_with_index do |f_filter, index| %>
+                  <li>
+                    <%= partial(:"shared/dynamic_filter", :object => f_filter) %>
+                  </li>
+                <% end %>
+              </ul>
+              <div class="mbs">
+                <a id="add_more_filter" href="<%=h url_path("add_filter") %>" class="add">+ Add Filter</a>
+              </div>
+              
+        </div> <!-- outer -->
+        
+        <div class="outer">
+          <%= submit_tag :submit, "Filter", :class => "button primary mrs" %> <a href="<%=h url_path("overview") %>">Clear</a>
+        </div> <!-- outer -->
+        
       </form>
       </div> <!-- filter -->
 
@@ -86,8 +75,8 @@
             <th>Received</th>
             <th>Controller</th>
             <th>Action</th>
+            <th>Method</th>
             <th>IP</th>
-            <th>URL</th>
             <th>Runtime</th>
           </tr>
         

data/lib/mongodb_logger/server/views/shared/_dynamic_filter.erb

@@ -0,0 +1,30 @@
+<div class="outer mvs">
+  <div class="unit size1of3">
+    <div class="unit size1of2">
+      <div class="prm">
+        <%= select_tag dynamic_filter, :type, MongodbLogger::ServerModel::AdditionalFilter::VAR_TYPES %>
+      </div> <!-- prm -->      
+    </div> <!-- unit -->
+    <div class="unit size1of2">
+      <div class="prm">
+        <%= text_field_tag dynamic_filter, :key, :placeholder => "key" %>
+      </div> <!-- prm -->      
+    </div> <!-- unit -->
+  </div>
+  <div class="unit size1of3">
+    <div class="unit size1of2">
+      <div class="prm">
+        <%= select_tag dynamic_filter, :condition, MongodbLogger::ServerModel::AdditionalFilter::DEFAULT_CONDITIONS %>
+      </div> <!-- prm -->      
+    </div>
+    <div class="unit size1of2">
+      <div class="prm">
+        <%= text_field_tag dynamic_filter, :value, :placeholder => "value" %>
+      </div> <!-- prm -->      
+    </div>
+  </div>
+  <div class="unit size1of3">
+    <a href="#" class="close_more_filter">Close</a>
+  </div> <!-- unit -->
+
+</div>

data/lib/mongodb_logger/server/views/shared/_log.erb

@@ -1,8 +1,8 @@
 <tr class="log_info" data-url="<%=h url_path("log_info/#{log['_id']}") %>">
-  <td><span class="<%= log['is_exception'] ? "error" : "notice" %>"></span> <%=h log['request_time']%></td>
-  <td><%=h log['controller']%></td>
-  <td><%=h log['action']%></td>
-  <td><%=h log['ip']%></td>
-  <td class="url_log"><%=h log['url']%></td>
-  <td><%=h log['runtime']%></td>
+  <td class="td-time"><span class="<%= log['is_exception'] ? "error" : "notice" %>"></span> <%=h log['request_time']%></td>
+  <td class="td-controller"><%=h log['controller']%></td>
+  <td class="td-action"><%=h log['action']%></td>
+  <td class="url_log"><%=h log['method']%></td>
+  <td class="td-ip"><%=h log['ip']%></td>
+  <td class="td-runtime"><%=h log['runtime']%></td>
 </tr>

data/lib/mongodb_logger/server/views/shared/_log_info.erb

@@ -1,18 +1,18 @@
 <div class="pas">
-  <div class="unit-right ptxs">
-    <a href="<%=h url_path("log/#{log_info['_id']}") %>" target="_blank">More Info</a>
+  <div class="unit-right">
+    <a href="<%=h url_path("log/#{log_info['_id']}") %>" data-pjax='#main_pjax' class="button small grey">More Info</a>
   </div> <!-- unit-right -->
   <h2 class="phs mvs"><span class="<%= log_info['is_exception'] ? 'failure' : 'success' %>">Message</span></h2>
   <div class="phs wrap_text">
-    <% if log_info['is_exception'] %>
+    <% if log_info['is_exception'] && log_info['messages'] && log_info['messages']['error'] %>
       Error: <%= log_info['messages']['error'].join("\n").truncate(300, :separator => ' ') %>
-    <% else %>
+    <% elsif log_info['messages'] && log_info['messages']['info'] %>
       Info: <%= log_info['messages']['info'].join("\n").truncate(300, :separator => ' ') %>
     <% end %>
   </div> <!-- phs -->
-  <h2 class="phs mtm mbs">URL</h2>
+  <h2 class="phs mtm mbs">URL (method: <%=h log_info['method'] %>)</h2>
   <div class="phs wrap_text">
-    <%=h log_info['url']%>
+    <a href="<%=h log_info['url']%>" target="_blank"><%=h log_info['url']%></a>
   </div> <!-- phs --> 
   <h2 class="phs mtm mbs">Received</h2>
   <div class="phs">
@@ -20,6 +20,8 @@
   </div> <!-- phs -->
   <h2 class="phs mtm mbs">IP</h2>
   <div class="phs">
-    <%=h log_info['ip']%>
+    <a href="http://www.infosniper.net/index.php?ip_address=<%=h log_info['ip']%>&map_source=1&overview_map=1&lang=1&map_type=1&zoom_level=7" target="_blank">
+      <%=h log_info['ip']%>
+    </a>
   </div> <!-- phs -->
 </div> <!-- pas -->

data/lib/mongodb_logger/server/views/shared/_message_tabs.erb

@@ -0,0 +1,15 @@
+<li class="outer pvs phm">
+  <div class="unit size1of5">
+    <span class="pale">Messages:</span>
+  </div> <!-- unit -->
+  <div class="unit size4of5">
+    <ul class="message_tabs">
+    <% message_tabs.each do |key, val| %>
+      <li class='message_tab <%='active' if key == message_tabs.keys.first %>' data-tab='tab_<%=key %>'><%=key.capitalize %></li>
+    <% end %>
+    </ul>
+    <% message_tabs.each do |key, val| %>
+      <pre class="tab_<%=key %> tab_content <%='hidden' unless key == message_tabs.keys.first %>"><code><%=h (val.is_a?(Array) ? val.join("\n") : val) %></code></pre>
+    <% end %>
+  </div> <!-- unit -->
+</li>

data/lib/mongodb_logger/server/views/shared/_tabs.erb

@@ -1,4 +1,4 @@
 <ul class="unit">
-  <li class="active"><a href="<%=h url_path("overview") %>">Logs</a></li>
-  <li><a href="#">Graphs</a></li>
+  <li <%= class_if_current(url_path("overview")) %>><a href="<%=h url_path("overview") %>" data-pjax='#main_pjax'>Logs</a></li>
+  <li><a href="#" title="Comming soon..." class="not-implemented">Graphs</a></li>
 </ul>

data/lib/mongodb_logger/server/views/shared/_tail_panel.erb

@@ -0,0 +1,13 @@
+<div id="tail_logs_block">
+  <div class="initial">
+    <a id="tail_logs_link" href="#" data-url="<%=h url_path("tail_logs") %>" class="button mts mrs">
+      <span class="start" data-url="<%=h url_path("tail_logs") %>">Tail</span>
+    </a>
+  </div>
+  <div class="info">
+    <span id="tail_logs_time" class="logs-time mrs"></span>
+    <a id="tail_logs_stop_link" href="#" class="button negative mts mrs">
+      <span class="stop">Stop</span>
+    </a>
+  </div>
+</div>

data/lib/mongodb_logger/server/views/shared/_top_panel.erb

@@ -0,0 +1,7 @@
+<div class="topline">
+  <%= partial(:"shared/tabs") %>
+  <div class="unit-right">
+    <% yield_content :right_top_panel %>
+  </div> <!-- unit-right -->
+  <div id="ajax_loader"><img src="<%=u 'images/spinner.gif'%>" alt="loading..."></div>
+</div> <!-- topline -->