Default hide disabled entities from entity registry (#3863)

* Default hide disabled entities from entity registry

* localize

* Use memoize

src/panels/config/entity_registry/ha-config-entity-registry.ts

@@ -7,6 +7,7 @@ import {
   property,
 } from "lit-element";
 import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 
 import { HomeAssistant } from "../../../types";
@@ -19,6 +20,7 @@ import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import "../../../components/ha-switch";
 import { domainIcon } from "../../../common/entity/domain_icon";
 import { stateIcon } from "../../../common/entity/state_icon";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -30,13 +32,24 @@ import {
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { compare } from "../../../common/string/compare";
 import { classMap } from "lit-html/directives/class-map";
+// tslint:disable-next-line
+import { HaSwitch } from "../../../components/ha-switch";
+import memoize from "memoize-one";
 
 class HaConfigEntityRegistry extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public isWide?: boolean;
   @property() private _entities?: EntityRegistryEntry[];
+  @property() private _showDisabled = false;
   private _unsubEntities?: UnsubscribeFunc;
 
+  private _filteredEntities = memoize(
+    (entities: EntityRegistryEntry[], showDisabled: boolean) =>
+      showDisabled
+        ? entities
+        : entities.filter((entity) => !Boolean(entity.disabled_by))
+  );
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubEntities) {
@@ -78,40 +91,53 @@ class HaConfigEntityRegistry extends LitElement {
             </a>
           </span>
           <ha-card>
-            ${this._entities.map((entry) => {
+            <paper-item>
-              const state = this.hass!.states[entry.entity_id];
+              <ha-switch
-              return html`
+                ?checked=${this._showDisabled}
-                <paper-icon-item
+                @change=${this._showDisabledChanged}
-                  @click=${this._openEditEntry}
+                >${this.hass.localize(
-                  .entry=${entry}
+                  "ui.panel.config.entity_registry.picker.show_disabled"
-                  class=${classMap({ "disabled-entry": !!entry.disabled_by })}
+                )}</ha-switch
-                >
+              ></paper-item
-                  <ha-icon
+            >
-                    slot="item-icon"
+            ${this._filteredEntities(this._entities, this._showDisabled).map(
-                    .icon=${state
+              (entry) => {
-                      ? stateIcon(state)
+                const state = this.hass!.states[entry.entity_id];
-                      : domainIcon(computeDomain(entry.entity_id))}
+                return html`
-                  ></ha-icon>
+                  <paper-icon-item
-                  <paper-item-body two-line>
+                    @click=${this._openEditEntry}
-                    <div class="name">
+                    .entry=${entry}
-                      ${computeEntityRegistryName(this.hass!, entry) ||
+                    class=${classMap({ "disabled-entry": !!entry.disabled_by })}
-                        `(${this.hass!.localize("state.default.unavailable")})`}
+                  >
+                    <ha-icon
+                      slot="item-icon"
+                      .icon=${state
+                        ? stateIcon(state)
+                        : domainIcon(computeDomain(entry.entity_id))}
+                    ></ha-icon>
+                    <paper-item-body two-line>
+                      <div class="name">
+                        ${computeEntityRegistryName(this.hass!, entry) ||
+                          `(${this.hass!.localize(
+                            "state.default.unavailable"
+                          )})`}
+                      </div>
+                      <div class="secondary entity-id">
+                        ${entry.entity_id}
+                      </div>
+                    </paper-item-body>
+                    <div class="platform">
+                      ${entry.platform}
+                      ${entry.disabled_by
+                        ? html`
+                            <br />(disabled)
+                          `
+                        : ""}
                     </div>
-                    <div class="secondary entity-id">
+                  </paper-icon-item>
-                      ${entry.entity_id}
+                `;
-                    </div>
+              }
-                  </paper-item-body>
+            )}
-                  <div class="platform">
-                    ${entry.platform}
-                    ${entry.disabled_by
-                      ? html`
-                          <br />(disabled)
-                        `
-                      : ""}
-                  </div>
-                </paper-icon-item>
-              `;
-            })}
           </ha-card>
         </ha-config-section>
       </hass-subpage>
@@ -137,6 +163,10 @@ class HaConfigEntityRegistry extends LitElement {
     }
   }
 
+  private _showDisabledChanged(ev: Event) {
+    this._showDisabled = (ev.target as HaSwitch).checked;
+  }
+
   private _openEditEntry(ev: MouseEvent): void {
     const entry = (ev.currentTarget! as any).entry;
     showEntityRegistryDetailDialog(this, {

src/translations/en.json

@@ -921,7 +921,8 @@
             "header": "Entity Registry",
             "introduction": "Home Assistant keeps a registry of every entity it has ever seen that can be uniquely identified. Each of these entities will have an entity ID assigned which will be reserved for just this entity.",
             "introduction2": "Use the entity registry to override the name, change the entity ID or remove the entry from Home Assistant. Note, removing the entity registry entry won't remove the entity. To do that, follow the link below and remove it from the integrations page.",
-            "integrations_page": "Integrations page"
+            "integrations_page": "Integrations page",
+            "show_disabled": "Show disabled entities"
           },
           "editor": {
             "unavailable": "This entity is not currently available.",