Formatting output (#236)

yaroslav-codefresh · pasha-codefresh · commit 6c75cbba8846 · 2018-12-03T14:41:25.000+02:00
* SAAS-927 -- formatting layer added

* SAAS-928 -- builds output formatted

* SAAS-927 -- return from formatter immediately when no styles

* SAAS-928 -- colors redone as web ui

* remove italic

* move pretty only for workflows

* update version
diff --git a/lib/interface/cli/commands/workflow/get.cmd.js b/lib/interface/cli/commands/workflow/get.cmd.js
@@ -1,12 +1,10 @@
-const debug = require('debug')('codefresh:cli:create:context');
 const Command = require('../../Command');
 const CFError = require('cf-errors');
 const _ = require('lodash');
 const DEFAULTS = require('../../defaults');
 const { workflow , pipeline } = require('../../../../logic').api;
-const { specifyOutputForSingle, specifyOutputForArray } = require('../../helpers/get');
+const { specifyOutputForArray } = require('../../helpers/get');
 const getRoot = require('../root/get.cmd');
-const { printError } = require('../../helpers/general');
 
 const command = new Command({
     command: 'builds [id..]',
@@ -51,6 +49,10 @@ const command = new Command({
                 type: Array,
                 default: [],
             })
+            .option('pretty', {
+                describe: 'Use colors and signs for output',
+                group: 'Output Options',
+            })
             .example('codefresh get build ID', 'Get build ID')
             .example('codefresh get builds', 'Get all builds')
             .example('codefresh get builds --pipeline-id ID', 'Get all builds that are executions of pipeline "ID"')
@@ -60,10 +62,7 @@ const command = new Command({
     },
     handler: async (argv) => {
         const workflowIds = argv.id;
-        const limit = argv.limit;
-        const page = argv.page;
-        const status = argv.status;
-        const trigger = argv.trigger;
+        const { limit, page, status, trigger } = argv;
         const pipelineNames = !_.isArray(argv['pipeline-name']) ? [(argv['pipeline-name'])] : argv['pipeline-name'];
         const pipelineIds = !_.isArray(argv['pipeline-id']) ? [(argv['pipeline-id'])] : argv['pipeline-id'];
 
@@ -96,7 +95,7 @@ const command = new Command({
                 pipelineIds,
             });
         }
-        specifyOutputForArray(argv.output, workflows);
+        specifyOutputForArray(argv.output, workflows, argv.pretty); // todo: extract output layer
     },
 });
 
diff --git a/lib/interface/cli/helpers/get.js b/lib/interface/cli/helpers/get.js
@@ -1,8 +1,18 @@
 /* eslint-disable indent */
-const _         = require('lodash');
-const columnify = require('columnify');
-const yaml      = require('js-yaml');
-const draftlog  = require('draftlog');
+const _                     = require('lodash');
+const columnify             = require('columnify');
+const chalk                 = require('chalk');
+const yaml                  = require('js-yaml');
+const draftlog              = require('draftlog');
+const { Formatter }         = require('../../../output');
+const { FormatterRegistry } = require('../../../output/formatters');
+
+const NOOP_FORMATTER = new Formatter();
+
+const prettyOpts = {
+    headingTransform: chalk.bold,
+    columnSplitter: '  ',
+};
 
 draftlog.into(console);
 
@@ -16,7 +26,7 @@ const print = (output) => {
 };
 
 //i tried that this function will be dynamic (with the keys). it is also possible to add an array with all the fields if you think it better
-const _printArrayTable = (data) => {
+const _printArrayTable = (data, pretty = false) => {
     if (data.length === 0) {
         console.log('no available resources');
     } else {
@@ -30,49 +40,59 @@ const _printArrayTable = (data) => {
             });
             res.push(obj);
         });
-        const columns = columnify(res);
+        const columns = columnify(res, pretty ? prettyOpts : {});
         print(columns);
     }
 };
 
