feat: added status bar

Author: fcoury

src/index.js

@@ -5,6 +5,7 @@ const _ = require('lodash');
 require('./polyfills');
 
 const MainPanel = require('./widgets/MainPanel');
+const StatusLine = require('./widgets/StatusLine');
 
 const opts = minimist(process.argv.slice(2));
 const logFile = opts._[0];
@@ -26,6 +27,11 @@ screen.key(['C-c'], function(_ch, _key) {
 const level = opts.l || opts.level;
 const sort = opts.s || opts.sort;
 const args = { screen, level, sort };
-const main = new MainPanel(args);
-main.loadFile(logFile);
-main.setCurrent();
+const mainPanel = new MainPanel(args);
+mainPanel.loadFile(logFile);
+
+const statusLine = new StatusLine({ screen, mainPanel });
+screen.append(statusLine);
+mainPanel.setCurrent();
+
+screen.render();

src/widgets/MainPanel.js

@@ -12,7 +12,7 @@ const FIELDS = ['timestamp', 'level', 'message'];
 
 class MainPanel extends BaseWidget {
   constructor(opts={}) {
-    super(Object.assign({}, { handleKeys: true }, opts));
+    super(Object.assign({}, { top: '0', height: '99%', handleKeys: true }, opts));
 
     this.currentPage = opts.currentPage || 1;
     this.initialRow = opts.initialRow || 0;
@@ -25,7 +25,8 @@ class MainPanel extends BaseWidget {
     this.lastSearchTerm = null;
     this.levelFilter = opts.level;
     this.filters = [];
-    this.sort = opts.sort || '-timestap';
+    this.sort = opts.sort || '-timestamp';
+    this.mode = 'normal';
 
     this.log('pageWidth', this.pageWidth);
     this.update();
@@ -86,6 +87,7 @@ class MainPanel extends BaseWidget {
   }
 
   renderLines() {
+    this.resetMode();
     this.rows = this.lines.slice(this.initialRow, this.initialRow + this.height - 2);
     this.update();
   }
@@ -151,7 +153,7 @@ class MainPanel extends BaseWidget {
       return;
     }
     if (ch === 'f') {
-      if (this.filters.length) {
+      if (this.filters.length || this.levelFilter) {
         return this.clearFilters();
       }
       this.openFilter();
@@ -186,8 +188,9 @@ class MainPanel extends BaseWidget {
   }
 
   openSort() {
+    this.setMode('sort');
     this.openPicker('Sort by', FIELDS, (err, sort) => {
-      if (!sort) { return; }
+      if (!sort) { return this.resetMode(); }
       if (err) { return; }
       if (this.sortKey === sort && this.sortAsc) {
         return this.setSort(`-${sort}`);
@@ -196,11 +199,21 @@ class MainPanel extends BaseWidget {
     });
   }
 
+  setMode(mode) {
+    this.log('setmode', mode);
+    this.mode = mode;
+    this.emit('update');
+  }
+
+  resetMode() {
+    this.setMode('normal');
+  }
+
   openFilter() {
+    this.setMode('filter');
     const fields = ['timestamp', 'level', 'message', 'other'];
     this.openPicker('Filter by', fields, (err, field) => {
-      if (!field) { return; }
-      if (err) { return; }
+      if (err || !field) { return this.resetMode(); }
       if (field === 'level') {
         return this.openLevelFilter();
       }
@@ -213,7 +226,7 @@ class MainPanel extends BaseWidget {
 
   openCustomFilter() {
     this.prompt(`Field to filter:`, '', (field) => {
-      if (!field) { return; }
+      if (!field) { return this.resetMode(); }
       if (field.indexOf(':') > -1) {
         return this.setFilter(field.split(':')[0], field.split(':')[1], 'contains');
       }
@@ -223,7 +236,7 @@ class MainPanel extends BaseWidget {
 
   openFilterTerm(field) {
     this.prompt(`Filter ${field} by:`, '', (value) => {
-      if (!value) { return; }
+      if (!value) { return this.resetMode(); }
       this.setFilter(field, value, 'contains');
     });
   }
@@ -287,13 +300,15 @@ class MainPanel extends BaseWidget {
   }
 
   openSearch(clear=false) {
+    this.setMode('search');
     if (clear) {
       this.lastSearchTerm = null;
     }
     this.prompt('Search:', this.lastSearchTerm, (value) => this.search(value));
   }
 
   openGoToLine() {
+    this.setMode('GOTO');
     this.prompt('Line:', '', (value) => this.moveToLine(parseInt(value, 10)-1));
   }
 
@@ -408,7 +423,7 @@ class MainPanel extends BaseWidget {
     this.setLabel(`[{bold} ${this.file} {/}] [{bold} ${this.row+1}/${this.lastRow+1} {/}]`);
 
     const columns = [
-      { title: 'Timestap', key: 'timestamp' },
+      { title: 'Timestamp', key: 'timestamp' },
       { title: 'Level', key: 'level', format: v => levelColors[v](v) },
       { title: 'D', key: 'data', length: 1, format: v => _.isEmpty(v) ? ' ' : '*' },
       { title: 'Message', key: 'message' },
@@ -427,6 +442,8 @@ class MainPanel extends BaseWidget {
     const list = blessed.element({ tags: true, content });
     this.append(list);
     this.screen.render();
+    this.log('update...', this.filters);
+    this.emit('update');
   }
 }
 

src/widgets/StatusLine.js

@@ -0,0 +1,54 @@
+const blessed = require('blessed');
+const _ = require('lodash');
+
+const BaseWidget = require('./BaseWidget');
+
+class StatusLine extends blessed.Box {
+  constructor(opts={}) {
+    super(Object.assign({}, {
+      top: opts.screen.height-1,
+      left: 0,
+      width: '100%',
+      height: 1,
+      tags: true,
+      style: {
+        fg: 'white',
+        bg: 'blue',
+      },
+    }, opts));
+
+    this.mainPanel = opts.mainPanel;
+    this.mainPanel.on('update', this.update.bind(this));
+    this.update();
+  }
+
+  log(...s) {
+    this.screen.log(...s);
+  }
+
+  get row() { return this.mainPanel.row+1; }
+  get lastRow() { return this.mainPanel.lastRow+1; };
+  get mode() { return this.mainPanel.mode.toUpperCase(); }
+  get sort() { return this.mainPanel.sort; }
+  get filters() {
+    const { filters, levelFilter } = this.mainPanel;
+    if (this.mainPanel.levelFilter) {
+      return filters.concat({ key: 'level', value: levelFilter });
+    }
+    return filters;
+  }
+
+  update() {
+    const mode = `{yellow-bg}{black-fg}{bold} ${this.mode} {/}`;
+    const line = `{bold}${this.row}{/}/{bold}${this.lastRow}{/}`;
+    const sort = this.sort ? `| sort: {bold}${this.sort}{/}` : '';
+    const filterExpr = this.filters.map(f => `${f.key}:${f.value}`).join(' ');
+    const filters = filterExpr ? `| filters: {bold}${filterExpr}{/}` : '';
+    this.log('status updated', this.filters, filters);
+    this.log('filters', [ { key: 'level', value: 'error' } ].map(f => `${f.key}:${f.value}`));
+    this.setContent(` ${mode} ${line} ${sort} ${filters}`);
+    this.screen.render();
+  }
+}
+
+module.exports = StatusLine;