Add buttons to download logs (#14404)

Co-authored-by: Joakim Sørensen <ludeeus@ludeeus.dev>

src/data/error_log.ts

@@ -7,3 +7,5 @@ export interface LogProvider {
 
 export const fetchErrorLog = (hass: HomeAssistant) =>
   hass.callApi<string>("GET", "error_log");
+
+export const getErrorLogDownloadUrl = "/api/error_log";

src/data/hassio/supervisor.ts

@@ -183,6 +183,11 @@ export const fetchHassioLogs = async (hass: HomeAssistant, provider: string) =>
     `hassio/${provider.includes("_") ? `addons/${provider}` : provider}/logs`
   );
 
+export const getHassioLogDownloadUrl = (provider: string) =>
+  `/api/hassio/${
+    provider.includes("_") ? `addons/${provider}` : provider
+  }/logs`;
+
 export const setSupervisorOption = async (
   hass: HomeAssistant,
   data: SupervisorOptions

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import { mdiRefresh } from "@mdi/js";
+import { mdiRefresh, mdiDownload } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -16,11 +16,19 @@ import "../../../components/ha-ansi-to-html";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-select";
-import { fetchErrorLog } from "../../../data/error_log";
+import "../../../components/ha-svg-icon";
+
+import { getSignedPath } from "../../../data/auth";
+
+import { fetchErrorLog, getErrorLogDownloadUrl } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
-import { fetchHassioLogs } from "../../../data/hassio/supervisor";
+import {
+  fetchHassioLogs,
+  getHassioLogDownloadUrl,
+} from "../../../data/hassio/supervisor";
 import { HomeAssistant } from "../../../types";
 import { debounce } from "../../../common/util/debounce";
+import { fileDownload } from "../../../util/file_download";
 
 @customElement("error-log-card")
 class ErrorLogCard extends LitElement {
@@ -49,13 +57,22 @@ class ErrorLogCard extends LitElement {
               <ha-card outlined>
                 <div class="header">
                   <h2>
-                    ${this.hass.localize("ui.panel.config.logs.full_logs")}
+                    ${this.hass.localize("ui.panel.config.logs.show_full_logs")}
                   </h2>
-                  <ha-icon-button
-                    .path=${mdiRefresh}
-                    @click=${this._refresh}
-                    .label=${this.hass.localize("ui.common.refresh")}
-                  ></ha-icon-button>
+                  <div>
+                    <ha-icon-button
+                      .path=${mdiRefresh}
+                      @click=${this._refresh}
+                      .label=${this.hass.localize("ui.common.refresh")}
+                    ></ha-icon-button>
+                    <ha-icon-button
+                      .path=${mdiDownload}
+                      @click=${this._downloadFullLog}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.logs.download_full_log"
+                      )}
+                    ></ha-icon-button>
+                  </div>
                 </div>
                 <div class="card-content error-log">${this._logHTML}</div>
               </ha-card>
@@ -63,6 +80,10 @@ class ErrorLogCard extends LitElement {
           : ""}
         ${!this._logHTML
           ? html`
+              <mwc-button outlined @click=${this._downloadFullLog}>
+                <ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
+                ${this.hass.localize("ui.panel.config.logs.download_full_log")}
+              </mwc-button>
               <mwc-button raised @click=${this._refreshLogs}>
                 ${this.hass.localize("ui.panel.config.logs.load_logs")}
               </mwc-button>
@@ -115,6 +136,20 @@ class ErrorLogCard extends LitElement {
     button.progress = false;
   }
 
+  private async _downloadFullLog(): Promise<void> {
+    const timeString = new Date().toISOString().replace(/:/g, "-");
+    const downloadUrl =
+      this.provider !== "core"
+        ? getHassioLogDownloadUrl(this.provider)
+        : getErrorLogDownloadUrl;
+    const logFileName =
+      this.provider !== "core"
+        ? `${this.provider}_${timeString}.log`
+        : `home-assistant_${timeString}.log`;
+    const signedUrl = await getSignedPath(this.hass, downloadUrl);
+    fileDownload(signedUrl.path, logFileName);
+  }
+
   private async _refreshLogs(): Promise<void> {
     this._logHTML = this.hass.localize("ui.panel.config.logs.loading_log");
     let log: string;

src/translations/en.json

@@ -1772,7 +1772,8 @@
           },
           "custom_integration": "custom integration",
           "error_from_custom_integration": "This error originated from a custom integration.",
-          "full_logs": "Full logs"
+          "show_full_logs": "Show full logs",
+          "download_full_log": "Download full log"
         },
         "lovelace": {
           "caption": "Dashboards",