Skip to content

Commit 9f59be4

Browse files
karwostskarwosts
authored
Render autogenerated step descriptions in trace path viewer (#24886)
1 parent 8429d11 commit 9f59be4

File tree

2 files changed

+77
-19
lines changed

2 files changed

+77
-19
lines changed

‎src/components/trace/ha-trace-path-details.ts

+53-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,16 @@ import "../../panels/logbook/ha-logbook-renderer";
1919
import { traceTabStyles } from "./trace-tab-styles";
2020
import type { HomeAssistant } from "../../types";
2121
import type { NodeInfo } from "./hat-script-graph";
22-
import { describeCondition } from "../../data/automation_i18n";
22+
import { describeCondition, describeTrigger } from "../../data/automation_i18n";
2323
import type { EntityRegistryEntry } from "../../data/entity_registry";
24-
import { fullEntitiesContext } from "../../data/context";
24+
import type { LabelRegistryEntry } from "../../data/label_registry";
25+
import type { FloorRegistryEntry } from "../../data/floor_registry";
26+
import {
27+
floorsContext,
28+
fullEntitiesContext,
29+
labelsContext,
30+
} from "../../data/context";
31+
import { describeAction } from "../../data/script_i18n";
2532

2633
const TRACE_PATH_TABS = [
2734
"step_config",
@@ -52,6 +59,14 @@ export class HaTracePathDetails extends LitElement {
5259
@consume({ context: fullEntitiesContext, subscribe: true })
5360
_entityReg!: EntityRegistryEntry[];
5461

62+
@state()
63+
@consume({ context: labelsContext, subscribe: true })
64+
_labelReg!: LabelRegistryEntry[];
65+
66+
@state()
67+
@consume({ context: floorsContext, subscribe: true })
68+
_floorReg!: Record<string, FloorRegistryEntry>;
69+
5570
protected render(): TemplateResult {
5671
return html`
5772
<div class="padded-box trace-info">
@@ -151,11 +166,46 @@ export class HaTracePathDetails extends LitElement {
151166
)}`;
152167
}
153168

169+
const selectedType = this.selected.type;
170+
154171
return html`
155172
${curPath === this.selected.path
156173
? currentDetail.alias
157174
? html`<h2>${currentDetail.alias}</h2>`
158-
: nothing
175+
: selectedType === "trigger"
176+
? html`<h2>
177+
${describeTrigger(
178+
currentDetail,
179+
this.hass,
180+
this._entityReg
181+
)}
182+
</h2>`
183+
: selectedType === "condition"
184+
? html`<h2>
185+
${describeCondition(
186+
currentDetail,
187+
this.hass,
188+
this._entityReg
189+
)}
190+
</h2>`
191+
: selectedType === "action"
192+
? html`<h2>
193+
${describeAction(
194+
this.hass,
195+
this._entityReg,
196+
this._labelReg,
197+
this._floorReg,
198+
currentDetail
199+
)}
200+
</h2>`
201+
: selectedType === "chooseOption"
202+
? html`<h2>
203+
${this.hass.localize(
204+
"ui.panel.config.automation.editor.actions.type.choose.option",
205+
{ number: pathParts[pathParts.length - 1] }
206+
)}
207+
</h2>`
208+
: nothing
159209
: html`<h2>
160210
${curPath.substring(this.selected.path.length + 1)}
161211
</h2>`}

‎src/components/trace/hat-script-graph.ts

+24-16
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,12 @@ import "./hat-graph-node";
5353
import "./hat-graph-spacer";
5454
import { ACTION_ICONS } from "../../data/action";
5555

56+
type NodeType = "trigger" | "condition" | "action" | "chooseOption" | undefined;
57+
5658
export interface NodeInfo {
5759
path: string;
5860
config: any;
61+
type?: NodeType;
5962
}
6063

6164
declare global {
@@ -76,24 +79,24 @@ export class HatScriptGraph extends LitElement {
7679

7780
public trackedNodes: Record<string, NodeInfo> = {};
7881

79-
private _selectNode(config, path) {
82+
private _selectNode(config, path, type?) {
8083
return () => {
81-
fireEvent(this, "graph-node-selected", { config, path });
84+
fireEvent(this, "graph-node-selected", { config, path, type });
8285
};
8386
}
8487

8588
private _renderTrigger(config: Trigger, i: number) {
8689
const path = `trigger/${i}`;
8790
const track = this.trace && path in this.trace.trace;
88-
this.renderedNodes[path] = { config, path };
91+
this.renderedNodes[path] = { config, path, type: "trigger" };
8992
if (track) {
9093
this.trackedNodes[path] = this.renderedNodes[path];
9194
}
9295
return html`
9396
<hat-graph-node
9497
graph-start
9598
?track=${track}
96-
@focus=${this._selectNode(config, path)}
99+
@focus=${this._selectNode(config, path, "trigger")}
97100
?active=${this.selected === path}
98101
.iconPath=${mdiAsterisk}
99102
.notEnabled=${"enabled" in config && config.enabled === false}
@@ -105,7 +108,7 @@ export class HatScriptGraph extends LitElement {
105108

106109
private _renderCondition(config: Condition, i: number) {
107110
const path = `condition/${i}`;
108-
this.renderedNodes[path] = { config, path };
111+
this.renderedNodes[path] = { config, path, type: "condition" };
109112
if (this.trace && path in this.trace.trace) {
110113
this.trackedNodes[path] = this.renderedNodes[path];
111114
}
@@ -136,7 +139,7 @@ export class HatScriptGraph extends LitElement {
136139
) {
137140
const type =
138141
Object.keys(this._typeRenderers).find((key) => key in node) || "other";
139-
this.renderedNodes[path] = { config: node, path };
142+
this.renderedNodes[path] = { config: node, path, type: "action" };
140143
if (this.trace && path in this.trace.trace) {
141144
this.trackedNodes[path] = this.renderedNodes[path];
142145
}
@@ -166,7 +169,7 @@ export class HatScriptGraph extends LitElement {
166169
return html`
167170
<hat-graph-branch
168171
tabindex=${trace === undefined ? "-1" : "0"}
169-
@focus=${this._selectNode(config, path)}
172+
@focus=${this._selectNode(config, path, "action")}
170173
?track=${trace !== undefined}
171174
?active=${this.selected === path}
172175
.notEnabled=${disabled || config.enabled === false}
@@ -189,6 +192,7 @@ export class HatScriptGraph extends LitElement {
189192
this.renderedNodes[branchPath] = {
190193
config: branch,
191194
path: branchPath,
195+
type: "chooseOption",
192196
};
193197
if (trackThis) {
194198
this.trackedNodes[branchPath] = this.renderedNodes[branchPath];
@@ -199,7 +203,11 @@ export class HatScriptGraph extends LitElement {
199203
.iconPath=${!trace || trackThis
200204
? mdiCheckboxMarkedOutline
201205
: mdiCheckboxBlankOutline}
202-
@focus=${this._selectNode(branch, branchPath)}
206+
@focus=${this._selectNode(
207+
branch,
208+
branchPath,
209+
"chooseOption"
210+
)}
203211
?track=${trackThis}
204212
?active=${this.selected === branchPath}
205213
.notEnabled=${disabled || config.enabled === false}
@@ -259,7 +267,7 @@ export class HatScriptGraph extends LitElement {
259267
return html`
260268
<hat-graph-branch
261269
tabindex=${trace === undefined ? "-1" : "0"}
262-
@focus=${this._selectNode(config, path)}
270+
@focus=${this._selectNode(config, path, "action")}
263271
?track=${trace !== undefined}
264272
?active=${this.selected === path}
265273
.notEnabled=${disabled || config.enabled === false}
@@ -340,7 +348,7 @@ export class HatScriptGraph extends LitElement {
340348
}
341349
return html`
342350
<hat-graph-branch
343-
@focus=${this._selectNode(node, path)}
351+
@focus=${this._selectNode(node, path, "condition")}
344352
?track=${track}
345353
?active=${this.selected === path}
346354
.notEnabled=${disabled || node.enabled === false}
@@ -384,7 +392,7 @@ export class HatScriptGraph extends LitElement {
384392
return html`
385393
<hat-graph-branch
386394
tabindex=${trace === undefined ? "-1" : "0"}
387-
@focus=${this._selectNode(node, path)}
395+
@focus=${this._selectNode(node, path, "action")}
388396
?track=${path in this.trace.trace}
389397
?active=${this.selected === path}
390398
.notEnabled=${disabled || node.enabled === false}
@@ -430,7 +438,7 @@ export class HatScriptGraph extends LitElement {
430438
<hat-graph-node
431439
.graphStart=${graphStart}
432440
.iconPath=${node.action ? undefined : mdiRoomService}
433-
@focus=${this._selectNode(node, path)}
441+
@focus=${this._selectNode(node, path, "action")}
434442
?track=${path in this.trace.trace}
435443
?active=${this.selected === path}
436444
.notEnabled=${disabled || node.enabled === false}
@@ -458,7 +466,7 @@ export class HatScriptGraph extends LitElement {
458466
<hat-graph-node
459467
.graphStart=${graphStart}
460468
.iconPath=${mdiCodeBraces}
461-
@focus=${this._selectNode(node, path)}
469+
@focus=${this._selectNode(node, path, "action")}
462470
?track=${path in this.trace.trace}
463471
?active=${this.selected === path}
464472
.notEnabled=${disabled || node.enabled === false}
@@ -478,7 +486,7 @@ export class HatScriptGraph extends LitElement {
478486
return html`
479487
<hat-graph-branch
480488
tabindex=${trace === undefined ? "-1" : "0"}
481-
@focus=${this._selectNode(node, path)}
489+
@focus=${this._selectNode(node, path, "action")}
482490
?track=${path in this.trace.trace}
483491
?active=${this.selected === path}
484492
.notEnabled=${disabled || node.enabled === false}
@@ -516,7 +524,7 @@ export class HatScriptGraph extends LitElement {
516524
return html`
517525
<hat-graph-branch
518526
tabindex=${trace === undefined ? "-1" : "0"}
519-
@focus=${this._selectNode(node, path)}
527+
@focus=${this._selectNode(node, path, "action")}
520528
?track=${path in this.trace.trace}
521529
?active=${this.selected === path}
522530
.notEnabled=${disabled || node.enabled === false}
@@ -565,7 +573,7 @@ export class HatScriptGraph extends LitElement {
565573
<hat-graph-node
566574
.graphStart=${graphStart}
567575
.iconPath=${ACTION_ICONS[getActionType(node)] || mdiCodeBrackets}
568-
@focus=${this._selectNode(node, path)}
576+
@focus=${this._selectNode(node, path, "action")}
569577
?track=${path in this.trace.trace}
570578
?active=${this.selected === path}
571579
.error=${this.trace.trace[path]?.some((tr) => tr.error)}

0 commit comments

Comments
 (0)