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>

.eslintignore

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

.eslintrc.json

@@ -1,10 +0,0 @@
-{
-  "extends": "airbnb-base",
-  "rules": {
-    "no-console": "off",
-    "strict": "off"
-  },
-  "env": {
-    "node": true
-  }
-}

.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,3 +1,5 @@
 node_modules
 test/fixtures/*.pem
 npm-debug.log
+dist
+.DS_Store

.travis.yml

@@ -1,8 +1,16 @@
 language: node_js
 node_js:
-  - 4
-  - 5
-  - 6
+- 6
+- 8
+- 10
 script:
-  - npm run lint
-  - npm 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"]

README.md

@@ -1,35 +1,36 @@
 # frontail – streaming logs to the browser
 
-```frontail``` is a Node.js application for streaming logs to the browser. It's a `tail -F` with UI.
+`frontail` is a Node.js application for streaming logs to the browser. It's a `tail -F` with UI.
 
-[![Build Status](https://img.shields.io/travis/mthenw/frontail.svg?style=flat)](https://travis-ci.org/mthenw/frontail)
-[![Version](http://img.shields.io/npm/v/frontail.svg?style=flat)](https://www.npmjs.org/package/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`
+- `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
 
-* log rotation
-* auto-scrolling
-* marking logs
-* number of unread logs in favicon
-* themes (default, dark)
-* [highlighting](#highlighting)
-* search (```Tab``` to focus, ```Esc``` to clear)
-* tailing [multiple files](#tailing-multiple-files) and [stdin](#stdin)
-* basic authentication
+- 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 i frontail -g
-
-or use [Docker image](https://registry.hub.docker.com/u/mthenw/frontail/)
-
-    docker run -d -P -v /var/log:/log mthenw/frontail /log/syslog
+- 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
 
@@ -37,7 +38,6 @@ or use [Docker image](https://registry.hub.docker.com/u/mthenw/frontail/)
 
     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
@@ -51,12 +51,16 @@ or use [Docker image](https://registry.hub.docker.com/u/mthenw/frontail/)
       -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
       --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 runs on **http://127.0.0.1:[port]**.
+Web interface runs on **http://[host]:[port]**.
 
 ### Tailing multiple files
 
@@ -70,7 +74,7 @@ Use `-` for streaming stdin:
 
 ### Highlighting
 
-```--ui-highlight``` option turns on highlighting in UI. By default preset from ```./preset/defatult.json``` is used:
+`--ui-highlight` option turns on highlighting in UI. By default preset from `./preset/default.json` is used:
 
 ```
 {
@@ -85,8 +89,44 @@ Use `-` for streaming stdin:
 
 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.*
+_New presets are very welcome. If you don't like default or you would like to share yours, please create PR with json file._
 
-## Screenshot
+Available presets:
 
-![screenshot1](https://cloud.githubusercontent.com/assets/455261/24855370/ba3151bc-1de1-11e7-914d-d438cfdd1e94.png)
+- 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,15 +1,18 @@
 'use strict';
 
-const connect = require('connect');
-const cookieParser = require('cookie');
+const cookie = require('cookie');
+const cookieParser = require('cookie-parser');
 const crypto = require('crypto');
 const path = require('path');
-const socketio = require('socket.io');
+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
@@ -20,15 +23,22 @@ if (program.args.length === 0) {
   process.exit();
 }
 
+/**
+ * Init usage statistics
+ */
+const stats = usageStats(!program.disableUsageStats, program);
+stats.track('runtime', 'init');
+stats.time('runtime', 'runtime');
+
 /**
  * Validate params
  */
 const doAuthorization = !!(program.user && program.password);
 const doSecure = !!(program.key && program.certificate);
 const sessionSecret = String(+new Date()) + Math.random();
