mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Add if, parallel and stop action to trace graph (#12520)
This commit is contained in:
parent
591b8cc503
commit
1421df2a5a
@ -1,7 +1,11 @@
|
|||||||
import {
|
import {
|
||||||
mdiAbTesting,
|
mdiAbTesting,
|
||||||
|
mdiAlertOctagon,
|
||||||
|
mdiArrowDecision,
|
||||||
mdiArrowUp,
|
mdiArrowUp,
|
||||||
mdiAsterisk,
|
mdiAsterisk,
|
||||||
|
mdiCallMissed,
|
||||||
|
mdiCallReceived,
|
||||||
mdiCallSplit,
|
mdiCallSplit,
|
||||||
mdiCheckboxBlankOutline,
|
mdiCheckboxBlankOutline,
|
||||||
mdiCheckboxMarkedOutline,
|
mdiCheckboxMarkedOutline,
|
||||||
@ -9,10 +13,12 @@ import {
|
|||||||
mdiChevronRight,
|
mdiChevronRight,
|
||||||
mdiChevronUp,
|
mdiChevronUp,
|
||||||
mdiClose,
|
mdiClose,
|
||||||
|
mdiCloseOctagon,
|
||||||
mdiCodeBrackets,
|
mdiCodeBrackets,
|
||||||
mdiDevices,
|
mdiDevices,
|
||||||
mdiExclamation,
|
mdiExclamation,
|
||||||
mdiRefresh,
|
mdiRefresh,
|
||||||
|
mdiShuffleDisabled,
|
||||||
mdiTimerOutline,
|
mdiTimerOutline,
|
||||||
mdiTrafficLight,
|
mdiTrafficLight,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
@ -27,6 +33,8 @@ import {
|
|||||||
DelayAction,
|
DelayAction,
|
||||||
DeviceAction,
|
DeviceAction,
|
||||||
EventAction,
|
EventAction,
|
||||||
|
IfAction,
|
||||||
|
ParallelAction,
|
||||||
RepeatAction,
|
RepeatAction,
|
||||||
SceneAction,
|
SceneAction,
|
||||||
ServiceAction,
|
ServiceAction,
|
||||||
@ -36,6 +44,8 @@ import {
|
|||||||
import {
|
import {
|
||||||
ChooseActionTraceStep,
|
ChooseActionTraceStep,
|
||||||
ConditionTraceStep,
|
ConditionTraceStep,
|
||||||
|
IfActionTraceStep,
|
||||||
|
StopActionTraceStep,
|
||||||
TraceExtended,
|
TraceExtended,
|
||||||
} from "../../data/trace";
|
} from "../../data/trace";
|
||||||
import "../ha-icon-button";
|
import "../ha-icon-button";
|
||||||
@ -110,6 +120,9 @@ export class HatScriptGraph extends LitElement {
|
|||||||
repeat: this.render_repeat_node,
|
repeat: this.render_repeat_node,
|
||||||
choose: this.render_choose_node,
|
choose: this.render_choose_node,
|
||||||
device_id: this.render_device_node,
|
device_id: this.render_device_node,
|
||||||
|
if: this.render_if_node,
|
||||||
|
stop: this.render_stop_node,
|
||||||
|
parallel: this.render_parallel_node,
|
||||||
other: this.render_other_node,
|
other: this.render_other_node,
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -146,7 +159,7 @@ export class HatScriptGraph extends LitElement {
|
|||||||
>
|
>
|
||||||
<hat-graph-node
|
<hat-graph-node
|
||||||
.graphStart=${graphStart}
|
.graphStart=${graphStart}
|
||||||
.iconPath=${mdiCallSplit}
|
.iconPath=${mdiArrowDecision}
|
||||||
?track=${trace !== undefined}
|
?track=${trace !== undefined}
|
||||||
?active=${this.selected === path}
|
?active=${this.selected === path}
|
||||||
slot="head"
|
slot="head"
|
||||||
@ -196,6 +209,54 @@ export class HatScriptGraph extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private render_if_node(config: IfAction, path: string, graphStart = false) {
|
||||||
|
const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
|
||||||
|
const result = trace?.[0].result?.choice;
|
||||||
|
return html`
|
||||||
|
<hat-graph-branch
|
||||||
|
tabindex=${trace === undefined ? "-1" : "0"}
|
||||||
|
@focus=${this.selectNode(config, path)}
|
||||||
|
?track=${trace !== undefined}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
>
|
||||||
|
<hat-graph-node
|
||||||
|
.graphStart=${graphStart}
|
||||||
|
.iconPath=${mdiCallSplit}
|
||||||
|
?track=${trace !== undefined}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
slot="head"
|
||||||
|
nofocus
|
||||||
|
></hat-graph-node>
|
||||||
|
${config.else
|
||||||
|
? html`<div class="graph-container" ?track=${result === "else"}>
|
||||||
|
<hat-graph-node
|
||||||
|
.iconPath=${mdiCallMissed}
|
||||||
|
?track=${result === "else"}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
nofocus
|
||||||
|
></hat-graph-node
|
||||||
|
>${ensureArray(config.else).map((action, j) =>
|
||||||
|
this.render_action_node(action, `${path}/else/${j}`)
|
||||||
|
)}
|
||||||
|
</div>`
|
||||||
|
: html`<hat-graph-spacer
|
||||||
|
?track=${result === "else" || result === undefined}
|
||||||
|
></hat-graph-spacer>`}
|
||||||
|
<div class="graph-container" ?track=${result === "then"}>
|
||||||
|
<hat-graph-node
|
||||||
|
.iconPath=${mdiCallReceived}
|
||||||
|
?track=${result === "then"}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
nofocus
|
||||||
|
></hat-graph-node>
|
||||||
|
${ensureArray(config.then).map((action, j) =>
|
||||||
|
this.render_action_node(action, `${path}/then/${j}`)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</hat-graph-branch>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
private render_condition_node(
|
private render_condition_node(
|
||||||
node: Condition,
|
node: Condition,
|
||||||
path: string,
|
path: string,
|
||||||
@ -392,6 +453,49 @@ export class HatScriptGraph extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private render_parallel_node(
|
||||||
|
node: ParallelAction,
|
||||||
|
path: string,
|
||||||
|
graphStart = false
|
||||||
|
) {
|
||||||
|
const trace: any = this.trace.trace[path];
|
||||||
|
return html`
|
||||||
|
<hat-graph-branch
|
||||||
|
tabindex=${trace === undefined ? "-1" : "0"}
|
||||||
|
@focus=${this.selectNode(node, path)}
|
||||||
|
?track=${path in this.trace.trace}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
>
|
||||||
|
<hat-graph-node
|
||||||
|
.graphStart=${graphStart}
|
||||||
|
.iconPath=${mdiShuffleDisabled}
|
||||||
|
?track=${path in this.trace.trace}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
slot="head"
|
||||||
|
nofocus
|
||||||
|
></hat-graph-node>
|
||||||
|
${ensureArray(node.parallel).map((action, i) =>
|
||||||
|
this.render_action_node(action, `${path}/parallel/${i}/0`)
|
||||||
|
)}
|
||||||
|
</hat-graph-branch>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private render_stop_node(node: Action, path: string, graphStart = false) {
|
||||||
|
const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
|
||||||
|
return html`
|
||||||
|
<hat-graph-node
|
||||||
|
.graphStart=${graphStart}
|
||||||
|
.iconPath=${trace?.[0].result?.error
|
||||||
|
? mdiAlertOctagon
|
||||||
|
: mdiCloseOctagon}
|
||||||
|
@focus=${this.selectNode(node, path)}
|
||||||
|
?track=${path in this.trace.trace}
|
||||||
|
?active=${this.selected === path}
|
||||||
|
></hat-graph-node>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
private render_other_node(node: Action, path: string, graphStart = false) {
|
private render_other_node(node: Action, path: string, graphStart = false) {
|
||||||
return html`
|
return html`
|
||||||
<hat-graph-node
|
<hat-graph-node
|
||||||
|
@ -44,6 +44,14 @@ export interface ChooseActionTraceStep extends BaseTraceStep {
|
|||||||
result?: { choice: number | "default" };
|
result?: { choice: number | "default" };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface IfActionTraceStep extends BaseTraceStep {
|
||||||
|
result?: { choice: "then" | "else" };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StopActionTraceStep extends BaseTraceStep {
|
||||||
|
result?: { stop: string; error: boolean };
|
||||||
|
}
|
||||||
|
|
||||||
export interface ChooseChoiceActionTraceStep extends BaseTraceStep {
|
export interface ChooseChoiceActionTraceStep extends BaseTraceStep {
|
||||||
result?: { result: boolean };
|
result?: { result: boolean };
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user