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

This commit is contained in:
Philip Allgaier 2021-05-26 15:29:51 +02:00 committed by GitHub
parent eaccd22267
commit 5f56040c64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 21 deletions

View File

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

View File

@ -5,7 +5,7 @@ import { fuzzyScore } from "./filter";
* in that order, allowing for skipping. Ex: "chdr" exists in "chandelier") * in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
* *
* @param {string} filter - Sequence of letters to check for * @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. * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
*/ */

View File

@ -11,6 +11,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
import { dump, load } from "js-yaml"; import { dump, load } from "js-yaml";
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
import { isPatternInWord } from "../../../common/string/filter/filter";
import { computeRTL } from "../../../common/util/compute_rtl"; import { computeRTL } from "../../../common/util/compute_rtl";
import { copyToClipboard } from "../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../common/util/copy-clipboard";
import "../../../components/entity/ha-entity-picker"; import "../../../components/entity/ha-entity-picker";
@ -91,6 +92,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
padding: 4px; padding: 4px;
cursor: pointer; cursor: pointer;
flex-shrink: 0;
margin-right: 8px;
}
.entities td:nth-child(1) {
min-width: 300px;
width: 30%;
} }
.entities td:nth-child(3) { .entities td:nth-child(3) {
white-space: pre-wrap; white-space: pre-wrap;
@ -101,6 +108,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
color: var(--primary-color); 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 { :host([narrow]) .state-wrapper {
flex-direction: column; flex-direction: column;
} }
@ -219,19 +235,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
<template is="dom-repeat" items="[[_entities]]" as="entity"> <template is="dom-repeat" items="[[_entities]]" as="entity">
<tr> <tr>
<td> <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>
<td>[[entity.state]]</td> <td>[[entity.state]]</td>
<template <template
@ -385,12 +412,34 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
} }
computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) { computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) {
const _entityFilterLength = _entityFilter.length;
const _entityFilterLow = _entityFilter.toLowerCase();
return Object.keys(hass.states) 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; return false;
} }