Add friendly_name to dev tools "Entity" column + fuzzy search (#7582)

src/common/string/filter/filter.ts

@@ -92,7 +92,7 @@ function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
   return word[pos] !== wordLow[pos];
 }
 
-function isPatternInWord(
+export function isPatternInWord(
   patternLow: string,
   patternPos: number,
   patternLen: number,
@@ -121,7 +121,7 @@ enum Arrow {
 }
 
 /**
- * An array representating a fuzzy match.
+ * An array representing a fuzzy match.
  *
  * 0. the score
  * 1. the offset at which matching started

src/common/string/filter/sequence-matching.ts

@@ -5,7 +5,7 @@ import { fuzzyScore } from "./filter";
  *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
  *
  * @param {string} filter - Sequence of letters to check for
- * @param {string} word - Word to check for sequence
+ * @param {ScorableTextItem} item - Item against whose strings will be checked
  *
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */

src/panels/developer-tools/state/developer-tools-state.js

@@ -11,6 +11,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { dump, load } from "js-yaml";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
+import { isPatternInWord } from "../../../common/string/filter/filter";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/entity/ha-entity-picker";
@@ -91,6 +92,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           --mdc-icon-size: 20px;
           padding: 4px;
           cursor: pointer;
+          flex-shrink: 0;
+          margin-right: 8px;
+        }
+        .entities td:nth-child(1) {
+          min-width: 300px;
+          width: 30%;
         }
         .entities td:nth-child(3) {
           white-space: pre-wrap;
@@ -101,6 +108,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--primary-color);
         }
 
+        .entities .id-name-container {
+          display: flex;
+          flex-direction: column;
+        }
+        .entities .id-name-row {
+          display: flex;
+          align-items: center;
+        }
+
         :host([narrow]) .state-wrapper {
           flex-direction: column;
         }
@@ -219,19 +235,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           <template is="dom-repeat" items="[[_entities]]" as="entity">
             <tr>
               <td>
-                <ha-svg-icon
+                <div class="id-name-container">
-                  on-click="entityMoreInfo"
+                  <div class="id-name-row">
-                  alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                    <ha-svg-icon
-                  title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      on-click="copyEntity"
-                  path="[[informationOutlineIcon()]]"
+                      alt="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
-                ></ha-svg-icon>
+                      title="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
-                <ha-svg-icon
+                      path="[[clipboardOutlineIcon()]]"
-                  on-click="copyEntity"
+                    ></ha-svg-icon>
-                  alt="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
+                    <a href="#" on-click="entitySelected"
-                  title="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
+                      >[[entity.entity_id]]</a
-                  path="[[clipboardOutlineIcon()]]"
+                    >
-                ></ha-svg-icon>
+                  </div>
-                <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
+                  <div class="id-name-row">
+                    <ha-svg-icon
+                      on-click="entityMoreInfo"
+                      alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      path="[[informationOutlineIcon()]]"
+                    ></ha-svg-icon>
+                    <span class="secondary">
+                      [[entity.attributes.friendly_name]]
+                    </span>
+                  </div>
+                </div>
               </td>
               <td>[[entity.state]]</td>
               <template
@@ -385,12 +412,34 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) {
+    const _entityFilterLength = _entityFilter.length;
+    const _entityFilterLow = _entityFilter.toLowerCase();
+
     return Object.keys(hass.states)
-      .map(function (key) {
+      .map((key) => hass.states[key])
-        return hass.states[key];
+      .filter((value) => {
-      })
+        if (
-      .filter(function (value) {
+          _entityFilter &&
-        if (!value.entity_id.includes(_entityFilter.toLowerCase())) {
+          !isPatternInWord(
+            _entityFilterLow,
+            0,
+            _entityFilterLength,
+            value.entity_id.toLowerCase(),
+            0,
+            value.entity_id.length,
+            true
+          ) &&
+          value.attributes.friendly_name !== undefined &&
+          !isPatternInWord(
+            _entityFilterLow,
+            0,
+            _entityFilterLength,
+            value.attributes.friendly_name.toLowerCase(),
+            0,
+            value.attributes.friendly_name.length,
+            true
+          )
+        ) {
           return false;
         }