From 1fa67a8fc57591c278d3e69decb9d1080b52fade Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 8 Apr 2020 20:24:22 +0000 Subject: [PATCH 01/10] Add more log types to the system tab --- hassio/src/system/hassio-supervisor-log.ts | 60 +++++++++++++++++++++- src/data/hassio/supervisor.ts | 16 ++++++ 2 files changed, 74 insertions(+), 2 deletions(-) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index a111969bb7f6..cfef2b18732a 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -1,4 +1,7 @@ import "@material/mwc-button"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-card/paper-card"; import { css, @@ -15,12 +18,24 @@ import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; import { hassioStyle } from "../resources/hassio-style"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; -import { fetchSupervisorLogs } from "../../../src/data/hassio/supervisor"; +import { + fetchAudioLogs, + fetchDNSLogs, + fetchHostLogs, + fetchMulticastLogs, + fetchSupervisorLogs, +} from "../../../src/data/hassio/supervisor"; @customElement("hassio-supervisor-log") class HassioSupervisorLog extends LitElement { @property() public hass!: HomeAssistant; @property() private _error?: string; + @property() private _logSource: + | "Supervisor" + | "Host" + | "DNS" + | "Audio" + | "Multicast" = "Supervisor"; @query("#content") private _logContent!: HTMLDivElement; public async connectedCallback(): Promise { @@ -36,6 +51,24 @@ class HassioSupervisorLog extends LitElement {
${this._error}
` : ""} + + + ${["Supervisor", "Host", "DNS", "Audio", "Multicast"].map( + (source) => { + return html` + ${source} + `; + } + )} + +
Refresh @@ -56,18 +89,41 @@ class HassioSupervisorLog extends LitElement { pre { white-space: pre-wrap; } + paper-dropdown-menu { + padding: 0 2%; + width: 96%; + } .errors { color: var(--google-red-500); margin-bottom: 16px; } + .card-content { + padding-top: 0px; + } `, ]; } + private async _setLogSource(ev): Promise { + const source = ev.detail.item.getAttribute("source"); + this._logSource = source; + await this._loadData(); + } + private async _loadData(): Promise { this._error = undefined; + let content; try { - const content = await fetchSupervisorLogs(this.hass); + if (this._logSource === "Supervisor") + content = await fetchSupervisorLogs(this.hass); + else if (this._logSource == "Host") + content = await fetchHostLogs(this.hass); + else if (this._logSource == "DNS") + content = await fetchDNSLogs(this.hass); + else if (this._logSource == "Audio") + content = await fetchAudioLogs(this.hass); + else if (this._logSource == "Multicast") + content = await fetchMulticastLogs(this.hass); while (this._logContent.lastChild) { this._logContent.removeChild(this._logContent.lastChild as Node); } diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts index bed2c34d0ad6..77b646221930 100644 --- a/src/data/hassio/supervisor.ts +++ b/src/data/hassio/supervisor.ts @@ -41,6 +41,22 @@ export const fetchSupervisorLogs = async (hass: HomeAssistant) => { return hass.callApi("GET", "hassio/supervisor/logs"); }; +export const fetchHostLogs = async (hass: HomeAssistant) => { + return hass.callApi("GET", "hassio/host/logs"); +}; + +export const fetchDNSLogs = async (hass: HomeAssistant) => { + return hass.callApi("GET", "hassio/dns/logs"); +}; + +export const fetchMulticastLogs = async (hass: HomeAssistant) => { + return hass.callApi("GET", "hassio/multicast/logs"); +}; + +export const fetchAudioLogs = async (hass: HomeAssistant) => { + return hass.callApi("GET", "hassio/audio/logs"); +}; + export const createHassioSession = async (hass: HomeAssistant) => { const response = await hass.callApi>( "POST", From cf801ad3f37f15c8d7a6b374f5b55bde369a415f Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 8 Apr 2020 20:44:57 +0000 Subject: [PATCH 02/10] Fix lint issues --- hassio/src/system/hassio-supervisor-log.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index cfef2b18732a..4263cabe0247 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -112,18 +112,19 @@ class HassioSupervisorLog extends LitElement { private async _loadData(): Promise { this._error = undefined; - let content; + let content!: string; try { - if (this._logSource === "Supervisor") + if (this._logSource === "Supervisor") { content = await fetchSupervisorLogs(this.hass); - else if (this._logSource == "Host") + } else if (this._logSource == "Host") { content = await fetchHostLogs(this.hass); - else if (this._logSource == "DNS") + } else if (this._logSource == "DNS") { content = await fetchDNSLogs(this.hass); - else if (this._logSource == "Audio") + } else if (this._logSource == "Audio") { content = await fetchAudioLogs(this.hass); - else if (this._logSource == "Multicast") + } else if (this._logSource == "Multicast") { content = await fetchMulticastLogs(this.hass); + } while (this._logContent.lastChild) { this._logContent.removeChild(this._logContent.lastChild as Node); } From d21f9a98faca7b0dac2ee837d79b546e61bdfc67 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 9 Apr 2020 07:20:02 +0000 Subject: [PATCH 03/10] Fix more lint issues --- hassio/src/system/hassio-supervisor-log.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 4263cabe0247..932987bdd15f 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -116,13 +116,13 @@ class HassioSupervisorLog extends LitElement { try { if (this._logSource === "Supervisor") { content = await fetchSupervisorLogs(this.hass); - } else if (this._logSource == "Host") { + } else if (this._logSource === "Host") { content = await fetchHostLogs(this.hass); - } else if (this._logSource == "DNS") { + } else if (this._logSource === "DNS") { content = await fetchDNSLogs(this.hass); - } else if (this._logSource == "Audio") { + } else if (this._logSource === "Audio") { content = await fetchAudioLogs(this.hass); - } else if (this._logSource == "Multicast") { + } else if (this._logSource === "Multicast") { content = await fetchMulticastLogs(this.hass); } while (this._logContent.lastChild) { From 562f5c64b25632ef466f0f0cf5e16c62c2672582 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 15 Apr 2020 18:20:35 +0000 Subject: [PATCH 04/10] Add loading screen while waiting for logs. --- hassio/src/system/hassio-supervisor-log.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index b62d408e07b6..d12b3afb3c80 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -26,6 +26,7 @@ import { import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; import { hassioStyle } from "../resources/hassio-style"; +import "../../../src/layouts/loading-screen"; @customElement("hassio-supervisor-log") class HassioSupervisorLog extends LitElement { @@ -114,6 +115,11 @@ class HassioSupervisorLog extends LitElement { private async _loadData(): Promise { this._error = undefined; let content!: string; + while (this._logContent.lastChild) { + this._logContent.removeChild(this._logContent.lastChild as Node); + } + const loading = document.createElement("loading-screen"); + this._logContent.appendChild(loading); try { if (this._logSource === "Supervisor") { content = await fetchSupervisorLogs(this.hass); From 732c999324f394197774801846d0a059ff2b4d8b Mon Sep 17 00:00:00 2001 From: ludeeus Date: Wed, 15 Apr 2020 18:32:44 +0000 Subject: [PATCH 05/10] Only show log selector if advenced user. --- hassio/src/system/hassio-supervisor-log.ts | 56 ++++++++++++---------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index d12b3afb3c80..8cd0e2d780eb 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -30,7 +30,7 @@ import "../../../src/layouts/loading-screen"; @customElement("hassio-supervisor-log") class HassioSupervisorLog extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @property() private _error?: string; @@ -52,26 +52,32 @@ class HassioSupervisorLog extends LitElement { return html` ${this._error ? html`
${this._error}
` : ""} - - - ${["Supervisor", "Host", "DNS", "Audio", "Multicast"].map( - (source) => { - return html` - ${source} - `; - } - )} - - + ${this.hass.userData?.showAdvanced + ? html` + + + ${["Supervisor", "Host", "DNS", "Audio", "Multicast"].map( + (source) => { + return html` + ${source} + `; + } + )} + + + ` + : ""} -
+
+ +
Refresh
@@ -115,11 +121,13 @@ class HassioSupervisorLog extends LitElement { private async _loadData(): Promise { this._error = undefined; let content!: string; - while (this._logContent.lastChild) { - this._logContent.removeChild(this._logContent.lastChild as Node); + if (this._logContent) { + while (this._logContent?.lastChild) { + this._logContent.removeChild(this._logContent.lastChild as Node); + } + const loading = document.createElement("loading-screen"); + this._logContent.appendChild(loading); } - const loading = document.createElement("loading-screen"); - this._logContent.appendChild(loading); try { if (this._logSource === "Supervisor") { content = await fetchSupervisorLogs(this.hass); From 1438c5e0c5c270a9751899b5027b6d9ec866ebd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Thu, 16 Apr 2020 12:19:46 +0200 Subject: [PATCH 06/10] Update hassio/src/system/hassio-supervisor-log.ts Co-Authored-By: Bram Kragten --- hassio/src/system/hassio-supervisor-log.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 8cd0e2d780eb..49ad99e29dcd 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -76,7 +76,7 @@ class HassioSupervisorLog extends LitElement { : ""}
- + ${until(this._content, html``)}
Refresh From 9ca52a7bba6129b9a615b73ad2a488fb56462fcd Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 16 Apr 2020 13:13:49 +0000 Subject: [PATCH 07/10] Log adjustments --- hassio/src/addon-view/hassio-addon-logs.ts | 33 ++- hassio/src/ansi-to-html.ts | 223 ---------------- hassio/src/components/hassio-ansi-to-html.ts | 259 +++++++++++++++++++ hassio/src/system/hassio-supervisor-log.ts | 119 +++++---- src/data/hassio/supervisor.ts | 23 +- 5 files changed, 342 insertions(+), 315 deletions(-) delete mode 100644 hassio/src/ansi-to-html.ts create mode 100644 hassio/src/components/hassio-ansi-to-html.ts diff --git a/hassio/src/addon-view/hassio-addon-logs.ts b/hassio/src/addon-view/hassio-addon-logs.ts index b5ad7f38e9ac..37f0203c344b 100644 --- a/hassio/src/addon-view/hassio-addon-logs.ts +++ b/hassio/src/addon-view/hassio-addon-logs.ts @@ -7,7 +7,6 @@ import { html, LitElement, property, - query, TemplateResult, } from "lit-element"; import { @@ -16,18 +15,18 @@ import { } from "../../../src/data/hassio/addon"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; -import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; +import "../components/hassio-ansi-to-html"; import { hassioStyle } from "../resources/hassio-style"; @customElement("hassio-addon-logs") class HassioAddonLogs extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public addon!: HassioAddonDetails; + @property({ attribute: false }) public addon!: HassioAddonDetails; @property() private _error?: string; - @query("#content") private _logContent!: any; + @property() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); @@ -38,7 +37,13 @@ class HassioAddonLogs extends LitElement { return html` ${this._error ? html`
${this._error}
` : ""} -
+
+ ${this._content + ? html`` + : html``} +
Refresh
@@ -50,17 +55,11 @@ class HassioAddonLogs extends LitElement { return [ haStyle, hassioStyle, - ANSI_HTML_STYLE, css` :host, paper-card { display: block; } - pre { - overflow-x: auto; - white-space: pre-wrap; - overflow-wrap: break-word; - } .errors { color: var(--google-red-500); margin-bottom: 16px; @@ -72,13 +71,11 @@ class HassioAddonLogs extends LitElement { private async _loadData(): Promise { this._error = undefined; try { - const content = await fetchHassioAddonLogs(this.hass, this.addon.slug); - while (this._logContent.lastChild) { - this._logContent.removeChild(this._logContent.lastChild as Node); - } - this._logContent.appendChild(parseTextToColoredPre(content)); + this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug); } catch (err) { - this._error = `Failed to get addon logs, ${err.body?.message || err}`; + this._error = `Failed to get supervisor logs, ${ + err.body?.message || err + }`; } } diff --git a/hassio/src/ansi-to-html.ts b/hassio/src/ansi-to-html.ts deleted file mode 100644 index 0601f5ba5a70..000000000000 --- a/hassio/src/ansi-to-html.ts +++ /dev/null @@ -1,223 +0,0 @@ -import { css } from "lit-element"; - -interface State { - bold: boolean; - italic: boolean; - underline: boolean; - strikethrough: boolean; - foregroundColor: null | string; - backgroundColor: null | string; -} - -export const ANSI_HTML_STYLE = css` - .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); - } -`; - -export function parseTextToColoredPre(text) { - const pre = document.createElement("pre"); - const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; - let i = 0; - - const state: 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-cond-assign */ - let match; - // eslint-disable-next-line - while ((match = re.exec(text)) !== null) { - const j = match!.index; - addSpan(text.substring(i, j)); - i = j + match[0].length; - - if (match[1] === undefined) { - continue; - } - - match[1].split(";").forEach((colorCode: string) => { - switch (parseInt(colorCode, 10)) { - 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 30: - // foreground black - state.foregroundColor = null; - 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 39: - // foreground reset - 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: - // background reset - state.backgroundColor = null; - break; - } - }); - } - addSpan(text.substring(i)); - - return pre; -} diff --git a/hassio/src/components/hassio-ansi-to-html.ts b/hassio/src/components/hassio-ansi-to-html.ts new file mode 100644 index 000000000000..a059ca4e9b82 --- /dev/null +++ b/hassio/src/components/hassio-ansi-to-html.ts @@ -0,0 +1,259 @@ +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; + +interface State { + bold: boolean; + italic: boolean; + underline: boolean; + strikethrough: boolean; + foregroundColor: null | string; + backgroundColor: null | string; +} + +export const ANSI_HTML_STYLE = css` + .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); + } +`; + +@customElement("hassio-ansi-to-html") +class HassioAnsiToHtml extends LitElement { + @property() public content!: string; + + public render(): TemplateResult | void { + return html`${this._parseTextToColoredPre(this.content)}`; + } + + static get styles(): CSSResult[] { + return [ + ANSI_HTML_STYLE, + css` + pre { + overflow-x: auto; + white-space: pre-wrap; + overflow-wrap: break-word; + } + `, + ]; + } + + private _parseTextToColoredPre(text) { + const pre = document.createElement("pre"); + const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g; + let i = 0; + + const state: 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-cond-assign */ + let match; + // eslint-disable-next-line + while ((match = re.exec(text)) !== null) { + const j = match!.index; + addSpan(text.substring(i, j)); + i = j + match[0].length; + + if (match[1] === undefined) { + continue; + } + + match[1].split(";").forEach((colorCode: string) => { + switch (parseInt(colorCode, 10)) { + 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 30: + // foreground black + state.foregroundColor = null; + 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 39: + // foreground reset + 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: + // background reset + state.backgroundColor = null; + break; + } + }); + } + addSpan(text.substring(i)); + + return pre; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hassio-ansi-to-html": HassioAnsiToHtml; + } +} diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 49ad99e29dcd..52fa96ef9361 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -10,38 +10,59 @@ import { html, LitElement, property, - query, TemplateResult, } from "lit-element"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant } from "../../../src/types"; -import { - fetchAudioLogs, - fetchDNSLogs, - fetchHostLogs, - fetchMulticastLogs, - fetchSupervisorLogs, -} from "../../../src/data/hassio/supervisor"; - -import { ANSI_HTML_STYLE, parseTextToColoredPre } from "../ansi-to-html"; +import { fetchHassioLogs } from "../../../src/data/hassio/supervisor"; + +import "../components/hassio-ansi-to-html"; import { hassioStyle } from "../resources/hassio-style"; import "../../../src/layouts/loading-screen"; +interface LogProvider { + key: string; + name: string; +} + +const logProviders: LogProvider[] = [ + { + key: "supervisor", + name: "Supervisor", + }, + { + key: "host", + name: "Host", + }, + { + key: "dns", + name: "DNS", + }, + { + key: "audio", + name: "Audio", + }, + { + key: "multicast", + name: "Multicast", + }, +]; + @customElement("hassio-supervisor-log") class HassioSupervisorLog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property() private _error?: string; - @property() private _logSource: - | "Supervisor" - | "Host" - | "DNS" - | "Audio" - | "Multicast" = "Supervisor"; + @property() private _selectedLogProvider: + | "supervisor" + | "host" + | "dns" + | "audio" + | "multicast" = "supervisor"; - @query("#content") private _logContent!: HTMLDivElement; + @property() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); @@ -55,28 +76,32 @@ class HassioSupervisorLog extends LitElement { ${this.hass.userData?.showAdvanced ? html` - ${["Supervisor", "Host", "DNS", "Audio", "Multicast"].map( - (source) => { - return html` - ${source} - `; - } - )} + ${logProviders.map((provider) => { + return html` + ${provider.name} + `; + })} ` : ""}
- ${until(this._content, html``)} + ${this._content + ? html`` + : html``}
Refresh @@ -89,7 +114,6 @@ class HassioSupervisorLog extends LitElement { return [ haStyle, hassioStyle, - ANSI_HTML_STYLE, css` paper-card { width: 100%; @@ -112,38 +136,21 @@ class HassioSupervisorLog extends LitElement { ]; } - private async _setLogSource(ev): Promise { - const source = ev.detail.item.getAttribute("source"); - this._logSource = source; + private async _setLogProvider(ev): Promise { + const provider = ev.detail.item.getAttribute("provider"); + this._selectedLogProvider = provider; await this._loadData(); } private async _loadData(): Promise { this._error = undefined; - let content!: string; - if (this._logContent) { - while (this._logContent?.lastChild) { - this._logContent.removeChild(this._logContent.lastChild as Node); - } - const loading = document.createElement("loading-screen"); - this._logContent.appendChild(loading); - } + this._content = undefined; + try { - if (this._logSource === "Supervisor") { - content = await fetchSupervisorLogs(this.hass); - } else if (this._logSource === "Host") { - content = await fetchHostLogs(this.hass); - } else if (this._logSource === "DNS") { - content = await fetchDNSLogs(this.hass); - } else if (this._logSource === "Audio") { - content = await fetchAudioLogs(this.hass); - } else if (this._logSource === "Multicast") { - content = await fetchMulticastLogs(this.hass); - } - while (this._logContent.lastChild) { - this._logContent.removeChild(this._logContent.lastChild as Node); - } - this._logContent.appendChild(parseTextToColoredPre(content)); + this._content = await fetchHassioLogs( + this.hass, + this._selectedLogProvider + ); } catch (err) { this._error = `Failed to get supervisor logs, ${ err.body?.message || err diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts index 99f89b2d96c6..8788b88f1418 100644 --- a/src/data/hassio/supervisor.ts +++ b/src/data/hassio/supervisor.ts @@ -37,24 +37,11 @@ export const fetchHassioSupervisorInfo = async (hass: HomeAssistant) => { ); }; -export const fetchSupervisorLogs = async (hass: HomeAssistant) => { - return hass.callApi("GET", "hassio/supervisor/logs"); -}; - -export const fetchHostLogs = async (hass: HomeAssistant) => { - return hass.callApi("GET", "hassio/host/logs"); -}; - -export const fetchDNSLogs = async (hass: HomeAssistant) => { - return hass.callApi("GET", "hassio/dns/logs"); -}; - -export const fetchMulticastLogs = async (hass: HomeAssistant) => { - return hass.callApi("GET", "hassio/multicast/logs"); -}; - -export const fetchAudioLogs = async (hass: HomeAssistant) => { - return hass.callApi("GET", "hassio/audio/logs"); +export const fetchHassioLogs = async ( + hass: HomeAssistant, + provider: string +) => { + return hass.callApi("GET", `hassio/${provider}/logs`); }; export const createHassioSession = async (hass: HomeAssistant) => { From d76bd03cf0f696fa43884adc20e8b239113d9a65 Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 16 Apr 2020 13:50:33 +0000 Subject: [PATCH 08/10] Remove the need for exported ANSI_HTML_STYLE --- hassio/src/components/hassio-ansi-to-html.ts | 142 +++++++++---------- 1 file changed, 68 insertions(+), 74 deletions(-) diff --git a/hassio/src/components/hassio-ansi-to-html.ts b/hassio/src/components/hassio-ansi-to-html.ts index a059ca4e9b82..b553367b8aeb 100644 --- a/hassio/src/components/hassio-ansi-to-html.ts +++ b/hassio/src/components/hassio-ansi-to-html.ts @@ -17,69 +17,6 @@ interface State { backgroundColor: null | string; } -export const ANSI_HTML_STYLE = css` - .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); - } -`; - @customElement("hassio-ansi-to-html") class HassioAnsiToHtml extends LitElement { @property() public content!: string; @@ -88,17 +25,74 @@ class HassioAnsiToHtml extends LitElement { return html`${this._parseTextToColoredPre(this.content)}`; } - static get styles(): CSSResult[] { - return [ - ANSI_HTML_STYLE, - css` - pre { - overflow-x: auto; - white-space: pre-wrap; - overflow-wrap: break-word; - } - `, - ]; + static get styles(): CSSResult { + return css` + 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); + } + `; } private _parseTextToColoredPre(text) { From 07cd3782ac8b03b0c73c5ab63b0a1b3b8442b62b Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 16 Apr 2020 13:52:24 +0000 Subject: [PATCH 09/10] Add core as a log provider --- hassio/src/system/hassio-supervisor-log.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 52fa96ef9361..4e16abd81615 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -31,6 +31,10 @@ const logProviders: LogProvider[] = [ key: "supervisor", name: "Supervisor", }, + { + key: "core", + name: "Core", + }, { key: "host", name: "Host", From 0332af7cc61bb47c2f491659db4ec0577e74069d Mon Sep 17 00:00:00 2001 From: ludeeus Date: Thu, 16 Apr 2020 14:01:42 +0000 Subject: [PATCH 10/10] Removed unneeded hints --- hassio/src/system/hassio-supervisor-log.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 4e16abd81615..ff5b426f0e51 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -59,12 +59,7 @@ class HassioSupervisorLog extends LitElement { @property() private _error?: string; - @property() private _selectedLogProvider: - | "supervisor" - | "host" - | "dns" - | "audio" - | "multicast" = "supervisor"; + @property() private _selectedLogProvider = "supervisor"; @property() private _content?: string;