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

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`
       <div class="error-log-intro">
@@ -72,26 +47,9 @@ class ErrorLogCard extends LitElement {
           ? html`
               <ha-card outlined>
                 <div class="header">
-                  ${this.hass.userData?.showAdvanced &&
+                  <h2>
-                  isComponentLoaded(this.hass, "hassio")
+                    ${this.hass.localize("ui.panel.config.logs.full_logs")}
-                    ? html`
+                  </h2>
-                        <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>
-                      `
-                    : ""}
                   <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")) {
+    if (isComponentLoaded(this.hass, "hassio")) {
-      this._selectedLogProvider = "core";
-    }
-
-    if (this._selectedLogProvider) {
       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)
         );

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`
+              <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
+          ${this._selectedLogProvider === "core"
-            .hass=${this.hass}
+            ? html`
-            .filter=${this._filter}
+                <system-log-card
-          ></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;
+        }
       `,
     ];
   }

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