Move Provider Selection to Menu on top header (#12443)

This commit is contained in:
Zack Barett 2022-04-26 23:27:15 -05:00 committed by GitHub
parent 53b6e31881
commit 6747375a1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 111 additions and 81 deletions

View File

@ -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`
<div class="error-log-intro">
@ -72,26 +47,9 @@ class ErrorLogCard extends LitElement {
? html`
<ha-card outlined>
<div class="header">
${this.hass.userData?.showAdvanced &&
isComponentLoaded(this.hass, "hassio")
? html`
<ha-select
.label=${this.hass.localize(
"ui.panel.config.logs.log_provider"
)}
@selected=${this._setLogProvider}
.value=${this._selectedLogProvider}
>
${logProviders.map(
(provider) => html`
<mwc-list-item .value=${provider.key}>
${provider.name}
</mwc-list-item>
`
)}
</ha-select>
`
: ""}
<h2>
${this.hass.localize("ui.panel.config.logs.full_logs")}
</h2>
<ha-icon-button
.path=${mdiRefresh}
@click=${this._refresh}
@ -105,7 +63,7 @@ class ErrorLogCard extends LitElement {
${!this._logHTML
? html`
<mwc-button raised @click=${this._refreshLogs}>
${this.hass.localize("ui.panel.config.logs.load_full_log")}
${this.hass.localize("ui.panel.config.logs.load_logs")}
</mwc-button>
`
: ""}
@ -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<void> {
const provider = ev.target.value;
if (provider === this._selectedLogProvider) {
return;
}
this._selectedLogProvider = provider;
this._refreshLogs();
}
private async _refresh(ev: CustomEvent): Promise<void> {
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`<ha-ansi-to-html .content=${log}>
</ha-ansi-to-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)
);

View File

@ -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`
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
<mwc-button
slot="trigger"
.label=${logProviders.find(
(p) => p.key === this._selectedLogProvider
)!.name}
>
<ha-svg-icon
slot="trailingIcon"
.path=${mdiChevronDown}
></ha-svg-icon>
</mwc-button>
${logProviders.map(
(provider) => html`
<mwc-list-item
?selected=${provider.key === this._selectedLogProvider}
.provider=${provider.key}
@click=${this._selectProvider}
>
${provider.name}
</mwc-list-item>
`
)}
</ha-button-menu>
`
: ""}
${search}
<div class="content">
<system-log-card
.hass=${this.hass}
.filter=${this._filter}
></system-log-card>
${this._selectedLogProvider === "core"
? html`
<system-log-card
.hass=${this.hass}
.filter=${this._filter}
></system-log-card>
`
: ""}
<error-log-card
.hass=${this.hass}
.filter=${this._filter}
.provider=${this._selectedLogProvider}
.show=${this._selectedLogProvider !== "core"}
></error-log-card>
</div>
</hass-subpage>
`;
}
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;
}
`,
];
}

View File

@ -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",