Add labels on entities datatable (#20274)
This commit is contained in:
parent
3a6382df55
commit
f924f81ec1
|
@ -10,7 +10,7 @@ import {
|
||||||
mdiRestoreAlert,
|
mdiRestoreAlert,
|
||||||
mdiUndo,
|
mdiUndo,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
import { HassEntity } from "home-assistant-js-websocket";
|
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
CSSResultGroup,
|
CSSResultGroup,
|
||||||
LitElement,
|
LitElement,
|
||||||
|
@ -37,6 +37,8 @@ import type {
|
||||||
RowClickedEvent,
|
RowClickedEvent,
|
||||||
SelectionChangedEvent,
|
SelectionChangedEvent,
|
||||||
} from "../../../components/data-table/ha-data-table";
|
} from "../../../components/data-table/ha-data-table";
|
||||||
|
import "../../../components/data-table/ha-data-table-labels";
|
||||||
|
import "../../../components/ha-alert";
|
||||||
import "../../../components/ha-button-menu";
|
import "../../../components/ha-button-menu";
|
||||||
import "../../../components/ha-check-list-item";
|
import "../../../components/ha-check-list-item";
|
||||||
import "../../../components/ha-filter-devices";
|
import "../../../components/ha-filter-devices";
|
||||||
|
@ -47,7 +49,6 @@ import "../../../components/ha-filter-labels";
|
||||||
import "../../../components/ha-icon";
|
import "../../../components/ha-icon";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import "../../../components/ha-alert";
|
|
||||||
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
|
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
|
||||||
import { fullEntitiesContext } from "../../../data/context";
|
import { fullEntitiesContext } from "../../../data/context";
|
||||||
import { UNAVAILABLE } from "../../../data/entity";
|
import { UNAVAILABLE } from "../../../data/entity";
|
||||||
|
@ -58,6 +59,10 @@ import {
|
||||||
updateEntityRegistryEntry,
|
updateEntityRegistryEntry,
|
||||||
} from "../../../data/entity_registry";
|
} from "../../../data/entity_registry";
|
||||||
import { entryIcon } from "../../../data/icons";
|
import { entryIcon } from "../../../data/icons";
|
||||||
|
import {
|
||||||
|
LabelRegistryEntry,
|
||||||
|
subscribeLabelRegistry,
|
||||||
|
} from "../../../data/label_registry";
|
||||||
import {
|
import {
|
||||||
showAlertDialog,
|
showAlertDialog,
|
||||||
showConfirmationDialog,
|
showConfirmationDialog,
|
||||||
|
@ -66,6 +71,7 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
|
||||||
import "../../../layouts/hass-loading-screen";
|
import "../../../layouts/hass-loading-screen";
|
||||||
import "../../../layouts/hass-tabs-subpage-data-table";
|
import "../../../layouts/hass-tabs-subpage-data-table";
|
||||||
import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
|
import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
|
||||||
|
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||||
import { haStyle } from "../../../resources/styles";
|
import { haStyle } from "../../../resources/styles";
|
||||||
import type { HomeAssistant, Route } from "../../../types";
|
import type { HomeAssistant, Route } from "../../../types";
|
||||||
import { configSections } from "../ha-panel-config";
|
import { configSections } from "../ha-panel-config";
|
||||||
|
@ -87,10 +93,11 @@ export interface EntityRow extends StateEntity {
|
||||||
status: string | undefined;
|
status: string | undefined;
|
||||||
area?: string;
|
area?: string;
|
||||||
localized_platform: string;
|
localized_platform: string;
|
||||||
|
label_entries: LabelRegistryEntry[];
|
||||||
}
|
}
|
||||||
|
|
||||||
@customElement("ha-config-entities")
|
@customElement("ha-config-entities")
|
||||||
export class HaConfigEntities extends LitElement {
|
export class HaConfigEntities extends SubscribeMixin(LitElement) {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property({ type: Boolean }) public isWide = false;
|
@property({ type: Boolean }) public isWide = false;
|
||||||
|
@ -120,6 +127,9 @@ export class HaConfigEntities extends LitElement {
|
||||||
|
|
||||||
@state() private _expandedFilter?: string;
|
@state() private _expandedFilter?: string;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
_labels!: LabelRegistryEntry[];
|
||||||
|
|
||||||
@query("hass-tabs-subpage-data-table", true)
|
@query("hass-tabs-subpage-data-table", true)
|
||||||
private _dataTable!: HaTabsSubpageDataTable;
|
private _dataTable!: HaTabsSubpageDataTable;
|
||||||
|
|
||||||
|
@ -203,14 +213,21 @@ export class HaConfigEntities extends LitElement {
|
||||||
filterable: true,
|
filterable: true,
|
||||||
direction: "asc",
|
direction: "asc",
|
||||||
grows: true,
|
grows: true,
|
||||||
template: narrow
|
template: (entry) => html`
|
||||||
? (entry) => html`
|
<div style="font-size: 14px;">${entry.name}</div>
|
||||||
${entry.name}<br />
|
${narrow
|
||||||
<div class="secondary">
|
? html`<div class="secondary">
|
||||||
${entry.entity_id} | ${entry.localized_platform}
|
${entry.entity_id} | ${entry.localized_platform}
|
||||||
</div>
|
</div>`
|
||||||
`
|
: nothing}
|
||||||
: undefined,
|
${entry.label_entries.length
|
||||||
|
? html`
|
||||||
|
<ha-data-table-labels
|
||||||
|
.labels=${entry.label_entries}
|
||||||
|
></ha-data-table-labels>
|
||||||
|
`
|
||||||
|
: nothing}
|
||||||
|
`,
|
||||||
},
|
},
|
||||||
entity_id: {
|
entity_id: {
|
||||||
title: localize("ui.panel.config.entities.picker.headers.entity_id"),
|
title: localize("ui.panel.config.entities.picker.headers.entity_id"),
|
||||||
|
@ -302,6 +319,13 @@ export class HaConfigEntities extends LitElement {
|
||||||
`
|
`
|
||||||
: "—",
|
: "—",
|
||||||
},
|
},
|
||||||
|
labels: {
|
||||||
|
title: "",
|
||||||
|
hidden: true,
|
||||||
|
filterable: true,
|
||||||
|
template: (entry) =>
|
||||||
|
entry.label_entries.map((lbl) => lbl.name).join(" "),
|
||||||
|
},
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -316,7 +340,8 @@ export class HaConfigEntities extends LitElement {
|
||||||
string,
|
string,
|
||||||
{ value: string[] | undefined; items: Set<string> | undefined }
|
{ value: string[] | undefined; items: Set<string> | undefined }
|
||||||
>,
|
>,
|
||||||
entries?: ConfigEntry[]
|
entries?: ConfigEntry[],
|
||||||
|
labelReg?: LabelRegistryEntry[]
|
||||||
) => {
|
) => {
|
||||||
const result: EntityRow[] = [];
|
const result: EntityRow[] = [];
|
||||||
|
|
||||||
|
@ -409,6 +434,11 @@ export class HaConfigEntities extends LitElement {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const labels = labelReg && entry?.labels;
|
||||||
|
const labelsEntries = (labels || []).map(
|
||||||
|
(lbl) => labelReg!.find((label) => label.label_id === lbl)!
|
||||||
|
);
|
||||||
|
|
||||||
result.push({
|
result.push({
|
||||||
...entry,
|
...entry,
|
||||||
entity,
|
entity,
|
||||||
|
@ -436,6 +466,7 @@ export class HaConfigEntities extends LitElement {
|
||||||
: localize(
|
: localize(
|
||||||
"ui.panel.config.entities.picker.status.available"
|
"ui.panel.config.entities.picker.status.available"
|
||||||
),
|
),
|
||||||
|
label_entries: labelsEntries,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -443,6 +474,14 @@ export class HaConfigEntities extends LitElement {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
|
||||||
|
return [
|
||||||
|
subscribeLabelRegistry(this.hass.connection, (labels) => {
|
||||||
|
this._labels = labels;
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
if (!this.hass || this._entities === undefined) {
|
if (!this.hass || this._entities === undefined) {
|
||||||
return html` <hass-loading-screen></hass-loading-screen> `;
|
return html` <hass-loading-screen></hass-loading-screen> `;
|
||||||
|
@ -456,7 +495,8 @@ export class HaConfigEntities extends LitElement {
|
||||||
this.hass.areas,
|
this.hass.areas,
|
||||||
this._stateEntities,
|
this._stateEntities,
|
||||||
this._filters,
|
this._filters,
|
||||||
this._entries
|
this._entries,
|
||||||
|
this._labels
|
||||||
);
|
);
|
||||||
|
|
||||||
const includeAddDeviceFab =
|
const includeAddDeviceFab =
|
||||||
|
@ -497,6 +537,7 @@ export class HaConfigEntities extends LitElement {
|
||||||
@row-click=${this._openEditEntry}
|
@row-click=${this._openEditEntry}
|
||||||
id="entity_id"
|
id="entity_id"
|
||||||
.hasFab=${includeAddDeviceFab}
|
.hasFab=${includeAddDeviceFab}
|
||||||
|
class=${this.narrow ? "narrow" : ""}
|
||||||
>
|
>
|
||||||
<ha-integration-overflow-menu
|
<ha-integration-overflow-menu
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
|
@ -932,7 +973,8 @@ export class HaConfigEntities extends LitElement {
|
||||||
this.hass.areas,
|
this.hass.areas,
|
||||||
this._stateEntities,
|
this._stateEntities,
|
||||||
this._filters,
|
this._filters,
|
||||||
this._entries
|
this._entries,
|
||||||
|
this._labels
|
||||||
);
|
);
|
||||||
if (
|
if (
|
||||||
filteredDomains.size === 1 &&
|
filteredDomains.size === 1 &&
|
||||||
|
@ -954,6 +996,12 @@ export class HaConfigEntities extends LitElement {
|
||||||
return [
|
return [
|
||||||
haStyle,
|
haStyle,
|
||||||
css`
|
css`
|
||||||
|
hass-tabs-subpage-data-table {
|
||||||
|
--data-table-row-height: 60px;
|
||||||
|
}
|
||||||
|
hass-tabs-subpage-data-table.narrow {
|
||||||
|
--data-table-row-height: 72px;
|
||||||
|
}
|
||||||
hass-loading-screen {
|
hass-loading-screen {
|
||||||
--app-header-background-color: var(--sidebar-background-color);
|
--app-header-background-color: var(--sidebar-background-color);
|
||||||
--app-header-text-color: var(--sidebar-text-color);
|
--app-header-text-color: var(--sidebar-text-color);
|
||||||
|
|
Loading…
Reference in New Issue