move download logs button, switch between raw and normal logs (#22721)

hassio/src/addon-view/log/hassio-addon-log-tab.ts

@@ -47,7 +47,6 @@ class HassioAddonLogDashboard extends LitElement {
           .localizeFunc=${this.supervisor.localize}
           .header=${this.addon.name}
           .provider=${this.addon.slug}
-          show
           .filter=${this._filter}
         >
         </error-log-card>

src/panels/config/logs/error-log-card.ts

@@ -11,6 +11,7 @@ import {
   mdiRefresh,
   mdiWrap,
   mdiWrapDisabled,
+  mdiFolderTextOutline,
 } from "@mdi/js";
 import {
   css,
@@ -58,7 +59,7 @@ import {
   downloadFileSupported,
   fileDownload,
 } from "../../../util/file_download";
-import type { HASSDomEvent } from "../../../common/dom/fire_event";
+import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event";
 import type { ConnectionStatus } from "../../../data/connection-status";
 import { atLeastVersion } from "../../../common/config/version";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -79,9 +80,10 @@ class ErrorLogCard extends LitElement {
 
   @property() public header?: string;
 
-  @property() public provider!: string;
+  @property() public provider?: string;
 
-  @property({ type: Boolean, attribute: true }) public show = false;
+  @property({ attribute: "allow-switch", type: Boolean }) public allowSwitch =
+    false;
 
   @query(".error-log") private _logElement?: HTMLElement;
 
@@ -130,26 +132,32 @@ class ErrorLogCard extends LitElement {
 
   @state() private _wrapLines = true;
 
-  @state() private _downloadSupported;
+  @state() private _downloadSupported?: boolean;
 
-  @state() private _logsFileLink;
+  @state() private _logsFileLink?: string;
 
   protected render(): TemplateResult {
+    const streaming =
+      this._streamSupported &&
+      this.provider &&
+      isComponentLoaded(this.hass, "hassio") &&
+      this._loadingState !== "loading";
+
+    const hasBoots = this._streamSupported && Array.isArray(this._boots);
+
     const localize = this.localizeFunc || this.hass.localize;
     return html`
       <div class="error-log-intro">
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : nothing}
-        <ha-card outlined class=${classMap({ hidden: this.show === false })}>
+        <ha-card outlined>
           <div class="header">
             <h1 class="card-header">
               ${this.header || localize("ui.panel.config.logs.show_full_logs")}
             </h1>
             <div class="action-buttons">
-              ${this._streamSupported &&
-              Array.isArray(this._boots) &&
-              this._showBootsSelect
+              ${hasBoots && this._showBootsSelect
                 ? html`
                     <ha-assist-chip
                       .title=${localize(
@@ -175,7 +183,7 @@ class ErrorLogCard extends LitElement {
                       id="boots-menu"
                       positioning="fixed"
                     >
-                      ${this._boots.map(
+                      ${this._boots!.map(
                         (boot) => html`
                           <ha-md-menu-item
                             .value=${boot}
@@ -232,27 +240,40 @@ class ErrorLogCard extends LitElement {
                   `ui.panel.config.logs.${this._wrapLines ? "full_width" : "wrap_lines"}`
                 )}
               ></ha-icon-button>
-              ${!this._streamSupported || this._error
+              ${!streaming || this._error
                 ? html`<ha-icon-button
                     .path=${mdiRefresh}
                     @click=${this._loadLogs}
                     .label=${localize("ui.common.refresh")}
                   ></ha-icon-button>`
                 : nothing}
-              ${this._streamSupported && Array.isArray(this._boots)
+              ${(this.allowSwitch && this.provider === "core") || hasBoots
                 ? html`
                     <ha-button-menu @action=${this._handleOverflowAction}>
                       <ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
                       </ha-icon-button>
-                      <ha-list-item graphic="icon">
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${mdiFormatListNumbered}
-                        ></ha-svg-icon>
-                        ${localize(
-                          `ui.panel.config.logs.${this._showBootsSelect ? "hide" : "show"}_haos_boots`
-                        )}
-                      </ha-list-item>
+                      ${this.allowSwitch && this.provider === "core"
+                        ? html`<ha-list-item graphic="icon">
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiFolderTextOutline}
+                            ></ha-svg-icon>
+                            ${this.hass.localize(
+                              "ui.panel.config.logs.show_condensed_logs"
+                            )}
+                          </ha-list-item>`
+                        : nothing}
+                      ${hasBoots
+                        ? html`<ha-list-item graphic="icon">
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${mdiFormatListNumbered}
+                            ></ha-svg-icon>
+                            ${localize(
+                              `ui.panel.config.logs.${this._showBootsSelect ? "hide" : "show"}_haos_boots`
+                            )}
+                          </ha-list-item>`
+                        : nothing}
                     </ha-button-menu>
                   `
                 : nothing}
@@ -305,48 +326,34 @@ class ErrorLogCard extends LitElement {
               slot="trailingIcon"
             ></ha-svg-icon>
           </ha-button>
-          ${this._streamSupported &&
-          this._loadingState !== "loading" &&
-          this._boot === 0 &&
-          !this._error
+          ${streaming && this._boot === 0 && !this._error
             ? html`<div class="live-indicator">
                 <ha-svg-icon path=${mdiCircle}></ha-svg-icon>
                 Live
               </div>`
             : nothing}
         </ha-card>
-        ${this.show === false
-          ? html`
-              ${this._downloadSupported
-                ? html`
-                    <ha-button outlined @click=${this._downloadLogs}>
-                      <ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
-                      ${localize("ui.panel.config.logs.download_logs")}
-                    </ha-button>
-                  `
-                : nothing}
-              <mwc-button raised @click=${this._showLogs}>
-                ${localize("ui.panel.config.logs.load_logs")}
-              </mwc-button>
-            `
-          : nothing}
       </div>
     `;
   }
 
-  public connectedCallback() {
-    super.connectedCallback();
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (changedProps.has("provider")) {
+      this._boot = 0;
+      this._loadLogs();
+    }
+    if (this.hasUpdated) {
+      return;
+    }
+    this._streamSupported = atLeastVersion(this.hass.config.version, 2024, 11);
+    this._downloadSupported = downloadFileSupported(this.hass);
+    // just needs to be loaded once, because only the host endpoints provide boots information
+    this._loadBoots();
 
-    if (this._streamSupported === undefined) {
-      this._streamSupported = atLeastVersion(
-        this.hass.config.version,
-        2024,
-        11
-      );
-    }
-    if (this._downloadSupported === undefined && this.hass) {
-      this._downloadSupported = downloadFileSupported(this.hass);
-    }
+    window.addEventListener("connection-status", this._handleConnectionStatus);
+
+    this.hass.loadFragmentTranslation("config");
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
@@ -356,28 +363,11 @@ class ErrorLogCard extends LitElement {
 
     this._scrolledToTopController.callback = this._handleTopScroll;
     this._scrolledToTopController.observe(this._scrollTopMarkerElement!);
-
-    window.addEventListener("connection-status", this._handleConnectionStatus);
-
-    if (this.hass?.config.recovery_mode || this.show) {
-      this.hass.loadFragmentTranslation("config");
-    }
-
-    // just needs to be loaded once, because only the host endpoints provide boots information
-    this._loadBoots();
   }
 
   protected updated(changedProps) {
     super.updated(changedProps);
 
-    if (
-      (changedProps.has("show") && this.show) ||
-      (changedProps.has("provider") && this.show)
-    ) {
-      this._boot = 0;
-      this._loadLogs();
-    }
-
     if (this._newLogsIndicator && this._scrolledToBottomController.value) {
       this._newLogsIndicator = false;
     }
@@ -411,7 +401,7 @@ class ErrorLogCard extends LitElement {
   }
 
   private async _downloadLogs(): Promise<void> {
-    if (this._streamSupported) {
+    if (this._streamSupported && this.provider) {
       showDownloadLogsDialog(this, {
         header: this.header,
         provider: this.provider,
@@ -433,10 +423,6 @@ class ErrorLogCard extends LitElement {
     }
   }
 
-  private _showLogs(): void {
-    this.show = true;
-  }
-
   private async _loadLogs(): Promise<void> {
     this._error = undefined;
     this._loadingState = "loading";
@@ -448,15 +434,16 @@ class ErrorLogCard extends LitElement {
     try {
       if (this._logStreamAborter) {
         this._logStreamAborter.abort();
+        this._logStreamAborter = undefined;
       }
 
-      this._logStreamAborter = new AbortController();
-
       if (
         this._streamSupported &&
         isComponentLoaded(this.hass, "hassio") &&
         this.provider
       ) {
+        this._logStreamAborter = new AbortController();
+
         // check if there are any logs at all
         const testResponse = await fetchHassioLogs(
           this.hass,
@@ -599,60 +586,62 @@ class ErrorLogCard extends LitElement {
     if (ev.detail === "disconnected" && this._logStreamAborter) {
       this._logStreamAborter.abort();
     }
-    if (ev.detail === "connected" && this.show) {
+    if (ev.detail === "connected") {
       this._loadLogs();
     }
   };
 
   private async _loadMoreLogs() {
     if (
-      this._firstCursor &&
-      this._loadingPrevState !== "loading" &&
-      this._loadingState === "loaded" &&
-      this._logElement
+      !this._firstCursor ||
+      this._loadingPrevState === "loading" ||
+      this._loadingState !== "loaded" ||
+      !this._logElement ||
+      !this.provider
     ) {
-      const scrolledToBottom = this._scrolledToBottomController.value;
-      const scrollPositionFromBottom =
-        this._logElement.scrollHeight - this._logElement.scrollTop;
-      this._loadingPrevState = "loading";
-      const response = await fetchHassioLogs(
-        this.hass,
-        this.provider,
-        `entries=${this._firstCursor}:-100:100`,
-        this._boot
-      );
+      return;
+    }
+    const scrolledToBottom = this._scrolledToBottomController.value;
+    const scrollPositionFromBottom =
+      this._logElement.scrollHeight - this._logElement.scrollTop;
+    this._loadingPrevState = "loading";
+    const response = await fetchHassioLogs(
+      this.hass,
+      this.provider,
+      `entries=${this._firstCursor}:-100:100`,
+      this._boot
+    );
 
-      if (response.headers.has("X-First-Cursor")) {
-        if (this._firstCursor === response.headers.get("X-First-Cursor")!) {
-          this._loadingPrevState = "end";
-          return;
-        }
-        this._firstCursor = response.headers.get("X-First-Cursor")!;
-      }
-
-      const body = await response.text();
-
-      if (body) {
-        const lines = body
-          .split("\n")
-          .filter((line) => line.trim() !== "")
-          .reverse();
-
-        this._ansiToHtmlElement?.parseLinesToColoredPre(lines, true);
-        this._numberOfLines! += lines.length;
-        this._loadingPrevState = "loaded";
-      } else {
+    if (response.headers.has("X-First-Cursor")) {
+      if (this._firstCursor === response.headers.get("X-First-Cursor")!) {
         this._loadingPrevState = "end";
+        return;
       }
+      this._firstCursor = response.headers.get("X-First-Cursor")!;
+    }
 
-      if (scrolledToBottom) {
-        this._scrollToBottom();
-      } else if (this._loadingPrevState !== "end" && this._logElement) {
-        window.requestAnimationFrame(() => {
-          this._logElement!.scrollTop =
-            this._logElement!.scrollHeight - scrollPositionFromBottom;
-        });
-      }
+    const body = await response.text();
+
+    if (body) {
+      const lines = body
+        .split("\n")
+        .filter((line) => line.trim() !== "")
+        .reverse();
+
+      this._ansiToHtmlElement?.parseLinesToColoredPre(lines, true);
+      this._numberOfLines! += lines.length;
+      this._loadingPrevState = "loaded";
+    } else {
+      this._loadingPrevState = "end";
+    }
+
+    if (scrolledToBottom) {
+      this._scrollToBottom();
+    } else if (this._loadingPrevState !== "end" && this._logElement) {
+      window.requestAnimationFrame(() => {
+        this._logElement!.scrollTop =
+          this._logElement!.scrollHeight - scrollPositionFromBottom;
+      });
     }
   }
 
@@ -694,7 +683,15 @@ class ErrorLogCard extends LitElement {
   }
 
   private _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
+    let index = ev.detail.index;
+    if (this.provider === "core") {
+      index--;
+    }
+    switch (index) {
+      case -1:
+        // @ts-ignore
+        fireEvent(this, "switch-log-view");
+        break;
       case 0:
         this._showBootsSelect = !this._showBootsSelect;
         break;

src/panels/config/logs/ha-config-logs.ts

@@ -3,20 +3,20 @@ import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { navigate } from "../../../common/navigate";
 import { extractSearchParam } from "../../../common/url/search-params";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-button";
+import "../../../components/ha-button-menu";
 import "../../../components/search-input";
 import type { LogProvider } from "../../../data/error_log";
 import { fetchHassioAddonsInfo } from "../../../data/hassio/addon";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "./error-log-card";
 import "./system-log-card";
 import type { SystemLogCard } from "./system-log-card";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import { navigate } from "../../../common/navigate";
 
 const logProviders: LogProvider[] = [
   {
@@ -57,6 +57,8 @@ export class HaConfigLogs extends LitElement {
 
   @state() private _filter = extractSearchParam("filter") || "";
 
+  @state() private _detail = false;
+
   @query("system-log-card") private systemLog?: SystemLogCard;
 
   @state() private _selectedLogProvider = "core";
@@ -141,7 +143,7 @@ export class HaConfigLogs extends LitElement {
           : ""}
         ${search}
         <div class="content">
-          ${this._selectedLogProvider === "core"
+          ${this._selectedLogProvider === "core" && !this._detail
             ? html`
                 <system-log-card
                   .hass=${this.hass}
@@ -149,23 +151,28 @@ export class HaConfigLogs extends LitElement {
                     (p) => p.key === this._selectedLogProvider
                   )!.name}
                   .filter=${this._filter}
+                  @switch-log-view=${this._showDetail}
                 ></system-log-card>
               `
-            : ""}
-          <error-log-card
-            .hass=${this.hass}
-            .header=${this._logProviders.find(
-              (p) => p.key === this._selectedLogProvider
-            )!.name}
-            .filter=${this._filter}
-            .provider=${this._selectedLogProvider}
-            .show=${this._selectedLogProvider !== "core"}
-          ></error-log-card>
+            : html`<error-log-card
+                .hass=${this.hass}
+                .header=${this._logProviders.find(
+                  (p) => p.key === this._selectedLogProvider
+                )!.name}
+                .filter=${this._filter}
+                .provider=${this._selectedLogProvider}
+                @switch-log-view=${this._showDetail}
+                allow-switch
+              ></error-log-card>`}
         </div>
       </hass-subpage>
     `;
   }
 
+  private _showDetail() {
+    this._detail = !this._detail;
+  }
+
   private _selectProvider(ev) {
     this._selectedLogProvider = (ev.currentTarget as any).provider;
     this._filter = "";

src/panels/config/logs/system-log-card.ts

@@ -1,16 +1,20 @@
-import { mdiRefresh } from "@mdi/js";
 import "@material/mwc-list/mwc-list";
+import { mdiDotsVertical, mdiDownload, mdiRefresh, mdiText } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-list-item";
+import { getSignedPath } from "../../../data/auth";
+import { getErrorLogDownloadUrl } from "../../../data/error_log";
 import { domainToName } from "../../../data/integration";
 import type { LoggedError } from "../../../data/system_log";
 import {
@@ -19,6 +23,7 @@ import {
   isCustomIntegrationError,
 } from "../../../data/system_log";
 import type { HomeAssistant } from "../../../types";
+import { fileDownload } from "../../../util/file_download";
 import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
 
@@ -104,11 +109,34 @@ export class SystemLogCard extends LitElement {
             : html`
                 <div class="header">
                   <h1 class="card-header">${this.header || "Logs"}</h1>
-                  <ha-icon-button
-                    .path=${mdiRefresh}
-                    @click=${this.fetchData}
-                    .label=${this.hass.localize("ui.common.refresh")}
-                  ></ha-icon-button>
+                  <div class="header-buttons">
+                    <ha-icon-button
+                      .path=${mdiDownload}
+                      @click=${this._downloadLogs}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.logs.download_logs"
+                      )}
+                    ></ha-icon-button>
+                    <ha-icon-button
+                      .path=${mdiRefresh}
+                      @click=${this.fetchData}
+                      .label=${this.hass.localize("ui.common.refresh")}
+                    ></ha-icon-button>
+
+                    <ha-button-menu @action=${this._handleOverflowAction}>
+                      <ha-icon-button slot="trigger" .path=${mdiDotsVertical}>
+                      </ha-icon-button>
+                      <ha-list-item graphic="icon">
+                        <ha-svg-icon
+                          slot="graphic"
+                          .path=${mdiText}
+                        ></ha-svg-icon>
+                        ${this.hass.localize(
+                          "ui.panel.config.logs.show_full_logs"
+                        )}
+                      </ha-list-item>
+                    </ha-button-menu>
+                  </div>
                 </div>
                 ${this._items.length === 0
                   ? html`
@@ -195,6 +223,19 @@ export class SystemLogCard extends LitElement {
     }
   }
 
+  private _handleOverflowAction() {
+    // @ts-ignore
+    fireEvent(this, "switch-log-view");
+  }
+
+  private async _downloadLogs() {
+    const timeString = new Date().toISOString().replace(/:/g, "-");
+    const downloadUrl = getErrorLogDownloadUrl;
+    const logFileName = `home-assistant_${timeString}.log`;
+    const signedUrl = await getSignedPath(this.hass, downloadUrl);
+    fileDownload(signedUrl.path, logFileName);
+  }
+
   private _openLog(ev: Event): void {
     const item = (ev.currentTarget as any).logItem;
     showSystemLogDetailDialog(this, { item });
@@ -203,7 +244,7 @@ export class SystemLogCard extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ha-card {
-        padding-top: 16px;
+        padding-top: 8px;
       }
 
       .header {
@@ -212,6 +253,11 @@ export class SystemLogCard extends LitElement {
         padding: 0 16px;
       }
 
+      .header-buttons {
+        display: flex;
+        align-items: center;
+      }
+
       .card-header {
         color: var(--ha-card-header-color, var(--primary-text-color));
         font-family: var(--ha-card-header-font-family, inherit);
@@ -243,6 +289,10 @@ export class SystemLogCard extends LitElement {
         color: var(--warning-color);
       }
 
+      .card-content {
+        border-top: 1px solid var(--divider-color);
+      }
+
       .card-actions,
       .empty-content {
         direction: var(--direction);

src/panels/lovelace/cards/hui-recovery-mode-card.ts

@@ -31,7 +31,7 @@ export class HuiRecoveryModeCard extends LitElement implements LovelaceCard {
             "ui.panel.lovelace.cards.recovery-mode.description"
           )}
         </div>
-        <error-log-card .hass=${this.hass}></error-log-card>
+        <error-log-card .hass=${this.hass} provider="core"></error-log-card>
       </ha-card>
     `;
   }

src/translations/en.json

@@ -2470,9 +2470,9 @@
           "search": "Search logs",
           "failed_get_logs": "Failed to get {provider} logs, {error}",
           "no_issues_search": "No issues found for search term ''{term}''",
-          "load_logs": "Load full logs",
+          "load_logs": "Load logs",
           "nr_of_lines": "Number of lines",
-          "loading_log": "Loading full log…",
+          "loading_log": "Loading log…",
           "no_errors": "No errors have been reported",
           "no_issues": "There are no new issues!",
           "clear": "Clear",
@@ -2489,7 +2489,8 @@
           },
           "custom_integration": "custom integration",
           "error_from_custom_integration": "This error originated from a custom integration.",
-          "show_full_logs": "Show full logs",
+          "show_full_logs": "Show raw logs",
+          "show_condensed_logs": "Show condensed logs",
           "select_number_of_lines": "Select number of lines to download",
           "lines": "Lines",
           "download_logs": "Download logs",