Config logs streaming

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -37,7 +37,6 @@ import "./config/hassio-addon-config";
 import "./config/hassio-addon-network";
 import "./hassio-addon-router";
 import "./info/hassio-addon-info";
-import "./log/hassio-addon-logs";
 
 @customElement("hassio-addon-dashboard")
 class HassioAddonDashboard extends LitElement {
@@ -161,16 +160,11 @@ class HassioAddonDashboard extends LitElement {
           margin-bottom: 24px;
           width: 600px;
         }
-        hassio-addon-logs {
-          max-width: calc(100% - 8px);
-          min-width: 600px;
-        }
         @media only screen and (max-width: 600px) {
           hassio-addon-info,
           hassio-addon-network,
           hassio-addon-audio,
-          hassio-addon-config,
-          hassio-addon-logs {
+          hassio-addon-config {
             max-width: 100%;
             min-width: 100%;
           }

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

@@ -1,12 +1,14 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
-import "./hassio-addon-logs";
+import "../../../../src/panels/config/logs/error-log-card";
+import "../../../../src/components/search-input";
+import { extractSearchParam } from "../../../../src/common/url/search-params";
 
 @customElement("hassio-addon-log-tab")
 class HassioAddonLogDashboard extends LitElement {
@@ -16,23 +18,40 @@ class HassioAddonLogDashboard extends LitElement {
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
+  @state() private _filter = extractSearchParam("filter") || "";
+
   protected render(): TemplateResult {
     if (!this.addon) {
       return html`
         <ha-circular-progress indeterminate></ha-circular-progress>
       `;
     }
     return html`
+      <div class="search">
+        <search-input
+          @value-changed=${this._filterChanged}
+          .hass=${this.hass}
+          .filter=${this._filter}
+          .label=${this.hass.localize("ui.panel.config.logs.search")}
+        ></search-input>
+      </div>
       <div class="content">
-        <hassio-addon-logs
+        <error-log-card
           .hass=${this.hass}
-          .supervisor=${this.supervisor}
-          .addon=${this.addon}
-        ></hassio-addon-logs>
+          .header=${this.addon.name}
+          .provider=${this.addon.slug}
+          show
+          .filter=${this._filter}
+        >
+        </error-log-card>
       </div>
     `;
   }
 
+  private async _filterChanged(ev) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -41,7 +60,21 @@ class HassioAddonLogDashboard extends LitElement {
         .content {
           margin: auto;
           padding: 8px;
-          max-width: 1024px;
+        }
+        .search {
+          position: sticky;
+          top: 0;
+          z-index: 2;
+        }
+        search-input {
+          display: block;
+          --mdc-text-field-fill-color: var(--sidebar-background-color);
+          --mdc-text-field-idle-line-color: var(--divider-color);
+        }
+        @media all and (max-width: 870px) {
+          :host {
+            --error-log-card-height: calc(100vh - 304px);
+          }
         }
       `,
     ];

hassio/src/system/hassio-supervisor-log.ts

@@ -120,10 +120,12 @@ class HassioSupervisorLog extends LitElement {
     this._error = undefined;
 
     try {
-      this._content = await fetchHassioLogs(
+      const response = await fetchHassioLogs(
         this.hass,
         this._selectedLogProvider
       );
+
+      this._content = await response.text();
     } catch (err: any) {
       this._error = this.supervisor.localize("system.log.get_logs", {
         provider: this._selectedLogProvider,