20220203.0 (#11533)

* Only upload wheels to PyPI (#11514) * Make sure we load data in update card (#11516) * Guard load diagnostics (#11518) * Design home - Fix GitHub Links (#11519) * Add filtering to system log card and error log card (#11166) Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Handle unknown toggle state (#11522) * Fix dialog heading aria label (#11524) Co-authored-by: Zack Barett <arnett.zackary@gmail.com> * Use css to hide hint in quickbar (#11527) * Revert "Mobile click accessibility" (#11526) * Clear old src when disconnected so we can't fetch it with the wrong t… (#11528) * Add name of integration to diagnostics when more than 1 (#11523) * Bumped version to 20220203.0 Co-authored-by: Marc Mueller <30130371+cdce8p@users.noreply.github.com> Co-authored-by: Joakim Sørensen <joasoe@gmail.com> Co-authored-by: Paulus Schoutsen <balloob@gmail.com> Co-authored-by: fpro1212 <75439345+fpro1212@users.noreply.github.com> Co-authored-by: Kuba Wolanin <hi@kubawolanin.com> Co-authored-by: Zack Barett <arnett.zackary@gmail.com>
2025-04-25 22:07:20 +00:00 · 2022-02-03 20:52:49 +01:00 · 2022-02-03 20:52:49 +01:00 · 51938fb51f
commit 51938fb51f
parent c85236e251 890ad9a1c8
28 changed files with 324 additions and 129 deletions
--- a/gallery/src/pages/concepts/home.markdown
+++ b/gallery/src/pages/concepts/home.markdown
@ -17,7 +17,7 @@ We want to make it as easy for designers to contribute as it is for developers.

 - Meet us at <a href="https://discord.gg/BPBc8rZ9" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
- Find the lates UX <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
+- Find the lates UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!


 ## Developers
--- a/hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts
@ -47,7 +47,9 @@ export class DialogHassioBackupUpload
        scrimClickAction
        escapeKeyAction
        hideActions
-        .heading=${true}
+        .heading=${this.hass?.localize(
+          "ui.panel.page-onboarding.restore.upload_backup"
+        ) || "Upload backup"}
        @closed=${this.closeDialog}
      >
        <div slot="heading">
--- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts
@ -71,7 +71,7 @@ class HassioBackupDialog
        open
        scrimClickAction
        @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._backup.name}
      >
        <div slot="heading">
          <ha-header-bar>
--- a/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
+++ b/hassio/src/dialogs/hardware/dialog-hassio-hardware.ts
@ -65,7 +65,9 @@ class HassioHardwareDialog extends LitElement {
        scrimClickAction
        hideActions
        @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._dialogParams.supervisor.localize(
+          "dialog.hardware.title"
+        )}
      >
        <div class="header" slot="heading">
          <h2>
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@ -94,7 +94,7 @@ export class DialogHassioNetwork
        open
        scrimClickAction
        escapeKeyAction
-        .heading=${true}
+        .heading=${this.supervisor.localize("dialog.network.title")}
        hideActions
        @closed=${this.closeDialog}
      >
--- a/hassio/src/update-available/update-available-card.ts
+++ b/hassio/src/update-available/update-available-card.ts
@ -33,8 +33,12 @@ import {
  extractApiErrorMessage,
  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
-import { updateOS } from "../../../src/data/hassio/host";
-import { updateSupervisor } from "../../../src/data/hassio/supervisor";
+import { fetchHassioHassOsInfo, updateOS } from "../../../src/data/hassio/host";
+import {
+  fetchHassioHomeAssistantInfo,
+  fetchHassioSupervisorInfo,
+  updateSupervisor,
+} from "../../../src/data/hassio/supervisor";
 import { updateCore } from "../../../src/data/supervisor/core";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@ -212,11 +216,22 @@ class UpdateAvailableCard extends LitElement {
      : "addon";
    this._updateType = updateType as updateType;

-    if (updateType === "addon") {
-      if (!this.addonSlug) {
-        this.addonSlug = pathPart;
-      }
-      this._loadAddonData();
+    switch (updateType) {
+      case "addon":
+        if (!this.addonSlug) {
+          this.addonSlug = pathPart;
+        }
+        this._loadAddonData();
+        break;
+      case "core":
+        this._loadCoreData();
+        break;
+      case "supervisor":
+        this._loadSupervisorData();
+        break;
+      case "os":
+        this._loadOsData();
+        break;
    }
  }

@ -308,6 +323,42 @@ class UpdateAvailableCard extends LitElement {
    }
  }

+  private async _loadSupervisorData() {
+    try {
+      const supervisor = await fetchHassioSupervisorInfo(this.hass);
+      fireEvent(this, "supervisor-update", { supervisor });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadCoreData() {
+    try {
+      const core = await fetchHassioHomeAssistantInfo(this.hass);
+      fireEvent(this, "supervisor-update", { core });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _loadOsData() {
+    try {
+      const os = await fetchHassioHassOsInfo(this.hass);
+      fireEvent(this, "supervisor-update", { os });
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
  private async _update() {
    this._error = undefined;
    this._updating = true;
--- a/script/release
+++ b/script/release
@ -13,4 +13,4 @@ script/build_frontend

 rm -rf dist home_assistant_frontend.egg-info
 python3 -m build
-python3 -m twine upload dist/* --skip-existing
+python3 -m twine upload dist/*.whl --skip-existing
--- a/setup.cfg
+++ b/setup.cfg
@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220202.0
+version      = 20220203.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@ -12,7 +12,7 @@ import { property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
+import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
@ -39,21 +39,26 @@ export class HaEntityToggle extends LitElement {
      return html` <ha-switch disabled></ha-switch> `;
    }

-    if (this.stateObj.attributes.assumed_state) {
+    if (
+      this.stateObj.attributes.assumed_state ||
+      this.stateObj.state === UNKNOWN
+    ) {
      return html`
        <ha-icon-button
          .label=${`Turn ${computeStateName(this.stateObj)} off`}
          .path=${mdiFlashOff}
          .disabled=${this.stateObj.state === UNAVAILABLE}
          @click=${this._turnOff}
-          ?state-active=${!this._isOn}
+          class=${!this._isOn && this.stateObj.state !== UNKNOWN
+            ? "state-active"
+            : ""}
        ></ha-icon-button>
        <ha-icon-button
          .label=${`Turn ${computeStateName(this.stateObj)} on`}
          .path=${mdiFlash}
          .disabled=${this.stateObj.state === UNAVAILABLE}
          @click=${this._turnOn}
-          ?state-active=${this._isOn}
+          class=${this._isOn ? "state-active" : ""}
        ></ha-icon-button>
      `;
    }
@ -63,7 +68,7 @@ export class HaEntityToggle extends LitElement {
        this._isOn ? "off" : "on"
      }`}
      .checked=${this._isOn}
-      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+      .disabled=${this.stateObj.state === UNAVAILABLE}
      @change=${this._toggleChanged}
    ></ha-switch>`;

@ -156,10 +161,11 @@ export class HaEntityToggle extends LitElement {
        min-width: 38px;
      }
      ha-icon-button {
+        --mdc-icon-button-size: 40px;
        color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
        transition: color 0.5s;
      }
-      ha-icon-button[state-active] {
+      ha-icon-button.state-active {
        color: var(--ha-icon-button-active-color, var(--primary-color));
      }
      ha-switch {
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@ -55,7 +55,11 @@ class DialogMediaPlayerBrowse extends LitElement {
        escapeKeyAction
        hideActions
        flexContent
-        .heading=${true}
+        .heading=${!this._currentItem
+          ? this.hass.localize(
+              "ui.components.media-browser.media-player-browser"
+            )
+          : this._currentItem.title}
        @closed=${this.closeDialog}
      >
        <ha-header-bar slot="heading">
--- a/src/data/supervisor/supervisor.ts
+++ b/src/data/supervisor/supervisor.ts
@ -82,7 +82,7 @@ async function processEvent(
  event: SupervisorEvent,
  key: string
 ) {
-  if (event.event !== "supervisor-update" || event.update_key !== key) {
+  if (event.event !== "supervisor_update" || event.update_key !== key) {
    return;
  }

--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@ -105,7 +105,7 @@ export class MoreInfoDialog extends LitElement {
      <ha-dialog
        open
        @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${name}
        hideActions
        data-domain=${domain}
      >
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@ -139,7 +139,7 @@ export class QuickBar extends LitElement {

    return html`
      <ha-dialog
-        .heading=${true}
+        .heading=${this.hass.localize("ui.dialogs.quick-bar.title")}
        open
        @opened=${this._handleOpened}
        @closed=${this.closeDialog}
@ -231,9 +231,7 @@ export class QuickBar extends LitElement {
                })}
              </mwc-list>
            `}
-        ${!this._narrow && this._hint
-          ? html`<div class="hint">${this._hint}</div>`
-          : ""}
+        ${this._hint ? html`<div class="hint">${this._hint}</div>` : ""}
      </ha-dialog>
    `;
  }
@ -718,6 +716,12 @@ export class QuickBar extends LitElement {
          }
        }

+        @media all and (max-width: 450px), all and (max-height: 690px) {
+          .hint {
+            display: none;
+          }
+        }
+
        ha-icon.entity,
        ha-svg-icon.entity {
          margin-left: 20px;
--- a/src/entrypoints/app.ts
+++ b/src/entrypoints/app.ts
@ -1,11 +1,7 @@
-import {
-  setPassiveTouchGestures,
-  setCancelSyntheticClickEvents,
-} from "@polymer/polymer/lib/utils/settings";
+import { setPassiveTouchGestures } from "@polymer/polymer/lib/utils/settings";
 import "../layouts/home-assistant";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../util/legacy-support";

 setPassiveTouchGestures(true);
-setCancelSyntheticClickEvents(false);
--- a/src/entrypoints/authorize.ts
+++ b/src/entrypoints/authorize.ts
@ -1,14 +1,11 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../auth/ha-authorize";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";

-setCancelSyntheticClickEvents(false);
-
 /* polyfill for paper-dropdown */
 setTimeout(
  () => import("web-animations-js/web-animations-next-lite.min"),
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@ -1,6 +1,5 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../resources/safari-14-attachshadow-patch";

 import { PolymerElement } from "@polymer/polymer";
@ -16,8 +15,6 @@ import { createCustomPanelElement } from "../util/custom-panel/create-custom-pan
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";

-setCancelSyntheticClickEvents(false);
-
 declare global {
  interface Window {
    loadES5Adapter: () => Promise<unknown>;
@ -50,7 +47,7 @@ function initialize(
 ) {
  const style = document.createElement("style");

-  style.innerHTML = `body { margin:0; }
+  style.innerHTML = `body { margin:0; } 
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #111111;
--- a/src/entrypoints/onboarding.ts
+++ b/src/entrypoints/onboarding.ts
@ -1,14 +1,11 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
 import "../onboarding/ha-onboarding";
 import "../resources/ha-style";
 import "../resources/roboto";
 import "../resources/safari-14-attachshadow-patch";
 import "../resources/array.flat.polyfill";

-setCancelSyntheticClickEvents(false);
-
 declare global {
  interface Window {
    stepsPromise: Promise<Response>;
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@ -39,6 +39,7 @@ import {
  findBatteryEntity,
  updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
+import { domainToName } from "../../../data/integration";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { findRelated, RelatedResult } from "../../../data/search";
 import {
@ -201,6 +202,10 @@ export class HaConfigDevicePage extends LitElement {
  }

  private async _renderDiagnosticButtons(requestId: number): Promise<void> {
+    if (!isComponentLoaded(this.hass, "diagnostics")) {
+      return;
+    }
+
    const device = this._device(this.deviceId, this.devices);

    if (!device) {
@ -208,34 +213,53 @@ export class HaConfigDevicePage extends LitElement {
    }

    let links = await Promise.all(
-      this._integrations(device, this.entries)
-        .filter((entry) => entry.state === "loaded")
-        .map(async (entry) => {
-          const info = await fetchDiagnosticHandler(this.hass, entry.domain);
+      this._integrations(device, this.entries).map(async (entry) => {
+        if (entry.state !== "loaded") {
+          return false;
+        }
+        const info = await fetchDiagnosticHandler(this.hass, entry.domain);

-          if (!info.handlers.device && !info.handlers.config_entry) {
-            return "";
-          }
-          const link = info.handlers.device
+        if (!info.handlers.device && !info.handlers.config_entry) {
+          return false;
+        }
+        return {
+          link: info.handlers.device
            ? getDeviceDiagnosticsDownloadUrl(entry.entry_id, this.deviceId)
-            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id);
-          return html`
-            <a href=${link} @click=${this._signUrl}>
-              <mwc-button>
-                ${this.hass.localize(
-                  `ui.panel.config.devices.download_diagnostics`
-                )}
-              </mwc-button>
-            </a>
-          `;
-        })
+            : getConfigEntryDiagnosticsDownloadUrl(entry.entry_id),
+          domain: entry.domain,
+        };
+      })
    );
+
+    links = links.filter(Boolean);
+
    if (this._diagnosticDownloadLinks !== requestId) {
      return;
    }
-    links = links.filter(Boolean);
    if (links.length > 0) {
-      this._diagnosticDownloadLinks = links;
+      this._diagnosticDownloadLinks = (
+        links as { link: string; domain: string }[]
+      ).map(
+        (link) => html`
+          <a href=${link.link} @click=${this._signUrl}>
+            <mwc-button>
+              ${links.length > 1
+                ? this.hass.localize(
+                    `ui.panel.config.devices.download_diagnostics_integration`,
+                    {
+                      integration: domainToName(
+                        this.hass.localize,
+                        link.domain
+                      ),
+                    }
+                  )
+                : this.hass.localize(
+                    `ui.panel.config.devices.download_diagnostics`
+                  )}
+            </mwc-button>
+          </a>
+        `
+      );
    }
  }

--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/src/panels/config/entities/dialog-entity-editor.ts
@ -74,7 +74,9 @@ export class DialogEntityEditor extends LitElement {
    return html`
      <ha-dialog
        open
-        .heading=${true}
+        .heading=${stateObj
+          ? computeStateName(stateObj)
+          : entry?.name || entityId}
        hideActions
        @closed=${this.closeDialog}
        @close-dialog=${this.closeDialog}
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@ -69,8 +69,18 @@ class DialogSystemLogDetail extends LitElement {
        // Custom components with our official docs should not link to our docs
        !this._manifest.documentation.includes("://www.home-assistant.io"));

+    const title = this.hass.localize(
+      "ui.panel.config.logs.details",
+      "level",
+      html`<span class=${item.level.toLowerCase()}
+        >${this.hass.localize(
+          "ui.panel.config.logs.level." + item.level.toLowerCase()
+        )}</span
+      >`
+    );
+
    return html`
-      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${true}>
+      <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
        <ha-header-bar slot="heading">
          <ha-icon-button
            slot="navigationIcon"
@ -78,17 +88,7 @@ class DialogSystemLogDetail extends LitElement {
            .label=${this.hass.localize("ui.common.close")}
            .path=${mdiClose}
          ></ha-icon-button>
-          <span slot="title">
-            ${this.hass.localize(
-              "ui.panel.config.logs.details",
-              "level",
-              html`<span class=${item.level.toLowerCase()}
-                >${this.hass.localize(
-                  "ui.panel.config.logs.level." + item.level.toLowerCase()
-                )}</span
-              >`
-            )}
-          </span>
+          <span slot="title"> ${title} </span>
          <ha-icon-button
            id="copy"
            @click=${this._copyLog}
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@ -9,6 +9,10 @@ import { HomeAssistant } from "../../../types";
 class ErrorLogCard extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  @property() public filter = "";
+
+  @state() private _isLogLoaded = false;
+
  @state() private _errorHTML!: TemplateResult[] | string;

  protected render(): TemplateResult {
@ -43,6 +47,14 @@ class ErrorLogCard extends LitElement {
    }
  }

+  protected updated(changedProps) {
+    super.updated(changedProps);
+
+    if (changedProps.has("filter") && this._isLogLoaded) {
+      this._refreshErrorLog();
+    }
+  }
+
  static get styles(): CSSResultGroup {
    return css`
      .error-log-intro {
@ -55,12 +67,16 @@ class ErrorLogCard extends LitElement {
      }

      .error-log {
-        @apply --paper-font-code)
-          clear: both;
+        font-family: var(--code-font-family, monospace);
+        clear: both;
        text-align: left;
        padding-top: 12px;
      }

+      .error-log > div:hover {
+        background-color: var(--secondary-background-color);
+      }
+
      .error {
        color: var(--error-color);
      }
@ -74,24 +90,33 @@ class ErrorLogCard extends LitElement {
  private async _refreshErrorLog(): Promise<void> {
    this._errorHTML = this.hass.localize("ui.panel.config.logs.loading_log");
    const log = await fetchErrorLog(this.hass!);
+    this._isLogLoaded = true;

    this._errorHTML = log
-      ? log.split("\n").map((entry) => {
-          if (entry.includes("INFO"))
-            return html`<div class="info">${entry}</div>`;
+      ? log
+          .split("\n")
+          .filter((entry) => {
+            if (this.filter) {
+              return entry.toLowerCase().includes(this.filter.toLowerCase());
+            }
+            return entry;
+          })
+          .map((entry) => {
+            if (entry.includes("INFO"))
+              return html`<div class="info">${entry}</div>`;

-          if (entry.includes("WARNING"))
-            return html`<div class="warning">${entry}</div>`;
+            if (entry.includes("WARNING"))
+              return html`<div class="warning">${entry}</div>`;

-          if (
-            entry.includes("ERROR") ||
-            entry.includes("FATAL") ||
-            entry.includes("CRITICAL")
-          )
-            return html`<div class="error">${entry}</div>`;
+            if (
+              entry.includes("ERROR") ||
+              entry.includes("FATAL") ||
+              entry.includes("CRITICAL")
+            )
+              return html`<div class="error">${entry}</div>`;

-          return html`<div>${entry}</div>`;
-        })
+            return html`<div>${entry}</div>`;
+          })
      : this.hass.localize("ui.panel.config.logs.no_errors");
  }
 }
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@ -1,9 +1,11 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
+import "../../../common/search/search-input";
+import { extractSearchParam } from "../../../common/url/search-params";
 import "./error-log-card";
 import "./system-log-card";
 import type { SystemLogCard } from "./system-log-card";
@ -20,6 +22,8 @@ export class HaConfigLogs extends LitElement {

  @property() public route!: Route;

+  @state() private _filter = extractSearchParam("filter") ?? "";
+
  @query("system-log-card", true) private systemLog?: SystemLogCard;

  public connectedCallback() {
@ -29,7 +33,39 @@ export class HaConfigLogs extends LitElement {
    }
  }

+  private async _filterChanged(ev) {
+    this._filter = ev.detail.value;
+  }
+
  protected render(): TemplateResult {
+    const search = this.narrow
+      ? html`
+          <div slot="header">
+            <search-input
+              class="header"
+              no-label-float
+              no-underline
+              @value-changed=${this._filterChanged}
+              .hass=${this.hass}
+              .filter=${this._filter}
+              .label=${this.hass.localize("ui.panel.config.logs.search")}
+            ></search-input>
+          </div>
+        `
+      : html`
+          <div class="search">
+            <search-input
+              autofocus
+              no-label-float
+              no-underline
+              @value-changed=${this._filterChanged}
+              .hass=${this.hass}
+              .filter=${this._filter}
+              .label=${this.hass.localize("ui.panel.config.logs.search")}
+            ></search-input>
+          </div>
+        `;
+
    return html`
      <hass-tabs-subpage
        .hass=${this.hass}
@ -38,9 +74,16 @@ export class HaConfigLogs extends LitElement {
        .route=${this.route}
        .tabs=${configSections.general}
      >
+        ${search}
        <div class="content">
-          <system-log-card .hass=${this.hass}></system-log-card>
-          <error-log-card .hass=${this.hass}></error-log-card>
+          <system-log-card
+            .hass=${this.hass}
+            .filter=${this._filter}
+          ></system-log-card>
+          <error-log-card
+            .hass=${this.hass}
+            .filter=${this._filter}
+          ></error-log-card>
        </div>
      </hass-tabs-subpage>
    `;
@ -56,6 +99,17 @@ export class HaConfigLogs extends LitElement {
          -moz-user-select: initial;
        }

+        .search {
+          padding: 0 16px;
+          background: var(--sidebar-background-color);
+          border-bottom: 1px solid var(--divider-color);
+        }
+
+        .search search-input {
+          position: relative;
+          top: 2px;
+        }
+
        .content {
          direction: ltr;
        }
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@ -2,6 +2,7 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-card";
@ -22,6 +23,8 @@ import { formatSystemLogTime } from "./util";
 export class SystemLogCard extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  @property() public filter = "";
+
  public loaded = false;

  @state() private _items?: LoggedError[];
@ -31,9 +34,44 @@ export class SystemLogCard extends LitElement {
    this._items = await fetchSystemLog(this.hass!);
  }

+  private _timestamp(item: LoggedError): string {
+    return formatSystemLogTime(item.timestamp, this.hass!.locale);
+  }
+
+  private _multipleMessages(item: LoggedError): string {
+    return this.hass.localize(
+      "ui.panel.config.logs.multiple_messages",
+      "time",
+      formatSystemLogTime(item.first_occurred, this.hass!.locale),
+      "counter",
+      item.count
+    );
+  }
+
+  private _getFilteredItems = memoizeOne(
+    (items: LoggedError[], filter: string) =>
+      items.filter((item: LoggedError) => {
+        if (filter) {
+          return (
+            item.message.some((message: string) =>
+              message.toLowerCase().includes(filter)
+            ) ||
+            item.source[0].toLowerCase().includes(filter) ||
+            item.name.toLowerCase().includes(filter) ||
+            this._timestamp(item).toLowerCase().includes(filter) ||
+            this._multipleMessages(item).toLowerCase().includes(filter)
+          );
+        }
+        return item;
+      })
+  );
+
  protected render(): TemplateResult {
-    const integrations = this._items
-      ? this._items.map((item) => getLoggedErrorIntegration(item))
+    const filteredItems = this._items
+      ? this._getFilteredItems(this._items, this.filter.toLowerCase())
+      : [];
+    const integrations = filteredItems.length
+      ? filteredItems.map((item) => getLoggedErrorIntegration(item))
      : [];
    return html`
      <div class="system-log-intro">
@ -51,17 +89,21 @@ export class SystemLogCard extends LitElement {
                        ${this.hass.localize("ui.panel.config.logs.no_issues")}
                      </div>
                    `
-                  : this._items.map(
+                  : filteredItems.length === 0 && this.filter
+                  ? html`<div class="card-content">
+                      ${this.hass.localize(
+                        "ui.panel.config.logs.no_issues_search",
+                        "term",
+                        this.filter
+                      )}
+                    </div>`
+                  : filteredItems.map(
                      (item, idx) => html`
                        <paper-item @click=${this._openLog} .logItem=${item}>
                          <paper-item-body two-line>
                            <div class="row">${item.message[0]}</div>
                            <div secondary>
-                              ${formatSystemLogTime(
-                                item.timestamp,
-                                this.hass!.locale
-                              )}
-                              –
+                              ${this._timestamp(item)} –
                              ${html`(<span class=${item.level.toLowerCase()}
                                  >${this.hass.localize(
                                    "ui.panel.config.logs.level." +
@ -81,19 +123,7 @@ export class SystemLogCard extends LitElement {
                                  }`
                                : item.source[0]}
                              ${item.count > 1
-                                ? html`
-                                    -
-                                    ${this.hass.localize(
-                                      "ui.panel.config.logs.multiple_messages",
-                                      "time",
-                                      formatSystemLogTime(
-                                        item.first_occurred,
-                                        this.hass!.locale
-                                      ),
-                                      "counter",
-                                      item.count
-                                    )}
-                                  `
+                                ? html` - ${this._multipleMessages(item)} `
                                : html``}
                            </div>
                          </paper-item-body>
--- a/src/panels/lovelace/components/hui-image.ts
+++ b/src/panels/lovelace/components/hui-image.ts
@ -106,6 +106,9 @@ export class HuiImage extends LitElement {
      } else if (!this.hass!.connected) {
        this._stopUpdateCameraInterval();
        this._stopIntersectionObserver();
+        this._loadState = LoadState.Loading;
+        this._cameraImageSrc = undefined;
+        this._loadedImageSrc = undefined;
      }
    }
    if (changedProps.has("_imageVisible")) {
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
@ -65,28 +65,26 @@ export class HuiCreateDialogCard
      return html``;
    }

+    const title = this._viewConfig.title
+      ? this.hass!.localize(
+          "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
+          "name",
+          `"${this._viewConfig.title}"`
+        )
+      : this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card");
+
    return html`
      <ha-dialog
        open
        scrimClickAction
        @keydown=${this._ignoreKeydown}
        @closed=${this._cancel}
-        .heading=${true}
+        .heading=${title}
        class=${classMap({ table: this._currTabIndex === 1 })}
      >
        <div slot="heading">
          <ha-header-bar>
-            <span slot="title">
-              ${this._viewConfig.title
-                ? this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
-                    "name",
-                    `"${this._viewConfig.title}"`
-                  )
-                : this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_card.pick_card"
-                  )}
-            </span>
+            <span slot="title"> ${title} </span>
          </ha-header-bar>
          <mwc-tab-bar
            .activeIndex=${this._currTabIndex}
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@ -176,7 +176,7 @@ export class HuiDialogEditCard
        @keydown=${this._ignoreKeydown}
        @closed=${this._cancel}
        @opened=${this._opened}
-        .heading=${true}
+        .heading=${heading}
      >
        <div slot="heading">
          <ha-header-bar>
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@ -173,7 +173,7 @@ export class HuiDialogEditView extends LitElement {
        scrimClickAction
        escapeKeyAction
        @closed=${this.closeDialog}
-        .heading=${true}
+        .heading=${this._viewConfigTitle}
      >
        <div slot="heading">
          <h2>${this._viewConfigTitle}</h2>
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -1344,6 +1344,8 @@
          "caption": "Logs",
          "description": "View the Home Assistant logs",
          "details": "Log Details ({level})",
+          "search": "Search logs",
+          "no_issues_search": "No issues found for search term ''{term}''",
          "load_full_log": "Load Full Home Assistant Log",
          "loading_log": "Loading error log…",
          "no_errors": "No errors have been reported",
@ -2229,6 +2231,7 @@
          "open_configuration_url_device": "Visit device",
          "open_configuration_url_service": "Visit service",
          "download_diagnostics": "Download diagnostics",
+          "download_diagnostics_integration": "Download {integration} diagnostics",
          "type": {
            "device_heading": "Device",
            "device": "device",