diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index b7e3d289c7..fcd317f207 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -62,6 +62,11 @@ export class MoreInfoDialog extends LitElement {
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
+ private _relatedEntityClicked(ev: CustomEvent) {
+ ev.stopPropagation();
+ this._entityId = ev.detail.entityId;
+ }
+
protected shouldShowEditIcon(
domain: string,
stateObj: HassEntity | undefined
@@ -160,6 +165,7 @@ export class MoreInfoDialog extends LitElement {
`
: this._currTab === "history"
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index 73061a09b9..8bbb3905aa 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -94,7 +94,7 @@ export class MoreInfoHistory extends LitElement {
this.entityId
}&start_date=${startOfYesterday().toISOString()}`;
- this._throttleGetStateHistory();
+ this._getStateHistory();
return;
}
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index 005cf6278b..0c2e248019 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../common/entity/compute_domain";
import { subscribeOne } from "../../common/util/subscribe-one";
@@ -15,6 +15,7 @@ import {
} from "./const";
import "./ha-more-info-history";
import "./ha-more-info-logbook";
+import "./more-info-related-info";
@customElement("ha-more-info-info")
export class MoreInfoInfo extends LitElement {
@@ -74,6 +75,8 @@ export class MoreInfoInfo extends LitElement {
.stateObj=${stateObj}
.hass=${this.hass}
>
+
+
`;
}
diff --git a/src/dialogs/more-info/more-info-related-info.ts b/src/dialogs/more-info/more-info-related-info.ts
new file mode 100644
index 0000000000..97f5a76b51
--- /dev/null
+++ b/src/dialogs/more-info/more-info-related-info.ts
@@ -0,0 +1,122 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeStateDisplay } from "../../common/entity/compute_state_display";
+import { stateIconPath } from "../../common/entity/state_icon_path";
+import "../../components/ha-chip";
+import "../../components/ha-chip-set";
+import "../../components/ha-icon";
+import { HomeAssistant } from "../../types";
+
+declare global {
+ interface HASSDomEvents {
+ "related-entity": { entityId: string };
+ }
+}
+
+@customElement("more-info-related-info")
+class MoreInfoContent extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj?: HassEntity;
+
+ private _relatedEntities = memoizeOne((entityId: string) => {
+ const deviceId = this.hass!.entities[entityId].device_id;
+
+ if (!deviceId) return [];
+
+ return Object.values(this.hass!.entities).filter(
+ (entity) =>
+ entity.device_id === deviceId &&
+ entity.entity_id !== entityId &&
+ !entity.hidden_by &&
+ !entity.disabled_by
+ );
+ });
+
+ private _handleChipClick(ev: Event) {
+ const entityId = (ev.target as any).entityId as string;
+ fireEvent(this, "related-entity", { entityId });
+ }
+
+ protected render(): TemplateResult | null {
+ if (!this.hass || !this.stateObj) {
+ return null;
+ }
+
+ const relatedEntities = this._relatedEntities(this.stateObj.entity_id);
+
+ return html`
+
+ ${relatedEntities.map((entry) => {
+ const entity = this.hass!.states[entry.entity_id];
+
+ const icon = entity.attributes.icon;
+ const iconPath = stateIconPath(entity);
+ const state = computeStateDisplay(
+ this.hass!.localize,
+ entity,
+ this.hass!.locale
+ );
+
+ return html`
+
+ `;
+ })}
+
+ `;
+ }
+
+ static get styles() {
+ return css`
+ .container {
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+ .container > * {
+ margin: 4px;
+ }
+ .chip {
+ border: 1px solid var(--secondary-text-color);
+ border-radius: 8px;
+ cursor: pointer;
+ background: none;
+ color: var(--primary-text-color);
+ padding: 6px 16px 6px 8px;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 20px;
+ }
+ .chip ha-icon,
+ .chip ha-svg-icon {
+ pointer-events: none;
+ --mdc-icon-size: 18px;
+ color: rgb(var(--rgb-primary-color));
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "more-info-related-info": MoreInfoContent;
+ }
+}