jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-27 23:07:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Indicate things are disabled in trace graph (#12550)

Browse Source 
* Indicate things are disabled in trace graph

* Update hat-script-graph.ts
This commit is contained in:
Bram Kragten 2022-05-03 00:07:36 +02:00 committed by GitHub
parent 43e80f1a2e
commit ba8621fa2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 111 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/trace/hat-graph-node.ts
View File

@ -19,6 +19,8 @@ export class HatGraphNode extends LitElement {
@property({ reflect: true, type: Boolean }) disabled?: boolean; @property({ reflect: true, type: Boolean }) disabled?: boolean;
@property({ reflect: true, type: Boolean }) notEnabled = false;
@property({ reflect: true, type: Boolean }) graphStart?: boolean; @property({ reflect: true, type: Boolean }) graphStart?: boolean;
@property({ type: Boolean, attribute: "nofocus" }) noFocus = false; @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
@ -114,7 +116,8 @@ export class HatGraphNode extends LitElement {
--stroke-clr: var(--hover-clr); --stroke-clr: var(--hover-clr);
--icon-clr: var(--default-icon-clr); --icon-clr: var(--default-icon-clr);
} }
:host([disabled]) circle { :host([notEnabled]) circle,
:host([notEnabled]) path.connector {
stroke: var(--disabled-clr); stroke: var(--disabled-clr);
} }
svg { svg {

129
src/components/trace/hat-script-graph.ts
View File

@ -96,6 +96,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(config, path)} @focus=${this.selectNode(config, path)}
?active=${this.selected === path} ?active=${this.selected === path}
.iconPath=${mdiAsterisk} .iconPath=${mdiAsterisk}
.notEnabled=${config.enabled === false}
tabindex=${track ? "0" : "-1"} tabindex=${track ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -130,20 +131,31 @@ export class HatScriptGraph extends LitElement {
other: this.render_other_node, other: this.render_other_node,
}; };
private render_action_node(node: Action, path: string, graphStart = false) { private render_action_node(
node: Action,
path: string,
graphStart = false,
disabled = false
) {
const type = const type =
Object.keys(this.typeRenderers).find((key) => key in node) || "other"; Object.keys(this.typeRenderers).find((key) => key in node) || "other";
this.renderedNodes[path] = { config: node, path }; this.renderedNodes[path] = { config: node, path };
if (this.trace && path in this.trace.trace) { if (this.trace && path in this.trace.trace) {
this.trackedNodes[path] = this.renderedNodes[path]; this.trackedNodes[path] = this.renderedNodes[path];
} }
return this.typeRenderers[type].bind(this)(node, path, graphStart); return this.typeRenderers[type].bind(this)(
node,
path,
graphStart,
disabled
);
} }
private render_choose_node( private render_choose_node(
config: ChooseAction, config: ChooseAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined; const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
const trace_path = trace const trace_path = trace
@ -160,12 +172,14 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(config, path)} @focus=${this.selectNode(config, path)}
?track=${trace !== undefined} ?track=${trace !== undefined}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || config.enabled === false}
> >
<hat-graph-node <hat-graph-node
.graphStart=${graphStart} .graphStart=${graphStart}
.iconPath=${mdiArrowDecision} .iconPath=${mdiArrowDecision}
?track=${trace !== undefined} ?track=${trace !== undefined}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || config.enabled === false}
slot="head" slot="head"
nofocus nofocus
></hat-graph-node> ></hat-graph-node>
@ -188,12 +202,15 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(config, branch_path)} @focus=${this.selectNode(config, branch_path)}
?track=${track_this} ?track=${track_this}
?active=${this.selected === branch_path} ?active=${this.selected === branch_path}
.notEnabled=${disabled || config.enabled === false}
></hat-graph-node> ></hat-graph-node>
${branch.sequence !== null ${branch.sequence !== null
? ensureArray(branch.sequence).map((action, j) => ? ensureArray(branch.sequence).map((action, j) =>
this.render_action_node( this.render_action_node(
action, action,
`${branch_path}/sequence/${j}` `${branch_path}/sequence/${j}`,
false,
disabled || config.enabled === false
) )
) )
: ""} : ""}
@ -205,7 +222,12 @@ export class HatScriptGraph extends LitElement {
<hat-graph-spacer ?track=${track_default}></hat-graph-spacer> <hat-graph-spacer ?track=${track_default}></hat-graph-spacer>
${config.default !== null ${config.default !== null
? ensureArray(config.default)?.map((action, i) => ? ensureArray(config.default)?.map((action, i) =>
this.render_action_node(action, `${path}/default/${i}`) this.render_action_node(
action,
`${path}/default/${i}`,
false,
disabled || config.enabled === false
)
) )
: ""} : ""}
</div> </div>
@ -213,7 +235,12 @@ export class HatScriptGraph extends LitElement {
`; `;
} }
private render_if_node(config: IfAction, path: string, graphStart = false) { private render_if_node(
config: IfAction,
path: string,
graphStart = false,
disabled = false
) {
const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined; const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
let trackThen = false; let trackThen = false;
let trackElse = false; let trackElse = false;
@ -234,12 +261,14 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(config, path)} @focus=${this.selectNode(config, path)}
?track=${trace !== undefined} ?track=${trace !== undefined}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || config.enabled === false}
> >
<hat-graph-node <hat-graph-node
.graphStart=${graphStart} .graphStart=${graphStart}
.iconPath=${mdiCallSplit} .iconPath=${mdiCallSplit}
?track=${trace !== undefined} ?track=${trace !== undefined}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || config.enabled === false}
slot="head" slot="head"
nofocus nofocus
></hat-graph-node> ></hat-graph-node>
@ -249,10 +278,16 @@ export class HatScriptGraph extends LitElement {
.iconPath=${mdiCallMissed} .iconPath=${mdiCallMissed}
?track=${trackElse} ?track=${trackElse}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || config.enabled === false}
nofocus nofocus
></hat-graph-node ></hat-graph-node
>${ensureArray(config.else).map((action, j) => >${ensureArray(config.else).map((action, j) =>
this.render_action_node(action, `${path}/else/${j}`) this.render_action_node(
action,
`${path}/else/${j}`,
false,
disabled || config.enabled === false
)
)} )}
</div>` </div>`
: html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`} : html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`}
@ -261,10 +296,16 @@ export class HatScriptGraph extends LitElement {
.iconPath=${mdiCallReceived} .iconPath=${mdiCallReceived}
?track=${trackThen} ?track=${trackThen}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || config.enabled === false}
nofocus nofocus
></hat-graph-node> ></hat-graph-node>
${ensureArray(config.then).map((action, j) => ${ensureArray(config.then).map((action, j) =>
this.render_action_node(action, `${path}/then/${j}`) this.render_action_node(
action,
`${path}/then/${j}`,
false,
disabled || config.enabled === false
)
)} )}
</div> </div>
</hat-graph-branch> </hat-graph-branch>
@ -274,7 +315,8 @@ export class HatScriptGraph extends LitElement {
private render_condition_node( private render_condition_node(
node: Condition, node: Condition,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined; const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
let track = false; let track = false;
@ -300,6 +342,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${track} ?track=${track}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${trace === undefined ? "-1" : "0"} tabindex=${trace === undefined ? "-1" : "0"}
short short
> >
@ -308,6 +351,7 @@ export class HatScriptGraph extends LitElement {
slot="head" slot="head"
?track=${track} ?track=${track}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
.iconPath=${mdiAbTesting} .iconPath=${mdiAbTesting}
nofocus nofocus
></hat-graph-node> ></hat-graph-node>
@ -322,6 +366,7 @@ export class HatScriptGraph extends LitElement {
nofocus nofocus
?track=${trackFailed} ?track=${trackFailed}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
></hat-graph-node> ></hat-graph-node>
</hat-graph-branch> </hat-graph-branch>
`; `;
@ -330,7 +375,8 @@ export class HatScriptGraph extends LitElement {
private render_delay_node( private render_delay_node(
node: DelayAction, node: DelayAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
return html` return html`
<hat-graph-node <hat-graph-node
@ -339,6 +385,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"} tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -347,7 +394,8 @@ export class HatScriptGraph extends LitElement {
private render_device_node( private render_device_node(
node: DeviceAction, node: DeviceAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
return html` return html`
<hat-graph-node <hat-graph-node
@ -356,6 +404,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"} tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -364,7 +413,8 @@ export class HatScriptGraph extends LitElement {
private render_event_node( private render_event_node(
node: EventAction, node: EventAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
return html` return html`
<hat-graph-node <hat-graph-node
@ -373,6 +423,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"} tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -381,7 +432,8 @@ export class HatScriptGraph extends LitElement {
private render_repeat_node( private render_repeat_node(
node: RepeatAction, node: RepeatAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
const trace: any = this.trace.trace[path]; const trace: any = this.trace.trace[path];
const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length; const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
@ -391,12 +443,14 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
> >
<hat-graph-node <hat-graph-node
.graphStart=${graphStart} .graphStart=${graphStart}
.iconPath=${mdiRefresh} .iconPath=${mdiRefresh}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
slot="head" slot="head"
nofocus nofocus
></hat-graph-node> ></hat-graph-node>
@ -404,12 +458,18 @@ export class HatScriptGraph extends LitElement {
.iconPath=${mdiArrowUp} .iconPath=${mdiArrowUp}
?track=${repeats > 1} ?track=${repeats > 1}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
nofocus nofocus
.badge=${repeats > 1 ? repeats : undefined} .badge=${repeats > 1 ? repeats : undefined}
></hat-graph-node> ></hat-graph-node>
<div ?track=${trace}> <div ?track=${trace}>
${ensureArray(node.repeat.sequence).map((action, i) => ${ensureArray(node.repeat.sequence).map((action, i) =>
this.render_action_node(action, `${path}/repeat/sequence/${i}`) this.render_action_node(
action,
`${path}/repeat/sequence/${i}`,
false,
disabled || node.enabled === false
)
)} )}
</div> </div>
</hat-graph-branch> </hat-graph-branch>
@ -419,7 +479,8 @@ export class HatScriptGraph extends LitElement {
private render_scene_node( private render_scene_node(
node: SceneAction, node: SceneAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
return html` return html`
<hat-graph-node <hat-graph-node
@ -428,6 +489,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"} tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -436,7 +498,8 @@ export class HatScriptGraph extends LitElement {
private render_service_node( private render_service_node(
node: ServiceAction, node: ServiceAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
return html` return html`
<hat-graph-node <hat-graph-node
@ -445,6 +508,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"} tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -453,7 +517,8 @@ export class HatScriptGraph extends LitElement {
private render_wait_node( private render_wait_node(
node: WaitAction | WaitForTriggerAction, node: WaitAction | WaitForTriggerAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
return html` return html`
<hat-graph-node <hat-graph-node
@ -462,6 +527,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"} tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
></hat-graph-node> ></hat-graph-node>
`; `;
@ -470,7 +536,8 @@ export class HatScriptGraph extends LitElement {
private render_parallel_node( private render_parallel_node(
node: ParallelAction, node: ParallelAction,
path: string, path: string,
graphStart = false graphStart = false,
disabled = false
) { ) {
const trace: any = this.trace.trace[path]; const trace: any = this.trace.trace[path];
return html` return html`
@ -479,12 +546,14 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
> >
<hat-graph-node <hat-graph-node
.graphStart=${graphStart} .graphStart=${graphStart}
.iconPath=${mdiShuffleDisabled} .iconPath=${mdiShuffleDisabled}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
slot="head" slot="head"
nofocus nofocus
></hat-graph-node> ></hat-graph-node>
@ -495,20 +564,29 @@ export class HatScriptGraph extends LitElement {
(sAction, j) => (sAction, j) =>
this.render_action_node( this.render_action_node(
sAction, sAction,
`${path}/parallel/${i}/sequence/${j}` `${path}/parallel/${i}/sequence/${j}`,
false,
disabled || node.enabled === false
) )
)} )}
</div>` </div>`
: this.render_action_node( : this.render_action_node(
action, action,
`${path}/parallel/${i}/sequence/0` `${path}/parallel/${i}/sequence/0`,
false,
disabled || node.enabled === false
) )
)} )}
</hat-graph-branch> </hat-graph-branch>
`; `;
} }
private render_stop_node(node: Action, path: string, graphStart = false) { private render_stop_node(
node: Action,
path: string,
graphStart = false,
disabled = false
) {
const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined; const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
return html` return html`
<hat-graph-node <hat-graph-node
@ -519,11 +597,17 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
></hat-graph-node> ></hat-graph-node>
`; `;
} }
private render_other_node(node: Action, path: string, graphStart = false) { private render_other_node(
node: Action,
path: string,
graphStart = false,
disabled = false
) {
return html` return html`
<hat-graph-node <hat-graph-node
.graphStart=${graphStart} .graphStart=${graphStart}
@ -531,6 +615,7 @@ export class HatScriptGraph extends LitElement {
@focus=${this.selectNode(node, path)} @focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace} ?track=${path in this.trace.trace}
?active=${this.selected === path} ?active=${this.selected === path}
.notEnabled=${disabled || node.enabled === false}
></hat-graph-node> ></hat-graph-node>
`; `;
} }