diff --git a/src/components/trace/ha-trace-path-details.ts b/src/components/trace/ha-trace-path-details.ts index d37cd33637..19f38a333d 100644 --- a/src/components/trace/ha-trace-path-details.ts +++ b/src/components/trace/ha-trace-path-details.ts @@ -19,9 +19,16 @@ import "../../panels/logbook/ha-logbook-renderer"; import { traceTabStyles } from "./trace-tab-styles"; import type { HomeAssistant } from "../../types"; import type { NodeInfo } from "./hat-script-graph"; -import { describeCondition } from "../../data/automation_i18n"; +import { describeCondition, describeTrigger } from "../../data/automation_i18n"; import type { EntityRegistryEntry } from "../../data/entity_registry"; -import { fullEntitiesContext } from "../../data/context"; +import type { LabelRegistryEntry } from "../../data/label_registry"; +import type { FloorRegistryEntry } from "../../data/floor_registry"; +import { + floorsContext, + fullEntitiesContext, + labelsContext, +} from "../../data/context"; +import { describeAction } from "../../data/script_i18n"; const TRACE_PATH_TABS = [ "step_config", @@ -52,6 +59,14 @@ export class HaTracePathDetails extends LitElement { @consume({ context: fullEntitiesContext, subscribe: true }) _entityReg!: EntityRegistryEntry[]; + @state() + @consume({ context: labelsContext, subscribe: true }) + _labelReg!: LabelRegistryEntry[]; + + @state() + @consume({ context: floorsContext, subscribe: true }) + _floorReg!: Record; + protected render(): TemplateResult { return html`
@@ -151,11 +166,46 @@ export class HaTracePathDetails extends LitElement { )}`; } + const selectedType = this.selected.type; + return html` ${curPath === this.selected.path ? currentDetail.alias ? html`

${currentDetail.alias}

` - : nothing + : selectedType === "trigger" + ? html`

+ ${describeTrigger( + currentDetail, + this.hass, + this._entityReg + )} +

` + : selectedType === "condition" + ? html`

+ ${describeCondition( + currentDetail, + this.hass, + this._entityReg + )} +

` + : selectedType === "action" + ? html`

+ ${describeAction( + this.hass, + this._entityReg, + this._labelReg, + this._floorReg, + currentDetail + )} +

` + : selectedType === "chooseOption" + ? html`

+ ${this.hass.localize( + "ui.panel.config.automation.editor.actions.type.choose.option", + { number: pathParts[pathParts.length - 1] } + )} +

` + : nothing : html`

${curPath.substring(this.selected.path.length + 1)}

`} diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts index f3ac1ab98e..41d0ae51e9 100644 --- a/src/components/trace/hat-script-graph.ts +++ b/src/components/trace/hat-script-graph.ts @@ -53,9 +53,12 @@ import "./hat-graph-node"; import "./hat-graph-spacer"; import { ACTION_ICONS } from "../../data/action"; +type NodeType = "trigger" | "condition" | "action" | "chooseOption" | undefined; + export interface NodeInfo { path: string; config: any; + type?: NodeType; } declare global { @@ -76,16 +79,16 @@ export class HatScriptGraph extends LitElement { public trackedNodes: Record = {}; - private _selectNode(config, path) { + private _selectNode(config, path, type?) { return () => { - fireEvent(this, "graph-node-selected", { config, path }); + fireEvent(this, "graph-node-selected", { config, path, type }); }; } private _renderTrigger(config: Trigger, i: number) { const path = `trigger/${i}`; const track = this.trace && path in this.trace.trace; - this.renderedNodes[path] = { config, path }; + this.renderedNodes[path] = { config, path, type: "trigger" }; if (track) { this.trackedNodes[path] = this.renderedNodes[path]; } @@ -93,7 +96,7 @@ export class HatScriptGraph extends LitElement { key in node) || "other"; - this.renderedNodes[path] = { config: node, path }; + this.renderedNodes[path] = { config: node, path, type: "action" }; if (this.trace && path in this.trace.trace) { this.trackedNodes[path] = this.renderedNodes[path]; } @@ -166,7 +169,7 @@ export class HatScriptGraph extends LitElement { return html` tr.error)}