From b53645ce9284dca965cc7efa0ed2ed062d6da206 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 3 May 2022 16:50:33 +0200 Subject: [PATCH] Add disabled support to trace timeline and step details (#12555) --- src/components/trace/ha-timeline.ts | 5 ++ src/components/trace/ha-trace-path-details.ts | 5 ++ src/components/trace/hat-graph-node.ts | 11 +++- src/components/trace/hat-script-graph.ts | 2 + src/components/trace/hat-trace-timeline.ts | 58 +++++++++++++++---- 5 files changed, 66 insertions(+), 15 deletions(-) diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts index 3ca99b56d2..bf5685bb9e 100644 --- a/src/components/trace/ha-timeline.ts +++ b/src/components/trace/ha-timeline.ts @@ -10,6 +10,8 @@ export class HaTimeline extends LitElement { @property({ type: Boolean, reflect: true }) public raised = false; + @property({ reflect: true, type: Boolean }) notEnabled = false; + @property({ type: Boolean }) public lastItem = false; @property({ type: String }) public icon?: string; @@ -76,6 +78,9 @@ export class HaTimeline extends LitElement { margin-right: 8px; width: 24px; } + :host([notEnabled]) ha-svg-icon { + opacity: 0.5; + } ha-svg-icon { color: var( --timeline-ball-color, diff --git a/src/components/trace/ha-trace-path-details.ts b/src/components/trace/ha-trace-path-details.ts index b27ead74a0..ebf77a2ab6 100644 --- a/src/components/trace/ha-trace-path-details.ts +++ b/src/components/trace/ha-trace-path-details.ts @@ -114,6 +114,11 @@ export class HaTracePathDetails extends LitElement { const { path, timestamp, result, error, changed_variables, ...rest } = trace as any; + if (result?.enabled === false) { + return html`This node was disabled and skipped during execution so + no further trace information is available.`; + } + return html` ${curPath === this.selected.path ? "" diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts index 1350479e3c..a084bbed6c 100644 --- a/src/components/trace/hat-graph-node.ts +++ b/src/components/trace/hat-graph-node.ts @@ -116,9 +116,14 @@ export class HatGraphNode extends LitElement { --stroke-clr: var(--hover-clr); --icon-clr: var(--default-icon-clr); } - :host([notEnabled]) circle, - :host([notEnabled]) path.connector { - stroke: var(--disabled-clr); + :host([notEnabled]) circle { + --stroke-clr: var(--disabled-clr); + } + :host([notEnabled][active]) circle { + --stroke-clr: var(--disabled-active-clr); + } + :host([notEnabled]:hover) circle { + --stroke-clr: var(--disabled-hover-clr); } svg { width: 100%; diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts index 432e8a4f98..b62955e954 100644 --- a/src/components/trace/hat-script-graph.ts +++ b/src/components/trace/hat-script-graph.ts @@ -754,6 +754,8 @@ export class HatScriptGraph extends LitElement { --track-clr: var(--track-color, var(--accent-color)); --hover-clr: var(--hover-color, var(--primary-color)); --disabled-clr: var(--disabled-color, var(--disabled-text-color)); + --disabled-active-clr: rgba(var(--rgb-primary-color), 0.5); + --disabled-hover-clr: rgba(var(--rgb-primary-color), 0.7); --default-trigger-color: 3, 169, 244; --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color)); --background-clr: var(--background-color, white); diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts index 0573549cd7..e7ab310280 100644 --- a/src/components/trace/hat-trace-timeline.ts +++ b/src/components/trace/hat-trace-timeline.ts @@ -296,7 +296,12 @@ class ActionRenderer { return this._handleParallel(index); } - this._renderEntry(path, describeAction(this.hass, data, actionType)); + this._renderEntry( + path, + describeAction(this.hass, data, actionType), + undefined, + data.enabled === false + ); let i = index + 1; @@ -349,10 +354,16 @@ class ActionRenderer { const chooseConfig = this._getDataFromPath( this.keys[index] ) as ChooseAction; + const disabled = chooseConfig.enabled === false; const name = chooseConfig.alias || "Choose"; if (defaultExecuted) { - this._renderEntry(choosePath, `${name}: Default action executed`); + this._renderEntry( + choosePath, + `${name}: Default action executed`, + undefined, + disabled + ); } else if (chooseTrace.result) { const choiceNumeric = chooseTrace.result.choice !== "default" @@ -364,9 +375,19 @@ class ActionRenderer { const choiceName = choiceConfig ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed` : `Error: ${chooseTrace.error}`; - this._renderEntry(choosePath, `${name}: ${choiceName}`); + this._renderEntry( + choosePath, + `${name}: ${choiceName}`, + undefined, + disabled + ); } else { - this._renderEntry(choosePath, `${name}: No action taken`); + this._renderEntry( + choosePath, + `${name}: No action taken`, + undefined, + disabled + ); } let i; @@ -414,9 +435,11 @@ class ActionRenderer { const repeatConfig = this._getDataFromPath( this.keys[index] ) as RepeatAction; + const disabled = repeatConfig.enabled === false; + const name = repeatConfig.alias || describeAction(this.hass, repeatConfig); - this._renderEntry(repeatPath, name); + this._renderEntry(repeatPath, name, undefined, disabled); let i; @@ -441,18 +464,24 @@ class ActionRenderer { const ifTrace = this._getItem(index)[0] as IfActionTraceStep; const ifConfig = this._getDataFromPath(this.keys[index]) as IfAction; + const disabled = ifConfig.enabled === false; const name = ifConfig.alias || "If"; - if (ifTrace.result) { + if (ifTrace.result?.choice) { const choiceConfig = this._getDataFromPath( `${this.keys[index]}/${ifTrace.result.choice}/` ) as any; const choiceName = choiceConfig ? `${choiceConfig.alias || `${ifTrace.result.choice} action executed`}` : `Error: ${ifTrace.error}`; - this._renderEntry(ifPath, `${name}: ${choiceName}`); + this._renderEntry(ifPath, `${name}: ${choiceName}`, undefined, disabled); } else { - this._renderEntry(ifPath, `${name}: No action taken`); + this._renderEntry( + ifPath, + `${name}: No action taken`, + undefined, + disabled + ); } let i; @@ -489,9 +518,11 @@ class ActionRenderer { this.keys[index] ) as ParallelAction; + const disabled = parallelConfig.enabled === false; + const name = parallelConfig.alias || "Execute in parallel"; - this._renderEntry(parallelPath, name); + this._renderEntry(parallelPath, name, undefined, disabled); let i; @@ -513,11 +544,14 @@ class ActionRenderer { private _renderEntry( path: string, description: string, - icon = mdiRecordCircleOutline + icon = mdiRecordCircleOutline, + disabled = false ) { this.entries.push(html` - - ${description} + + ${description}${disabled + ? html` (disabled)` + : ""} `); }