ajax refresh

xianhuazhou · Sep 4, 2012 · 467b3ca · 467b3ca
1 parent 4b116f4
commit 467b3ca
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 67 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Quick Start
 
 Before you start, you need to install [nodejs](http://nodejs.org) (&gt;= 0.8.8) and [CoffeeScript](http://coffeescript.org) (&gt;=1.3.3) in your Linux/Unix system, then:
 
-$ npm install elog (not ready yet :()
+    $ [sudo] npm -g install elog
 
 elog contains elog-client and elog-server,  elog-client can find and push logs to elog-server via http requests, elog-server is a kind of web server with [expressjs](http://expressjs.com). 
 

diff --git a/lib/server.coffee b/lib/server.coffee
@@ -51,6 +51,7 @@ class Server
           conditions['time'] = {$lte: endDateObj.getTime()}
 
       app.get('db').find(conditions).sort({time: -1}).limit(+limit).toArray (err, docs) ->
+        console.log "[#{new Date()}] MongoDB error: #{err}" if err
         res.render 'index', {
           docs: docs,
           title: webConfig.title || 'elog homepage',
@@ -62,6 +63,14 @@ class Server
           refreshTime: webConfig.refresh_time
         }
 
+    app.get '/newlogs', (req, res) ->
+      conditions = {time: {$gt: +req.query.time}}
+      app.get('db').find(conditions).sort({time: -1}).toArray (err, docs) ->
+        console.log "[#{new Date()}] MongoDB error: #{err}" if err
+        res.render 'logs', {
+          docs: docs,
+        }
+
     app.post '/api/:api_key', (req, res) ->
       res.set('Content-Type', 'text/plain')
       if req.params.api_key != app.get('config').api_key

diff --git a/package.json b/package.json
@@ -1,12 +1,27 @@
 {
-  "name": "elog",
-  "description": "show errors from log files of php, nginx, apache etc.",
-  "version": "0.0.1",
-  "private": true,
-  "dependencies": {
-    "express": ">= 3.0.0rc4",
-    "mongodb": ">= 1.1.5",
-    "should": ">= 1.1.0",
-    "ejs": ">= 0.8.2"
-  }
+    "name": "elog",
+    "description": "show errors from log files of php, nginx, apache etc.",
+    "version": "0.0.1",
+    "author": {
+        "name": "Xianhua Zhou",
+        "email": "xianhua.zhou@gmail.com"
+    },
+    "dependencies": {
+        "express": ">= 3.0.0rc4",
+        "mongodb": ">= 1.1.5",
+        "ejs": ">= 0.8.2"
+    }
+    "devDependencies": {
+        "should": ">= 1.1.0",
+    },
+    "keywords": [
+        "elog",
+        "logs"
+    ],
+    "repository": "url": "git://github.com/xianhuazhou/elog",
+    "bin": {
+        "elog-client": "./bin/elog-client",
+        "elog-server": "./bin/elog-server"
+    },
+    "main": "./lib/elog.coffee"
 }
diff --git a/views/index.ejs b/views/index.ejs
@@ -1,43 +1,4 @@
-<%
-function showLevel(level) 
-{
-  switch(level) {
-    case 4:
-      return 'Fatal';
-    case 3:
-      return 'Error';
-    case 2:
-      return 'Warn';
-    case 1:
-      return 'Info';
-    case 0:
-      return 'Debug';
-    default:
-      return 'Unknown';
-  }
-}
-
-function showDate(date)
-{
-    var year = date.getFullYear();
-    var month = date.getMonth() + 1;
-    var day = date.getDate();
-    var hour = date.getHours();
-    var minute = date.getMinutes();
-    var second = date.getSeconds();
-
-    if (month < 10) month = '0' + month;
-    if (day < 10) day = '0' + day;
-    if (hour < 10) hour = '0' + hour;
-    if (minute < 10) minute = '0' + minute;
-    if (second < 10) second = '0' + second;
-
-    return [year, month, day].join('-') + ' ' +
-    [hour, minute, second].join(':');
-}
-
-var limitOptions = [10, 30, 50, 100, 200, 500, 1000, 2000, 10000];
-%>
+<% var limitOptions = [10, 30, 50, 100, 200, 500, 1000, 2000, 10000]; %>
 <!DOCTYPE html>
 <html>
     <head>
@@ -62,32 +23,27 @@ var limitOptions = [10, 30, 50, 100, 200, 500, 1000, 2000, 10000];
             <input type="submit" value="Filter Logs" class="button">
            </select>
         </form>
-        <table cellspacing="1" cellpadding="3">
-            <tr>
+        <table cellspacing="1" cellpadding="3" id="logs">
+            <tr id="logsHeader">
                 <th class="time">Time</th>
                 <th class="host">Host</th>
                 <th class="app">App</th>
                 <th class="level">Level</th>
                 <th class="message">Message</th>
-            </tr>
-            <% for (var i = 0; i < docs.length; i++) {  %> 
-                <% date = new Date(docs[i].time) %>
-                <tr class="level<%= docs[i].level %>">
-                    <td><%= showDate(date) %></td>
-                    <td><%= docs[i].hostname %></td>
-                    <td><%= docs[i].app %></td>
-                    <td><%= showLevel(docs[i].level) %></td>
-                    <td><%= docs[i].msg %></td>
-                </tr>
-            <% } %>
+            </tr> 
+            <% include logs %>
         </table>
         <div id="footer">
            &copy;elog <%= new Date() %>
         </div>
+        <script type="text/javascript" src="/js/jquery-1.8.1.min.js"></script>
+        <script type="text/javascript" src="/js/elog.js"></script>
         <script>
-            setTimeout(function(){
-                window.location.reload(true);
-            }, <%= refreshTime %>);
+            $(function(){
+                elog({
+                    refresh_time: <%= refreshTime %>
+                });
+            });
         </script>
     </body>
 </html>
diff --git a/views/js/elog.js b/views/js/elog.js
@@ -0,0 +1,17 @@
+$(function() {
+    function getLatestTime() {
+        return 0 + $('#logsHeader').next('tr').attr('data-rel');
+    }
+
+    function updateLogs() {
+        $.get('/newlogs?time=' + getLatestTime(), function(res){
+            $('#logsHeader').after(res);
+        });
+    }
+
+    window.elog = function(options) {
+        setInterval(function(){
+            updateLogs();
+        }, options.refresh_time);
+    }
+});
diff --git a/views/js/jquery-1.8.1.min.js b/views/js/jquery-1.8.1.min.js
diff --git a/views/logs.ejs b/views/logs.ejs
@@ -0,0 +1,48 @@
+<%
+function showLevel(level) 
+{
+  switch(level) {
+    case 4:
+      return 'Fatal';
+    case 3:
+      return 'Error';
+    case 2:
+      return 'Warn';
+    case 1:
+      return 'Info';
+    case 0:
+      return 'Debug';
+    default:
+      return 'Unknown';
+  }
+}
+
+function showDate(date)
+{
+    var year = date.getFullYear();
+    var month = date.getMonth() + 1;
+    var day = date.getDate();
+    var hour = date.getHours();
+    var minute = date.getMinutes();
+    var second = date.getSeconds();
+
+    if (month < 10) month = '0' + month;
+    if (day < 10) day = '0' + day;
+    if (hour < 10) hour = '0' + hour;
+    if (minute < 10) minute = '0' + minute;
+    if (second < 10) second = '0' + second;
+
+    return [year, month, day].join('-') + ' ' +
+    [hour, minute, second].join(':');
+}
+%>
+<% for (var i = 0; i < docs.length; i++) {  %> 
+    <% date = new Date(docs[i].time) %>
+    <tr class="level<%= docs[i].level %>" data-rel="<%= docs[i].time %>">
+        <td><%= showDate(date) %></td>
+        <td><%= docs[i].hostname %></td>
+        <td><%= docs[i].app %></td>
+        <td><%= showLevel(docs[i].level) %></td>
+        <td><%= docs[i].msg %></td>
+    </tr>
+<% } %>