From 277046ce90830db8e96ce71549fff59f755a49c9 Mon Sep 17 00:00:00 2001 From: Julien WITTOUCK Date: Mon, 3 Jun 2019 19:39:56 +0200 Subject: [PATCH] :lipstick: : make logs look like logs --- .../io/codeka/gaia/runner/StackRunner.java | 12 +- src/main/resources/static/css/style.css | 16 + src/main/resources/static/js/ansi_to_html.js | 510 ++++++++++++++++++ .../resources/templates/layout/header.html | 10 +- src/main/resources/templates/stack_apply.html | 22 +- src/main/resources/templates/stacks.html | 2 +- 6 files changed, 549 insertions(+), 23 deletions(-) create mode 100644 src/main/resources/static/js/ansi_to_html.js diff --git a/src/main/java/io/codeka/gaia/runner/StackRunner.java b/src/main/java/io/codeka/gaia/runner/StackRunner.java index dab952a82..7758adda6 100644 --- a/src/main/java/io/codeka/gaia/runner/StackRunner.java +++ b/src/main/java/io/codeka/gaia/runner/StackRunner.java @@ -156,10 +156,16 @@ public void run(Job job, TerraformModule module, Stack stack) { logs = stream.readFully(); } - // delete container :) - dockerClient.removeContainer(containerCreation.id()); + if(containerExit.statusCode() == 0){ + job.end(); + // delete container :) + dockerClient.removeContainer(containerCreation.id()); + } + else{ + job.fail(); + } + - job.end(); } catch (Exception e) { job.fail(); e.printStackTrace(); diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index 3fc869d56..aea1390b1 100755 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -34,6 +34,7 @@ 25. Login Section 26. Error 27. Map + 28. Custom style for stack logs -------------------------------------------------------------------*/ @@ -3400,3 +3401,18 @@ table.projects tr td:first-child { height: 100%; min-height: 720px; } + + +/*------------------------------------------------------------------ + 28. Custom style for stack logs +-------------------------------------------------------------------*/ + +code[class*="language-"], +pre[class*="language-"] { + color: white; + background: black; +} + +code[class*="language-"] b { + font-weight: bold; +} \ No newline at end of file diff --git a/src/main/resources/static/js/ansi_to_html.js b/src/main/resources/static/js/ansi_to_html.js new file mode 100644 index 000000000..364761807 --- /dev/null +++ b/src/main/resources/static/js/ansi_to_html.js @@ -0,0 +1,510 @@ +const defaults = { + fg: '#FFF', + bg: '#000', + newline: false, + escapeXML: false, + stream: false, + colors: getDefaultColors() +}; + +function getDefaultColors() { + const colors = { + 0: '#000', + 1: '#A00', + 2: '#0A0', + 3: '#A50', + 4: '#00A', + 5: '#A0A', + 6: '#0AA', + 7: '#AAA', + 8: '#555', + 9: '#F55', + 10: '#5F5', + 11: '#FF5', + 12: '#55F', + 13: '#F5F', + 14: '#5FF', + 15: '#FFF' + }; + + range(0, 5).forEach(red => { + range(0, 5).forEach(green => { + range(0, 5).forEach(blue => setStyleColor(red, green, blue, colors)); + }); + }); + + range(0, 23).forEach(function (gray) { + const c = gray + 232; + const l = toHexString(gray * 10 + 8); + + colors[c] = '#' + l + l + l; + }); + + return colors; +} + +/** + * @param {number} red + * @param {number} green + * @param {number} blue + * @param {object} colors + */ +function setStyleColor(red, green, blue, colors) { + const c = 16 + (red * 36) + (green * 6) + blue; + const r = red > 0 ? red * 40 + 55 : 0; + const g = green > 0 ? green * 40 + 55 : 0; + const b = blue > 0 ? blue * 40 + 55 : 0; + + colors[c] = toColorHexString([r, g, b]); +} + +/** + * Converts from a number like 15 to a hex string like 'F' + * @param {number} num + * @returns {string} + */ +function toHexString(num) { + let str = num.toString(16); + + while (str.length < 2) { + str = '0' + str; + } + + return str; +} + +/** + * Converts from an array of numbers like [15, 15, 15] to a hex string like 'FFF' + * @param {[red, green, blue]} ref + * @returns {string} + */ +function toColorHexString(ref) { + const results = []; + + for (const r of ref) { + results.push(toHexString(r)); + } + + return '#' + results.join(''); +} + +/** + * @param {Array} stack + * @param {string} token + * @param {*} data + * @param {object} options + */ +function generateOutput(stack, token, data, options) { + let result; + + if (token === 'text') { + result = pushText(data, options); + } else if (token === 'display') { + result = handleDisplay(stack, data, options); + } else if (token === 'xterm256') { + result = pushForegroundColor(stack, options.colors[data]); + } else if (token === 'rgb') { + result = handleRgb(stack, data); + } + + return result; +} + +/** + * @param {Array} stack + * @param {string} data + * @returns {*} + */ +function handleRgb(stack, data) { + data = data.substring(2).slice(0, -1); + const operation = +data.substr(0,2); + + const color = data.substring(5).split(';'); + const rgb = color.map(function(value) { + return ('0' + Number(value).toString(16)).substr(-2); + }).join(''); + + return pushStyle(stack, (operation === 38 ? 'color:#' : 'background-color:#') + rgb); +} + +/** + * @param {Array} stack + * @param {number} code + * @param {object} options + * @returns {*} + */ +function handleDisplay(stack, code, options) { + code = parseInt(code, 10); + + const codeMap = { + '-1': () => '
', + 0: () => stack.length && resetStyles(stack), + 1: () => pushTag(stack, 'b'), + 3: () => pushTag(stack, 'i'), + 4: () => pushTag(stack, 'u'), + 8: () => pushStyle(stack, 'display:none'), + 9: () => pushTag(stack, 'strike'), + 22: () => pushStyle(stack, 'font-weight:normal;text-decoration:none;font-style:normal'), + 23: () => closeTag(stack, 'i'), + 24: () => closeTag(stack, 'u'), + 39: () => pushForegroundColor(stack, options.fg), + 49: () => pushBackgroundColor(stack, options.bg), + 53: () => pushStyle(stack, 'text-decoration:overline') + }; + + let result; + if (codeMap[code]) { + result = codeMap[code](); + } else if (4 < code && code < 7) { + result = pushTag(stack, 'blink'); + } else if (29 < code && code < 38) { + result = pushForegroundColor(stack, options.colors[code - 30]); + } else if ((39 < code && code < 48)) { + result = pushBackgroundColor(stack, options.colors[code - 40]); + } else if ((89 < code && code < 98)) { + result = pushForegroundColor(stack, options.colors[8 + (code - 90)]); + } else if ((99 < code && code < 108)) { + result = pushBackgroundColor(stack, options.colors[8 + (code - 100)]); + } + + return result; +} + +/** + * Clear all the styles + * @returns {string} + */ +function resetStyles(stack) { + const stackClone = stack.slice(0); + + stack.length = 0; + + return stackClone.reverse().map(function (tag) { + return ''; + }).join(''); +} + +/** + * Creates an array of numbers ranging from low to high + * @param {number} low + * @param {number} high + * @returns {Array} + * @example range(3, 7); // creates [3, 4, 5, 6, 7] + */ +function range(low, high) { + const results = []; + + for (let j = low; j <= high; j++) { + results.push(j); + } + + return results; +} + + + +/** + * Returns a new function that is true if value is NOT the same category + * @param {string} category + * @returns {function} + */ +function notCategory(category) { + return function (e) { + return (category === null || e.category !== category) && category !== 'all'; + }; +} + +/** + * Converts a code into an ansi token type + * @param {number} code + * @returns {string} + */ +function categoryForCode(code) { + code = parseInt(code, 10); + let result = null; + + if (code === 0) { + result = 'all'; + } else if (code === 1) { + result = 'bold'; + } else if ((2 < code && code < 5)) { + result = 'underline'; + } else if ((4 < code && code < 7)) { + result = 'blink'; + } else if (code === 8) { + result = 'hide'; + } else if (code === 9) { + result = 'strike'; + } else if ((29 < code && code < 38) || code === 39 || (89 < code && code < 98)) { + result = 'foreground-color'; + } else if ((39 < code && code < 48) || code === 49 || (99 < code && code < 108)) { + result = 'background-color'; + } + + return result; +} + +/** + * @param {string} text + * @param {object} options + * @returns {string} + */ +function pushText(text, options) { + if (options.escapeXML) { + return entities.encodeXML(text); + } + + return text; +} + +/** + * @param {Array} stack + * @param {string} tag + * @param {string} [style=''] + * @returns {string} + */ +function pushTag(stack, tag, style) { + if (!style) { + style = ''; + } + + stack.push(tag); + + return ['<' + tag, (style ? ' style="' + style + '"' : void 0), '>'].join(''); +} + +/** + * @param {Array} stack + * @param {string} style + * @returns {string} + */ +function pushStyle (stack, style) { + return pushTag(stack, 'span', style); +} + +function pushForegroundColor(stack, color) { + return pushTag(stack, 'span', 'color:' + color); +} + +function pushBackgroundColor(stack, color) { + return pushTag(stack, 'span', 'background-color:' + color); +} + +/** + * @param {Array} stack + * @param {string} style + * @returns {string} + */ +function closeTag(stack, style) { + let last; + + if (stack.slice(-1)[0] === style) { + last = stack.pop(); + } + + if (last) { + return ''; + } +} + +/** + * @param {string} text + * @param {object} options + * @param {function} callback + * @returns {Array} + */ +function tokenize(text, options, callback) { + let ansiMatch = false; + const ansiHandler = 3; + + function remove() { + return ''; + } + + function removeXterm256(m, g1) { + callback('xterm256', g1); + return ''; + } + + function newline(m) { + if (options.newline) { + callback('display', -1); + } else { + callback('text', m); + } + + return ''; + } + + function ansiMess(m, g1) { + ansiMatch = true; + if (g1.trim().length === 0) { + g1 = '0'; + } + + g1 = g1.trimRight(';').split(';'); + + for (const g of g1) { + callback('display', g); + } + + return ''; + } + + function realText(m) { + callback('text', m); + + return ''; + } + + function rgb(m) { + callback('rgb', m); + + return ''; + } + + /* eslint no-control-regex:0 */ + const tokens = [{ + pattern: /^\x08+/, + sub: remove + }, { + pattern: /^\x1b\[[012]?K/, + sub: remove + }, { + pattern: /^\x1b\[\(B/, + sub: remove + }, { + pattern: /^\x1b\[[34]8;2;\d+;\d+;\d+m/, + sub: rgb + }, { + pattern: /^\x1b\[38;5;(\d+)m/, + sub: removeXterm256 + }, { + pattern: /^\n/, + sub: newline + }, { + pattern: /^\x1b\[((?:\d{1,3};?)+|)m/, + sub: ansiMess + }, { + // CSI n J + // ED - Erase in Display Clears part of the screen. + // If n is 0 (or missing), clear from cursor to end of screen. + // If n is 1, clear from cursor to beginning of the screen. + // If n is 2, clear entire screen (and moves cursor to upper left on DOS ANSI.SYS). + // If n is 3, clear entire screen and delete all lines saved in the scrollback buffer + // (this feature was added for xterm and is supported by other terminal applications). + pattern: /^\x1b\[\d?J/, + sub: remove + }, { + // CSI n ; m f + // HVP - Horizontal Vertical Position Same as CUP + pattern: /^\x1b\[\d{0,3};\d{0,3}f/, + sub: remove + }, { + // catch-all for CSI sequences? + pattern: /^\x1b\[?[\d;]{0,3}/, + sub: remove + }, { + pattern: /^([^\x1b\x08\n]+)/, + sub: realText + }]; + + function process(handler, i) { + if (i > ansiHandler && ansiMatch) { + return; + } + + ansiMatch = false; + + text = text.replace(handler.pattern, handler.sub); + } + + const results1 = []; + let {length} = text; + + outer: + while (length > 0) { + for (let i = 0, o = 0, len = tokens.length; o < len; i = ++o) { + const handler = tokens[i]; + process(handler, i); + + if (text.length !== length) { + // We matched a token and removed it from the text. We need to + // start matching *all* tokens against the new text. + length = text.length; + continue outer; + } + } + + if (text.length === length) { + break; + } + results1.push(0); + + length = text.length; + } + + return results1; +} + +/** + * If streaming, then the stack is "sticky" + * + * @param {Array} stickyStack + * @param {string} token + * @param {*} data + * @returns {Array} + */ +function updateStickyStack(stickyStack, token, data) { + if (token !== 'text') { + stickyStack = stickyStack.filter(notCategory(categoryForCode(data))); + stickyStack.push({token, data, category: categoryForCode(data)}); + } + + return stickyStack; +} + +class Filter { + constructor (options) { + options = options || {}; + + if (options.colors) { + options.colors = Object.assign({}, defaults.colors, options.colors); + } + + this.options = Object.assign({}, defaults, options); + this.stack = []; + this.stickyStack = []; + } + toHtml (input) { + input = typeof input === 'string' ? [input] : input; + const {stack, options} = this; + const buf = []; + + this.stickyStack.forEach(element => { + const output = generateOutput(stack, element.token, element.data, options); + + if (output) { + buf.push(output); + } + }); + + tokenize(input.join(''), options, (token, data) => { + const output = generateOutput(stack, token, data, options); + + if (output) { + buf.push(output); + } + + if (options.stream) { + this.stickyStack = updateStickyStack(this.stickyStack, token, data); + } + }); + + if (stack.length) { + buf.push(resetStyles(stack)); + } + + return buf.join(''); + } +} diff --git a/src/main/resources/templates/layout/header.html b/src/main/resources/templates/layout/header.html index 85b575b98..4b0819962 100644 --- a/src/main/resources/templates/layout/header.html +++ b/src/main/resources/templates/layout/header.html @@ -15,14 +15,14 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/main/resources/templates/stack_apply.html b/src/main/resources/templates/stack_apply.html index 1e976bb3d..034acb0b1 100644 --- a/src/main/resources/templates/stack_apply.html +++ b/src/main/resources/templates/stack_apply.html @@ -57,11 +57,11 @@

Stack {{stack.name}}

Your deployment is finished ! - @@ -73,12 +73,13 @@

Stack {{stack.name}}

- + + diff --git a/src/main/resources/templates/stacks.html b/src/main/resources/templates/stacks.html index d0e7d367d..f7777926a 100644 --- a/src/main/resources/templates/stacks.html +++ b/src/main/resources/templates/stacks.html @@ -29,7 +29,7 @@

Stacks

-
+
Card title