-const _printSingleTable = (info) => {
+const _printSingleTable = (info, pretty = false) => {
     const keys = Object.keys(info);
     const res  = [];
     const obj  = [];
     _.forEach(keys, (key) => {
         obj[key.toUpperCase()] = info[key];
     });
     res.push(obj);
-    const columns = columnify(res);
+    const columns = columnify(res, pretty ? prettyOpts : {});
     print(columns);
 };
 
 
-const specifyOutputForSingle = (type, enitity) => {
+// todo: extract output layer from commands
+const specifyOutputForSingle = (type, entity, pretty = false) => {
+    let formatter = NOOP_FORMATTER;
+    if (pretty && entity) {
+        formatter = FormatterRegistry.get(entity.constructor.name);
+    }
     switch (type) {
         case 'json':
-            print(enitity.toJson());
+            print(entity.toJson());
             break;
         case 'yaml':
-            print(enitity.toYaml());
+            print(entity.toYaml());
             break;
         case 'name':
-            print(enitity.toName());
+            print(entity.toName());
             break;
         case 'wide':
-            _printSingleTable(enitity.toWide());
+            _printSingleTable(formatter.apply(entity.toWide()), pretty);
             break;
         default:
-            _printSingleTable(enitity.toDefault());
+            _printSingleTable(formatter.apply(entity.toDefault()), pretty);
     }
 };
 
 
-const specifyOutputForArray = (type, enitities) => {
+// todo: extract output layer from commands
+const specifyOutputForArray = (type, entities, pretty = false) => {
+    let formatter = NOOP_FORMATTER;
+    if (pretty && entities.length) {
+        formatter = FormatterRegistry.get(entities[0].constructor.name);
+    }
     switch (type) {
         case 'json':
             const jsonArray = [];
-            _.forEach(enitities, (entity) => {
+            _.forEach(entities, (entity) => {
                 jsonArray.push(entity.info);
             });
 
@@ -87,7 +107,7 @@ const specifyOutputForArray = (type, enitities) => {
             let yamlArray = {
                 items: [],
             };
-            _.forEach(enitities, (entity) => {
+            _.forEach(entities, (entity) => {
                 yamlArray.items.push(entity.info);
             });
 
@@ -98,28 +118,28 @@ const specifyOutputForArray = (type, enitities) => {
             }
             break;
         case 'name':
-            _.forEach(enitities, (entity) => {
+            _.forEach(entities, (entity) => {
                 console.log(entity.toName());
             });
             break;
         case 'id':
-            _.forEach(enitities, (entity) => {
+            _.forEach(entities, (entity) => {
                 console.log(entity.toId());
             });
             break;
         case 'wide':
             const wideArray = [];
-            _.forEach(enitities, (entity) => {
-                wideArray.push(entity.toWide());
+            _.forEach(entities, (entity) => {
+                wideArray.push(formatter.apply(entity.toWide()));
             });
-            _printArrayTable(wideArray);
+            _printArrayTable(wideArray, pretty);
             break;
         default:
             const defaultArray = [];
-            _.forEach(enitities, (entity) => {
-                defaultArray.push(entity.toDefault());
+            _.forEach(entities, (entity) => {
+                defaultArray.push(formatter.apply(entity.toDefault()));
             });
-            _printArrayTable(defaultArray);
+            _printArrayTable(defaultArray, pretty);
     }
 };
 
diff --git a/lib/output/formatters/Workflow.formatter.js b/lib/output/formatters/Workflow.formatter.js
@@ -0,0 +1,23 @@
+const { Formatter, Style } = require('../../output');
+
+const CHECK_SIGN = '✓';
+const CROSS_SIGN = '✗';
+const PLAY_SIGN = '▸';
+const TWO_ARR_DOWN_SIGN = '⇊';
+const CIRCLE_SIGN = '◉';
+const BRACKET_SIGN = '«';
+
+const STATUS_CHOICES = {
+    success: Style.green.appendedBy(CHECK_SIGN),
+    error: Style.red.appendedBy(CROSS_SIGN),
+    terminated: Style.red.appendedBy(CROSS_SIGN),
+    pending: Style.yellow.appendedBy(CIRCLE_SIGN),
+    elected: Style.yellow.appendedBy(BRACKET_SIGN),
+    running: Style.cyan.appendedBy(PLAY_SIGN),
+    terminating: Style.red.appendedBy(TWO_ARR_DOWN_SIGN),
+};
+
+const FORMATTER = Formatter.build()
+    .style('status', input => STATUS_CHOICES[input].bold.uppercase(input));
+
+module.exports = FORMATTER;
diff --git a/lib/output/formatters/index.js b/lib/output/formatters/index.js
@@ -0,0 +1,33 @@
+const _ = require('lodash');
+const recursive = require('recursive-readdir');
+const path = require('path');
+const {Formatter} = require('../index');
+
+const formatters = {};
+const EMPTY_FORMATTER = new Formatter();
+
+
+class FormatterRegistry {
+    static get(formatterName) {
+        return formatters[formatterName] || EMPTY_FORMATTER;
+    }
+
+    static set(name, formatter) {
+        formatters[name] = formatter;
+    }
+}
+
+recursive(path.resolve(__dirname), (err, files) => {
+    _.forEach(files, (file) => {
+        const ending = '.formatter.js';
+        if (file.endsWith(ending)) {
+            const formatter = require(file);
+            const entityName =  path.parse(file).base.replace(ending, '');
+            FormatterRegistry.set(entityName, formatter);
+        }
+    });
+});
+
+module.exports = {
+    FormatterRegistry,
+};
diff --git a/lib/output/index.js b/lib/output/index.js
@@ -0,0 +1,42 @@
+const _ = require('lodash');
+const Style = require('./style');
+
+class Formatter {
+    constructor(styles) {
+        this.styles = styles || {};
+    }
+
+    apply(source) {
+        const keys = _.keys(source);
+        if (!keys || !_.keys(this.styles)) {
+            return source;
+        }
+        const obj = { ...source };
+        keys.forEach((key) => {
+            const prop = obj[key];
+            obj[key] = this._applyStyles(key, prop);
+        });
+        return obj;
+    }
+
+    style(key, func) {
+        if (typeof func === 'function') {
+            this.styles[key] = func;
+        }
+        return this;
+    }
+
+    _applyStyles(key, prop) {
+        const style = this.styles[key] || _.identity;
+        return style(prop);
+    }
+
+    static build() {
+        return new Formatter();
+    }
+}
+
+module.exports = {
+    Formatter,
+    Style,
+};
diff --git a/lib/output/style.js b/lib/output/style.js
@@ -0,0 +1,88 @@
+const chalk = require('chalk');
+const _ = require('lodash');
+
+/**
+ * chalk styles
+ *
+ * @see https://github.com/chalk/chalk#styles
+ * */
+const STYLES = [
+    'black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white', 'gray',
+
+    'bgBlack', 'bgRed', 'bgGreen', 'bgYellow', 'bgBlue', 'bgMagenta', 'bgCyan', 'bgWhite', 'bgBlackBright',
+    'bgRedBright', 'bgGreenBright', 'bgYellowBright', 'bgBlueBright', 'bgMagentaBright', 'bgCyanBright', 'bgWhiteBright',
+
+    'reset', 'bold', 'dim', 'italic', 'underline', 'inverse', 'hidden', 'strikethrough', 'visible',
+];
+
+const MODIFIERS = {
+    uppercase: inp => inp.toUpperCase(),
+    lowercase: inp => inp.toLowerCase(),
+    trim: inp => inp.trim(),
+};
+
+const symbolAppender = (arr, styleCollector) => {
+    return (symbol) => {
+        arr.push(symbol);
+        return styleCollector;
+    };
+};
+
+const chainedGetter = (arr, symbol, styleCollector) => {
+    return {
+        get: () => {
+            arr.push(symbol);
+            return styleCollector;
+        },
+    };
+};
+
+
+/**
+ * Simple wrapper over chalk.
+ * Applies all chalk styles and some self-defined.
+ *
+ * usage: console.log(Style.red.italic.bold.uppercase.appendedBy('some char')('some text'))
+ * */
+let Style = function Style() {
+    const styles = [];
+    const after = [];
+    const before = [];
+    const modifiers = [];
+
+    function _Style(input = '') {
+        const style = styles.reduce((_chalk, _style) => _chalk[_style], chalk); // apply chalk styles
+        const beforeInp = before.length ? `${before.join(' ')} ` : '';
+        const afterInp = after.length ? ` ${after.join(' ')}` : '';
+        const output = modifiers.reduce((inp, type) => MODIFIERS[type](inp), input); // apply modifiers
+        return style(`${beforeInp}${output}${afterInp}`);
+    }
+
+    // for chain-like style
+    const getters = {};
+    STYLES.forEach((styleName) => {
+        getters[styleName] = chainedGetter(styles, styleName, _Style);
+    });
+    _.keys(MODIFIERS).forEach((modifierName) => {
+        getters[modifierName] = chainedGetter(modifiers, modifierName, _Style);
+    });
+    Object.defineProperties(_Style, getters);
+
+    _Style.appendedBy = symbolAppender(after, _Style);
+    _Style.prependedBy = symbolAppender(before, _Style);
+    return _Style;
+};
+
+/**
+ * Allows not to call Style(), e.g.:
+ *
+ * Style().red -> Style.red
+ * */
+Style = new Proxy(Style, {
+    get(target, p) {
+        return target()[p];
+    },
+});
+
+module.exports = Style;
+
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codefresh",
-  "version": "0.8.96",
+  "version": "0.8.97",
   "description": "Codefresh command line utility",
   "main": "index.js",
   "preferGlobal": true,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "codefresh",`
`3`		`- "version": "0.8.96",`
	`3`	`+ "version": "0.8.97",`
`4`	`4`	`"description": "Codefresh command line utility",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"preferGlobal": true,`