From ffe57b8dc47794df614282482d545121a26519b7 Mon Sep 17 00:00:00 2001 From: Otto Winter Date: Fri, 30 Nov 2018 10:49:06 +0100 Subject: [PATCH 1/6] Hass.io: Show ANSI color codes in logs --- hassio/src/addon-view/hassio-addon-logs.js | 218 +++++++++++++++++++- hassio/src/system/hassio-supervisor-log.js | 228 ++++++++++++++++++++- 2 files changed, 436 insertions(+), 10 deletions(-) diff --git a/hassio/src/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js index 8784689e05a7..fe55044d12f2 100644 --- a/hassio/src/addon-view/hassio-addon-logs.js +++ b/hassio/src/addon-view/hassio-addon-logs.js @@ -15,10 +15,72 @@ class HassioAddonLogs extends PolymerElement { } pre { overflow-x: auto; + white-space: pre-wrap; + overflow-wrap: break-word; + } + .bold { + font-weight: bold; + } + .italic { + font-style: italic; + } + .underline { + text-decoration: underline; + } + .strikethrough { + text-decoration: line-through; + } + .underline.strikethrough { + text-decoration: underline line-through; + } + .fg-red { + color: rgb(222, 56, 43); + } + .fg-green { + color: rgb(57, 181, 74); + } + .fg-yellow { + color: rgb(255, 199, 6); + } + .fg-blue { + color: rgb(0, 111, 184); + } + .fg-magenta { + color: rgb(118, 38, 113); + } + .fg-cyan { + color: rgb(44, 181, 233); + } + .fg-white { + color: rgb(204, 204, 204); + } + .bg-black { + background-color: rgb(0, 0, 0); + } + .bg-red { + background-color: rgb(222, 56, 43); + } + .bg-green { + background-color: rgb(57, 181, 74); + } + .bg-yellow { + background-color: rgb(255, 199, 6); + } + .bg-blue { + background-color: rgb(0, 111, 184); + } + .bg-magenta { + background-color: rgb(118, 38, 113); + } + .bg-cyan { + background-color: rgb(44, 181, 233); + } + .bg-white { + background-color: rgb(204, 204, 204); } - 
[[log]]
+
Refresh
@@ -33,7 +95,6 @@ class HassioAddonLogs extends PolymerElement { type: String, observer: "addonSlugChanged", }, - log: String, }; } @@ -48,11 +109,160 @@ class HassioAddonLogs extends PolymerElement { this.refresh(); } + static parseLogsToPre(text) { + const pre = document.createElement("pre"); + const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; + let i = 0; + + const state = { + bold: false, + italic: false, + underline: false, + strikethrough: false, + foregroundColor: null, + backgroundColor: null, + }; + + const addSpan = (content) => { + const span = document.createElement("span"); + if (state.bold) { + span.classList.add("bold"); + } + if (state.italic) { + span.classList.add("italic"); + } + if (state.underline) { + span.classList.add("underline"); + } + if (state.strikethrough) { + span.classList.add("strikethrough"); + } + if (state.foregroundColor !== null) { + span.classList.add(state.foregroundColor); + } + if (state.backgroundColor !== null) { + span.classList.add(state.backgroundColor); + } + span.appendChild(document.createTextNode(content)); + pre.appendChild(span); + }; + + /* eslint-disable no-constant-condition */ + while (true) { + const match = re.exec(text); + if (match === null) { + break; + } + + const j = match.index; + addSpan(text.substring(i, j)); + i = j + match[0].length; + + if (match[1] === undefined) continue; + + for (const colorCode of match[1].split(";")) { + switch (parseInt(colorCode)) { + case 0: + // reset + state.bold = false; + state.italic = false; + state.underline = false; + state.strikethrough = false; + state.foregroundColor = null; + state.backgroundColor = null; + break; + case 1: + state.bold = true; + break; + case 3: + state.italic = true; + break; + case 4: + state.underline = true; + break; + case 9: + state.strikethrough = true; + break; + case 22: + state.bold = false; + break; + case 23: + state.italic = false; + break; + case 24: + state.underline = false; + break; + case 29: + state.strikethrough = false; + break; + case 31: + state.foregroundColor = "fg-red"; + break; + case 32: + state.foregroundColor = "fg-green"; + break; + case 33: + state.foregroundColor = "fg-yellow"; + break; + case 34: + state.foregroundColor = "fg-blue"; + break; + case 35: + state.foregroundColor = "fg-magenta"; + break; + case 36: + state.foregroundColor = "fg-cyan"; + break; + case 37: + state.foregroundColor = "fg-white"; + break; + case 30: + case 39: + state.foregroundColor = null; + break; + case 40: + state.backgroundColor = "bg-black"; + break; + case 41: + state.backgroundColor = "bg-red"; + break; + case 42: + state.backgroundColor = "bg-green"; + break; + case 43: + state.backgroundColor = "bg-yellow"; + break; + case 44: + state.backgroundColor = "bg-blue"; + break; + case 45: + state.backgroundColor = "bg-magenta"; + break; + case 46: + state.backgroundColor = "bg-cyan"; + break; + case 47: + state.backgroundColor = "bg-white"; + break; + case 49: + state.backgroundColor = null; + break; + } + } + } + addSpan(text.substring(i)); + + return pre; + } + refresh() { this.hass .callApi("get", `hassio/addons/${this.addonSlug}/logs`) - .then((info) => { - this.log = info; + .then((text) => { + while (this.$.content.lastChild) { + this.$.content.removeChild(this.$.content.lastChild); + } + this.$.content.appendChild(HassioAddonLogs.parseLogsToPre(text)); }); } } diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js index 26a3a6a07865..b60c6046c334 100644 --- a/hassio/src/system/hassio-supervisor-log.js +++ b/hassio/src/system/hassio-supervisor-log.js @@ -12,12 +12,74 @@ class HassioSupervisorLog extends PolymerElement { } pre { overflow-x: auto; + white-space: pre-wrap; + overflow-wrap: break-word; + } + .bold { + font-weight: bold; + } + .italic { + font-style: italic; + } + .underline { + text-decoration: underline; + } + .strikethrough { + text-decoration: line-through; + } + .underline.strikethrough { + text-decoration: underline line-through; + } + .fg-red { + color: rgb(222, 56, 43); + } + .fg-green { + /* color: rgb(57, 181, 74); */ + } + .fg-yellow { + color: rgb(255, 199, 6); + } + .fg-blue { + color: rgb(0, 111, 184); + } + .fg-magenta { + color: rgb(118, 38, 113); + } + .fg-cyan { + color: rgb(44, 181, 233); + } + .fg-white { + color: rgb(204, 204, 204); + } + .bg-black { + background-color: rgb(0, 0, 0); + } + .bg-red { + background-color: rgb(222, 56, 43); + } + .bg-green { + background-color: rgb(57, 181, 74); + } + .bg-yellow { + background-color: rgb(255, 199, 6); + } + .bg-blue { + background-color: rgb(0, 111, 184); + } + .bg-magenta { + background-color: rgb(118, 38, 113); + } + .bg-cyan { + background-color: rgb(44, 181, 233); + } + .bg-white { + background-color: rgb(204, 204, 204); } - 
[[log]]
+
- Refresh + Refresh
`; @@ -35,18 +97,172 @@ class HassioSupervisorLog extends PolymerElement { this.loadData(); } + static parseLogsToPre(text) { + const pre = document.createElement("pre"); + const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; + let i = 0; + + const state = { + bold: false, + italic: false, + underline: false, + strikethrough: false, + foregroundColor: null, + backgroundColor: null, + }; + + const addSpan = (content) => { + const span = document.createElement("span"); + if (state.bold) { + span.classList.add("bold"); + } + if (state.italic) { + span.classList.add("italic"); + } + if (state.underline) { + span.classList.add("underline"); + } + if (state.strikethrough) { + span.classList.add("strikethrough"); + } + if (state.foregroundColor !== null) { + span.classList.add(state.foregroundColor); + } + if (state.backgroundColor !== null) { + span.classList.add(state.backgroundColor); + } + span.appendChild(document.createTextNode(content)); + pre.appendChild(span); + }; + + /* eslint-disable no-constant-condition */ + while (true) { + const match = re.exec(text); + if (match === null) { + break; + } + + const j = match.index; + addSpan(text.substring(i, j)); + i = j + match[0].length; + + if (match[1] === undefined) continue; + + for (const colorCode of match[1].split(";")) { + switch (parseInt(colorCode)) { + case 0: + // reset + state.bold = false; + state.italic = false; + state.underline = false; + state.strikethrough = false; + state.foregroundColor = null; + state.backgroundColor = null; + break; + case 1: + state.bold = true; + break; + case 3: + state.italic = true; + break; + case 4: + state.underline = true; + break; + case 9: + state.strikethrough = true; + break; + case 22: + state.bold = false; + break; + case 23: + state.italic = false; + break; + case 24: + state.underline = false; + break; + case 29: + state.strikethrough = false; + break; + case 31: + state.foregroundColor = "fg-red"; + break; + case 32: + state.foregroundColor = "fg-green"; + break; + case 33: + state.foregroundColor = "fg-yellow"; + break; + case 34: + state.foregroundColor = "fg-blue"; + break; + case 35: + state.foregroundColor = "fg-magenta"; + break; + case 36: + state.foregroundColor = "fg-cyan"; + break; + case 37: + state.foregroundColor = "fg-white"; + break; + case 30: + case 39: + state.foregroundColor = null; + break; + case 40: + state.backgroundColor = "bg-black"; + break; + case 41: + state.backgroundColor = "bg-red"; + break; + case 42: + state.backgroundColor = "bg-green"; + break; + case 43: + state.backgroundColor = "bg-yellow"; + break; + case 44: + state.backgroundColor = "bg-blue"; + break; + case 45: + state.backgroundColor = "bg-magenta"; + break; + case 46: + state.backgroundColor = "bg-cyan"; + break; + case 47: + state.backgroundColor = "bg-white"; + break; + case 49: + state.backgroundColor = null; + break; + } + } + } + addSpan(text.substring(i)); + + return pre; + } + loadData() { this.hass.callApi("get", "hassio/supervisor/logs").then( - (info) => { - this.log = info; + (text) => { + while (this.$.content.lastChild) { + this.$.content.removeChild(this.$.content.lastChild); + } + this.$.content.appendChild(HassioSupervisorLog.parseLogsToPre(text)); }, () => { - this.log = "Error fetching logs"; + while (this.$.content.lastChild) { + this.$.content.removeChild(this.$.content.lastChild); + } + this.$.content.appendChild( + HassioSupervisorLog.parseLogsToPre("Error fetching logs") + ); } ); } - refreshTapped() { + refresh() { this.loadData(); } } From 8f90cbc693858567b3e114b2966d4f07c215d813 Mon Sep 17 00:00:00 2001 From: Otto Winter Date: Fri, 30 Nov 2018 14:38:47 +0100 Subject: [PATCH 2/6] Use innerHTML and color classes --- hassio/src/system/hassio-supervisor-log.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js index b60c6046c334..898785a9622a 100644 --- a/hassio/src/system/hassio-supervisor-log.js +++ b/hassio/src/system/hassio-supervisor-log.js @@ -34,7 +34,7 @@ class HassioSupervisorLog extends PolymerElement { color: rgb(222, 56, 43); } .fg-green { - /* color: rgb(57, 181, 74); */ + color: rgb(57, 181, 74); } .fg-yellow { color: rgb(255, 199, 6); @@ -252,12 +252,8 @@ class HassioSupervisorLog extends PolymerElement { this.$.content.appendChild(HassioSupervisorLog.parseLogsToPre(text)); }, () => { - while (this.$.content.lastChild) { - this.$.content.removeChild(this.$.content.lastChild); - } - this.$.content.appendChild( - HassioSupervisorLog.parseLogsToPre("Error fetching logs") - ); + this.$.content.innerHTML = + 'Error fetching logs'; } ); } From b718e665e44dafbc9cffb3afe6bc1c654d7ebf26 Mon Sep 17 00:00:00 2001 From: Otto Winter Date: Fri, 30 Nov 2018 15:39:10 +0100 Subject: [PATCH 3/6] Refactor ANSI function --- hassio/src/addon-view/hassio-addon-logs.js | 210 +------------------- hassio/src/ansi-to-html.js | 212 +++++++++++++++++++++ hassio/src/system/hassio-supervisor-log.js | 211 +------------------- 3 files changed, 218 insertions(+), 415 deletions(-) create mode 100644 hassio/src/ansi-to-html.js diff --git a/hassio/src/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js index fe55044d12f2..d93be1750e6a 100644 --- a/hassio/src/addon-view/hassio-addon-logs.js +++ b/hassio/src/addon-view/hassio-addon-logs.js @@ -2,6 +2,7 @@ import "@polymer/paper-button/paper-button"; import "@polymer/paper-card/paper-card"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; import "../../../src/resources/ha-style"; @@ -18,67 +19,8 @@ class HassioAddonLogs extends PolymerElement { white-space: pre-wrap; overflow-wrap: break-word; } - .bold { - font-weight: bold; - } - .italic { - font-style: italic; - } - .underline { - text-decoration: underline; - } - .strikethrough { - text-decoration: line-through; - } - .underline.strikethrough { - text-decoration: underline line-through; - } - .fg-red { - color: rgb(222, 56, 43); - } - .fg-green { - color: rgb(57, 181, 74); - } - .fg-yellow { - color: rgb(255, 199, 6); - } - .fg-blue { - color: rgb(0, 111, 184); - } - .fg-magenta { - color: rgb(118, 38, 113); - } - .fg-cyan { - color: rgb(44, 181, 233); - } - .fg-white { - color: rgb(204, 204, 204); - } - .bg-black { - background-color: rgb(0, 0, 0); - } - .bg-red { - background-color: rgb(222, 56, 43); - } - .bg-green { - background-color: rgb(57, 181, 74); - } - .bg-yellow { - background-color: rgb(255, 199, 6); - } - .bg-blue { - background-color: rgb(0, 111, 184); - } - .bg-magenta { - background-color: rgb(118, 38, 113); - } - .bg-cyan { - background-color: rgb(44, 181, 233); - } - .bg-white { - background-color: rgb(204, 204, 204); - } + ${ANSI_HTML_STYLE}
@@ -109,152 +51,6 @@ class HassioAddonLogs extends PolymerElement { this.refresh(); } - static parseLogsToPre(text) { - const pre = document.createElement("pre"); - const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; - let i = 0; - - const state = { - bold: false, - italic: false, - underline: false, - strikethrough: false, - foregroundColor: null, - backgroundColor: null, - }; - - const addSpan = (content) => { - const span = document.createElement("span"); - if (state.bold) { - span.classList.add("bold"); - } - if (state.italic) { - span.classList.add("italic"); - } - if (state.underline) { - span.classList.add("underline"); - } - if (state.strikethrough) { - span.classList.add("strikethrough"); - } - if (state.foregroundColor !== null) { - span.classList.add(state.foregroundColor); - } - if (state.backgroundColor !== null) { - span.classList.add(state.backgroundColor); - } - span.appendChild(document.createTextNode(content)); - pre.appendChild(span); - }; - - /* eslint-disable no-constant-condition */ - while (true) { - const match = re.exec(text); - if (match === null) { - break; - } - - const j = match.index; - addSpan(text.substring(i, j)); - i = j + match[0].length; - - if (match[1] === undefined) continue; - - for (const colorCode of match[1].split(";")) { - switch (parseInt(colorCode)) { - case 0: - // reset - state.bold = false; - state.italic = false; - state.underline = false; - state.strikethrough = false; - state.foregroundColor = null; - state.backgroundColor = null; - break; - case 1: - state.bold = true; - break; - case 3: - state.italic = true; - break; - case 4: - state.underline = true; - break; - case 9: - state.strikethrough = true; - break; - case 22: - state.bold = false; - break; - case 23: - state.italic = false; - break; - case 24: - state.underline = false; - break; - case 29: - state.strikethrough = false; - break; - case 31: - state.foregroundColor = "fg-red"; - break; - case 32: - state.foregroundColor = "fg-green"; - break; - case 33: - state.foregroundColor = "fg-yellow"; - break; - case 34: - state.foregroundColor = "fg-blue"; - break; - case 35: - state.foregroundColor = "fg-magenta"; - break; - case 36: - state.foregroundColor = "fg-cyan"; - break; - case 37: - state.foregroundColor = "fg-white"; - break; - case 30: - case 39: - state.foregroundColor = null; - break; - case 40: - state.backgroundColor = "bg-black"; - break; - case 41: - state.backgroundColor = "bg-red"; - break; - case 42: - state.backgroundColor = "bg-green"; - break; - case 43: - state.backgroundColor = "bg-yellow"; - break; - case 44: - state.backgroundColor = "bg-blue"; - break; - case 45: - state.backgroundColor = "bg-magenta"; - break; - case 46: - state.backgroundColor = "bg-cyan"; - break; - case 47: - state.backgroundColor = "bg-white"; - break; - case 49: - state.backgroundColor = null; - break; - } - } - } - addSpan(text.substring(i)); - - return pre; - } - refresh() { this.hass .callApi("get", `hassio/addons/${this.addonSlug}/logs`) @@ -262,7 +58,7 @@ class HassioAddonLogs extends PolymerElement { while (this.$.content.lastChild) { this.$.content.removeChild(this.$.content.lastChild); } - this.$.content.appendChild(HassioAddonLogs.parseLogsToPre(text)); + this.$.content.appendChild(parseTextToColoredPre(text)); }); } } diff --git a/hassio/src/ansi-to-html.js b/hassio/src/ansi-to-html.js new file mode 100644 index 000000000000..ec24b5e1f243 --- /dev/null +++ b/hassio/src/ansi-to-html.js @@ -0,0 +1,212 @@ +import { html } from "@polymer/polymer/lib/utils/html-tag"; + +export const ANSI_HTML_STYLE = html` + +`; + +export function parseTextToColoredPre(text) { + const pre = document.createElement("pre"); + const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; + let i = 0; + + const state = { + bold: false, + italic: false, + underline: false, + strikethrough: false, + foregroundColor: null, + backgroundColor: null, + }; + + const addSpan = (content) => { + const span = document.createElement("span"); + if (state.bold) { + span.classList.add("bold"); + } + if (state.italic) { + span.classList.add("italic"); + } + if (state.underline) { + span.classList.add("underline"); + } + if (state.strikethrough) { + span.classList.add("strikethrough"); + } + if (state.foregroundColor !== null) { + span.classList.add(`fg-${state.foregroundColor}`); + } + if (state.backgroundColor !== null) { + span.classList.add(`bg-${state.backgroundColor}`); + } + span.appendChild(document.createTextNode(content)); + pre.appendChild(span); + }; + + /* eslint-disable no-constant-condition */ + while (true) { + const match = re.exec(text); + if (match === null) { + break; + } + + const j = match.index; + addSpan(text.substring(i, j)); + i = j + match[0].length; + + if (match[1] === undefined) continue; + + for (const colorCode of match[1].split(";")) { + switch (parseInt(colorCode)) { + case 0: + // reset + state.bold = false; + state.italic = false; + state.underline = false; + state.strikethrough = false; + state.foregroundColor = null; + state.backgroundColor = null; + break; + case 1: + state.bold = true; + break; + case 3: + state.italic = true; + break; + case 4: + state.underline = true; + break; + case 9: + state.strikethrough = true; + break; + case 22: + state.bold = false; + break; + case 23: + state.italic = false; + break; + case 24: + state.underline = false; + break; + case 29: + state.strikethrough = false; + break; + case 31: + state.foregroundColor = "red"; + break; + case 32: + state.foregroundColor = "green"; + break; + case 33: + state.foregroundColor = "yellow"; + break; + case 34: + state.foregroundColor = "blue"; + break; + case 35: + state.foregroundColor = "magenta"; + break; + case 36: + state.foregroundColor = "cyan"; + break; + case 37: + state.foregroundColor = "white"; + break; + case 30: + case 39: + state.foregroundColor = null; + break; + case 40: + state.backgroundColor = "black"; + break; + case 41: + state.backgroundColor = "red"; + break; + case 42: + state.backgroundColor = "green"; + break; + case 43: + state.backgroundColor = "yellow"; + break; + case 44: + state.backgroundColor = "blue"; + break; + case 45: + state.backgroundColor = "magenta"; + break; + case 46: + state.backgroundColor = "cyan"; + break; + case 47: + state.backgroundColor = "white"; + break; + case 49: + state.backgroundColor = null; + break; + } + } + } + addSpan(text.substring(i)); + + return pre; +} diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js index 898785a9622a..931544eb43f5 100644 --- a/hassio/src/system/hassio-supervisor-log.js +++ b/hassio/src/system/hassio-supervisor-log.js @@ -2,6 +2,7 @@ import "@polymer/paper-button/paper-button"; import "@polymer/paper-card/paper-card"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; class HassioSupervisorLog extends PolymerElement { static get template() { @@ -15,67 +16,8 @@ class HassioSupervisorLog extends PolymerElement { white-space: pre-wrap; overflow-wrap: break-word; } - .bold { - font-weight: bold; - } - .italic { - font-style: italic; - } - .underline { - text-decoration: underline; - } - .strikethrough { - text-decoration: line-through; - } - .underline.strikethrough { - text-decoration: underline line-through; - } - .fg-red { - color: rgb(222, 56, 43); - } - .fg-green { - color: rgb(57, 181, 74); - } - .fg-yellow { - color: rgb(255, 199, 6); - } - .fg-blue { - color: rgb(0, 111, 184); - } - .fg-magenta { - color: rgb(118, 38, 113); - } - .fg-cyan { - color: rgb(44, 181, 233); - } - .fg-white { - color: rgb(204, 204, 204); - } - .bg-black { - background-color: rgb(0, 0, 0); - } - .bg-red { - background-color: rgb(222, 56, 43); - } - .bg-green { - background-color: rgb(57, 181, 74); - } - .bg-yellow { - background-color: rgb(255, 199, 6); - } - .bg-blue { - background-color: rgb(0, 111, 184); - } - .bg-magenta { - background-color: rgb(118, 38, 113); - } - .bg-cyan { - background-color: rgb(44, 181, 233); - } - .bg-white { - background-color: rgb(204, 204, 204); - } + ${ANSI_HTML_STYLE}
@@ -88,7 +30,6 @@ class HassioSupervisorLog extends PolymerElement { static get properties() { return { hass: Object, - log: String, }; } @@ -97,159 +38,13 @@ class HassioSupervisorLog extends PolymerElement { this.loadData(); } - static parseLogsToPre(text) { - const pre = document.createElement("pre"); - const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; - let i = 0; - - const state = { - bold: false, - italic: false, - underline: false, - strikethrough: false, - foregroundColor: null, - backgroundColor: null, - }; - - const addSpan = (content) => { - const span = document.createElement("span"); - if (state.bold) { - span.classList.add("bold"); - } - if (state.italic) { - span.classList.add("italic"); - } - if (state.underline) { - span.classList.add("underline"); - } - if (state.strikethrough) { - span.classList.add("strikethrough"); - } - if (state.foregroundColor !== null) { - span.classList.add(state.foregroundColor); - } - if (state.backgroundColor !== null) { - span.classList.add(state.backgroundColor); - } - span.appendChild(document.createTextNode(content)); - pre.appendChild(span); - }; - - /* eslint-disable no-constant-condition */ - while (true) { - const match = re.exec(text); - if (match === null) { - break; - } - - const j = match.index; - addSpan(text.substring(i, j)); - i = j + match[0].length; - - if (match[1] === undefined) continue; - - for (const colorCode of match[1].split(";")) { - switch (parseInt(colorCode)) { - case 0: - // reset - state.bold = false; - state.italic = false; - state.underline = false; - state.strikethrough = false; - state.foregroundColor = null; - state.backgroundColor = null; - break; - case 1: - state.bold = true; - break; - case 3: - state.italic = true; - break; - case 4: - state.underline = true; - break; - case 9: - state.strikethrough = true; - break; - case 22: - state.bold = false; - break; - case 23: - state.italic = false; - break; - case 24: - state.underline = false; - break; - case 29: - state.strikethrough = false; - break; - case 31: - state.foregroundColor = "fg-red"; - break; - case 32: - state.foregroundColor = "fg-green"; - break; - case 33: - state.foregroundColor = "fg-yellow"; - break; - case 34: - state.foregroundColor = "fg-blue"; - break; - case 35: - state.foregroundColor = "fg-magenta"; - break; - case 36: - state.foregroundColor = "fg-cyan"; - break; - case 37: - state.foregroundColor = "fg-white"; - break; - case 30: - case 39: - state.foregroundColor = null; - break; - case 40: - state.backgroundColor = "bg-black"; - break; - case 41: - state.backgroundColor = "bg-red"; - break; - case 42: - state.backgroundColor = "bg-green"; - break; - case 43: - state.backgroundColor = "bg-yellow"; - break; - case 44: - state.backgroundColor = "bg-blue"; - break; - case 45: - state.backgroundColor = "bg-magenta"; - break; - case 46: - state.backgroundColor = "bg-cyan"; - break; - case 47: - state.backgroundColor = "bg-white"; - break; - case 49: - state.backgroundColor = null; - break; - } - } - } - addSpan(text.substring(i)); - - return pre; - } - loadData() { this.hass.callApi("get", "hassio/supervisor/logs").then( (text) => { while (this.$.content.lastChild) { this.$.content.removeChild(this.$.content.lastChild); } - this.$.content.appendChild(HassioSupervisorLog.parseLogsToPre(text)); + this.$.content.appendChild(parseTextToColoredPre(text)); }, () => { this.$.content.innerHTML = From e01dbb73c2350990f31dd75bf1fca38c3e1e52bb Mon Sep 17 00:00:00 2001 From: Otto Winter Date: Fri, 30 Nov 2018 15:52:55 +0100 Subject: [PATCH 4/6] Readability --- hassio/src/ansi-to-html.js | 33 +++++++++++++-------------------- 1 file changed, 13 insertions(+), 20 deletions(-) diff --git a/hassio/src/ansi-to-html.js b/hassio/src/ansi-to-html.js index ec24b5e1f243..f94d64252398 100644 --- a/hassio/src/ansi-to-html.js +++ b/hassio/src/ansi-to-html.js @@ -81,24 +81,14 @@ export function parseTextToColoredPre(text) { const addSpan = (content) => { const span = document.createElement("span"); - if (state.bold) { - span.classList.add("bold"); - } - if (state.italic) { - span.classList.add("italic"); - } - if (state.underline) { - span.classList.add("underline"); - } - if (state.strikethrough) { - span.classList.add("strikethrough"); - } - if (state.foregroundColor !== null) { + if (state.bold) span.classList.add("bold"); + if (state.italic) span.classList.add("italic"); + if (state.underline) span.classList.add("underline"); + if (state.strikethrough) span.classList.add("strikethrough"); + if (state.foregroundColor !== null) span.classList.add(`fg-${state.foregroundColor}`); - } - if (state.backgroundColor !== null) { + if (state.backgroundColor !== null) span.classList.add(`bg-${state.backgroundColor}`); - } span.appendChild(document.createTextNode(content)); pre.appendChild(span); }; @@ -106,9 +96,7 @@ export function parseTextToColoredPre(text) { /* eslint-disable no-constant-condition */ while (true) { const match = re.exec(text); - if (match === null) { - break; - } + if (match === null) break; const j = match.index; addSpan(text.substring(i, j)); @@ -151,6 +139,10 @@ export function parseTextToColoredPre(text) { case 29: state.strikethrough = false; break; + case 30: + // foreground black + state.foregroundColor = null; + break; case 31: state.foregroundColor = "red"; break; @@ -172,8 +164,8 @@ export function parseTextToColoredPre(text) { case 37: state.foregroundColor = "white"; break; - case 30: case 39: + // foreground reset state.foregroundColor = null; break; case 40: @@ -201,6 +193,7 @@ export function parseTextToColoredPre(text) { state.backgroundColor = "white"; break; case 49: + // background reset state.backgroundColor = null; break; } From 9a3b3044feb04b1f8828d5c02b711c728c405780 Mon Sep 17 00:00:00 2001 From: Otto Winter Date: Fri, 30 Nov 2018 16:45:48 +0100 Subject: [PATCH 5/6] Make green text black in supervisor logs --- hassio/src/system/hassio-supervisor-log.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/hassio/src/system/hassio-supervisor-log.js b/hassio/src/system/hassio-supervisor-log.js index 931544eb43f5..985cc2372c0b 100644 --- a/hassio/src/system/hassio-supervisor-log.js +++ b/hassio/src/system/hassio-supervisor-log.js @@ -16,6 +16,9 @@ class HassioSupervisorLog extends PolymerElement { white-space: pre-wrap; overflow-wrap: break-word; } + .fg-green { + color: var(--primary-text-color) !important; + } ${ANSI_HTML_STYLE} From 7115a5a6c78611efce448a8d7c3af6afbfced5c2 Mon Sep 17 00:00:00 2001 From: Otto Winter Date: Fri, 30 Nov 2018 16:50:03 +0100 Subject: [PATCH 6/6] Use assigning while loop --- hassio/src/ansi-to-html.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/hassio/src/ansi-to-html.js b/hassio/src/ansi-to-html.js index f94d64252398..d9ab04a690a3 100644 --- a/hassio/src/ansi-to-html.js +++ b/hassio/src/ansi-to-html.js @@ -93,11 +93,9 @@ export function parseTextToColoredPre(text) { pre.appendChild(span); }; - /* eslint-disable no-constant-condition */ - while (true) { - const match = re.exec(text); - if (match === null) break; - + /* eslint-disable no-cond-assign */ + let match; + while ((match = re.exec(text)) !== null) { const j = match.index; addSpan(text.substring(i, j)); i = j + match[0].length;