diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 1ad78d38ae..e1818d6e7f 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -16,52 +16,27 @@ import "../../../components/ha-ansi-to-html"; import "../../../components/ha-card"; import "../../../components/ha-icon-button"; import "../../../components/ha-select"; -import { fetchErrorLog, LogProvider } from "../../../data/error_log"; +import { fetchErrorLog } from "../../../data/error_log"; import { extractApiErrorMessage } from "../../../data/hassio/common"; import { fetchHassioLogs } from "../../../data/hassio/supervisor"; import { HomeAssistant } from "../../../types"; -const logProviders: LogProvider[] = [ - { - key: "supervisor", - name: "Supervisor", - }, - { - key: "core", - name: "Home Assistant Core", - }, - { - key: "host", - name: "Host", - }, - { - key: "dns", - name: "DNS", - }, - { - key: "audio", - name: "Audio", - }, - { - key: "multicast", - name: "Multicast", - }, -]; - @customElement("error-log-card") class ErrorLogCard extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property() public filter = ""; + @property() public provider!: string; + + @property({ type: Boolean, attribute: true }) public show = false; + @state() private _isLogLoaded = false; - @state() private _logHTML!: TemplateResult[] | TemplateResult | string; + @state() private _logHTML?: TemplateResult[] | TemplateResult | string; @state() private _error?: string; - @state() private _selectedLogProvider?: string; - protected render(): TemplateResult { return html`
@@ -72,26 +47,9 @@ class ErrorLogCard extends LitElement { ? html`
- ${this.hass.userData?.showAdvanced && - isComponentLoaded(this.hass, "hassio") - ? html` - - ${logProviders.map( - (provider) => html` - - ${provider.name} - - ` - )} - - ` - : ""} +

+ ${this.hass.localize("ui.panel.config.logs.full_logs")} +

- ${this.hass.localize("ui.panel.config.logs.load_full_log")} + ${this.hass.localize("ui.panel.config.logs.load_logs")} ` : ""} @@ -116,7 +74,7 @@ class ErrorLogCard extends LitElement { protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); - if (this.hass?.config.safe_mode) { + if (this.hass?.config.safe_mode || this.show) { this.hass.loadFragmentTranslation("config"); this._refreshLogs(); } @@ -125,21 +83,19 @@ class ErrorLogCard extends LitElement { protected updated(changedProps) { super.updated(changedProps); - if (changedProps.has("filter") && this._isLogLoaded) { + if (changedProps.has("provider")) { + this._logHTML = undefined; + } + + if ( + (changedProps.has("filter") && this._isLogLoaded) || + (changedProps.has("show") && this.show) || + (changedProps.has("provider") && this.show) + ) { this._refreshLogs(); } } - private async _setLogProvider(ev): Promise { - const provider = ev.target.value; - if (provider === this._selectedLogProvider) { - return; - } - - this._selectedLogProvider = provider; - this._refreshLogs(); - } - private async _refresh(ev: CustomEvent): Promise { const button = ev.currentTarget as any; button.progress = true; @@ -152,13 +108,9 @@ class ErrorLogCard extends LitElement { this._logHTML = this.hass.localize("ui.panel.config.logs.loading_log"); let log: string; - if (!this._selectedLogProvider && isComponentLoaded(this.hass, "hassio")) { - this._selectedLogProvider = "core"; - } - - if (this._selectedLogProvider) { + if (isComponentLoaded(this.hass, "hassio")) { try { - log = await fetchHassioLogs(this.hass, this._selectedLogProvider); + log = await fetchHassioLogs(this.hass, this.provider); this._logHTML = html` `; this._isLogLoaded = true; @@ -167,7 +119,7 @@ class ErrorLogCard extends LitElement { this._error = this.hass.localize( "ui.panel.config.logs.failed_get_logs", "provider", - this._selectedLogProvider, + this.provider, "error", extractApiErrorMessage(err) ); diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index f3f7915b30..803cc7e3f0 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -1,7 +1,11 @@ +import { mdiChevronDown } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { extractSearchParam } from "../../../common/url/search-params"; +import "../../../components/ha-button-menu"; import "../../../components/search-input"; +import { LogProvider } from "../../../data/error_log"; import "../../../layouts/hass-subpage"; import "../../../layouts/hass-tabs-subpage"; import { haStyle } from "../../../resources/styles"; @@ -10,22 +14,51 @@ import "./error-log-card"; import "./system-log-card"; import type { SystemLogCard } from "./system-log-card"; +const logProviders: LogProvider[] = [ + { + key: "core", + name: "Home Assistant Core", + }, + { + key: "supervisor", + name: "Supervisor", + }, + { + key: "host", + name: "Host", + }, + { + key: "dns", + name: "DNS", + }, + { + key: "audio", + name: "Audio", + }, + { + key: "multicast", + name: "Multicast", + }, +]; + @customElement("ha-config-logs") export class HaConfigLogs extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public narrow!: boolean; + @property({ type: Boolean }) public narrow!: boolean; - @property() public isWide!: boolean; + @property({ type: Boolean }) public isWide!: boolean; - @property() public showAdvanced!: boolean; + @property({ type: Boolean }) public showAdvanced!: boolean; - @property() public route!: Route; + @property({ attribute: false }) public route!: Route; @state() private _filter = extractSearchParam("filter") || ""; @query("system-log-card", true) private systemLog?: SystemLogCard; + @state() private _selectedLogProvider = "core"; + public connectedCallback() { super.connectedCallback(); if (this.systemLog && this.systemLog.loaded) { @@ -68,21 +101,60 @@ export class HaConfigLogs extends LitElement { .header=${this.hass.localize("ui.panel.config.logs.caption")} back-path="/config/system" > + ${isComponentLoaded(this.hass, "hassio") && + this.hass.userData?.showAdvanced + ? html` + + p.key === this._selectedLogProvider + )!.name} + > + + + ${logProviders.map( + (provider) => html` + + ${provider.name} + + ` + )} + + ` + : ""} ${search}
- + ${this._selectedLogProvider === "core" + ? html` + + ` + : ""}
`; } + private _selectProvider(ev) { + this._selectedLogProvider = (ev.currentTarget as any).provider; + } + static get styles(): CSSResultGroup { return [ haStyle, @@ -108,6 +180,11 @@ export class HaConfigLogs extends LitElement { .content { direction: ltr; } + + mwc-button[slot="trigger"] { + --mdc-theme-primary: var(--primary-text-color); + --mdc-icon-size: 36px; + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index b134b283f0..d97778537e 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1564,7 +1564,7 @@ "search": "Search logs", "failed_get_logs": "Failed to get {provider} logs, {error}", "no_issues_search": "No issues found for search term ''{term}''", - "load_full_log": "Load Full Home Assistant Log", + "load_logs": "Load Full Logs", "loading_log": "Loading error log…", "no_errors": "No errors have been reported", "no_issues": "There are no new issues!", @@ -1581,7 +1581,8 @@ "debug": "DEBUG" }, "custom_integration": "custom integration", - "error_from_custom_integration": "This error originated from a custom integration." + "error_from_custom_integration": "This error originated from a custom integration.", + "full_logs": "Full logs" }, "lovelace": { "caption": "Dashboards",