Bump glob-parent from 5.1.0 to 5.1.2 (#237)

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.0 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.0...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/push.yml

@@ -0,0 +1,20 @@
+on: push
+name: Build, Lint, Test, and Publish
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm install
+      - run: npm test
+      - run: npm run lint
+      - uses: primer/publish@master
+        if: github.ref == 'refs/heads/master'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NPM_REGISTRY_URL: registry.npmjs.org

.gitignore

@@ -1,2 +1,5 @@
 node_modules
 test/fixtures/*.pem
+npm-debug.log
+dist
+.DS_Store

.jshintignore

@@ -1,2 +0,0 @@
-node_modules
-lib/web/assets/tinycon.min.js

.jshintrc

@@ -1,32 +0,0 @@
-{
-    "bitwise": true,
-    "camelcase": true,
-    "curly": true,
-    "eqeqeq": true,
-    "forin": true,
-    "indent": 4,
-    "latedef": true,
-    "newcap": true,
-    "noarg": true,
-    "noempty": true,
-    "plusplus": true,
-    "quotmark": "single",
-    "undef": true,
-    "unused": true,
-    "strict": true,
-    "trailing": true,
-
-    "maxlen": 120,
-    "white": true,
-
-    "node": true,
-    "browser": true,
-
-    "globals": {
-        "io": true,
-        "describe": false,
-        "it": false,
-        "beforeEach": false,
-        "afterEach": false
-    }
-}

.travis.yml

@@ -1,7 +1,16 @@
 language: node_js
 node_js:
-  - 0.8
-  - 0.10
+- 6
+- 8
+- 10
 script:
-  - make lint
-  - make test
+- npm run lint
+- npm test
+deploy:
+  provider: npm
+  email: maciej.winnicki@gmail.com
+  api_key:
+    secure: OuE8bOpsq/XN2AL6z0SWqHtpfKB5Qg3wug+hZVka+AdWaU6Gm0uvs4yA7B/uw9o5gH6KKgM+CP50Lq1xhC12CZbKLjkAUuFJQb9FrU/7jEAp+t+DKpoVBcru8bBjTxxx4wO1zXFcbJZ9zb4c4h76j2nfaNVuPTBB+mDF/HDd914=
+  on:
+    tags: true
+    repo: mthenw/frontail

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:12-buster-slim
+
+WORKDIR /frontail
+ADD . .
+RUN npm install --production
+
+ENTRYPOINT ["/frontail/docker-entrypoint.sh"]
+EXPOSE 9001
+CMD ["--help"]

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013 Maciej Winnicki
+Copyright (c) 2017 Maciej Winnicki
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

Makefile

@@ -1,10 +0,0 @@
-lint:
-	@./node_modules/.bin/jshint .
-
-test:
-	@./node_modules/.bin/mocha --reporter spec test/*.js
-
-test-watch:
-	@./node_modules/.bin/mocha --reporter spec test/*.js --watch
-
-.PHONY: lint test test-watch

README.md

@@ -1,23 +1,36 @@
-# frontail(1) – tail -F output in browser
+# frontail – streaming logs to the browser
 
-```frontail``` is node.js application for serving `tail -F` output to browser.
+`frontail` is a Node.js application for streaming logs to the browser. It's a `tail -F` with UI.
 
-[![Build Status](https://travis-ci.org/mthenw/frontail.svg?branch=master)](https://travis-ci.org/mthenw/frontail)
-[![NPM version](https://badge.fury.io/js/frontail.png)](http://badge.fury.io/js/frontail)
+![frontial](https://user-images.githubusercontent.com/455261/29570317-660c8122-8756-11e7-9d2f-8fea19e05211.gif)
+
+[![Docker Pulls](https://img.shields.io/docker/pulls/mthenw/frontail.svg)](https://hub.docker.com/r/mthenw/frontail/)
+
+## Quick start
+
+- `npm i frontail -g` or download a binary file from [Releases](https://github.com/mthenw/frontail/releases) page
+- `frontail /var/log/syslog`
+- visit [http://127.0.0.1:9001](http://127.0.0.1:9001)
 
 ## Features
 
-* search (```Tab``` to focus, ```Esc``` to clear)
-* user basic authentication
-* log rotation
-* auto-scrolling
-* marking logs
-* themes (default, dark)
-* number of unread logs in favicon
+- log rotation (not on Windows)
+- auto-scrolling
+- marking logs
+- pausing logs
+- number of unread logs in favicon
+- themes (default, dark)
+- [highlighting](#highlighting)
+- search (`Tab` to focus, `Esc` to clear)
+- set filter from url parameter `filter`
+- tailing [multiple files](#tailing-multiple-files) and [stdin](#stdin)
+- basic authentication
 
-## Installation
+## Installation options
 
-    npm install frontail -g
+- download a binary file from [Releases](https://github.com/mthenw/frontail/releases) pagegit st
+- using [npm package](https://www.npmjs.com/package/frontail): `npm i frontail -g`
+- using [Docker image](https://cloud.docker.com/repository/docker/mthenw/frontail): `docker run -d -P -v /var/log:/log mthenw/frontail /log/syslog`
 
 ## Usage
 
@@ -25,7 +38,6 @@
 
     Options:
 
-      -h, --help                    output usage information
       -V, --version                 output the version number
       -h, --host <host>             listening host, default 0.0.0.0
       -p, --port <port>             listening port, default 9001
@@ -39,11 +51,82 @@
       -c, --certificate <cert.pem>  Certificate for HTTPS, option works only along with -k option
       --pid-path <path>             if run as daemon file that will store the process id, default /var/run/frontail.pid
       --log-path <path>             if run as daemon file that will be used as a log, default /dev/null
+      --url-path <path>             URL path for the browser application, default /
       --ui-hide-topbar              hide topbar (log file name and search box)
-      --ui-no-indent                don't indent log lines (every line after first one)
+      --ui-no-indent                don't indent log lines
+      --ui-highlight                highlight words or lines if defined string found in logs, default preset
+      --ui-highlight-preset <path>  custom preset for highlighting (see ./preset/default.json)
+      --path <path>                 prefix path for the running application, default /
+      --disable-usage-stats         disable gathering usage statistics
+      --help                        output usage information
 
-Web interface is on http://localhost:[port]
+Web interface runs on **http://[host]:[port]**.
 
-## Screenshot
+### Tailing multiple files
 
-![screenshot1](https://dl.dropboxusercontent.com/u/3101412/frontail1.0.png)
+`[file ...]` accepts multiple paths, `*`, `?` and other shell special characters([Wildcards, Quotes, Back Quotes and Apostrophes in shell commands](http://www.codecoffee.com/tipsforlinux/articles/26-1.html)).
+
+### stdin
+
+Use `-` for streaming stdin:
+
+    ./server | frontail -
+
+### Highlighting
+
+`--ui-highlight` option turns on highlighting in UI. By default preset from `./preset/default.json` is used:
+
+```
+{
+    "words": {
+        "err": "color: red;"
+    },
+    "lines": {
+        "err": "font-weight: bold;"
+    }
+}
+```
+
+which means that every "err" string will be in red and every line containing "err" will be bolded.
+
+_New presets are very welcome. If you don't like default or you would like to share yours, please create PR with json file._
+
+Available presets:
+
+- default
+- npmlog
+- python
+
+### Running behind nginx
+
+Using the `--url-path` option `frontail` can run behind nginx with the example configuration
+
+Using `frontail` with `--url-path /frontail`
+
+```
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen      8080;
+        server_name localhost;
+
+        location /frontail {
+            proxy_pass http://127.0.0.1:9001/frontail;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
+    }
+}
+```
+
+### Usage statistics
+
+`frontail` by default (from `v4.5.0`) gathers **anonymous** usage statistics in Google Analytics. It can be disabled with
+`--disable-usage-stats`.
+
+The data is used to help me understand how `frontail` is used and I can make it better.

RELEASING.md

@@ -0,0 +1,40 @@
+# Releasing Frontail
+
+After all [pull requests](https://github.com/mthenw/frontail/pulls) for a release have been merged and all [Travis CI builds](https://travis-ci.org/mthenw/frontail) are green, you may create a release as follows:
+
+1. If you haven't already, switch to the master branch, ensure that you have no changes, and pull from origin.
+
+    ```sh
+    $ git checkout master
+    $ git status
+    $ git pull <remote> master --rebase
+    ```
+
+1. Edit the `package.json` file changing `version` field to your new release version and run `npm i`.
+
+1. Commit your changes.
+
+    ```sh
+    $ git commit -am "Release <version>"
+    ```
+
+1. Push the commit.
+
+    ```sh
+    $ git push origin head
+    ```
+
+1. GitHub action will publish new version to NPM and push new tag.
+
+1. Publish new release on GitHub with [`release`](https://github.com/zeit/release) package.
+
+    ```sh
+    $ git pull
+    $ npx release -P
+    ```
+
+1. Upload binaries
+
+    ```sh
+    $ npm run pkg
+    ```

docker-entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+set -euo pipefail
+
+exec ./bin/frontail $@

index.js

@@ -1,144 +1,171 @@
 'use strict';
 
-var connect        = require('connect');
-var cookieParser   = require('cookie');
-var crypto         = require('crypto');
-var daemon         = require('daemon');
-var fs             = require('fs');
-var program        = require('commander');
-var sanitizer      = require('validator').sanitize;
-var socketio       = require('socket.io');
-var tail           = require('./lib/tail');
-var connectBuilder = require('./lib/connect_builder');
-var serverBuilder  = require('./lib/server_builder');
-
-program
-    .version(require('./package.json').version)
-    .usage('[options] [file ...]')
-    .option('-h, --host <host>', 'listening host, default 0.0.0.0', String, '0.0.0.0')
-    .option('-p, --port <port>', 'listening port, default 9001', Number, 9001)
-    .option('-n, --number <number>', 'starting lines number, default 10', Number, 10)
-    .option('-l, --lines <lines>', 'number on lines stored in browser, default 2000', Number, 2000)
-    .option('-t, --theme <theme>', 'name of the theme (default, dark)', String, 'default')
-    .option('-d, --daemonize', 'run as daemon')
-    .option('-U, --user <username>',
-        'Basic Authentication username, option works only along with -P option', String, false)
-    .option('-P, --password <password>',
-        'Basic Authentication password, option works only along with -U option', String, false)
-    .option('-k, --key <key.pem>',
-        'Private Key for HTTPS, option works only along with -c option',
-        String, false)
-    .option('-c, --certificate <cert.pem>',
-        'Certificate for HTTPS, option works only along with -k option',
-        String, false)
-    .option('--pid-path <path>',
-        'if run as daemon file that will store the process id, default /var/run/frontail.pid',
-        String, '/var/run/frontail.pid')
-    .option('--log-path <path>', 'if run as daemon file that will be used as a log, default /dev/null',
-        String, '/dev/null')
-    .option('--ui-hide-topbar', 'hide topbar (log file name and search box)')
-    .option('--ui-no-indent', 'don\'t indent log lines (every line after first one)')
-    .parse(process.argv);
+const cookie = require('cookie');
+const cookieParser = require('cookie-parser');
+const crypto = require('crypto');
+const path = require('path');
+const { Server } = require('socket.io');
+const fs = require('fs');
+const untildify = require('untildify');
+const tail = require('./lib/tail');
+const connectBuilder = require('./lib/connect_builder');
+const program = require('./lib/options_parser');
+const serverBuilder = require('./lib/server_builder');
+const daemonize = require('./lib/daemonize');
+const usageStats = require('./lib/stats');
 
+/**
+ * Parse args
+ */
+program.parse(process.argv);
 if (program.args.length === 0) {
-    console.error('Arguments needed, use --help');
-    process.exit();
+  console.error('Arguments needed, use --help');
+  process.exit();
 }
 
+/**
+ * Init usage statistics
+ */
+const stats = usageStats(!program.disableUsageStats, program);
+stats.track('runtime', 'init');
+stats.time('runtime', 'runtime');
+
 /**
  * Validate params
  */
-var doAuthorization = !!(program.user && program.password);
-var doSecure = !!(program.key && program.certificate);
-var sessionSecret = String(+new Date()) + Math.random();
-var sessionKey = 'sid';
-var files = program.args.join(' ');
-var filesNamespace = crypto.createHash('md5').update(files).digest('hex');
+const doAuthorization = !!(program.user && program.password);
+const doSecure = !!(program.key && program.certificate);
+const sessionSecret = String(+new Date()) + Math.random();
+const files = program.args.join(' ');
+const filesNamespace = crypto.createHash('md5').update(files).digest('hex');
+const urlPath = program.urlPath.replace(/\/$/, ''); // remove trailing slash
 
 if (program.daemonize) {
-    /**
-     * Daemonize process
-     */
-    var logFile = fs.openSync(program.logPath, 'a');
-    var args = ['-p', program.port, '-n', program.number, '-l', program.lines, '-t', program.theme];
-
-    if (doAuthorization) {
-        args = args.concat(['-U', program.user, '-P', program.password]);
-    }
-
-    args = args.concat(program.args);
-
-    var proc = daemon.daemon(
-        __filename,
-        args,
-        {
-            stdout: logFile,
-            stderr: logFile
-        }
-    );
-    fs.writeFileSync(program.pidPath, proc.pid);
+  daemonize(__filename, program, {
+    doAuthorization,
+    doSecure,
+  });
 } else {
-    /**
-     * HTTP(s) server setup
-     */
-    var appBuilder = connectBuilder();
-    if (doAuthorization) {
-        appBuilder.session(sessionSecret, sessionKey);
-        appBuilder.authorize(program.user, program.password);
-    }
-    appBuilder
-        .static(__dirname + '/lib/web/assets')
-        .index(__dirname + '/lib/web/index.html', files, filesNamespace, program.theme);
+  /**
+   * HTTP(s) server setup
+   */
+  const appBuilder = connectBuilder(urlPath);
+  if (doAuthorization) {
+    appBuilder.session(sessionSecret);
+    appBuilder.authorize(program.user, program.password);
+  }
+  appBuilder
+    .static(path.join(__dirname, 'web', 'assets'))
+    .index(
+      path.join(__dirname, 'web', 'index.html'),
+      files,
+      filesNamespace,
+      program.theme
+    );
 
-    var builder = serverBuilder();
-    if (doSecure) {
-        builder.secure(program.key, program.certificate);
-    }
-    var server = builder
-        .use(appBuilder.build())
-        .port(program.port)
-        .host(program.host)
-        .build();
+  const builder = serverBuilder();
+  if (doSecure) {
+    builder.secure(program.key, program.certificate);
+  }
+  const server = builder
+    .use(appBuilder.build())
+    .port(program.port)
+    .host(program.host)
+    .build();
 
-    /**
-     * socket.io setup
-     */
-    var io = socketio.listen(server, {log: false});
+  /**
+   * socket.io setup
+   */
+  const io = new Server({ path: `${urlPath}/socket.io` });
+  io.attach(server);
 
-    if (doAuthorization) {
-        io.set('authorization', function (handshakeData, accept) {
-            if (handshakeData.headers.cookie) {
-                var cookie = cookieParser.parse(handshakeData.headers.cookie);
-                var sessionId = connect.utils.parseSignedCookie(cookie[sessionKey], sessionSecret);
-                if (sessionId) {
-                    return accept(null, true);
-                }
-                return accept('Invalid cookie', false);
-            } else {
-                return accept('No cookie in header', false);
-            }
-        });
-    }
+  if (doAuthorization) {
+    io.use((socket, next) => {
+      const handshakeData = socket.request;
+      if (handshakeData.headers.cookie) {
+        const cookies = cookie.parse(handshakeData.headers.cookie);
+        const sessionIdEncoded = cookies['connect.sid'];
+        if (!sessionIdEncoded) {
+          return next(new Error('Session cookie not provided'), false);
+        }
+        const sessionId = cookieParser.signedCookie(
+          sessionIdEncoded,
+          sessionSecret
+        );
+        if (sessionId) {
+          return next(null);
+        }
+        return next(new Error('Invalid cookie'), false);
+      }
 
-    /**
-     * When connected send starting data
-     */
-    var tailer = tail(program.args, {buffer: program.number});
-    var filesSocket = io.of('/' + filesNamespace).on('connection', function (socket) {
-        socket.emit('options:lines', program.lines);
-
-        program.uiHideTopbar && socket.emit('options:hide-topbar');
-        !program.uiIndent && socket.emit('options:no-indent');
-
-        tailer.getBuffer().forEach(function (line) {
-            socket.emit('line', line);
-        });
+      return next(new Error('No cookie in header'), false);
     });
+  }
 
-    /**
-     * Send incoming data
-     */
-    tailer.on('line', function (line) {
-        filesSocket.emit('line', sanitizer(line).xss());
+  /**
+   * Setup UI highlights
+   */
+  let highlightConfig;
+  if (program.uiHighlight) {
+    let presetPath;
+
+    if (!program.uiHighlightPreset) {
+      presetPath = path.join(__dirname, 'preset', 'default.json');
+    } else {
+      presetPath = path.resolve(untildify(program.uiHighlightPreset));
+    }
+
+    if (fs.existsSync(presetPath)) {
+      highlightConfig = JSON.parse(fs.readFileSync(presetPath));
+    } else {
+      throw new Error(`Preset file ${presetPath} doesn't exists`);
+    }
+  }
+
+  /**
+   * When connected send starting data
+   */
+  const tailer = tail(program.args, {
+    buffer: program.number,
+  });
+
+  const filesSocket = io.of(`/${filesNamespace}`).on('connection', (socket) => {
+    socket.emit('options:lines', program.lines);
+
+    if (program.uiHideTopbar) {
+      socket.emit('options:hide-topbar');
+    }
+
+    if (!program.uiIndent) {
+      socket.emit('options:no-indent');
+    }
+
+    if (program.uiHighlight) {
+      socket.emit('options:highlightConfig', highlightConfig);
+    }
+
+    tailer.getBuffer().forEach((line) => {
+      socket.emit('line', line);
     });
+  });
+
+  /**
+   * Send incoming data
+   */
+  tailer.on('line', (line) => {
+    filesSocket.emit('line', line);
+  });
+
+  stats.track('runtime', 'started');
+
+  /**
+   * Handle signals
+   */
+  const cleanExit = () => {
+    stats.timeEnd('runtime', 'runtime', () => {
+      process.exit();
+    });
+  };
+  process.on('SIGINT', cleanExit);
+  process.on('SIGTERM', cleanExit);
 }

lib/connect_builder.js

@@ -1,53 +1,75 @@
 'use strict';
 
-var connect = require('connect');
-var fs = require('fs');
+const connect = require('connect');
+const fs = require('fs');
+const serveStatic = require('serve-static');
+const expressSession = require('express-session');
+const basicAuth = require('basic-auth-connect');
 
-var ConnectBuilder = function () {
-    this.app = connect();
+function ConnectBuilder(urlPath) {
+  this.app = connect();
+  this.urlPath = urlPath;
+}
+
+ConnectBuilder.prototype.authorize = function authorize(user, pass) {
+  this.app.use(
+    this.urlPath,
+    basicAuth(
+      (incomingUser, incomingPass) =>
+        user === incomingUser && pass === incomingPass
+    )
+  );
+
+  return this;
 };
 
-ConnectBuilder.prototype.authorize = function (user, pass) {
-    this.app.use(connect.basicAuth(function (incomingUser, incomingPass) {
-        return user === incomingUser && pass === incomingPass;
-    }));
-
-    return this;
+ConnectBuilder.prototype.build = function build() {
+  return this.app;
 };
 
-ConnectBuilder.prototype.build = function () {
-    return this.app;
-};
+ConnectBuilder.prototype.index = function index(
+  path,
+  files,
+  filesNamespace,
+  themeOpt
+) {
+  const theme = themeOpt || 'default';
 
-ConnectBuilder.prototype.index = function (path, files, filesNamespace, theme) {
-    theme = theme || 'default';
-
-    this.app.use(function (req, res) {
-        fs.readFile(path, function (err, data) {
-            res.writeHead(200, {'Content-Type': 'text/html'});
-            res.end(data.toString('utf-8')
-                .replace(/__TITLE__/g, files)
-                .replace(/__THEME__/g, theme)
-                .replace(/__NAMESPACE__/g, filesNamespace),
-                'utf-8'
-            );
-        });
+  this.app.use(this.urlPath, (req, res) => {
+    fs.readFile(path, (err, data) => {
+      res.writeHead(200, {
+        'Content-Type': 'text/html',
+      });
+      res.end(
+        data
+          .toString('utf-8')
+          .replace(/__TITLE__/g, files)
+          .replace(/__THEME__/g, theme)
+          .replace(/__NAMESPACE__/g, filesNamespace)
+          .replace(/__PATH__/g, this.urlPath),
+        'utf-8'
+      );
     });
+  });
 
-    return this;
+  return this;
 };
 
-ConnectBuilder.prototype.session = function (secret, key) {
-    this.app.use(connect.cookieParser());
-    this.app.use(connect.session({secret: secret, key: key}));
-    return this;
+ConnectBuilder.prototype.session = function sessionf(secret) {
+  this.app.use(
+    this.urlPath,
+    expressSession({
+      secret,
+      resave: false,
+      saveUninitialized: true,
+    })
+  );
+  return this;
 };
 
-ConnectBuilder.prototype.static = function (path) {
-    this.app.use(connect.static(path));
-    return this;
+ConnectBuilder.prototype.static = function staticf(path) {
+  this.app.use(this.urlPath, serveStatic(path));
+  return this;
 };
 
-module.exports = function () {
-    return new ConnectBuilder();
-};
+module.exports = (urlPath) => new ConnectBuilder(urlPath);

lib/daemonize.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const daemon = require('daemon-fix41');
+const fs = require('fs');
+
+const defaultOptions = {
+  doAuthorization: false,
+  doSecure: false,
+};
+
+module.exports = (script, params, opts) => {
+  const options = opts || defaultOptions;
+
+  const logFile = fs.openSync(params.logPath, 'a');
+
+  let args = [
+    '-h',
+    params.host,
+    '-p',
+    params.port,
+    '-n',
+    params.number,
+    '-l',
+    params.lines,
+    '-t',
+    params.theme,
+  ];
+
+  if (options.doAuthorization) {
+    args.push('-U', params.user, '-P', params.password);
+  }
+
+  if (options.doSecure) {
+    args.push('-k', params.key, '-c', params.certificate);
+  }
+
+  if (params.uiHideTopbar) {
+    args.push('--ui-hide-topbar');
+  }
+
+  if (params.urlPath) {
+    args.push('--url-path', params.urlPath);
+  }
+
+  if (!params.uiIndent) {
+    args.push('--ui-no-indent');
+  }
+
+  if (params.uiHighlight) {
+    args.push('--ui-highlight');
+  }
+
+  if (params.uiHighlightPreset) {
+    args.push('--ui-highlight-preset', params.uiHighlightPreset);
+  }
+
+  if (params.disableUsageStats) {
+    args.push('--disable-usage-stats', params.disableUsageStats);
+  }
+
+  args = args.concat(params.args);
+
+  const proc = daemon.daemon(script, args, {
+    stdout: logFile,
+    stderr: logFile,
+  });
+
+  fs.writeFileSync(params.pidPath, proc.pid);
+};

lib/options_parser.js

@@ -0,0 +1,87 @@
+const program = require('commander');
+
+program
+  .version(require('../package.json').version)
+  .usage('[options] [file ...]')
+  .helpOption('--help')
+  .option(
+    '-h, --host <host>',
+    'listening host, default 0.0.0.0',
+    String,
+    '0.0.0.0'
+  )
+  .option('-p, --port <port>', 'listening port, default 9001', Number, 9001)
+  .option(
+    '-n, --number <number>',
+    'starting lines number, default 10',
+    Number,
+    10
+  )
+  .option(
+    '-l, --lines <lines>',
+    'number on lines stored in browser, default 2000',
+    Number,
+    2000
+  )
+  .option(
+    '-t, --theme <theme>',
+    'name of the theme (default, dark)',
+    String,
+    'default'
+  )
+  .option('-d, --daemonize', 'run as daemon')
+  .option(
+    '-U, --user <username>',
+    'Basic Authentication username, option works only along with -P option',
+    String,
+    false
+  )
+  .option(
+    '-P, --password <password>',
+    'Basic Authentication password, option works only along with -U option',
+    String,
+    false
+  )
+  .option(
+    '-k, --key <key.pem>',
+    'Private Key for HTTPS, option works only along with -c option',
+    String,
+    false
+  )
+  .option(
+    '-c, --certificate <cert.pem>',
+    'Certificate for HTTPS, option works only along with -k option',
+    String,
+    false
+  )
+  .option(
+    '--pid-path <path>',
+    'if run as daemon file that will store the process id, default /var/run/frontail.pid',
+    String,
+    '/var/run/frontail.pid'
+  )
+  .option(
+    '--log-path <path>',
+    'if run as daemon file that will be used as a log, default /dev/null',
+    String,
+    '/dev/null'
+  )
+  .option(
+    '--url-path <path>',
+    'URL path for the browser application, default /',
+    String,
+    '/'
+  )
+  .option('--ui-hide-topbar', 'hide topbar (log file name and search box)')
+  .option('--ui-no-indent', "don't indent log lines")
+  .option(
+    '--ui-highlight',
+    'highlight words or lines if defined string found in logs, default preset'
+  )
+  .option(
+    '--ui-highlight-preset <path>',
+    'custom preset for highlighting (see ./preset/default.json)'
+  )
+  .option('--disable-usage-stats', 'disable gathering usage statistics');
+
+module.exports = program;

lib/server_builder.js

@@ -1,52 +1,54 @@
+/* eslint no-underscore-dangle: off */
+
 'use strict';
 
-var fs = require('fs');
-var http = require('http');
-var https = require('https');
+const fs = require('fs');
+const http = require('http');
+const https = require('https');
 
-var ServerBuilder = function () {
-    this._host = null;
-    this._port = 9001;
+function ServerBuilder() {
+  this._host = null;
+  this._port = 9001;
+}
+
+ServerBuilder.prototype.build = function build() {
+  if (this._key && this._cert) {
+    const options = {
+      key: this._key,
+      cert: this._cert,
+    };
+    return https
+      .createServer(options, this._callback)
+      .listen(this._port, this._host);
+  }
+
+  return http.createServer(this._callback).listen(this._port, this._host);
 };
 
-ServerBuilder.prototype.build = function () {
-    if (this._key && this._cert) {
-        var options = {
-            key: this._key,
-            cert: this._cert
-        };
-        return https.createServer(options, this._callback).listen(this._port, this._host);
-    } else {
-        return http.createServer(this._callback).listen(this._port, this._host);
-    }
+ServerBuilder.prototype.host = function hostf(host) {
+  this._host = host;
+  return this;
 };
 
-ServerBuilder.prototype.host = function (host) {
-    this._host = host;
-    return this;
+ServerBuilder.prototype.port = function portf(port) {
+  this._port = port;
+  return this;
 };
 
-ServerBuilder.prototype.port = function (port) {
-    this._port = port;
-    return this;
+ServerBuilder.prototype.secure = function secure(keyPath, certPath) {
+  try {
+    this._key = fs.readFileSync(keyPath);
+    this._cert = fs.readFileSync(certPath);
+  } catch (e) {
+    throw new Error('No key or certificate file found');
+  }
+
+  return this;
 };
 
-ServerBuilder.prototype.secure = function (keyPath, certPath) {
-    try {
-        this._key = fs.readFileSync(keyPath);
-        this._cert = fs.readFileSync(certPath);
-    } catch (e) {
-        throw new Error('No key or certificate file found');
-    }
-
-    return this;
+ServerBuilder.prototype.use = function use(callback) {
+  this._callback = callback;
+  return this;
 };
 
-ServerBuilder.prototype.use = function (callback) {
-    this._callback = callback;
-    return this;
-};
-
-module.exports = function () {
-    return new ServerBuilder();
-};
+module.exports = () => new ServerBuilder();

lib/stats.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const ua = require('universal-analytics');
+const isDocker = require('is-docker');
+const Configstore = require('configstore');
+const uuidv4 = require('uuid/v4');
+const pkg = require('../package.json');
+
+const trackingID = 'UA-129582046-1';
+
+// Usage stats
+function Stats(enabled, opts) {
+  this.timer = {};
+
+  if (enabled === true) {
+    const config = new Configstore(pkg.name);
+    let clientID = uuidv4();
+    if (config.has('clientID')) {
+      clientID = config.get('clientID');
+    } else {
+      config.set('clientID', clientID);
+    }
+
+    const tracker = ua(trackingID, clientID);
+    tracker.set('aip', 1); // Anonymize IP
+    tracker.set('an', 'frontail'); // Application Name
+    tracker.set('av', pkg.version); // Application Version
+    tracker.set('ds', 'app'); // Data Source
+    tracker.set('cd1', process.platform); // platform
+    tracker.set('cd2', process.arch); // arch
+    tracker.set('cd3', process.version.match(/^v(\d+\.\d+)/)[1]); // Node version
+    tracker.set('cd4', isDocker()); // is Docker
+    tracker.set('cd5', opts.number !== 10); // is --number parameter set
+    this.tracker = tracker;
+  }
+
+  return this;
+}
+
+Stats.prototype.track = function track(category, action) {
+  if (!this.tracker) {
+    return;
+  }
+  this.tracker.event(category, action).send();
+};
+
+Stats.prototype.time = function time(category, action) {
+  if (!this.tracker) {
+    return;
+  }
+
+  if (!this.timer[category]) {
+    this.timer[category] = {};
+  }
+  this.timer[category][action] = Date.now();
+};
+
+Stats.prototype.timeEnd = function timeEnd(category, action, cb) {
+  if (!this.tracker) {
+    cb();
+    return;
+  }
+
+  this.tracker
+    .timing(category, action, Date.now() - this.timer[category][action])
+    .send(cb);
+};
+
+module.exports = (enabled, opts) => new Stats(enabled, opts);

lib/tail.js

@@ -1,43 +1,72 @@
+/* eslint no-underscore-dangle: off */
+
 'use strict';
 
-var EventEmitter = require('events').EventEmitter;
-var spawn        = require('child_process').spawn;
-var util         = require('util');
+const events = require('events');
+const childProcess = require('child_process');
+const tailStream = require('fs-tail-stream');
+const util = require('util');
+const CBuffer = require('CBuffer');
+const byline = require('byline');
+const commandExistsSync = require('command-exists').sync;
 
-var Tail = function (path, options) {
-    EventEmitter.call(this);
+function Tail(path, opts) {
+  events.EventEmitter.call(this);
 
-    this.buffer = [];
-    this.options = options || {buffer: 0};
+  const options = opts || {
+    buffer: 0,
+  };
+  this._buffer = new CBuffer(options.buffer);
 
-    var self = this;
-    var tail = spawn('tail', ['-F'].concat(path));
-    tail.stdout.on('data', function (data) {
+  let stream;
 
-        var lines = data.toString('utf-8');
-        lines = lines.split('\n');
-        lines.pop();
-        lines.forEach(function (line) {
-            if (self.options.buffer) {
-                if (self.buffer.length === self.options.buffer) {
-                    self.buffer.shift();
-                }
-                self.buffer.push(line);
-            }
-            self.emit('line', line);
-        });
-    });
+  if (path[0] === '-') {
+    stream = process.stdin;
+  } else {
+    /* Check if this os provides the `tail` command. */
+    const hasTailCommand = commandExistsSync('tail');
+    if (hasTailCommand) {
+      let followOpt = '-F';
+      if (process.platform === 'openbsd') {
+        followOpt = '-f';
+      }
 
-    process.on('exit', function () {
-        tail.kill();
-    });
-};
-util.inherits(Tail, EventEmitter);
+      const cp = childProcess.spawn(
+        'tail',
+        ['-n', options.buffer, followOpt].concat(path)
+      );
+      cp.stderr.on('data', (data) => {
+        // If there is any important error then display it in the console. Tail will keep running.
+        // File can be truncated over network.
+        if (data.toString().indexOf('file truncated') === -1) {
+          console.error(data.toString());
+        }
+      });
+      stream = cp.stdout;
 
-Tail.prototype.getBuffer = function () {
-    return this.buffer;
+      process.on('exit', () => {
+        cp.kill();
+      });
+    } else {
+      /* This is used if the os does not support the `tail`command. */
+      stream = tailStream.createReadStream(path.join(), {
+        encoding: 'utf8',
+        start: options.buffer,
+        tail: true,
+      });
+    }
+  }
+
+  byline(stream, { keepEmptyLines: true }).on('data', (line) => {
+    const str = line.toString();
+    this._buffer.push(str);
+    this.emit('line', str);
+  });
+}
+util.inherits(Tail, events.EventEmitter);
+
+Tail.prototype.getBuffer = function getBuffer() {
+  return this._buffer.toArray();
 };
 
-module.exports = function (path, options) {
-    return new Tail(path, options);
-};
+module.exports = (path, options) => new Tail(path, options);

lib/web/assets/app.js

@@ -1,223 +0,0 @@
-/*global Tinycon:false */
-window.App = (function (window, document) {
-    'use strict';
-
-    /**
-     * @type {Object}
-     * @private
-     */
-    var _socket;
-
-    /**
-     * @type {HTMLElement}
-     * @private
-     */
-    var _logContainer;
-
-    /**
-     * @type {HTMLElement}
-     * @private
-     */
-    var _filterInput;
-
-    /**
-     * @type {String}
-     * @private
-     */
-    var _filterValue = '';
-
-    /**
-     * @type {HTMLElement}
-     * @private
-     */
-    var _topbar;
-
-    /**
-     * @type {HTMLElement}
-     * @private
-     */
-    var _body;
-
-    /**
-     * @type {number}
-     * @private
-     */
-    var _linesLimit = Math.Infinity;
-
-    /**
-     * @type {number}
-     * @private
-     */
-    var _newLinesCount = 0;
-
-    /**
-     * @type {boolean}
-     * @private
-     */
-    var _isWindowFocused = true;
-
-    /**
-     * Hide element if doesn't contain filter value
-     *
-     * @param {Object} element
-     * @private
-     */
-    var _filterElement = function (element) {
-        var pattern = new RegExp(_filterValue, 'i');
-        if (pattern.test(element.textContent)) {
-            element.style.display = '';
-        } else {
-            element.style.display = 'none';
-        }
-    };
-
-    /**
-     * Filter logs based on _filterValue
-     *
-     * @function
-     * @private
-     */
-    var _filterLogs = function () {
-        var collection = _logContainer.childNodes;
-        var i = collection.length;
-
-        if (i === 0) {
-            return;
-        }
-
-        while (i) {
-            _filterElement(collection[i - 1]);
-            i -= 1;
-        }
-        window.scrollTo(0, document.body.scrollHeight);
-    };
-
-    /**
-     * @return {Boolean}
-     * @private
-     */
-    var _isScrolledBottom = function () {
-        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
-        var totalHeight = document.body.offsetHeight;
-        var clientHeight = document.documentElement.clientHeight;
-        return totalHeight <= currentScroll + clientHeight;
-    };
-
-    /**
-     * @return void
-     * @private
-     */
-    var _faviconReset = function () {
-        _newLinesCount = 0;
-        Tinycon.setBubble(0);
-    };
-
-    /**
-     * @return void
-     * @private
-     */
-    var _updateFaviconCounter = function () {
-        if (_isWindowFocused) {
-            return;
-        }
-
-        _newLinesCount = _newLinesCount + 1;
-
-        if (_newLinesCount > 99) {
-            Tinycon.setBubble(99);
-        } else {
-            Tinycon.setBubble(_newLinesCount);
-        }
-    };
-
-    return {
-        /**
-         * Init socket.io communication and log container
-         *
-         * @param {Object} opts options
-         */
-        init: function (opts) {
-            var self = this;
-
-            // Elements
-            _logContainer = opts.container;
-            _filterInput = opts.filterInput;
-            _filterInput.focus();
-            _topbar = opts.topbar;
-            _body = opts.body;
-
-            // Filter input bind
-            _filterInput.addEventListener('keyup', function (e) {
-                if (e.keyCode === 27) { //esc
-                    this.value = '';
-                    _filterValue = '';
-                } else {
-                    _filterValue = this.value;
-                }
-                _filterLogs();
-            });
-
-            // Favicon counter bind
-            window.addEventListener('blur', function () {
-                _isWindowFocused = false;
-            }, true);
-            window.addEventListener('focus', function () {
-                _isWindowFocused = true;
-                _faviconReset();
-            }, true);
-
-            // socket.io init
-            _socket = opts.socket;
-            _socket
-                .on('options:lines', function (limit) {
-                    _linesLimit = limit;
-                })
-                .on('options:hide-topbar', function () {
-                    _topbar.className += ' hide';
-                    _body.className = 'no-topbar';
-                })
-                .on('options:no-indent', function () {
-                    _logContainer.className += ' no-indent';
-                })
-                .on('line', function (line) {
-                    self.log(line);
-                });
-        },
-
-        /**
-         * Log data
-         *
-         * @param {string} data data to log
-         */
-        log: function (data) {
-            var wasScrolledBottom = _isScrolledBottom();
-            var div = document.createElement('div');
-            var p = document.createElement('p');
-            p.className = 'inner-line';
-            p.innerHTML = data;
-
-            div.className = 'line';
-            div.addEventListener('click', function () {
-                if (this.className.indexOf('selected') === -1) {
-                    this.className = 'line-selected';
-                } else {
-                    this.className = 'line';
-                }
-            });
-
-            div.appendChild(p);
-            _filterElement(div);
-            _logContainer.appendChild(div);
-
-            if (_logContainer.children.length > _linesLimit) {
-                _logContainer.removeChild(_logContainer.children[0]);
-            }
-
-            if (wasScrolledBottom) {
-                window.scrollTo(0, document.body.scrollHeight);
-            }
-
-            _updateFaviconCounter();
-        }
-    };
-})(window, document);

lib/web/assets/styles/dark.css

@@ -1,46 +0,0 @@
-@import "bootstrap.min.css";
-
-body {
-    padding-top: 4em;
-    background-color: #2F3238;
-}
-
-.no-topbar {
-    padding-top: 10px;
-}
-
-.navbar {
-    background-color: #26292E;
-    border: 0;
-}
-
-.form-control {
-    border: 0;
-    color: #7F8289;
-    background-color: #2F3238;
-}
-
-.log {
-    white-space: pre-wrap;
-    color: #7F8289;
-    font-size: .85em;
-    background: inherit;
-    border: 0;
-    padding: 0;
-}
-
-.log .inner-line {
-    padding: 0 15px;
-    margin-left: 84pt;
-    text-indent: -84pt;
-    margin-bottom: 0;
-}
-
-.log.no-indent .inner-line {
-    margin-left: 0;
-    text-indent: 0;
-}
-
-.log .line-selected {
-    background-color: #302436;
-}

lib/web/assets/styles/default.css

@@ -1,38 +0,0 @@
-@import "bootstrap.min.css";
-
-body {
-    padding-top: 4em;
-}
-
-.no-topbar {
-    padding-top: 10px;
-}
-
-.navbar-inverse .navbar-brand {
-    color: white;
-}
-
-.log {
-    white-space: pre-wrap;
-    color: black;
-    font-size: .85em;
-    background: inherit;
-    border: 0;
-    padding: 0;
-}
-
-.log .inner-line {
-    padding: 0 15px;
-    margin-left: 84pt;
-    text-indent: -84pt;
-    margin-bottom: 0;
-}
-
-.log.no-indent .inner-line {
-    margin-left: 0;
-    text-indent: 0;
-}
-
-.log .line-selected {
-    background-color: #ffb2b0;
-}

lib/web/index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>tail -F __TITLE__</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link rel="stylesheet" type="text/css" href="/styles/__THEME__.css">
-    <link rel="icon" href="/favicon.ico">
-</head>
-<body>
-    <nav class="topbar navbar navbar-inverse navbar-fixed-top" role="navigation">
-        <div class="container-fluid">
-            <span class="navbar-brand" href="#">tail -F __TITLE__</span>
-            <form class="navbar-form navbar-right" role="search">
-                <div class="form-group">
-                    <input type="text" class="form-control query" placeholder="Filter" tabindex="1">
-                </div>
-            </form>
-        </div>
-    </nav>
-
-    <pre class="log"></pre>
-
-    <script src="/socket.io/socket.io.js"></script>
-    <script src="/tinycon.min.js"></script>
-    <script src="/app.js"></script>
-    <script type="text/javascript">
-        var socket = new io.connect('/' + '__NAMESPACE__');
-
-        window.load = App.init({
-            socket: socket,
-            container: document.getElementsByClassName('log')[0],
-            filterInput: document.getElementsByClassName('query')[0],
-            topbar: document.getElementsByClassName('topbar')[0],
-            body: document.getElementsByTagName('body')[0]
-        });
-  </script>
-</body>
-</html>

package.json

@@ -1,27 +1,82 @@
 {
   "name": "frontail",
-  "version": "1.1.0",
-  "description": "tail -F output in browser",
+  "version": "4.9.2",
+  "description": "streaming logs to the browser",
   "homepage": "https://github.com/mthenw/frontail",
   "author": "Maciej Winnicki <maciej.winnicki@gmail.com>",
   "license": "MIT",
   "bin": "./bin/frontail",
   "dependencies": {
-    "commander": "1.3.2",
-    "socket.io": "0.9.16",
-    "connect": "2.11.0",
-    "validator": "1.5.0",
-    "daemon": "1.1.0",
-    "cookie": "0.1.0"
+    "CBuffer": "0.1.4",
+    "basic-auth-connect": "1.0.0",
+    "byline": "5.0.0",
+    "command-exists": "1.2.8",
+    "commander": "3.0.1",
+    "configstore": "4.0.0",
+    "connect": "3.7.0",
+    "cookie": "0.1.0",
+    "cookie-parser": "1.4.5",
+    "daemon-fix41": "1.1.2",
+    "express-session": "1.15.6",
+    "fs-tail-stream": "1.1.0",
+    "is-docker": "1.1.0",
+    "serve-static": "1.14.1",
+    "socket.io": "3.1.2",
+    "universal-analytics": "0.4.23",
+    "untildify": "3.0.2",
+    "uuid": "3.3.2"
   },
   "devDependencies": {
-    "jshint": "~2.3.0",
-    "should": "~2.0.2",
-    "mocha": "~1.13.0",
-    "temp": "~0.6.0",
+    "eslint": "~6.8.0",
+    "eslint-config-airbnb-base": "~14.0.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "~2.20.0",
+    "jsdom": "~11.12.0",
+    "mocha": "~5.2.0",
+    "pkg": "~4.4.7",
+    "should": "~3.3.2",
     "sinon": "~1.7.3",
-    "supertest": "~0.8.1",
-    "jsdom": "~0.10.1"
+    "supertest": "^3.3.0",
+    "temp": "~0.8.1"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "test": "mocha -r should --exit test/*.js",
+    "pkg": "pkg --out-path=dist ."
+  },
+  "pkg": {
+    "assets": [
+      "preset/*.json",
+      "web/**/*"
+    ],
+    "targets": [
+      "node12-alpine-x64",
+      "node12-linux-x64",
+      "node12-macos-x64",
+      "node12-windows-x64"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "airbnb-base",
+      "prettier"
+    ],
+    "rules": {
+      "no-console": "off",
+      "strict": "off",
+      "implicit-arrow-linebreak": "off"
+    },
+    "env": {
+      "node": true
+    },
+    "ignorePatterns": [
+      "web/assets/tinycon.min.js",
+      "web/assets/ansi_up.js"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "always"
   },
   "repository": {
     "type": "git",
@@ -29,11 +84,11 @@
   },
   "keywords": [
     "tail",
-    "syslog"
+    "syslog",
+    "realtime",
+    "log",
+    "devops"
   ],
-  "engine": {
-    "node": ">= 0.8.0"
-  },
   "main": "index",
   "preferGlobal": true
 }

preset/default.json

@@ -0,0 +1,8 @@
+{
+  "words": {
+    "err": "color: red;"
+  },
+  "lines": {
+    "err": "font-weight: bold;"
+  }
+}

preset/npmlog.json

@@ -0,0 +1,15 @@
+{
+  "words": {
+    "verb": "color: blue; background-color: black;",
+    "info": "color: green;",
+    "http": "color: green; background-color: black;",
+    "WARN": "color: black; background-color: yellow; font-style: normal;",
+    "error": "color: red;",
+    "ERR!": "color: red; background-color: black;"
+  },
+  "lines": {
+    "WARN": "font-style: italic;",
+    "ERR!": "font-weight: bold;"
+  }
+}
+

preset/python.json

@@ -0,0 +1,12 @@
+{
+  "words": {
+    "TODO": "color: purple"
+  },
+  "lines": {
+    "CRITICAL": "color: Red; font-weight: bold",
+    "ERROR": "color: Crimson; font-weight: bold",
+    "WARN": "color: Orange; font-style: italic",
+    "INFO": "color: DeepSkyBlue;",
+    "DEBUG": "color: LightGrey;"
+  }
+}

test/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "no-unused-expressions": "off"
+  },
+  "env": {
+    "mocha": true
+  }
+}

test/app.js

@@ -1,105 +1,242 @@
 'use strict';
 
-require('should');
-var jsdom = require('jsdom');
-var EventEmitter = require('events').EventEmitter;
+const fs = require('fs');
+const jsdom = require('jsdom/lib/old-api.js');
+const events = require('events');
 
-describe('browser application', function () {
-    var window, io;
+describe('browser application', () => {
+  let io;
+  let window;
 
-    beforeEach(function (done) {
-        io = new EventEmitter();
-
-        jsdom.env(
-            '<title></title><body><div class="topbar"></div><div class="log"></div><input type="test" id="filter"/></body>',
-            ['../lib/web/assets/app.js', './lib/jquery.js'],
-            function (errors, domWindow) {
-                window = domWindow;
-                done();
-            });
+  function initApp() {
+    window.App.init({
+      socket: io,
+      container: window.document.querySelector('.log'),
+      filterInput: window.document.querySelector('#filter'),
+      pauseBtn: window.document.querySelector('#pauseBtn'),
+      topbar: window.document.querySelector('.topbar'),
+      body: window.document.querySelector('body'),
     });
+  }
+
+  function clickOnElement(line) {
+    const click = window.document.createEvent('MouseEvents');
+    click.initMouseEvent(
+      'click',
+      true,
+      true,
+      window,
+      0,
+      0,
+      0,
+      0,
+      0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    );
+    line.dispatchEvent(click);
+  }
+
+  beforeEach((done) => {
+    io = new events.EventEmitter();
+    const html =
+      '<title></title><body><div class="topbar"></div>' +
+      '<div class="log"></div><button type="button" id="pauseBtn"></button>' +
+      '<input type="test" id="filter"/></body>';
+    const ansiup = fs.readFileSync('./web/assets/ansi_up.js', 'utf-8');
+    const src = fs.readFileSync('./web/assets/app.js', 'utf-8');
+
+    jsdom.env({
+      html,
+      url: 'http://localhost?filter=line.*',
+      src: [ansiup, src],
+      onload: (domWindow) => {
+        window = domWindow;
 
-    it('should show lines from socket.io', function () {
         initApp();
-
-        io.emit('line', 'test');
-
-        var log = window.document.querySelector('.log');
-        log.childNodes.length.should.be.equal(1);
-        log.childNodes[0].textContent.should.be.equal('test');
-        log.childNodes[0].className.should.be.equal('line');
-        log.childNodes[0].tagName.should.be.equal('DIV');
-        log.childNodes[0].innerHTML.should.be.equal('<p class="inner-line">test</p>');
+        done();
+      },
     });
+  });
 
-    it('should select line when clicked', function () {
-        initApp();
-        io.emit('line', 'test');
+  it('should show lines from socket.io', () => {
+    io.emit('line', 'test');
 
-        var line = window.document.querySelector('.line');
-        clickOnElement(line);
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(1);
+    log.childNodes[0].textContent.should.be.equal('test');
+    log.childNodes[0].className.should.be.equal('line');
+    log.childNodes[0].tagName.should.be.equal('DIV');
+    log.childNodes[0].innerHTML.should.be.equal(
+      '<p class="inner-line">test</p>'
+    );
+  });
 
-        line.className.should.be.equal('line-selected');
+  it('should select line when clicked', () => {
+    io.emit('line', 'test');
+
+    const line = window.document.querySelector('.line');
+    clickOnElement(line);
+
+    line.className.should.be.equal('line-selected');
+  });
+
+  it('should deselect line when selected line clicked', () => {
+    io.emit('line', 'test');
+
+    const line = window.document.querySelector('.line');
+    clickOnElement(line);
+    clickOnElement(line);
+
+    line.className.should.be.equal('line');
+  });
+
+  it('should limit number of lines in browser', () => {
+    io.emit('options:lines', 2);
+    io.emit('line', 'line1');
+    io.emit('line', 'line2');
+    io.emit('line', 'line3');
+
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(2);
+    log.childNodes[0].textContent.should.be.equal('line2');
+    log.childNodes[1].textContent.should.be.equal('line3');
+  });
+
+  it('should hide topbar', () => {
+    io.emit('options:hide-topbar');
+
+    const topbar = window.document.querySelector('.topbar');
+    topbar.className.should.match(/hide/);
+    const body = window.document.querySelector('body');
+    body.className.should.match(/no-topbar/);
+  });
+
+  it('should not indent log lines', () => {
+    io.emit('options:no-indent');
+
+    const log = window.document.querySelector('.log');
+    log.className.should.match(/no-indent/);
+  });
+
+  it('should highlight word', () => {
+    io.emit('options:highlightConfig', {
+      words: {
+        foo: 'background: black',
+        bar: 'background: black',
+      },
     });
+    io.emit('line', 'foo bar');
 
-    it('should deselect line when selected line clicked', function () {
-        initApp();
-        io.emit('line', 'test');
+    const line = window.document.querySelector('.line');
+    line.innerHTML.should.containEql(
+      '<span style="background: black">foo</span> <span style="background: black">bar</span>'
+    );
+  });
 
-        var line = window.document.querySelector('.line');
-        clickOnElement(line);
-        clickOnElement(line);
-
-        line.className.should.be.equal('line');
+  it('should highlight line', () => {
+    io.emit('options:highlightConfig', {
+      lines: {
+        line: 'background: black',
+      },
     });
+    io.emit('line', 'line1');
 
-    it('should limit number of lines in browser', function () {
-        initApp();
+    const line = window.document.querySelector('.line');
+    line.parentNode.innerHTML.should.equal(
+      '<div class="line" style="background: black"><p class="inner-line">line1</p></div>'
+    );
+  });
 
-        io.emit('options:lines', 2);
-        io.emit('line', 'line1');
-        io.emit('line', 'line2');
-        io.emit('line', 'line3');
+  it('should escape HTML', () => {
+    io.emit('line', '<a/>');
 
-        var log = window.document.querySelector('.log');
-        log.childNodes.length.should.be.equal(2);
-        log.childNodes[0].textContent.should.be.equal('line2');
-        log.childNodes[1].textContent.should.be.equal('line3');
-    });
+    const line = window.document.querySelector('.line');
+    line.innerHTML.should.equal('<p class="inner-line">&lt;a/&gt;</p>');
+  });
 
-    it('should hide topbar', function () {
-        initApp();
+  it('should work filter from URL', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
 
-        io.emit('options:hide-topbar');
+    const filterInput = window.document.querySelector('#filter');
+    filterInput.value.should.be.equal('line.*');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(3);
+    log.childNodes[0].style.display.should.be.equal('');
+    log.childNodes[1].style.display.should.be.equal('none');
+    log.childNodes[2].style.display.should.be.equal('');
+    window.location.href.should.containEql('filter=line.*');
+  });
 
-        var topbar = window.document.querySelector('.topbar');
-        topbar.className.should.match(/hide/);
-        var body = window.document.querySelector('body');
-        body.className.should.match(/no-topbar/);
-    });
+  it('should clean filter', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
 
-    it('should not indent log lines', function () {
-        initApp();
+    const filterInput = window.document.querySelector('#filter');
+    const event = new window.KeyboardEvent('keyup', { keyCode: 27 });
+    filterInput.dispatchEvent(event);
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(3);
+    log.childNodes[0].style.display.should.be.equal('');
+    log.childNodes[1].style.display.should.be.equal('');
+    log.childNodes[2].style.display.should.be.equal('');
+    window.location.href.should.be.equal('http://localhost/');
+  });
 
-        io.emit('options:no-indent');
+  it('should change filter', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
 
-        var log = window.document.querySelector('.log');
-        log.className.should.match(/no-indent/);
-    });
+    const log = window.document.querySelector('.log');
+    const filterInput = window.document.querySelector('#filter');
+    filterInput.value = 'other';
+    const event = new window.KeyboardEvent('keyup', { keyCode: 13 });
+    filterInput.dispatchEvent(event);
+    log.childNodes.length.should.be.equal(3);
+    log.childNodes[0].style.display.should.be.equal('none');
+    log.childNodes[1].style.display.should.be.equal('');
+    log.childNodes[2].style.display.should.be.equal('none');
+    window.location.href.should.containEql('filter=other');
+  });
 
-    function initApp() {
-        window.App.init({
-            socket: io,
-            container: window.document.querySelector('.log'),
-            filterInput: window.document.querySelector('#filter'),
-            topbar: window.document.querySelector('.topbar'),
-            body: window.document.querySelector('body')
-        });
-    }
+  it('should pause', () => {
+    io.emit('line', 'line1');
+    const btn = window.document.querySelector('#pauseBtn');
+    const event = window.document.createEvent('Event');
+    event.initEvent('mouseup', true, true);
+    btn.dispatchEvent(event);
+    io.emit('line', 'line2');
+    io.emit('line', 'line3');
 
-    function clickOnElement(line) {
-        var click = window.document.createEvent('MouseEvents');
-        click.initMouseEvent('click', true, true);
-        line.dispatchEvent(click);
-    }
+    btn.className.should.containEql('play');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(2);
+    log.lastChild.textContent.should.be.equal('==> SKIPPED: 2 <==');
+  });
+
+  it('should play', () => {
+    const btn = window.document.querySelector('#pauseBtn');
+    const event = window.document.createEvent('Event');
+    event.initEvent('mouseup', true, true);
+    btn.dispatchEvent(event);
+    io.emit('line', 'line1');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(1);
+    log.lastChild.textContent.should.be.equal('==> SKIPPED: 1 <==');
+    btn.className.should.containEql('play');
+    btn.dispatchEvent(event);
+    io.emit('line', 'line2');
+
+    btn.className.should.not.containEql('play');
+    log.childNodes.length.should.be.equal(2);
+    log.lastChild.textContent.should.be.equal('line2');
+  });
 });

test/connect_builder.js

@@ -1,108 +1,123 @@
 'use strict';
 
-require('should');
-var connectBuilder = require('../lib/connect_builder');
-var request = require('supertest');
+const request = require('supertest');
+const path = require('path');
+const connectBuilder = require('../lib/connect_builder');
 
-describe('connectBuilder', function () {
-    it('should build connect app', function () {
-        connectBuilder().build().should.have.property('use');
-        connectBuilder().build().should.have.property('listen');
+describe('connectBuilder', () => {
+  it('should build connect app', () => {
+    connectBuilder('/').build().should.have.property('use');
+    connectBuilder().build().should.have.property('listen');
+  });
+
+  it('should build app requiring authorized user', (done) => {
+    const app = connectBuilder('/').authorize('user', 'pass').build();
+
+    request(app)
+      .get('/')
+      .expect('www-authenticate', 'Basic realm="Authorization Required"')
+      .expect(401, done);
+  });
+
+  it('should build app allowing user to login', (done) => {
+    const app = connectBuilder('/').authorize('user', 'pass').build();
+    app.use((req, res) => {
+      res.end('secret!');
     });
 
-    it('should build app requiring authorized user', function (done) {
-        var app = connectBuilder().authorize('user', 'pass').build();
+    request(app)
+      .get('/')
+      .set('Authorization', 'Basic dXNlcjpwYXNz')
+      .expect(200, 'secret!', done);
+  });
 
-        request(app)
-            .get('/')
-            .expect('www-authenticate', 'Basic realm="Authorization Required"')
-            .expect(401, done);
+  it('should build app that setup session', (done) => {
+    const app = connectBuilder('/').session('secret').build();
+    app.use((req, res) => {
+      res.end();
     });
 
-    it('should build app allowing user to login', function (done) {
-        var app = connectBuilder().authorize('user', 'pass').build();
-        app.use(function (req, res) {
-            res.end('secret!');
-        });
+    request(app)
+      .get('/')
+      .expect('set-cookie', /^connect.sid/, done);
+  });
 
-        request(app)
-            .get('/')
-            .set('Authorization', 'Basic dXNlcjpwYXNz')
-            .expect(200, 'secret!', done);
-    });
+  it('should build app that serve static files', (done) => {
+    const app = connectBuilder('/')
+      .static(path.join(__dirname, 'fixtures'))
+      .build();
 
-    it('should build app that setup session', function (done)  {
-        var app = connectBuilder().session('secret', 'sessionkey').build();
-        app.use(function (req, res) {
-            res.end();
-        });
+    request(app).get('/foo.txt').expect('bar', done);
+  });
 
-        request(app)
-            .get('/')
-            .expect('set-cookie', /^sessionkey/, done);
-    });
+  it('should build app that serve index file', (done) => {
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, 'fixtures/index'), '/testfile')
+      .build();
 
-    it('should build app that serve static files', function (done) {
-        var app = connectBuilder().static(__dirname + '/fixtures').build();
+    request(app).get('/').expect(200).expect('Content-Type', 'text/html', done);
+  });
 
-        request(app)
-            .get('/foo')
-            .expect('bar', done);
-    });
+  it('should build app that serve index file on specified path', (done) => {
+    const app = connectBuilder('/test')
+      .index(path.join(__dirname, 'fixtures/index'), '/testfile')
+      .build();
 
+    request(app)
+      .get('/test')
+      .expect(200)
+      .expect('Content-Type', 'text/html', done);
+  });
 
-    it('should build app that serve index file', function (done) {
-        var app = connectBuilder().index(__dirname + '/fixtures/index', '/testfile').build();
+  it('should build app that replace index title', (done) => {
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, 'fixtures/index_with_title'), '/testfile')
+      .build();
 
-        request(app)
-            .get('/')
-            .expect(200)
-            .expect('Content-Type', 'text/html', done);
-    });
+    request(app).get('/').expect('<head><title>/testfile</title></head>', done);
+  });
 
-    it('should build app that replace index title', function (done) {
-        var app = connectBuilder()
-            .index(__dirname + '/fixtures/index_with_title', '/testfile')
-            .build();
+  it('should build app that sets socket.io namespace based on files', (done) => {
+    const app = connectBuilder('/')
+      .index(
+        path.join(__dirname, 'fixtures/index_with_ns'),
+        '/testfile',
+        'ns',
+        'dark'
+      )
+      .build();
 
-        request(app)
-            .get('/')
-            .expect('<head><title>/testfile</title></head>', done);
-    });
+    request(app).get('/').expect('ns', done);
+  });
 
-    it('builds app that sets socket.io namespace based on files', function (done) {
-        var app = connectBuilder()
-            .index(__dirname + '/fixtures/index_with_ns', '/testfile', 'ns', 'dark')
-            .build();
+  it('should build app that sets theme', (done) => {
+    const app = connectBuilder('/')
+      .index(
+        path.join(__dirname, '/fixtures/index_with_theme'),
+        '/testfile',
+        'ns',
+        'dark'
+      )
+      .build();
 
-        request(app)
-            .get('/')
-            .expect('ns', done);
-    });
+    request(app)
+      .get('/')
+      .expect(
+        '<head><title>/testfile</title><link href="dark.css" rel="stylesheet" type="text/css"/></head>',
+        done
+      );
+  });
 
-    it('should build app that sets theme', function (done) {
-        var app = connectBuilder()
-            .index(__dirname + '/fixtures/index_with_theme', '/testfile', 'ns', 'dark')
-            .build();
+  it('should build app that sets default theme', (done) => {
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, '/fixtures/index_with_theme'), '/testfile')
+      .build();
 
-        request(app)
-            .get('/')
-            .expect(
-                '<head><title>/testfile</title><link href="dark.css" rel="stylesheet" type="text/css"/></head>',
-                done
-            );
-    });
-
-    it('should build app that sets default theme', function (done) {
-        var app = connectBuilder()
-            .index(__dirname + '/fixtures/index_with_theme', '/testfile')
-            .build();
-
-        request(app)
-            .get('/')
-            .expect(
-                '<head><title>/testfile</title><link href="default.css" rel="stylesheet" type="text/css"/></head>',
-                done
-            );
-    });
+    request(app)
+      .get('/')
+      .expect(
+        '<head><title>/testfile</title><link href="default.css" rel="stylesheet" type="text/css"/></head>',
+        done
+      );
+  });
 });

test/daemonize.js

@@ -0,0 +1,267 @@
+'use strict';
+
+const daemon = require('daemon-fix41');
+const sinon = require('sinon');
+const fs = require('fs');
+const optionsParser = require('../lib/options_parser');
+const daemonize = require('../lib/daemonize');
+
+describe('daemonize', () => {
+  beforeEach(() => {
+    sinon.stub(daemon, 'daemon');
+    daemon.daemon.returns({
+      pid: 1000,
+    });
+    sinon.stub(fs, 'writeFileSync');
+    sinon.stub(fs, 'openSync');
+  });
+
+  afterEach(() => {
+    daemon.daemon.restore();
+    fs.writeFileSync.restore();
+    fs.openSync.restore();
+  });
+
+  describe('should daemon', () => {
+    it('current script', () => {
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[0].should.match('script');
+    });
+
+    it('with hostname', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-h', '127.0.0.1']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-h', '127.0.0.1']);
+    });
+
+    it('with port', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-p', '80']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-p', 80]);
+    });
+
+    it('with lines number', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-n', '1']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-n', 1]);
+    });
+
+    it('with lines stored in browser', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-l', '1']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-l', 1]);
+    });
+
+    it('with theme', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-t', 'dark']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-t', 'dark']);
+    });
+
+    it('with authorization', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+
+      daemonize('script', optionsParser, {
+        doAuthorization: true,
+      });
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+    });
+
+    it('without authorization if option doAuthorization not passed', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.not.containDeep([
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+    });
+
+    it('with secure connection', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+
+      daemonize('script', optionsParser, {
+        doSecure: true,
+      });
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+    });
+
+    it('without secure connection if option doSecure not passed', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+
+      daemonize('script', optionsParser, {
+        doSecure: true,
+      });
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+    });
+
+    it('with url-path option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--url-path', '/test']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '--url-path',
+        '/test',
+      ]);
+    });
+
+    it('with hide-topbar option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--ui-hide-topbar']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-hide-topbar']);
+    });
+
+    it('with no-indent option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--ui-no-indent']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-no-indent']);
+    });
+
+    it('with highlight option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--ui-highlight']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-highlight']);
+    });
+
+    it('with highlight preset option', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '--ui-highlight',
+        '--ui-highlight-preset',
+        'test.json',
+      ]);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '--ui-highlight-preset',
+        'test.json',
+      ]);
+    });
+
+    it('with disable usage stats', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '--disable-usage-stats',
+        'test.json',
+      ]);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '--disable-usage-stats',
+        'test.json',
+      ]);
+    });
+
+    it('with file to tail', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '/path/to/file']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['/path/to/file']);
+    });
+  });
+
+  it('should write pid to pidfile', () => {
+    optionsParser.parse([
+      'node',
+      '/path/to/frontail',
+      '--pid-path',
+      '/path/to/pid',
+    ]);
+
+    daemonize('script', optionsParser);
+
+    fs.writeFileSync.lastCall.args[0].should.be.equal('/path/to/pid');
+    fs.writeFileSync.lastCall.args[1].should.be.equal(1000);
+  });
+
+  it('should log to file', () => {
+    optionsParser.parse([
+      'node',
+      '/path/to/frontail',
+      '--log-path',
+      '/path/to/log',
+    ]);
+    fs.openSync.returns('file');
+
+    daemonize('script', optionsParser);
+
+    fs.openSync.lastCall.args[0].should.equal('/path/to/log');
+    fs.openSync.lastCall.args[1].should.equal('a');
+    daemon.daemon.lastCall.args[2].should.eql({
+      stdout: 'file',
+      stderr: 'file',
+    });
+  });
+});