-const sessionKey = 'sid';
 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(__filename, program, {
@@ -39,14 +49,19 @@ if (program.daemonize) {
   /**
    * HTTP(s) server setup
    */
-  const appBuilder = connectBuilder();
+  const appBuilder = connectBuilder(urlPath);
   if (doAuthorization) {
-    appBuilder.session(sessionSecret, sessionKey);
+    appBuilder.session(sessionSecret);
     appBuilder.authorize(program.user, program.password);
   }
   appBuilder
-    .static(path.join(__dirname, 'lib/web/assets'))
-    .index(path.join(__dirname, 'lib/web/index.html'), files, filesNamespace, program.theme);
+    .static(path.join(__dirname, 'web', 'assets'))
+    .index(
+      path.join(__dirname, 'web', 'index.html'),
+      files,
+      filesNamespace,
+      program.theme
+    );
 
   const builder = serverBuilder();
   if (doSecure) {
@@ -61,20 +76,22 @@ if (program.daemonize) {
   /**
    * socket.io setup
    */
-  const io = socketio.listen(server, {
-    log: false,
-  });
+  const io = new Server({ path: `${urlPath}/socket.io` });
+  io.attach(server);
 
   if (doAuthorization) {
     io.use((socket, next) => {
       const handshakeData = socket.request;
       if (handshakeData.headers.cookie) {
-        const cookies = cookieParser.parse(handshakeData.headers.cookie);
-        const sessionIdEncoded = cookies[sessionKey];
+        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 = connect.utils.parseSignedCookie(sessionIdEncoded, sessionSecret);
+        const sessionId = cookieParser.signedCookie(
+          sessionIdEncoded,
+          sessionSecret
+        );
         if (sessionId) {
           return next(null);
         }
@@ -90,7 +107,19 @@ if (program.daemonize) {
    */
   let highlightConfig;
   if (program.uiHighlight) {
-    highlightConfig = require(path.resolve(__dirname, program.uiHighlightPreset)); // eslint-disable-line
+    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`);
+    }
   }
 
   /**
@@ -127,11 +156,15 @@ if (program.daemonize) {
     filesSocket.emit('line', line);
   });
 
+  stats.track('runtime', 'started');
+
   /**
    * Handle signals
    */
   const cleanExit = () => {
-    process.exit();
+    stats.timeEnd('runtime', 'runtime', () => {
+      process.exit();
+    });
   };
   process.on('SIGINT', cleanExit);
   process.on('SIGTERM', cleanExit);

lib/connect_builder.js

@@ -2,15 +2,23 @@
 
 const connect = require('connect');
 const fs = require('fs');
+const serveStatic = require('serve-static');
+const expressSession = require('express-session');
+const basicAuth = require('basic-auth-connect');
 
-function ConnectBuilder() {
+function ConnectBuilder(urlPath) {
   this.app = connect();
+  this.urlPath = urlPath;
 }
 
 ConnectBuilder.prototype.authorize = function authorize(user, pass) {
   this.app.use(
-    connect.basicAuth(
-      (incomingUser, incomingPass) => user === incomingUser && pass === incomingPass));
+    this.urlPath,
+    basicAuth(
+      (incomingUser, incomingPass) =>
+        user === incomingUser && pass === incomingPass
+    )
+  );
 
   return this;
 };
@@ -19,18 +27,26 @@ ConnectBuilder.prototype.build = function build() {
   return this.app;
 };
 
-ConnectBuilder.prototype.index = function index(path, files, filesNamespace, themeOpt) {
+ConnectBuilder.prototype.index = function index(
+  path,
+  files,
+  filesNamespace,
+  themeOpt
+) {
   const theme = themeOpt || 'default';
 
-  this.app.use((req, res) => {
+  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),
+      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'
       );
     });
@@ -39,18 +55,21 @@ ConnectBuilder.prototype.index = function index(path, files, filesNamespace, the
   return this;
 };
 
-ConnectBuilder.prototype.session = function session(secret, key) {
-  this.app.use(connect.cookieParser());
-  this.app.use(connect.session({
-    secret,
-    key,
-  }));
+ConnectBuilder.prototype.session = function sessionf(secret) {
+  this.app.use(
+    this.urlPath,
+    expressSession({
+      secret,
+      resave: false,
+      saveUninitialized: true,
+    })
+  );
   return this;
 };
 
 ConnectBuilder.prototype.static = function staticf(path) {
-  this.app.use(connect.static(path));
+  this.app.use(this.urlPath, serveStatic(path));
   return this;
 };
 
-module.exports = () => new ConnectBuilder();
+module.exports = (urlPath) => new ConnectBuilder(urlPath);

lib/daemonize.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const daemon = require('daemon');
+const daemon = require('daemon-fix41');
 const fs = require('fs');
 
 const defaultOptions = {
@@ -14,37 +14,48 @@ module.exports = (script, params, opts) => {
   const logFile = fs.openSync(params.logPath, 'a');
 
   let args = [
-    '-h', params.host,
-    '-p', params.port,
-    '-n', params.number,
-    '-l', params.lines,
-    '-t', params.theme,
+    '-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
-    );
+    args.push('-U', params.user, '-P', params.password);
   }
 
   if (options.doSecure) {
-    args.push(
-      '-k', params.key,
-      '-c', params.certificate
-    );
+    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', '--ui-highlight-preset', params.uiHighlightPreset);
+    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);

lib/options_parser.js

@@ -3,28 +3,85 @@ const program = require('commander');
 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')
+  .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(
+    '-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(
+    '-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)', String,
-    './preset/default.json');
+  .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

@@ -17,7 +17,9 @@ ServerBuilder.prototype.build = function build() {
       key: this._key,
       cert: this._cert,
     };
-    return https.createServer(options, this._callback).listen(this._port, this._host);
+    return https
+      .createServer(options, this._callback)
+      .listen(this._port, this._host);
   }
 
   return http.createServer(this._callback).listen(this._port, this._host);

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

@@ -2,52 +2,68 @@
 
 'use strict';
 
-const EventEmitter = require('events').EventEmitter;
+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;
 
 function Tail(path, opts) {
-  EventEmitter.call(this);
+  events.EventEmitter.call(this);
 
   const options = opts || {
     buffer: 0,
   };
   this._buffer = new CBuffer(options.buffer);
 
+  let stream;
+
   if (path[0] === '-') {
-    process.stdin.setEncoding('utf8');
-
-    process.stdin.on('readable', () => {
-      const line = process.stdin.read();
-      if (line !== null) {
-        this.emit('line', line);
-      }
-    });
+    stream = process.stdin;
   } else {
-    const tail = childProcess.spawn('tail', ['-n', options.buffer, '-F'].concat(path));
-
-    tail.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());
+    /* Check if this os provides the `tail` command. */
+    const hasTailCommand = commandExistsSync('tail');
+    if (hasTailCommand) {
+      let followOpt = '-F';
+      if (process.platform === 'openbsd') {
+        followOpt = '-f';
       }
-    });
 
-    byline(tail.stdout).on('data', (line) => {
-      const str = line.toString();
-      this._buffer.push(str);
-      this.emit('line', str);
-    });
+      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;
 
-    process.on('exit', () => {
-      tail.kill();
-    });
+      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, EventEmitter);
+util.inherits(Tail, events.EventEmitter);
 
 Tail.prototype.getBuffer = function getBuffer() {
   return this._buffer.toArray();

lib/web/assets/styles/dark.css

@@ -1,51 +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 .inner-line:empty::after {
-    content: '.';
-    visibility: hidden;
-}
-
-.log.no-indent .inner-line {
-    margin-left: 0;
-    text-indent: 0;
-}
-
-.log .line-selected {
-    background-color: #302436;
-}

lib/web/assets/styles/default.css

@@ -1,43 +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 .inner-line:empty::after {
-    content: '.';
-    visibility: hidden;
-}
-
-.log.no-indent .inner-line {
-    margin-left: 0;
-    text-indent: 0;
-}
-
-.log .line-selected {
-    background-color: #ffb2b0;
-}

lib/web/index.html

@@ -1,39 +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" onkeypress="return event.keyCode != 13;">
-                <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="/ansi_up.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,6 +1,6 @@
 {
   "name": "frontail",
-  "version": "4.0.3",
+  "version": "4.9.2",
   "description": "streaming logs to the browser",
   "homepage": "https://github.com/mthenw/frontail",
   "author": "Maciej Winnicki <maciej.winnicki@gmail.com>",
@@ -8,33 +8,87 @@
   "bin": "./bin/frontail",
   "dependencies": {
     "CBuffer": "0.1.4",
-    "byline": "^5.0.0",
-    "commander": "1.3.2",
-    "connect": "2.11.0",
+    "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",
-    "daemon": "github:zipang/daemon.node#48d0977c26fb3a6a44ae99aae3471b9d5a761085",
-    "socket.io": "1.4.8"
+    "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": {
-    "eslint": "^3.6.0",
-    "eslint-config-airbnb-base": "^8.0.0",
-    "eslint-plugin-import": "^1.16.0",
-    "jsdom": "^8.5.0",
-    "mocha": "~2.3.2",
+    "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",
+    "supertest": "^3.3.0",
     "temp": "~0.8.1"
   },
   "scripts": {
     "lint": "eslint .",
-    "test": "mocha -r should --reporter spec test/*.js"
+    "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",
     "url": "http://github.com/mthenw/frontail.git"
   },
-  "keywords": ["tail", "syslog", "realtime", "log", "devops"],
+  "keywords": [
+    "tail",
+    "syslog",
+    "realtime",
+    "log",
+    "devops"
+  ],
   "main": "index",
   "preferGlobal": true
 }

preset/default.json

@@ -1,8 +1,8 @@
 {
-    "words": {
-        "err": "color: red;"
-    },
-    "lines": {
-        "err": "font-weight: bold;"
-    }
+  "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/app.js

@@ -1,8 +1,8 @@
 'use strict';
 
 const fs = require('fs');
-const jsdom = require('jsdom');
-const EventEmitter = require('events').EventEmitter;
+const jsdom = require('jsdom/lib/old-api.js');
+const events = require('events');
 
 describe('browser application', () => {
   let io;
@@ -13,6 +13,7 @@ describe('browser application', () => {
       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'),
     });
@@ -20,19 +21,38 @@ describe('browser application', () => {
 
   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);
+    click.initMouseEvent(
+      'click',
+      true,
+      true,
+      window,
+      0,
+      0,
+      0,
+      0,
+      0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    );
     line.dispatchEvent(click);
   }
 
   beforeEach((done) => {
-    io = new EventEmitter();
-    const html = '<title></title><body><div class="topbar"></div>' +
-      '<div class="log"></div><input type="test" id="filter"/></body>';
-    const ansiup = fs.readFileSync('./lib/web/assets/ansi_up.js', 'utf-8');
-    const src = fs.readFileSync('./lib/web/assets/app.js', 'utf-8');
+    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;
@@ -51,7 +71,9 @@ describe('browser application', () => {
     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>');
+    log.childNodes[0].innerHTML.should.be.equal(
+      '<p class="inner-line">test</p>'
+    );
   });
 
   it('should select line when clicked', () => {
@@ -104,13 +126,16 @@ describe('browser application', () => {
   it('should highlight word', () => {
     io.emit('options:highlightConfig', {
       words: {
-        line: 'background: black',
+        foo: 'background: black',
+        bar: 'background: black',
       },
     });
-    io.emit('line', 'line1');
+    io.emit('line', 'foo bar');
 
     const line = window.document.querySelector('.line');
-    line.innerHTML.should.containEql('<span style="background: black">line</span>');
+    line.innerHTML.should.containEql(
+      '<span style="background: black">foo</span> <span style="background: black">bar</span>'
+    );
   });
 
   it('should highlight line', () => {
@@ -133,4 +158,85 @@ describe('browser application', () => {
     const line = window.document.querySelector('.line');
     line.innerHTML.should.equal('<p class="inner-line">&lt;a/&gt;</p>');
   });
+
+  it('should work filter from URL', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
+
+    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.*');
+  });
+
+  it('should clean filter', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
+
+    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/');
+  });
+
+  it('should change filter', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
+
+    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');
+  });
+
+  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');
+
+    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,17 +1,17 @@
 'use strict';
 
-const connectBuilder = require('../lib/connect_builder');
 const request = require('supertest');
 const path = require('path');
+const connectBuilder = require('../lib/connect_builder');
 
 describe('connectBuilder', () => {
   it('should build connect app', () => {
-    connectBuilder().build().should.have.property('use');
+    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();
+    const app = connectBuilder('/').authorize('user', 'pass').build();
 
     request(app)
       .get('/')
@@ -20,7 +20,7 @@ describe('connectBuilder', () => {
   });
 
   it('should build app allowing user to login', (done) => {
-    const app = connectBuilder().authorize('user', 'pass').build();
+    const app = connectBuilder('/').authorize('user', 'pass').build();
     app.use((req, res) => {
       res.end('secret!');
     });
@@ -32,56 +32,72 @@ describe('connectBuilder', () => {
   });
 
   it('should build app that setup session', (done) => {
-    const app = connectBuilder().session('secret', 'sessionkey').build();
+    const app = connectBuilder('/').session('secret').build();
     app.use((req, res) => {
       res.end();
     });
 
     request(app)
       .get('/')
-      .expect('set-cookie', /^sessionkey/, done);
+      .expect('set-cookie', /^connect.sid/, done);
   });
 
   it('should build app that serve static files', (done) => {
-    const app = connectBuilder().static(path.join(__dirname, 'fixtures')).build();
+    const app = connectBuilder('/')
+      .static(path.join(__dirname, 'fixtures'))
+      .build();
 
-    request(app)
-      .get('/foo')
-      .expect('bar', done);
+    request(app).get('/foo.txt').expect('bar', done);
   });
 
   it('should build app that serve index file', (done) => {
-    const app = connectBuilder().index(path.join(__dirname, 'fixtures/index'), '/testfile').build();
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, 'fixtures/index'), '/testfile')
+      .build();
+
+    request(app).get('/').expect(200).expect('Content-Type', 'text/html', 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('/')
+      .get('/test')
       .expect(200)
       .expect('Content-Type', 'text/html', done);
   });
 
   it('should build app that replace index title', (done) => {
-    const app = connectBuilder()
+    const app = connectBuilder('/')
       .index(path.join(__dirname, 'fixtures/index_with_title'), '/testfile')
       .build();
 
-    request(app)
-      .get('/')
-      .expect('<head><title>/testfile</title></head>', done);
+    request(app).get('/').expect('<head><title>/testfile</title></head>', done);
   });
 
   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')
+    const app = connectBuilder('/')
+      .index(
+        path.join(__dirname, 'fixtures/index_with_ns'),
+        '/testfile',
+        'ns',
+        'dark'
+      )
       .build();
 
-    request(app)
-      .get('/')
-      .expect('ns', done);
+    request(app).get('/').expect('ns', done);
   });
 
   it('should build app that sets theme', (done) => {
-    const app = connectBuilder()
-      .index(path.join(__dirname, '/fixtures/index_with_theme'), '/testfile', 'ns', 'dark')
+    const app = connectBuilder('/')
+      .index(
+        path.join(__dirname, '/fixtures/index_with_theme'),
+        '/testfile',
+        'ns',
+        'dark'
+      )
       .build();
 
     request(app)
@@ -89,11 +105,11 @@ describe('connectBuilder', () => {
       .expect(
         '<head><title>/testfile</title><link href="dark.css" rel="stylesheet" type="text/css"/></head>',
         done
-    );
+      );
   });
 
   it('should build app that sets default theme', (done) => {
-    const app = connectBuilder()
+    const app = connectBuilder('/')
       .index(path.join(__dirname, '/fixtures/index_with_theme'), '/testfile')
       .build();
 
@@ -102,6 +118,6 @@ describe('connectBuilder', () => {
       .expect(
         '<head><title>/testfile</title><link href="default.css" rel="stylesheet" type="text/css"/></head>',
         done
-    );
+      );
   });
 });

test/daemonize.js

@@ -1,10 +1,10 @@
 'use strict';
 
-const daemon = require('daemon');
-const optionsParser = require('../lib/options_parser');
-const daemonize = require('../lib/daemonize');
+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(() => {
@@ -70,41 +70,100 @@ describe('daemonize', () => {
     });
 
     it('with authorization', () => {
-      optionsParser.parse(['node', '/path/to/frontail', '-U', 'user', '-P', 'passw0rd']);
+      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']);
+      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']);
+      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']);
+      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']);
+      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']);
+      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']);
+      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']);
+      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', () => {
@@ -129,7 +188,39 @@ describe('daemonize', () => {
       daemonize('script', optionsParser);
 
       daemon.daemon.lastCall.args[1].should.containDeep(['--ui-highlight']);
-      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-highlight-preset', './preset/default.json']);
+    });
+
+    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', () => {
@@ -142,7 +233,12 @@ describe('daemonize', () => {
   });
 
   it('should write pid to pidfile', () => {
-    optionsParser.parse(['node', '/path/to/frontail', '--pid-path', '/path/to/pid']);
+    optionsParser.parse([
+      'node',
+      '/path/to/frontail',
+      '--pid-path',
+      '/path/to/pid',
+    ]);
 
     daemonize('script', optionsParser);
 
@@ -151,7 +247,12 @@ describe('daemonize', () => {
   });
 
   it('should log to file', () => {
-    optionsParser.parse(['node', '/path/to/frontail', '--log-path', '/path/to/log']);
+    optionsParser.parse([
+      'node',
+      '/path/to/frontail',
+      '--log-path',
+      '/path/to/log',
+    ]);
     fs.openSync.returns('file');
 
     daemonize('script', optionsParser);

test/server_builder.js

@@ -3,8 +3,8 @@
 const fs = require('fs');
 const http = require('http');
 const https = require('https');
-const serverBuilder = require('../lib/server_builder');
 const sinon = require('sinon');
+const serverBuilder = require('../lib/server_builder');
 
 describe('serverBuilder', () => {
   describe('http server', () => {
@@ -29,8 +29,7 @@ describe('serverBuilder', () => {
     });
 
     it('should build server accepting requests', () => {
-      const callback = () => {
-      };
+      const callback = () => {};
 
       serverBuilder().use(callback).build();
 
@@ -76,7 +75,9 @@ describe('serverBuilder', () => {
     beforeEach(() => {
       httpsServer = sinon.createStubInstance(https.Server);
       httpsServer.listen.returns(httpsServer);
-      createHttpsServer = sinon.stub(https, 'createServer').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');
@@ -91,22 +92,28 @@ describe('serverBuilder', () => {
       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);
+      createHttpsServer
+        .calledWith({
+          key: 'testkey',
+          cert: 'testcert',
+        })
+        .should.equal(true);
     });
 
     it('should build server accepting requests', () => {
-      const callback = () => {
-      };
+      const callback = () => {};
 
       serverBuilder().use(callback).secure('key.pem', 'cert.pem').build();
 
-      createHttpsServer.calledWith({
-        key: 'testkey',
-        cert: 'testcert',
-      }, callback).should.equal(true);
+      createHttpsServer
+        .calledWith(
+          {
+            key: 'testkey',
+            cert: 'testcert',
+          },
+          callback
+        )
+        .should.equal(true);
     });
 
     it('should throw error if key or cert not provided', () => {

test/tail.js

@@ -1,16 +1,19 @@
 'use strict';
 
 const fs = require('fs');
-const tail = require('../lib/tail');
 const temp = require('temp');
+const tail = require('../lib/tail');
 
 const TEMP_FILE_PROFIX = '';
 const SPAWN_DELAY = 10;
 
 function writeLines(fd, count) {
   for (let i = 0; i < count; i += 1) {
-    fs.writeSync(fd, `line${i}
-`);
+    fs.writeSync(
+      fd,
+      `line${i}
+`
+    );
   }
   fs.closeSync(fd);
 }

web/assets/app.js

@@ -27,6 +27,24 @@ window.App = (function app(window, document) {
    */
   var _filterValue = '';
 
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _pauseBtn;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  var _isPaused = false;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _skipCounter = 0;
+
   /**
    * @type {HTMLElement}
    * @private
@@ -101,14 +119,36 @@ window.App = (function app(window, document) {
   };
 
   /**
-   * @return {Boolean}
+   * Set _filterValue from URL parameter `filter`
+   *
+   * @function
    * @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;
+  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());
   };
 
   /**
@@ -125,7 +165,7 @@ window.App = (function app(window, document) {
    * @private
    */
   var _updateFaviconCounter = function() {
-    if (_isWindowFocused) {
+    if (_isWindowFocused || _isPaused) {
       return;
     }
 
@@ -140,20 +180,18 @@ window.App = (function app(window, document) {
    * @private
    */
   var _highlightWord = function(line) {
-    if (_highlightConfig) {
-      if (_highlightConfig.words) {
-        for (var wordCheck in _highlightConfig.words) { // eslint-disable-line
-          if (_highlightConfig.words.hasOwnProperty(wordCheck)) { // eslint-disable-line
-            line = line.replace( // eslint-disable-line
-              wordCheck,
-              '<span style="' + _highlightConfig.words[wordCheck] + '">' + wordCheck + '</span>'
-            );
-          }
-        }
-      }
+    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 line;
+    return output;
   };
 
   /**
@@ -161,14 +199,12 @@ window.App = (function app(window, document) {
    * @private
    */
   var _highlightLine = function(line, container) {
-    if (_highlightConfig) {
-      if (_highlightConfig.lines) {
-        for (var lineCheck in _highlightConfig.lines) { // eslint-disable-line
-          if (line.indexOf(lineCheck) !== -1) { // eslint-disable-line
-            container.setAttribute('style', _highlightConfig.lines[lineCheck]);
-          }
+    if (_highlightConfig && _highlightConfig.lines) {
+      Object.keys(_highlightConfig.lines).forEach((lineCheck) => {
+        if (line.indexOf(lineCheck) !== -1) {
+          container.setAttribute('style', _highlightConfig.lines[lineCheck]);
         }
-      }
+      });
     }
 
     return container;
@@ -187,9 +223,12 @@ window.App = (function app(window, document) {
       _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
@@ -199,17 +238,37 @@ window.App = (function app(window, document) {
         } 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);
+      window.addEventListener(
+        'blur',
+        function() {
+          _isWindowFocused = false;
+        },
+        true,
+      );
+      window.addEventListener(
+        'focus',
+        function() {
+          _isWindowFocused = true;
+          _faviconReset();
+        },
+        true,
+      );
 
       // socket.io init
       _socket = opts.socket;
@@ -228,7 +287,12 @@ window.App = (function app(window, document) {
           _highlightConfig = highlightConfig;
         })
         .on('line', function(line) {
-          self.log(line);
+          if (_isPaused) {
+            _skipCounter += 1;
+            self.log('==> SKIPPED: ' + _skipCounter + ' <==', (_skipCounter > 1));
+          } else {
+            self.log(line);
+          }
         });
     },
 
@@ -237,8 +301,9 @@ window.App = (function app(window, document) {
      *
      * @param {string} data data to log
      */
-    log: function log(data) {
-      var wasScrolledBottom = _isScrolledBottom();
+    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';
@@ -260,7 +325,11 @@ window.App = (function app(window, document) {
 
       div.appendChild(p);
       _filterElement(div);
-      _logContainer.appendChild(div);
+      if (replace) {
+        _logContainer.replaceChild(div, _logContainer.lastChild);
+      } else {
+        _logContainer.appendChild(div);
+      }
 
       if (_logContainer.children.length > _linesLimit) {
         _logContainer.removeChild(_logContainer.children[0]);

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>