test/server_builder.js

@@ -1,114 +1,127 @@
 'use strict';
 
-require('should');
-var fs = require('fs');
-var http = require('http');
-var https = require('https');
-var serverBuilder = require('../lib/server_builder');
-var sinon = require('sinon');
+const fs = require('fs');
+const http = require('http');
+const https = require('https');
+const sinon = require('sinon');
+const serverBuilder = require('../lib/server_builder');
 
-describe('serverBuilder', function () {
+describe('serverBuilder', () => {
+  describe('http server', () => {
+    let httpServer;
+    let createServer;
 
-    describe('http server', function () {
-        var httpServer;
-        var createServer;
-
-        beforeEach(function () {
-            httpServer = sinon.createStubInstance(http.Server);
-            httpServer.listen.returns(httpServer);
-            createServer = sinon.stub(http, 'createServer').returns(httpServer);
-        });
-
-        afterEach(function () {
-            createServer.restore();
-        });
-
-        it('should build server', function () {
-            var server = serverBuilder().build();
-
-            createServer.calledOnce.should.equal(true);
-            server.should.be.an.instanceof(http.Server);
-        });
-
-        it('should build server accepting requests', function () {
-            var callback = function () {};
-
-            serverBuilder().use(callback).build();
-
-            createServer.calledWith(callback).should.equal(true);
-        });
-
-        it('should build listening server', function () {
-            serverBuilder().build();
-
-            httpServer.listen.calledOnce.should.equal(true);
-        });
-
-        it('should build server listening on specified port', function () {
-            serverBuilder().port(6666).build();
-
-            httpServer.listen.calledWith(6666).should.equal(true);
-        });
-
-        it('should build server listening on default port', function () {
-            serverBuilder().build();
-
-            httpServer.listen.calledWith(9001).should.equal(true);
-        });
-
-        it('should build server listening on specified host', function () {
-            serverBuilder().host('127.0.0.1').build();
-
-            httpServer.listen.calledWith(9001, '127.0.0.1').should.equal(true);
-        });
-
-        it('should build server listening on default host', function () {
-            serverBuilder().build();
-
-            httpServer.listen.calledWith(9001, null).should.equal(true);
-        });
+    beforeEach(() => {
+      httpServer = sinon.createStubInstance(http.Server);
+      httpServer.listen.returns(httpServer);
+      createServer = sinon.stub(http, 'createServer').returns(httpServer);
     });
 
-    describe('https server', function () {
-        var httpsServer;
-        var createHttpsServer;
-        var readFileSyncStub;
-
-        beforeEach(function () {
-            httpsServer = sinon.createStubInstance(https.Server);
-            httpsServer.listen.returns(httpsServer);
-            createHttpsServer = sinon.stub(https, 'createServer').returns(httpsServer);
-            readFileSyncStub = sinon.stub(fs, 'readFileSync');
-            readFileSyncStub.withArgs('key.pem').returns('testkey');
-            readFileSyncStub.withArgs('cert.pem').returns('testcert');
-        });
-
-        afterEach(function () {
-            createHttpsServer.restore();
-            readFileSyncStub.restore();
-        });
-
-        it('should build server', function () {
-            var server = serverBuilder().secure('key.pem', 'cert.pem').build();
-
-            server.should.be.an.instanceof(https.Server);
-            createHttpsServer.calledWith({key: 'testkey', cert: 'testcert'}).should.equal(true);
-        });
-
-        it('should build server accepting requests', function () {
-            var callback = function () {};
-
-            serverBuilder().use(callback).secure('key.pem', 'cert.pem').build();
-
-            createHttpsServer.calledWith({key: 'testkey', cert: 'testcert'}, callback).should.equal(true);
-        });
-
-        it('should throw error if key or cert not provided', function () {
-            readFileSyncStub.restore();
-
-            (function () {
-                serverBuilder().secure('nofile', 'nofile');
-            }).should.throw('No key or certificate file found');
-        });
+    afterEach(() => {
+      createServer.restore();
     });
+
+    it('should build server', () => {
+      const server = serverBuilder().build();
+
+      createServer.calledOnce.should.equal(true);
+      server.should.be.an.instanceof(http.Server);
+    });
+
+    it('should build server accepting requests', () => {
+      const callback = () => {};
+
+      serverBuilder().use(callback).build();
+
+      createServer.calledWith(callback).should.equal(true);
+    });
+
+    it('should build listening server', () => {
+      serverBuilder().build();
+
+      httpServer.listen.calledOnce.should.equal(true);
+    });
+
+    it('should build server listening on specified port', () => {
+      serverBuilder().port(6666).build();
+
+      httpServer.listen.calledWith(6666).should.equal(true);
+    });
+
+    it('should build server listening on default port', () => {
+      serverBuilder().build();
+
+      httpServer.listen.calledWith(9001).should.equal(true);
+    });
+
+    it('should build server listening on specified host', () => {
+      serverBuilder().host('127.0.0.1').build();
+
+      httpServer.listen.calledWith(9001, '127.0.0.1').should.equal(true);
+    });
+
+    it('should build server listening on default host', () => {
+      serverBuilder().build();
+
+      httpServer.listen.calledWith(9001, null).should.equal(true);
+    });
+  });
+
+  describe('https server', () => {
+    let httpsServer;
+    let createHttpsServer;
+    let readFileSyncStub;
+
+    beforeEach(() => {
+      httpsServer = sinon.createStubInstance(https.Server);
+      httpsServer.listen.returns(httpsServer);
+      createHttpsServer = sinon
+        .stub(https, 'createServer')
+        .returns(httpsServer);
+      readFileSyncStub = sinon.stub(fs, 'readFileSync');
+      readFileSyncStub.withArgs('key.pem').returns('testkey');
+      readFileSyncStub.withArgs('cert.pem').returns('testcert');
+    });
+
+    afterEach(() => {
+      createHttpsServer.restore();
+      readFileSyncStub.restore();
+    });
+
+    it('should build server', () => {
+      const server = serverBuilder().secure('key.pem', 'cert.pem').build();
+
+      server.should.be.an.instanceof(https.Server);
+      createHttpsServer
+        .calledWith({
+          key: 'testkey',
+          cert: 'testcert',
+        })
+        .should.equal(true);
+    });
+
+    it('should build server accepting requests', () => {
+      const callback = () => {};
+
+      serverBuilder().use(callback).secure('key.pem', 'cert.pem').build();
+
+      createHttpsServer
+        .calledWith(
+          {
+            key: 'testkey',
+            cert: 'testcert',
+          },
+          callback
+        )
+        .should.equal(true);
+    });
+
+    it('should throw error if key or cert not provided', () => {
+      readFileSyncStub.restore();
+
+      (() => {
+        serverBuilder().secure('nofile', 'nofile');
+      }).should.throw('No key or certificate file found');
+    });
+  });
 });

test/tail.js

@@ -1,41 +1,60 @@
 'use strict';
 
-require('should');
-var fs = require('fs');
-var tail = require('../lib/tail');
-var temp = require('temp');
+const fs = require('fs');
+const temp = require('temp');
+const tail = require('../lib/tail');
 
-describe('tail', function () {
-    temp.track();
+const TEMP_FILE_PROFIX = '';
+const SPAWN_DELAY = 10;
 
-    it('calls event line if new line appear in file', function (done) {
-        temp.open('', function (err, info) {
-            tail(info.path).on('line', function (line) {
-                line.should.equal('testline');
-                done();
-            });
+function writeLines(fd, count) {
+  for (let i = 0; i < count; i += 1) {
+    fs.writeSync(
+      fd,
+      `line${i}
+`
+    );
+  }
+  fs.closeSync(fd);
+}
 
-            fs.writeSync(info.fd, 'testline\n');
-            fs.closeSync(info.fd);
-        });
+describe('tail', () => {
+  temp.track();
+
+  it('calls event line if new line appear in file', (done) => {
+    temp.open(TEMP_FILE_PROFIX, (err, info) => {
+      tail(info.path).on('line', (line) => {
+        line.should.equal('line0');
+        done();
+      });
+
+      setTimeout(writeLines, SPAWN_DELAY, info.fd, 1);
     });
+  });
 
-    it('buffers lines on start', function (done) {
-        temp.open('', function (err, info) {
-            fs.writeSync(info.fd, 'testline1\n');
-            fs.writeSync(info.fd, 'testline2\n');
-            fs.writeSync(info.fd, 'testline3\n');
-            fs.closeSync(info.fd);
+  it('buffers lines on start', (done) => {
+    temp.open(TEMP_FILE_PROFIX, (err, info) => {
+      writeLines(info.fd, 20);
 
-            var calls = 0;
-            var tailer = tail(info.path, {buffer: 2}).on('line', function () {
-                calls += 1;
-
-                if (calls === 3) {
-                    tailer.getBuffer().should.eql(['testline2', 'testline3']);
-                    done();
-                }
-            });
-        });
+      const tailer = tail(info.path, {
+        buffer: 2,
+      });
+      setTimeout(() => {
+        tailer.getBuffer().should.be.eql(['line18', 'line19']);
+        done();
+      }, SPAWN_DELAY);
     });
+  });
+
+  it('buffers no lines on start by default', (done) => {
+    temp.open(TEMP_FILE_PROFIX, (err, info) => {
+      writeLines(info.fd, 3);
+
+      const tailer = tail(info.path);
+      setTimeout(() => {
+        tailer.getBuffer().should.be.empty;
+        done();
+      }, SPAWN_DELAY);
+    });
+  });
 });

web/assets/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "rules": {
+    "no-var": "off",
+    "no-underscore-dangle": "off",
+    "prefer-arrow-callback": "off",
+    "func-names": "off",
+    "space-before-function-paren": "off",
+    "prefer-template": "off"
+  },
+  "env": {
+    "browser": true
+  }
+}

web/assets/ansi_up.js

@@ -0,0 +1,327 @@
+// ansi_up.js
+// version : 1.3.0
+// author : Dru Nelson
+// license : MIT
+// http://github.com/drudru/ansi_up
+
+(function (Date, undefined) {
+
+    var ansi_up,
+        VERSION = "1.3.0",
+
+        // check for nodeJS
+        hasModule = (typeof module !== 'undefined'),
+
+        // Normal and then Bright
+        ANSI_COLORS = [
+          [
+            { color: "0, 0, 0",        'class': "ansi-black"   },
+            { color: "187, 0, 0",      'class': "ansi-red"     },
+            { color: "0, 187, 0",      'class': "ansi-green"   },
+            { color: "187, 187, 0",    'class': "ansi-yellow"  },
+            { color: "0, 0, 187",      'class': "ansi-blue"    },
+            { color: "187, 0, 187",    'class': "ansi-magenta" },
+            { color: "0, 187, 187",    'class': "ansi-cyan"    },
+            { color: "255,255,255",    'class': "ansi-white"   }
+          ],
+          [
+            { color: "85, 85, 85",     'class': "ansi-bright-black"   },
+            { color: "255, 85, 85",    'class': "ansi-bright-red"     },
+            { color: "0, 255, 0",      'class': "ansi-bright-green"   },
+            { color: "255, 255, 85",   'class': "ansi-bright-yellow"  },
+            { color: "85, 85, 255",    'class': "ansi-bright-blue"    },
+            { color: "255, 85, 255",   'class': "ansi-bright-magenta" },
+            { color: "85, 255, 255",   'class': "ansi-bright-cyan"    },
+            { color: "255, 255, 255",  'class': "ansi-bright-white"   }
+          ]
+        ],
+
+        // 256 Colors Palette
+        PALETTE_COLORS;
+
+    function Ansi_Up() {
+      this.fg = this.bg = this.fg_truecolor = this.bg_truecolor = null;
+      this.bright = 0;
+    }
+
+    Ansi_Up.prototype.setup_palette = function() {
+      PALETTE_COLORS = [];
+      // Index 0..15 : System color
+      (function() {
+        var i, j;
+        for (i = 0; i < 2; ++i) {
+          for (j = 0; j < 8; ++j) {
+            PALETTE_COLORS.push(ANSI_COLORS[i][j]['color']);
+          }
+        }
+      })();
+
+      // Index 16..231 : RGB 6x6x6
+      // https://gist.github.com/jasonm23/2868981#file-xterm-256color-yaml
+      (function() {
+        var levels = [0, 95, 135, 175, 215, 255];
+        var format = function (r, g, b) { return levels[r] + ', ' + levels[g] + ', ' + levels[b] };
+        var r, g, b;
+        for (r = 0; r < 6; ++r) {
+          for (g = 0; g < 6; ++g) {
+            for (b = 0; b < 6; ++b) {
+              PALETTE_COLORS.push(format.call(this, r, g, b));
+            }
+          }
+        }
+      })();
+
+      // Index 232..255 : Grayscale
+      (function() {
+        var level = 8;
+        var format = function(level) { return level + ', ' + level + ', ' + level };
+        var i;
+        for (i = 0; i < 24; ++i, level += 10) {
+          PALETTE_COLORS.push(format.call(this, level));
+        }
+      })();
+    };
+
+    Ansi_Up.prototype.escape_for_html = function (txt) {
+      return txt.replace(/[&<>]/gm, function(str) {
+        if (str == "&") return "&amp;";
+        if (str == "<") return "&lt;";
+        if (str == ">") return "&gt;";
+      });
+    };
+
+    Ansi_Up.prototype.linkify = function (txt) {
+      return txt.replace(/(https?:\/\/[^\s]+)/gm, function(str) {
+        return "<a href=\"" + str + "\">" + str + "</a>";
+      });
+    };
+
+    Ansi_Up.prototype.ansi_to_html = function (txt, options) {
+      return this.process(txt, options, true);
+    };
+
+    Ansi_Up.prototype.ansi_to_text = function (txt) {
+      var options = {};
+      return this.process(txt, options, false);
+    };
+
+    Ansi_Up.prototype.process = function (txt, options, markup) {
+      var self = this;
+      var raw_text_chunks = txt.split(/\033\[/);
+      var first_chunk = raw_text_chunks.shift(); // the first chunk is not the result of the split
+
+      var color_chunks = raw_text_chunks.map(function (chunk) {
+        return self.process_chunk(chunk, options, markup);
+      });
+
+      color_chunks.unshift(first_chunk);
+
+      return color_chunks.join('');
+    };
+
+    Ansi_Up.prototype.process_chunk = function (text, options, markup) {
+
+      // Are we using classes or styles?
+      options = typeof options == 'undefined' ? {} : options;
+      var use_classes = typeof options.use_classes != 'undefined' && options.use_classes;
+      var key = use_classes ? 'class' : 'color';
+
+      // Each 'chunk' is the text after the CSI (ESC + '[') and before the next CSI/EOF.
+      //
+      // This regex matches four groups within a chunk.
+      //
+      // The first and third groups match code type.
+      // We supported only SGR command. It has empty first group and 'm' in third.
+      //
+      // The second group matches all of the number+semicolon command sequences
+      // before the 'm' (or other trailing) character.
+      // These are the graphics or SGR commands.
+      //
+      // The last group is the text (including newlines) that is colored by
+      // the other group's commands.
+      var matches = text.match(/^([!\x3c-\x3f]*)([\d;]*)([\x20-\x2c]*[\x40-\x7e])([\s\S]*)/m);
+
+      if (!matches) return text;
+
+      var orig_txt = matches[4];
+      var nums = matches[2].split(';');
+
+      // We currently support only "SGR" (Select Graphic Rendition)
+      // Simply ignore if not a SGR command.
+      if (matches[1] !== '' || matches[3] !== 'm') {
+        return orig_txt;
+      }
+
+      if (!markup) {
+        return orig_txt;
+      }
+
+      var self = this;
+
+      while (nums.length > 0) {
+        var num_str = nums.shift();
+        var num = parseInt(num_str);
+
+        if (isNaN(num) || num === 0) {
+          self.fg = self.bg = null;
+          self.bright = 0;
+        } else if (num === 1) {
+          self.bright = 1;
+        } else if (num == 39) {
+          self.fg = null;
+        } else if (num == 49) {
+          self.bg = null;
+        } else if ((num >= 30) && (num < 38)) {
+          self.fg = ANSI_COLORS[self.bright][(num % 10)][key];
+        } else if ((num >= 90) && (num < 98)) {
+          self.fg = ANSI_COLORS[1][(num % 10)][key];
+        } else if ((num >= 40) && (num < 48)) {
+          self.bg = ANSI_COLORS[0][(num % 10)][key];
+        } else if ((num >= 100) && (num < 108)) {
+          self.bg = ANSI_COLORS[1][(num % 10)][key];
+        } else if (num === 38 || num === 48) { // extend color (38=fg, 48=bg)
+          (function() {
+            var is_foreground = (num === 38);
+            if (nums.length >= 1) {
+              var mode = nums.shift();
+              if (mode === '5' && nums.length >= 1) { // palette color
+                var palette_index = parseInt(nums.shift());
+                if (palette_index >= 0 && palette_index <= 255) {
+                  if (!use_classes) {
+                    if (!PALETTE_COLORS) {
+                      self.setup_palette.call(self);
+                    }
+                    if (is_foreground) {
+                      self.fg = PALETTE_COLORS[palette_index];
+                    } else {
+                      self.bg = PALETTE_COLORS[palette_index];
+                    }
+                  } else {
+                    var klass = (palette_index >= 16)
+                          ? ('ansi-palette-' + palette_index)
+                          : ANSI_COLORS[palette_index > 7 ? 1 : 0][palette_index % 8]['class'];
+                    if (is_foreground) {
+                      self.fg = klass;
+                    } else {
+                      self.bg = klass;
+                    }
+                  }
+                }
+              } else if(mode === '2' && nums.length >= 3) { // true color
+                var r = parseInt(nums.shift());
+                var g = parseInt(nums.shift());
+                var b = parseInt(nums.shift());
+                if ((r >= 0 && r <= 255) && (g >= 0 && g <= 255) && (b >= 0 && b <= 255)) {
+                  var color = r + ', ' + g + ', ' + b;
+                  if (!use_classes) {
+                    if (is_foreground) {
+                      self.fg = color;
+                    } else {
+                      self.bg = color;
+                    }
+                  } else {
+                    if (is_foreground) {
+                      self.fg = 'ansi-truecolor';
+                      self.fg_truecolor = color;
+                    } else {
+                      self.bg = 'ansi-truecolor';
+                      self.bg_truecolor = color;
+                    }
+                  }
+                }
+              }
+            }
+          })();
+        }
+      }
+
+      if ((self.fg === null) && (self.bg === null)) {
+        return orig_txt;
+      } else {
+        var styles = [];
+        var classes = [];
+        var data = {};
+        var render_data = function (data) {
+          var fragments = [];
+          var key;
+          for (key in data) {
+            if (data.hasOwnProperty(key)) {
+              fragments.push('data-' + key + '="' + this.escape_for_html(data[key]) + '"');
+            }
+          }
+          return fragments.length > 0 ? ' ' + fragments.join(' ') : '';
+        };
+
+        if (self.fg) {
+          if (use_classes) {
+            classes.push(self.fg + "-fg");
+            if (self.fg_truecolor !== null) {
+              data['ansi-truecolor-fg'] = self.fg_truecolor;
+              self.fg_truecolor = null;
+            }
+          } else {
+            styles.push("color:rgb(" + self.fg + ")");
+          }
+        }
+        if (self.bg) {
+          if (use_classes) {
+            classes.push(self.bg + "-bg");
+            if (self.bg_truecolor !== null) {
+              data['ansi-truecolor-bg'] = self.bg_truecolor;
+              self.bg_truecolor = null;
+            }
+          } else {
+            styles.push("background-color:rgb(" + self.bg + ")");
+          }
+        }
+        if (use_classes) {
+          return '<span class="' + classes.join(' ') + '"' + render_data.call(self, data) + '>' + orig_txt + '</span>';
+        } else {
+          return '<span style="' + styles.join(';') + '"' + render_data.call(self, data) + '>' + orig_txt + '</span>';
+        }
+      }
+    };
+
+    // Module exports
+    ansi_up = {
+
+      escape_for_html: function (txt) {
+        var a2h = new Ansi_Up();
+        return a2h.escape_for_html(txt);
+      },
+
+      linkify: function (txt) {
+        var a2h = new Ansi_Up();
+        return a2h.linkify(txt);
+      },
+
+      ansi_to_html: function (txt, options) {
+        var a2h = new Ansi_Up();
+        return a2h.ansi_to_html(txt, options);
+      },
+
+      ansi_to_text: function (txt) {
+        var a2h = new Ansi_Up();
+        return a2h.ansi_to_text(txt);
+      },
+
+      ansi_to_html_obj: function () {
+        return new Ansi_Up();
+      }
+    };
+
+    // CommonJS module is defined
+    if (hasModule) {
+        module.exports = ansi_up;
+    }
+    /*global ender:false */
+    if (typeof window !== 'undefined' && typeof ender === 'undefined') {
+        window.ansi_up = ansi_up;
+    }
+    /*global define:false */
+    if (typeof define === "function" && define.amd) {
+        define("ansi_up", [], function () {
+            return ansi_up;
+        });
+    }
+})(Date);

web/assets/app.js

@@ -0,0 +1,345 @@
+/* global Tinycon:false, ansi_up:false */
+
+window.App = (function app(window, document) {
+  'use strict';
+
+  /**
+   * @type {Object}
+   * @private
+   */
+  var _socket;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _logContainer;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _filterInput;
+
+  /**
+   * @type {String}
+   * @private
+   */
+  var _filterValue = '';
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _pauseBtn;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  var _isPaused = false;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _skipCounter = 0;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _topbar;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _body;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _linesLimit = Math.Infinity;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _newLinesCount = 0;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  var _isWindowFocused = true;
+
+  /**
+   * @type {object}
+   * @private
+   */
+  var _highlightConfig;
+
+  /**
+   * Hide element if doesn't contain filter value
+   *
+   * @param {Object} element
+   * @private
+   */
+  var _filterElement = function(elem) {
+    var pattern = new RegExp(_filterValue, 'i');
+    var element = elem;
+    if (pattern.test(element.textContent)) {
+      element.style.display = '';
+    } else {
+      element.style.display = 'none';
+    }
+  };
+
+  /**
+   * Filter logs based on _filterValue
+   *
+   * @function
+   * @private
+   */
+  var _filterLogs = function() {
+    var collection = _logContainer.childNodes;
+    var i = collection.length;
+
+    if (i === 0) {
+      return;
+    }
+
+    while (i) {
+      _filterElement(collection[i - 1]);
+      i -= 1;
+    }
+    window.scrollTo(0, document.body.scrollHeight);
+  };
+
+  /**
+   * Set _filterValue from URL parameter `filter`
+   *
+   * @function
+   * @private
+   */
+  var _setFilterValueFromURL = function(filterInput, uri) {
+    var _url = new URL(uri);
+    var _filterValueFromURL = _url.searchParams.get('filter');
+    if (typeof _filterValueFromURL !== 'undefined' && _filterValueFromURL !== null) {
+      _filterValue = _filterValueFromURL;
+      filterInput.value = _filterValue; // eslint-disable-line
+    }
+  };
+
+  /**
+   * Set parameter `filter` in URL
+   *
+   * @function
+   * @private
+   */
+  var _setFilterParam = function(value, uri) {
+    var _url = new URL(uri);
+    var _params = new URLSearchParams(_url.search.slice(1));
+    if (value === '') {
+      _params.delete('filter');
+    } else {
+      _params.set('filter', value);
+    }
+    _url.search = _params.toString();
+    window.history.replaceState(null, document.title, _url.toString());
+  };
+
+  /**
+   * @return void
+   * @private
+   */
+  var _faviconReset = function() {
+    _newLinesCount = 0;
+    Tinycon.setBubble(0);
+  };
+
+  /**
+   * @return void
+   * @private
+   */
+  var _updateFaviconCounter = function() {
+    if (_isWindowFocused || _isPaused) {
+      return;
+    }
+
+    if (_newLinesCount < 99) {
+      _newLinesCount += 1;
+      Tinycon.setBubble(_newLinesCount);
+    }
+  };
+
+  /**
+   * @return String
+   * @private
+   */
+  var _highlightWord = function(line) {
+    var output = line;
+
+    if (_highlightConfig && _highlightConfig.words) {
+      Object.keys(_highlightConfig.words).forEach((wordCheck) => {
+        output = output.replace(
+          wordCheck,
+          '<span style="' + _highlightConfig.words[wordCheck] + '">' + wordCheck + '</span>',
+        );
+      });
+    }
+
+    return output;
+  };
+
+  /**
+   * @return HTMLElement
+   * @private
+   */
+  var _highlightLine = function(line, container) {
+    if (_highlightConfig && _highlightConfig.lines) {
+      Object.keys(_highlightConfig.lines).forEach((lineCheck) => {
+        if (line.indexOf(lineCheck) !== -1) {
+          container.setAttribute('style', _highlightConfig.lines[lineCheck]);
+        }
+      });
+    }
+
+    return container;
+  };
+
+  return {
+    /**
+     * Init socket.io communication and log container
+     *
+     * @param {Object} opts options
+     */
+    init: function init(opts) {
+      var self = this;
+
+      // Elements
+      _logContainer = opts.container;
+      _filterInput = opts.filterInput;
+      _filterInput.focus();
+      _pauseBtn = opts.pauseBtn;
+      _topbar = opts.topbar;
+      _body = opts.body;
+
+      _setFilterValueFromURL(_filterInput, window.location.toString());
+
+      // Filter input bind
+      _filterInput.addEventListener('keyup', function(e) {
+        // ESC
+        if (e.keyCode === 27) {
+          this.value = '';
+          _filterValue = '';
+        } else {
+          _filterValue = this.value;
+        }
+        _setFilterParam(_filterValue, window.location.toString());
+        _filterLogs();
+      });
+
+      // Pause button bind
+      _pauseBtn.addEventListener('mouseup', function() {
+        _isPaused = !_isPaused;
+        if (_isPaused) {
+          this.className += ' play';
+        } else {
+          _skipCounter = 0;
+          this.classList.remove('play');
+        }
+      });
+
+      // Favicon counter bind
+      window.addEventListener(
+        'blur',
+        function() {
+          _isWindowFocused = false;
+        },
+        true,
+      );
+      window.addEventListener(
+        'focus',
+        function() {
+          _isWindowFocused = true;
+          _faviconReset();
+        },
+        true,
+      );
+
+      // socket.io init
+      _socket = opts.socket;
+      _socket
+        .on('options:lines', function(limit) {
+          _linesLimit = limit;
+        })
+        .on('options:hide-topbar', function() {
+          _topbar.className += ' hide';
+          _body.className = 'no-topbar';
+        })
+        .on('options:no-indent', function() {
+          _logContainer.className += ' no-indent';
+        })
+        .on('options:highlightConfig', function(highlightConfig) {
+          _highlightConfig = highlightConfig;
+        })
+        .on('line', function(line) {
+          if (_isPaused) {
+            _skipCounter += 1;
+            self.log('==> SKIPPED: ' + _skipCounter + ' <==', (_skipCounter > 1));
+          } else {
+            self.log(line);
+          }
+        });
+    },
+
+    /**
+     * Log data
+     *
+     * @param {string} data data to log
+     */
+    log: function log(data, replace = false) {
+      var wasScrolledBottom = window.innerHeight + Math.ceil(window.pageYOffset + 1)
+        >= document.body.offsetHeight;
+      var div = document.createElement('div');
+      var p = document.createElement('p');
+      p.className = 'inner-line';
+
+      // convert ansi color codes to html && escape HTML tags
+      data = ansi_up.escape_for_html(data); // eslint-disable-line
+      data = ansi_up.ansi_to_html(data); // eslint-disable-line
+      p.innerHTML = _highlightWord(data);
+
+      div.className = 'line';
+      div = _highlightLine(data, div);
+      div.addEventListener('click', function click() {
+        if (this.className.indexOf('selected') === -1) {
+          this.className = 'line-selected';
+        } else {
+          this.className = 'line';
+        }
+      });
+
+      div.appendChild(p);
+      _filterElement(div);
+      if (replace) {
+        _logContainer.replaceChild(div, _logContainer.lastChild);
+      } else {
+        _logContainer.appendChild(div);
+      }
+
+      if (_logContainer.children.length > _linesLimit) {
+        _logContainer.removeChild(_logContainer.children[0]);
+      }
+
+      if (wasScrolledBottom) {
+        window.scrollTo(0, document.body.scrollHeight);
+      }
+
+      _updateFaviconCounter();
+    },
+  };
+}(window, document));

web/assets/styles/dark.css

@@ -0,0 +1,67 @@
+@import 'default.css';
+
+body {
+  padding-top: 4em;
+  background-color: #2f3238;
+}
+
+.no-topbar {
+  padding-top: 10px;
+}
+
+.navbar {
+  background-color: #26292e;
+  border: 0;
+}
+
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-brand:hover {
+  color: #999;
+}
+
+.btn-pause {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237f8289' viewBox='0 0 8 8'><path d='M1 1v6h2v-6h-2zm4 0v6h2v-6h-2z'></path></svg>") no-repeat center center;
+    background-color: #2f3238;
+    border: 1px solid transparent;
+}
+
+.btn-pause.play {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237f8289' viewBox='0 0 8 8'><path d='M1 1v6l6-3-6-3z'></path></svg>") no-repeat center center;
+    background-color: #2f3238;
+}
+
+.form-control {
+  border: 0;
+  color: #7f8289;
+  background-color: #2f3238;
+}
+
+.log {
+  white-space: pre-wrap;
+  color: #7f8289;
+  font-size: 0.85em;
+  background: inherit;
+  border: 0;
+  padding: 0;
+}
+
+.log .inner-line {
+  padding: 0 15px;
+  margin-left: 84pt;
+  text-indent: -84pt;
+  margin-bottom: 0;
+}
+
+.log .inner-line:empty::after {
+  content: '.';
+  visibility: hidden;
+}
+
+.log.no-indent .inner-line {
+  margin-left: 0;
+  text-indent: 0;
+}
+
+.log .line-selected {
+  background-color: #302436;
+}

web/assets/styles/default.css

@@ -0,0 +1,84 @@
+@import 'bootstrap.min.css';
+
+body {
+  padding-top: 60px;
+}
+@media screen and (max-width: 768px) {
+  body {
+    padding-top: 120px;
+  }
+}
+
+.navbar-brand {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  width: 100%;
+}
+
+.btn-pause {
+  margin: 8px 0 8px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'><path d='M1 1v6h2v-6h-2zm4 0v6h2v-6h-2z'></path></svg>")
+    no-repeat center center;
+  background-color: #e2e6ea;
+  background-size: contain;
+  cursor: pointer;
+  display: inline-block;
+  height: 34px;
+  width: 34px;
+  border: 1px solid #ccc;
+}
+
+.btn-pause.play {
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'><path d='M1 1v6l6-3-6-3z'></path></svg>")
+    no-repeat center center;
+  background-color: #e2e6ea;
+}
+
+.navbar-form-custom {
+  padding: 8px 0;
+}
+
+.no-horiz-padding {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.no-topbar {
+  padding-top: 10px;
+}
+
+.navbar-inverse .navbar-brand {
+  color: white;
+}
+
+.log {
+  white-space: pre-wrap;
+  color: black;
+  font-size: 0.85em;
+  background: inherit;
+  border: 0;
+  padding: 0;
+}
+
+.log .inner-line {
+  padding: 0 15px;
+  margin-left: 84pt;
+  text-indent: -84pt;
+  margin-bottom: 0;
+}
+
+.log .inner-line:empty::after {
+  content: '.';
+  visibility: hidden;
+}
+
+.log.no-indent .inner-line {
+  margin-left: 0;
+  text-indent: 0;
+}
+
+.log .line-selected {
+  background-color: #ffb2b0;
+}

web/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>tail -f __TITLE__</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="__PATH__/styles/__THEME__.css">
+    <link rel="icon" href="__PATH__/favicon.ico">
+</head>
+
+<body>
+    <nav class="topbar navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-sm-8">
+                    <span class="navbar-brand text-overflow" title="__TITLE__">tail -f __TITLE__</span>
+                </div>
+                <div class="col-sm-1 text-right">
+                    <button type="button" class="btn btn-light btn-pause" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
+                </div>
+                <div class="col-sm-3">
+                    <form class="navbar-form-custom" role="search" onkeypress="return event.keyCode != 13;">
+                        <input type="text" class="form-control query" placeholder="Filter" tabindex="1">
+                    </form>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid no-horiz-padding">
+        <pre class="log"></pre>
+    </div>
+
+
+    <script src="__PATH__/socket.io/socket.io.js"></script>
+    <script src="__PATH__/tinycon.min.js"></script>
+    <script src="__PATH__/ansi_up.js"></script>
+    <script src="__PATH__/app.js"></script>
+    <script type="text/javascript">
+        var socket = new io.connect('/__NAMESPACE__', {
+            path: '__PATH__/socket.io',
+            transports: ['websocket']
+        });
+
+        window.load = App.init({
+            socket: socket,
+            container: document.getElementsByClassName('log')[0],
+            filterInput: document.getElementsByClassName('query')[0],
+            pauseBtn: document.getElementsByClassName('btn-pause')[0],
+            topbar: document.getElementsByClassName('topbar')[0],
+            body: document.getElementsByTagName('body')[0]
+        });
+    </script>
+</body>
+
+</html>