mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Add tracing to scripts (#9486)
This commit is contained in:
Bram Kragten
GitHub
parent
de5a817953
commit
4b9487183b
@ -1,16 +1,16 @@
|
||||
import { dump } from "js-yaml";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../../components/ha-code-editor";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import { AutomationTraceExtended } from "../../../../data/trace";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import "../ha-code-editor";
|
||||
import "../ha-icon-button";
|
||||
import { TraceExtended } from "../../data/trace";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-automation-trace-blueprint-config")
|
||||
export class HaAutomationTraceBlueprintConfig extends LitElement {
|
||||
@customElement("ha-trace-blueprint-config")
|
||||
export class HaTraceBlueprintConfig extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public trace!: AutomationTraceExtended;
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
@ -24,6 +24,6 @@ export class HaAutomationTraceBlueprintConfig extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-automation-trace-blueprint-config": HaAutomationTraceBlueprintConfig;
|
||||
"ha-trace-blueprint-config": HaTraceBlueprintConfig;
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,16 @@
|
||||
import { dump } from "js-yaml";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../../components/ha-code-editor";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import { AutomationTraceExtended } from "../../../../data/trace";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import "../ha-code-editor";
|
||||
import "../ha-icon-button";
|
||||
import { TraceExtended } from "../../data/trace";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-automation-trace-config")
|
||||
export class HaAutomationTraceConfig extends LitElement {
|
||||
@customElement("ha-trace-config")
|
||||
export class HaTraceConfig extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public trace!: AutomationTraceExtended;
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
@ -28,6 +28,6 @@ export class HaAutomationTraceConfig extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-automation-trace-config": HaAutomationTraceConfig;
|
||||
"ha-trace-config": HaTraceConfig;
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,19 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "../../../../components/trace/hat-logbook-note";
|
||||
import type { LogbookEntry } from "../../../../data/logbook";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import "../../../logbook/ha-logbook";
|
||||
import { LogbookEntry } from "../../data/logbook";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "./hat-logbook-note";
|
||||
import "../../panels/logbook/ha-logbook";
|
||||
import { TraceExtended } from "../../data/trace";
|
||||
|
||||
@customElement("ha-automation-trace-logbook")
|
||||
export class HaAutomationTraceLogbook extends LitElement {
|
||||
@customElement("ha-trace-logbook")
|
||||
export class HaTraceLogbook extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public narrow!: boolean;
|
||||
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
@property({ attribute: false }) public logbookEntries!: LogbookEntry[];
|
||||
|
||||
protected render(): TemplateResult {
|
||||
@ -22,7 +25,7 @@ export class HaAutomationTraceLogbook extends LitElement {
|
||||
.entries=${this.logbookEntries}
|
||||
.narrow=${this.narrow}
|
||||
></ha-logbook>
|
||||
<hat-logbook-note></hat-logbook-note>
|
||||
<hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
|
||||
`
|
||||
: html`<div class="padded-box">
|
||||
No Logbook entries found for this step.
|
||||
@ -42,6 +45,6 @@ export class HaAutomationTraceLogbook extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-automation-trace-logbook": HaAutomationTraceLogbook;
|
||||
"ha-trace-logbook": HaTraceLogbook;
|
||||
}
|
||||
}
|
||||
@ -2,33 +2,33 @@ import { dump } from "js-yaml";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
|
||||
import "../../../../components/ha-code-editor";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import type { NodeInfo } from "../../../../components/trace/hat-graph";
|
||||
import "../../../../components/trace/hat-logbook-note";
|
||||
import { LogbookEntry } from "../../../../data/logbook";
|
||||
import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
|
||||
import "../ha-code-editor";
|
||||
import "../ha-icon-button";
|
||||
import type { NodeInfo } from "./hat-graph";
|
||||
import "./hat-logbook-note";
|
||||
import { LogbookEntry } from "../../data/logbook";
|
||||
import {
|
||||
ActionTraceStep,
|
||||
AutomationTraceExtended,
|
||||
ChooseActionTraceStep,
|
||||
getDataFromPath,
|
||||
} from "../../../../data/trace";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import "../../../logbook/ha-logbook";
|
||||
import { traceTabStyles } from "./styles";
|
||||
TraceExtended,
|
||||
} from "../../data/trace";
|
||||
import "../../panels/logbook/ha-logbook";
|
||||
import { traceTabStyles } from "./trace-tab-styles";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-automation-trace-path-details")
|
||||
export class HaAutomationTracePathDetails extends LitElement {
|
||||
@customElement("ha-trace-path-details")
|
||||
export class HaTracePathDetails extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public narrow!: boolean;
|
||||
|
||||
@property() private selected!: NodeInfo;
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
@property() public trace!: AutomationTraceExtended;
|
||||
@property({ attribute: false }) public logbookEntries!: LogbookEntry[];
|
||||
|
||||
@property() public logbookEntries!: LogbookEntry[];
|
||||
@property({ attribute: false }) public selected!: NodeInfo;
|
||||
|
||||
@property() renderedNodes: Record<string, any> = {};
|
||||
|
||||
@ -230,7 +230,7 @@ export class HaAutomationTracePathDetails extends LitElement {
|
||||
.entries=${entries}
|
||||
.narrow=${this.narrow}
|
||||
></ha-logbook>
|
||||
<hat-logbook-note></hat-logbook-note>
|
||||
<hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
|
||||
`
|
||||
: html`<div class="padded-box">
|
||||
No Logbook entries found for this step.
|
||||
@ -267,6 +267,6 @@ export class HaAutomationTracePathDetails extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-automation-trace-path-details": HaAutomationTracePathDetails;
|
||||
"ha-trace-path-details": HaTracePathDetails;
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import type { NodeInfo } from "../../../../components/trace/hat-graph";
|
||||
import "../../../../components/trace/hat-logbook-note";
|
||||
import "../../../../components/trace/hat-trace-timeline";
|
||||
import type { LogbookEntry } from "../../../../data/logbook";
|
||||
import type { AutomationTraceExtended } from "../../../../data/trace";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { NodeInfo } from "./hat-graph";
|
||||
import "./hat-logbook-note";
|
||||
import "./hat-trace-timeline";
|
||||
import type { LogbookEntry } from "../../data/logbook";
|
||||
import type { TraceExtended } from "../../data/trace";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-automation-trace-timeline")
|
||||
export class HaAutomationTraceTimeline extends LitElement {
|
||||
@customElement("ha-trace-timeline")
|
||||
export class HaTraceTimeline extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public trace!: AutomationTraceExtended;
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
@property({ attribute: false }) public logbookEntries!: LogbookEntry[];
|
||||
|
||||
@ -27,7 +27,7 @@ export class HaAutomationTraceTimeline extends LitElement {
|
||||
allowPick
|
||||
>
|
||||
</hat-trace-timeline>
|
||||
<hat-logbook-note></hat-logbook-note>
|
||||
<hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -45,6 +45,6 @@ export class HaAutomationTraceTimeline extends LitElement {
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-automation-trace-timeline": HaAutomationTraceTimeline;
|
||||
"ha-trace-timeline": HaTraceTimeline;
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,7 @@ export class HatGraphNode extends LitElement {
|
||||
|
||||
@property({ reflect: true, type: Boolean }) disabled?: boolean;
|
||||
|
||||
@property({ reflect: true, type: Boolean }) graphstart?: boolean;
|
||||
@property({ reflect: true, type: Boolean }) graphStart?: boolean;
|
||||
|
||||
@property({ reflect: true, type: Boolean }) nofocus?: boolean;
|
||||
|
||||
@ -21,20 +21,20 @@ export class HatGraphNode extends LitElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
const height = NODE_SIZE + (this.graphstart ? 2 : SPACING + 1);
|
||||
const height = NODE_SIZE + (this.graphStart ? 2 : SPACING + 1);
|
||||
const width = SPACING + NODE_SIZE;
|
||||
return svg`
|
||||
<svg
|
||||
width="${width}px"
|
||||
height="${height}px"
|
||||
viewBox="-${Math.ceil(width / 2)} -${
|
||||
this.graphstart
|
||||
this.graphStart
|
||||
? Math.ceil(height / 2)
|
||||
: Math.ceil((NODE_SIZE + SPACING * 2) / 2)
|
||||
} ${width} ${height}"
|
||||
>
|
||||
${
|
||||
this.graphstart
|
||||
this.graphStart
|
||||
? ``
|
||||
: svg`
|
||||
<path
|
||||
|
||||
@ -30,16 +30,16 @@ export class HatGraph extends LitElement {
|
||||
|
||||
@property({ reflect: true, type: Boolean }) branching?: boolean;
|
||||
|
||||
@property({ reflect: true, converter: track_converter })
|
||||
@property({ converter: track_converter })
|
||||
track_start?: number[];
|
||||
|
||||
@property({ reflect: true, converter: track_converter }) track_end?: number[];
|
||||
@property({ converter: track_converter }) track_end?: number[];
|
||||
|
||||
@property({ reflect: true, type: Boolean }) disabled?: boolean;
|
||||
|
||||
@property({ reflect: true, type: Boolean }) selected?: boolean;
|
||||
@property({ type: Boolean }) selected?: boolean;
|
||||
|
||||
@property({ reflect: true, type: Boolean }) short = false;
|
||||
@property({ type: Boolean }) short = false;
|
||||
|
||||
async updateChildren() {
|
||||
this._num_items = this.children.length;
|
||||
@ -68,7 +68,7 @@ export class HatGraph extends LitElement {
|
||||
|
||||
return html`
|
||||
<slot name="head" @slotchange=${this.updateChildren}> </slot>
|
||||
${this.branching
|
||||
${this.branching && branches.some((branch) => !branch.start)
|
||||
? svg`
|
||||
<svg
|
||||
id="top"
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
|
||||
@customElement("hat-logbook-note")
|
||||
class HatLogbookNote extends LitElement {
|
||||
@property() public domain = "automation";
|
||||
|
||||
render() {
|
||||
return html`
|
||||
Not all shown logbook entries might be related to this automation.
|
||||
Not all shown logbook entries might be related to this ${this.domain}.
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -36,9 +36,9 @@ import {
|
||||
WaitForTriggerAction,
|
||||
} from "../../data/script";
|
||||
import {
|
||||
AutomationTraceExtended,
|
||||
ChooseActionTraceStep,
|
||||
ConditionTraceStep,
|
||||
TraceExtended,
|
||||
} from "../../data/trace";
|
||||
import "../ha-svg-icon";
|
||||
import { NodeInfo, NODE_SIZE, SPACING } from "./hat-graph";
|
||||
@ -53,7 +53,7 @@ declare global {
|
||||
|
||||
@customElement("hat-script-graph")
|
||||
class HatScriptGraph extends LitElement {
|
||||
@property({ attribute: false }) public trace!: AutomationTraceExtended;
|
||||
@property({ attribute: false }) public trace!: TraceExtended;
|
||||
|
||||
@property({ attribute: false }) public selected;
|
||||
|
||||
@ -137,7 +137,11 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_choose_node(config: ChooseAction, path: string) {
|
||||
private render_choose_node(
|
||||
config: ChooseAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
|
||||
const trace_path = trace?.[0].result
|
||||
? trace[0].result.choice === "default"
|
||||
@ -157,6 +161,7 @@ class HatScriptGraph extends LitElement {
|
||||
})}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiCallSplit}
|
||||
class=${classMap({
|
||||
track: trace !== undefined,
|
||||
@ -210,7 +215,11 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_condition_node(node: Condition, path: string) {
|
||||
private render_condition_node(
|
||||
node: Condition,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
const trace = (this.trace.trace[path] as ConditionTraceStep[]) || undefined;
|
||||
const track_path =
|
||||
trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
|
||||
@ -228,23 +237,18 @@ class HatScriptGraph extends LitElement {
|
||||
short
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
slot="head"
|
||||
class=${classMap({
|
||||
track: Boolean(trace),
|
||||
})}
|
||||
.iconPath=${mdiAbTesting}
|
||||
nofocus
|
||||
graphEnd
|
||||
></hat-graph-node>
|
||||
<div
|
||||
style=${`width: ${NODE_SIZE + SPACING}px;`}
|
||||
graphStart
|
||||
graphEnd
|
||||
></div>
|
||||
<div style=${`width: ${NODE_SIZE + SPACING}px;`}></div>
|
||||
<div></div>
|
||||
<hat-graph-node
|
||||
.iconPath=${mdiClose}
|
||||
graphEnd
|
||||
nofocus
|
||||
class=${classMap({
|
||||
track: track_path === 2,
|
||||
@ -254,9 +258,14 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_delay_node(node: DelayAction, path: string) {
|
||||
private render_delay_node(
|
||||
node: DelayAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiTimerOutline}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -268,9 +277,14 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_device_node(node: DeviceAction, path: string) {
|
||||
private render_device_node(
|
||||
node: DeviceAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiDevices}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -282,9 +296,14 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_event_node(node: EventAction, path: string) {
|
||||
private render_event_node(
|
||||
node: EventAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiExclamation}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -296,7 +315,11 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_repeat_node(node: RepeatAction, path: string) {
|
||||
private render_repeat_node(
|
||||
node: RepeatAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
const trace: any = this.trace.trace[path];
|
||||
const track_path = trace ? [0, 1] : [];
|
||||
const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
|
||||
@ -313,6 +336,7 @@ class HatScriptGraph extends LitElement {
|
||||
})}
|
||||
>
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiRefresh}
|
||||
class=${classMap({
|
||||
track: trace,
|
||||
@ -337,9 +361,14 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_scene_node(node: SceneAction, path: string) {
|
||||
private render_scene_node(
|
||||
node: SceneAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiExclamation}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -351,9 +380,14 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_service_node(node: ServiceAction, path: string) {
|
||||
private render_service_node(
|
||||
node: ServiceAction,
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiChevronRight}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -367,10 +401,12 @@ class HatScriptGraph extends LitElement {
|
||||
|
||||
private render_wait_node(
|
||||
node: WaitAction | WaitForTriggerAction,
|
||||
path: string
|
||||
path: string,
|
||||
graphStart = false
|
||||
) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiTrafficLight}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -382,9 +418,10 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_other_node(node: Action, path: string) {
|
||||
private render_other_node(node: Action, path: string, graphStart = false) {
|
||||
return html`
|
||||
<hat-graph-node
|
||||
.graphStart=${graphStart}
|
||||
.iconPath=${mdiCodeBrackets}
|
||||
@focus=${this.selectNode(node, path)}
|
||||
class=${classMap({
|
||||
@ -395,7 +432,7 @@ class HatScriptGraph extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private render_node(node: Action, path: string) {
|
||||
private render_node(node: Action, path: string, graphStart = false) {
|
||||
const NODE_TYPES = {
|
||||
choose: this.render_choose_node,
|
||||
condition: this.render_condition_node,
|
||||
@ -411,7 +448,7 @@ class HatScriptGraph extends LitElement {
|
||||
};
|
||||
|
||||
const type = Object.keys(NODE_TYPES).find((key) => key in node) || "other";
|
||||
const nodeEl = NODE_TYPES[type].bind(this)(node, path);
|
||||
const nodeEl = NODE_TYPES[type].bind(this)(node, path, graphStart);
|
||||
this.renderedNodes[path] = { config: node, path };
|
||||
if (this.trace && path in this.trace.trace) {
|
||||
this.trackedNodes[path] = this.renderedNodes[path];
|
||||
@ -423,35 +460,47 @@ class HatScriptGraph extends LitElement {
|
||||
const paths = Object.keys(this.trackedNodes);
|
||||
const manual_triggered = this.trace && "trigger" in this.trace.trace;
|
||||
let track_path = manual_triggered ? undefined : [0];
|
||||
const trigger_nodes = ensureArray(this.trace.config.trigger).map(
|
||||
(trigger, i) => {
|
||||
if (this.trace && `trigger/${i}` in this.trace.trace) {
|
||||
track_path = [i];
|
||||
}
|
||||
return this.render_trigger(trigger, i);
|
||||
}
|
||||
);
|
||||
const trigger_nodes =
|
||||
"trigger" in this.trace.config
|
||||
? ensureArray(this.trace.config.trigger).map((trigger, i) => {
|
||||
if (this.trace && `trigger/${i}` in this.trace.trace) {
|
||||
track_path = [i];
|
||||
}
|
||||
return this.render_trigger(trigger, i);
|
||||
})
|
||||
: undefined;
|
||||
try {
|
||||
return html`
|
||||
<hat-graph class="parent">
|
||||
<div></div>
|
||||
<hat-graph
|
||||
branching
|
||||
id="trigger"
|
||||
.short=${trigger_nodes.length < 2}
|
||||
.track_start=${track_path}
|
||||
.track_end=${track_path}
|
||||
>
|
||||
${trigger_nodes}
|
||||
</hat-graph>
|
||||
<hat-graph id="condition">
|
||||
${ensureArray(this.trace.config.condition)?.map((condition, i) =>
|
||||
this.render_condition(condition!, i)
|
||||
)}
|
||||
</hat-graph>
|
||||
${ensureArray(this.trace.config.action).map((action, i) =>
|
||||
this.render_node(action, `action/${i}`)
|
||||
)}
|
||||
${trigger_nodes
|
||||
? html`<hat-graph
|
||||
branching
|
||||
id="trigger"
|
||||
.short=${trigger_nodes.length < 2}
|
||||
.track_start=${track_path}
|
||||
.track_end=${track_path}
|
||||
>
|
||||
${trigger_nodes}
|
||||
</hat-graph>`
|
||||
: ""}
|
||||
${"condition" in this.trace.config
|
||||
? html`<hat-graph id="condition">
|
||||
${ensureArray(
|
||||
this.trace.config.condition
|
||||
)?.map((condition, i) => this.render_condition(condition!, i))}
|
||||
</hat-graph>`
|
||||
: ""}
|
||||
${"action" in this.trace.config
|
||||
? html`${ensureArray(this.trace.config.action).map((action, i) =>
|
||||
this.render_node(action, `action/${i}`)
|
||||
)}`
|
||||
: ""}
|
||||
${"sequence" in this.trace.config
|
||||
? html`${ensureArray(this.trace.config.sequence).map((action, i) =>
|
||||
this.render_node(action, `sequence/${i}`, i === 0)
|
||||
)}`
|
||||
: ""}
|
||||
</hat-graph>
|
||||
<div class="actions">
|
||||
<mwc-icon-button
|
||||
@ -564,6 +613,7 @@ class HatScriptGraph extends LitElement {
|
||||
}
|
||||
.parent {
|
||||
margin-left: 8px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.error {
|
||||
padding: 16px;
|
||||
|
||||
@ -7,6 +7,7 @@ import { computeObjectId } from "../common/entity/compute_object_id";
|
||||
import { navigate } from "../common/navigate";
|
||||
import { HomeAssistant } from "../types";
|
||||
import { Condition, Trigger } from "./automation";
|
||||
import { BlueprintInput } from "./blueprint";
|
||||
|
||||
export const MODES = ["single", "restart", "queued", "parallel"] as const;
|
||||
export const MODES_MAX = ["queued", "parallel"];
|
||||
@ -28,6 +29,10 @@ export interface ScriptConfig {
|
||||
max?: number;
|
||||
}
|
||||
|
||||
export interface BlueprintScriptConfig extends ScriptConfig {
|
||||
use_blueprint: { path: string; input?: BlueprintInput };
|
||||
}
|
||||
|
||||
export interface EventAction {
|
||||
alias?: string;
|
||||
event: string;
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
BlueprintAutomationConfig,
|
||||
ManualAutomationConfig,
|
||||
} from "./automation";
|
||||
import { BlueprintScriptConfig, ScriptConfig } from "./script";
|
||||
|
||||
interface BaseTraceStep {
|
||||
path: string;
|
||||
@ -54,7 +55,7 @@ export type ActionTraceStep =
|
||||
| ChooseActionTraceStep
|
||||
| ChooseChoiceActionTraceStep;
|
||||
|
||||
export interface AutomationTrace {
|
||||
interface BaseTrace {
|
||||
domain: string;
|
||||
item_id: string;
|
||||
last_step: string | null;
|
||||
@ -81,23 +82,46 @@ export interface AutomationTrace {
|
||||
// The exception is in the trace itself or in the last element of the trace
|
||||
// Script execution stopped by async_stop called on the script run because home assistant is shutting down, script mode is SCRIPT_MODE_RESTART etc:
|
||||
| "cancelled";
|
||||
// Automation only, should become it's own type when we support script in frontend
|
||||
}
|
||||
|
||||
interface BaseTraceExtended {
|
||||
trace: Record<string, ActionTraceStep[]>;
|
||||
context: Context;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface AutomationTrace extends BaseTrace {
|
||||
domain: "automation";
|
||||
trigger: string;
|
||||
}
|
||||
|
||||
export interface AutomationTraceExtended extends AutomationTrace {
|
||||
trace: Record<string, ActionTraceStep[]>;
|
||||
context: Context;
|
||||
export interface AutomationTraceExtended
|
||||
extends AutomationTrace,
|
||||
BaseTraceExtended {
|
||||
config: ManualAutomationConfig;
|
||||
blueprint_inputs?: BlueprintAutomationConfig;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface ScriptTrace extends BaseTrace {
|
||||
domain: "script";
|
||||
}
|
||||
|
||||
export interface ScriptTraceExtended extends ScriptTrace, BaseTraceExtended {
|
||||
config: ScriptConfig;
|
||||
blueprint_inputs?: BlueprintScriptConfig;
|
||||
}
|
||||
|
||||
export type TraceExtended = AutomationTraceExtended | ScriptTraceExtended;
|
||||
|
||||
interface TraceTypes {
|
||||
automation: {
|
||||
short: AutomationTrace;
|
||||
extended: AutomationTraceExtended;
|
||||
};
|
||||
script: {
|
||||
short: ScriptTrace;
|
||||
extended: ScriptTraceExtended;
|
||||
};
|
||||
}
|
||||
|
||||
export const loadTrace = <T extends keyof TraceTypes>(
|
||||
@ -141,7 +165,7 @@ export const loadTraceContexts = (
|
||||
});
|
||||
|
||||
export const getDataFromPath = (
|
||||
config: ManualAutomationConfig,
|
||||
config: TraceExtended["config"],
|
||||
path: string
|
||||
): any => {
|
||||
const parts = path.split("/").reverse();
|
||||
|
||||
@ -9,31 +9,28 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
|
||||
import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
|
||||
import type { NodeInfo } from "../../../../components/trace/hat-graph";
|
||||
import "../../../../components/trace/hat-script-graph";
|
||||
import { AutomationEntity } from "../../../../data/automation";
|
||||
import {
|
||||
getLogbookDataForContext,
|
||||
LogbookEntry,
|
||||
} from "../../../../data/logbook";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
|
||||
import type { NodeInfo } from "../../../components/trace/hat-graph";
|
||||
import "../../../components/trace/hat-script-graph";
|
||||
import { AutomationEntity } from "../../../data/automation";
|
||||
import { getLogbookDataForContext, LogbookEntry } from "../../../data/logbook";
|
||||
import {
|
||||
AutomationTrace,
|
||||
AutomationTraceExtended,
|
||||
loadTrace,
|
||||
loadTraces,
|
||||
} from "../../../../data/trace";
|
||||
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../../types";
|
||||
import { configSections } from "../../ha-panel-config";
|
||||
import "./ha-automation-trace-blueprint-config";
|
||||
import "./ha-automation-trace-config";
|
||||
import "./ha-automation-trace-logbook";
|
||||
import "./ha-automation-trace-path-details";
|
||||
import "./ha-automation-trace-timeline";
|
||||
import { traceTabStyles } from "./styles";
|
||||
} from "../../../data/trace";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "../../../components/trace/ha-trace-blueprint-config";
|
||||
import "../../../components/trace/ha-trace-config";
|
||||
import "../../../components/trace/ha-trace-logbook";
|
||||
import "../../../components/trace/ha-trace-path-details";
|
||||
import "../../../components/trace/ha-trace-timeline";
|
||||
import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
|
||||
|
||||
@customElement("ha-automation-trace")
|
||||
export class HaAutomationTrace extends LitElement {
|
||||
@ -209,7 +206,7 @@ export class HaAutomationTrace extends LitElement {
|
||||
@click=${this._showTab}
|
||||
>
|
||||
Blueprint Config
|
||||
</div>
|
||||
</button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -219,46 +216,47 @@ export class HaAutomationTrace extends LitElement {
|
||||
? ""
|
||||
: this._view === "details"
|
||||
? html`
|
||||
<ha-automation-trace-path-details
|
||||
<ha-trace-path-details
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.trace=${this._trace}
|
||||
.selected=${this._selected}
|
||||
.logbookEntries=${this._logbookEntries}
|
||||
.trackedNodes=${trackedNodes}
|
||||
.renderedNodes=${renderedNodes}
|
||||
></ha-automation-trace-path-details>
|
||||
.renderedNodes=${renderedNodes!}
|
||||
></ha-trace-path-details>
|
||||
`
|
||||
: this._view === "config"
|
||||
? html`
|
||||
<ha-automation-trace-config
|
||||
<ha-trace-config
|
||||
.hass=${this.hass}
|
||||
.trace=${this._trace}
|
||||
></ha-automation-trace-config>
|
||||
></ha-trace-config>
|
||||
`
|
||||
: this._view === "logbook"
|
||||
? html`
|
||||
<ha-automation-trace-logbook
|
||||
<ha-trace-logbook
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.trace=${this._trace}
|
||||
.logbookEntries=${this._logbookEntries}
|
||||
></ha-automation-trace-logbook>
|
||||
></ha-trace-logbook>
|
||||
`
|
||||
: this._view === "blueprint"
|
||||
? html`
|
||||
<ha-automation-trace-blueprint-config
|
||||
<ha-trace-blueprint-config
|
||||
.hass=${this.hass}
|
||||
.trace=${this._trace}
|
||||
></ha-automation-trace-blueprint-config>
|
||||
></ha-trace-blueprint-config>
|
||||
`
|
||||
: html`
|
||||
<ha-automation-trace-timeline
|
||||
<ha-trace-timeline
|
||||
.hass=${this.hass}
|
||||
.trace=${this._trace}
|
||||
.logbookEntries=${this._logbookEntries}
|
||||
.selected=${this._selected}
|
||||
@value-changed=${this._timelinePathPicked}
|
||||
></ha-automation-trace-timeline>
|
||||
></ha-trace-timeline>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
@ -51,7 +51,7 @@ class HaConfigAutomation extends HassRouterPage {
|
||||
},
|
||||
trace: {
|
||||
tag: "ha-automation-trace",
|
||||
load: () => import("./trace/ha-automation-trace"),
|
||||
load: () => import("./ha-automation-trace"),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -42,6 +42,10 @@ class HaConfigScript extends HassRouterPage {
|
||||
edit: {
|
||||
tag: "ha-script-editor",
|
||||
},
|
||||
trace: {
|
||||
tag: "ha-script-trace",
|
||||
load: () => import("./ha-script-trace"),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -81,7 +85,7 @@ class HaConfigScript extends HassRouterPage {
|
||||
|
||||
if (
|
||||
(!changedProps || changedProps.has("route")) &&
|
||||
this._currentPage === "edit"
|
||||
this._currentPage !== "dashboard"
|
||||
) {
|
||||
pageEl.creatingNew = undefined;
|
||||
const scriptEntityId = this.routeTail.path.substr(1);
|
||||
|
||||
@ -297,7 +297,16 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||
<div
|
||||
class="card-actions layout horizontal justified center"
|
||||
>
|
||||
<span></span>
|
||||
<a
|
||||
href="/config/script/trace/${this
|
||||
.scriptEntityId}"
|
||||
>
|
||||
<mwc-button>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.script.editor.show_trace"
|
||||
)}
|
||||
</mwc-button>
|
||||
</a>
|
||||
<mwc-button
|
||||
@click=${this._runScript}
|
||||
title="${this.hass.localize(
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import "@material/mwc-icon-button";
|
||||
import {
|
||||
mdiHelpCircle,
|
||||
mdiHistory,
|
||||
mdiInformationOutline,
|
||||
mdiPencil,
|
||||
mdiPlay,
|
||||
@ -140,6 +141,21 @@ class HaScriptPicker extends LitElement {
|
||||
</mwc-icon-button>
|
||||
`,
|
||||
};
|
||||
columns.trace = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
template: (_info, script: any) => html`
|
||||
<a href="/config/script/trace/${script.entity_id}">
|
||||
<mwc-icon-button
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.script.picker.dev_script"
|
||||
)}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiHistory}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</a>
|
||||
`,
|
||||
};
|
||||
columns.edit = {
|
||||
title: "",
|
||||
type: "icon-button",
|
||||
|
||||
502
src/panels/config/script/ha-script-trace.ts
Normal file
502
src/panels/config/script/ha-script-trace.ts
Normal file
@ -0,0 +1,502 @@
|
||||
import {
|
||||
mdiDownload,
|
||||
mdiPencil,
|
||||
mdiRayEndArrow,
|
||||
mdiRayStartArrow,
|
||||
mdiRefresh,
|
||||
} from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
|
||||
import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
|
||||
import type { NodeInfo } from "../../../components/trace/hat-graph";
|
||||
import "../../../components/trace/hat-script-graph";
|
||||
import { getLogbookDataForContext, LogbookEntry } from "../../../data/logbook";
|
||||
import { ScriptEntity } from "../../../data/script";
|
||||
import {
|
||||
loadTrace,
|
||||
loadTraces,
|
||||
ScriptTrace,
|
||||
ScriptTraceExtended,
|
||||
} from "../../../data/trace";
|
||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||
import { haStyle } from "../../../resources/styles";
|
||||
import { HomeAssistant, Route } from "../../../types";
|
||||
import { traceTabStyles } from "../../../components/trace/trace-tab-styles";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import "../../../components/trace/ha-trace-blueprint-config";
|
||||
import "../../../components/trace/ha-trace-config";
|
||||
import "../../../components/trace/ha-trace-logbook";
|
||||
import "../../../components/trace/ha-trace-path-details";
|
||||
import "../../../components/trace/ha-trace-timeline";
|
||||
|
||||
@customElement("ha-script-trace")
|
||||
export class HaScriptTrace extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public scriptEntityId!: string;
|
||||
|
||||
@property({ attribute: false }) public scripts!: ScriptEntity[];
|
||||
|
||||
@property({ type: Boolean }) public isWide?: boolean;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public narrow!: boolean;
|
||||
|
||||
@property({ attribute: false }) public route!: Route;
|
||||
|
||||
@state() private _traces?: ScriptTrace[];
|
||||
|
||||
@state() private _runId?: string;
|
||||
|
||||
@state() private _selected?: NodeInfo;
|
||||
|
||||
@state() private _trace?: ScriptTraceExtended;
|
||||
|
||||
@state() private _logbookEntries?: LogbookEntry[];
|
||||
|
||||
@state() private _view:
|
||||
| "details"
|
||||
| "config"
|
||||
| "timeline"
|
||||
| "logbook"
|
||||
| "blueprint" = "details";
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const stateObj = this.scriptEntityId
|
||||
? this.hass.states[this.scriptEntityId]
|
||||
: undefined;
|
||||
|
||||
const graph = this.shadowRoot!.querySelector("hat-script-graph");
|
||||
const trackedNodes = graph?.trackedNodes;
|
||||
const renderedNodes = graph?.renderedNodes;
|
||||
|
||||
const title = stateObj?.attributes.friendly_name || this.scriptEntityId;
|
||||
|
||||
let devButtons: TemplateResult | string = "";
|
||||
if (__DEV__) {
|
||||
devButtons = html`<div style="position: absolute; right: 0;">
|
||||
<button @click=${this._importTrace}>Import trace</button>
|
||||
<button @click=${this._loadLocalStorageTrace}>Load stored trace</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
const actionButtons = html`
|
||||
<mwc-icon-button label="Refresh" @click=${() => this._loadTraces()}>
|
||||
<ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<mwc-icon-button
|
||||
.disabled=${!this._trace}
|
||||
label="Download Trace"
|
||||
@click=${this._downloadTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`;
|
||||
|
||||
return html`
|
||||
${devButtons}
|
||||
<hass-tabs-subpage
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.route=${this.route}
|
||||
.tabs=${configSections.automation}
|
||||
>
|
||||
${this.narrow
|
||||
? html`<span slot="header"> ${title} </span>
|
||||
<div slot="toolbar-icon">${actionButtons}</div>`
|
||||
: ""}
|
||||
<div class="toolbar">
|
||||
${!this.narrow
|
||||
? html`<div>
|
||||
${title}
|
||||
<a
|
||||
class="linkButton"
|
||||
href="/config/script/edit/${this.scriptEntityId}"
|
||||
>
|
||||
<mwc-icon-button label="Edit Script" tabindex="-1">
|
||||
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</a>
|
||||
</div>`
|
||||
: ""}
|
||||
${this._traces && this._traces.length > 0
|
||||
? html`
|
||||
<div>
|
||||
<mwc-icon-button
|
||||
.disabled=${this._traces[this._traces.length - 1].run_id ===
|
||||
this._runId}
|
||||
label="Older trace"
|
||||
@click=${this._pickOlderTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRayEndArrow}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
<select .value=${this._runId} @change=${this._pickTrace}>
|
||||
${repeat(
|
||||
this._traces,
|
||||
(trace) => trace.run_id,
|
||||
(trace) =>
|
||||
html`<option value=${trace.run_id}>
|
||||
${formatDateTimeWithSeconds(
|
||||
new Date(trace.timestamp.start),
|
||||
this.hass.locale
|
||||
)}
|
||||
</option>`
|
||||
)}
|
||||
</select>
|
||||
<mwc-icon-button
|
||||
.disabled=${this._traces[0].run_id === this._runId}
|
||||
label="Newer trace"
|
||||
@click=${this._pickNewerTrace}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiRayStartArrow}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${!this.narrow ? html`<div>${actionButtons}</div>` : ""}
|
||||
</div>
|
||||
|
||||
${this._traces === undefined
|
||||
? html`<div class="container">Loading…</div>`
|
||||
: this._traces.length === 0
|
||||
? html`<div class="container">No traces found</div>`
|
||||
: this._trace === undefined
|
||||
? ""
|
||||
: html`
|
||||
<div class="main">
|
||||
<div class="graph">
|
||||
<hat-script-graph
|
||||
.trace=${this._trace}
|
||||
.selected=${this._selected?.path}
|
||||
@graph-node-selected=${this._pickNode}
|
||||
></hat-script-graph>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="tabs top">
|
||||
${[
|
||||
["details", "Step Details"],
|
||||
["timeline", "Trace Timeline"],
|
||||
["logbook", "Related logbook entries"],
|
||||
["config", "Script Config"],
|
||||
].map(
|
||||
([view, label]) => html`
|
||||
<button
|
||||
tabindex="0"
|
||||
.view=${view}
|
||||
class=${classMap({ active: this._view === view })}
|
||||
@click=${this._showTab}
|
||||
>
|
||||
${label}
|
||||
</button>
|
||||
`
|
||||
)}
|
||||
${this._trace.blueprint_inputs
|
||||
? html`
|
||||
<button
|
||||
tabindex="0"
|
||||
.view=${"blueprint"}
|
||||
class=${classMap({
|
||||
active: this._view === "blueprint",
|
||||
})}
|
||||
@click=${this._showTab}
|
||||
>
|
||||
Blueprint Config
|
||||
</button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
${this._selected === undefined ||
|
||||
this._logbookEntries === undefined ||
|
||||
trackedNodes === undefined
|
||||
? ""
|
||||
: this._view === "details"
|
||||
? html`
|
||||
<ha-trace-path-details
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.trace=${this._trace}
|
||||
.selected=${this._selected}
|
||||
.logbookEntries=${this._logbookEntries}
|
||||
.trackedNodes=${trackedNodes}
|
||||
.renderedNodes=${renderedNodes!}
|
||||
></ha-trace-path-details>
|
||||
`
|
||||
: this._view === "config"
|
||||
? html`
|
||||
<ha-trace-config
|
||||
.hass=${this.hass}
|
||||
.trace=${this._trace}
|
||||
></ha-trace-config>
|
||||
`
|
||||
: this._view === "logbook"
|
||||
? html`
|
||||
<ha-trace-logbook
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.trace=${this._trace}
|
||||
.logbookEntries=${this._logbookEntries}
|
||||
></ha-trace-logbook>
|
||||
`
|
||||
: this._view === "blueprint"
|
||||
? html`
|
||||
<ha-trace-blueprint-config
|
||||
.hass=${this.hass}
|
||||
.trace=${this._trace}
|
||||
></ha-trace-blueprint-config>
|
||||
`
|
||||
: html`
|
||||
<ha-trace-timeline
|
||||
.hass=${this.hass}
|
||||
.trace=${this._trace}
|
||||
.logbookEntries=${this._logbookEntries}
|
||||
.selected=${this._selected}
|
||||
@value-changed=${this._timelinePathPicked}
|
||||
></ha-trace-timeline>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</hass-tabs-subpage>
|
||||
`;
|
||||
}
|
||||
|
||||
protected firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
|
||||
if (!this.scriptEntityId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
this._loadTraces(params.get("run_id") || undefined);
|
||||
}
|
||||
|
||||
protected updated(changedProps) {
|
||||
super.updated(changedProps);
|
||||
|
||||
// Only reset if automationId has changed and we had one before.
|
||||
if (changedProps.get("scriptEntityId")) {
|
||||
this._traces = undefined;
|
||||
this._runId = undefined;
|
||||
this._trace = undefined;
|
||||
this._logbookEntries = undefined;
|
||||
if (this.scriptEntityId) {
|
||||
this._loadTraces();
|
||||
}
|
||||
}
|
||||
|
||||
if (changedProps.has("_runId") && this._runId) {
|
||||
this._trace = undefined;
|
||||
this._logbookEntries = undefined;
|
||||
this.shadowRoot!.querySelector("select")!.value = this._runId;
|
||||
this._loadTrace();
|
||||
}
|
||||
}
|
||||
|
||||
private _pickOlderTrace() {
|
||||
const curIndex = this._traces!.findIndex((tr) => tr.run_id === this._runId);
|
||||
this._runId = this._traces![curIndex + 1].run_id;
|
||||
this._selected = undefined;
|
||||
}
|
||||
|
||||
private _pickNewerTrace() {
|
||||
const curIndex = this._traces!.findIndex((tr) => tr.run_id === this._runId);
|
||||
this._runId = this._traces![curIndex - 1].run_id;
|
||||
this._selected = undefined;
|
||||
}
|
||||
|
||||
private _pickTrace(ev) {
|
||||
this._runId = ev.target.value;
|
||||
this._selected = undefined;
|
||||
}
|
||||
|
||||
private _pickNode(ev) {
|
||||
this._selected = ev.detail;
|
||||
}
|
||||
|
||||
private async _loadTraces(runId?: string) {
|
||||
this._traces = await loadTraces(
|
||||
this.hass,
|
||||
"script",
|
||||
this.scriptEntityId.split(".")[1]
|
||||
);
|
||||
// Newest will be on top.
|
||||
this._traces.reverse();
|
||||
|
||||
if (runId) {
|
||||
this._runId = runId;
|
||||
}
|
||||
|
||||
// Check if current run ID still exists
|
||||
if (
|
||||
this._runId &&
|
||||
!this._traces.some((trace) => trace.run_id === this._runId)
|
||||
) {
|
||||
this._runId = undefined;
|
||||
this._selected = undefined;
|
||||
|
||||
// If we came here from a trace passed into the url, clear it.
|
||||
if (runId) {
|
||||
const params = new URLSearchParams(location.search);
|
||||
params.delete("run_id");
|
||||
history.replaceState(
|
||||
null,
|
||||
"",
|
||||
`${location.pathname}?${params.toString()}`
|
||||
);
|
||||
}
|
||||
|
||||
await showAlertDialog(this, {
|
||||
text: "Chosen trace is no longer available",
|
||||
});
|
||||
}
|
||||
|
||||
// See if we can set a default runID
|
||||
if (!this._runId && this._traces.length > 0) {
|
||||
this._runId = this._traces[0].run_id;
|
||||
}
|
||||
}
|
||||
|
||||
private async _loadTrace() {
|
||||
const trace = await loadTrace(
|
||||
this.hass,
|
||||
"script",
|
||||
this.scriptEntityId.split(".")[1],
|
||||
this._runId!
|
||||
);
|
||||
this._logbookEntries = isComponentLoaded(this.hass, "logbook")
|
||||
? await getLogbookDataForContext(
|
||||
this.hass,
|
||||
trace.timestamp.start,
|
||||
trace.context.id
|
||||
)
|
||||
: [];
|
||||
|
||||
this._trace = trace;
|
||||
}
|
||||
|
||||
private _downloadTrace() {
|
||||
const aEl = document.createElement("a");
|
||||
aEl.download = `trace ${this.scriptEntityId} ${
|
||||
this._trace!.timestamp.start
|
||||
}.json`;
|
||||
aEl.href = `data:application/json;charset=utf-8,${encodeURI(
|
||||
JSON.stringify(
|
||||
{
|
||||
trace: this._trace,
|
||||
logbookEntries: this._logbookEntries,
|
||||
},
|
||||
undefined,
|
||||
2
|
||||
)
|
||||
)}`;
|
||||
aEl.click();
|
||||
}
|
||||
|
||||
private _importTrace() {
|
||||
const traceText = prompt("Enter downloaded trace");
|
||||
if (!traceText) {
|
||||
return;
|
||||
}
|
||||
localStorage.devTrace = traceText;
|
||||
this._loadLocalTrace(traceText);
|
||||
}
|
||||
|
||||
private _loadLocalStorageTrace() {
|
||||
if (localStorage.devTrace) {
|
||||
this._loadLocalTrace(localStorage.devTrace);
|
||||
}
|
||||
}
|
||||
|
||||
private _loadLocalTrace(traceText: string) {
|
||||
const traceInfo = JSON.parse(traceText);
|
||||
this._trace = traceInfo.trace;
|
||||
this._logbookEntries = traceInfo.logbookEntries;
|
||||
}
|
||||
|
||||
private _showTab(ev) {
|
||||
this._view = (ev.target as any).view;
|
||||
}
|
||||
|
||||
private _timelinePathPicked(ev) {
|
||||
const path = ev.detail.value;
|
||||
const nodes = this.shadowRoot!.querySelector("hat-script-graph")!
|
||||
.trackedNodes;
|
||||
if (nodes[path]) {
|
||||
this._selected = nodes[path];
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
haStyle,
|
||||
traceTabStyles,
|
||||
css`
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 20px;
|
||||
height: var(--header-height);
|
||||
padding: 0 16px;
|
||||
background-color: var(--primary-background-color);
|
||||
font-weight: 400;
|
||||
color: var(--app-header-text-color, white);
|
||||
border-bottom: var(--app-header-border-bottom, none);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toolbar > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host([narrow]) .toolbar > * {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: calc(100% - 56px);
|
||||
display: flex;
|
||||
background-color: var(--card-background-color);
|
||||
}
|
||||
|
||||
:host([narrow]) .main {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.graph {
|
||||
border-right: 1px solid var(--divider-color);
|
||||
overflow-x: auto;
|
||||
max-width: 50%;
|
||||
}
|
||||
:host([narrow]) .graph {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
background-color: var(--card-background-color);
|
||||
}
|
||||
|
||||
.linkButton {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-script-trace": HaScriptTrace;
|
||||
}
|
||||
}
|
||||
@ -303,7 +303,7 @@
|
||||
"entries_not_found": "No logbook entries found.",
|
||||
"by": "by",
|
||||
"by_service": "by service",
|
||||
"show_trace": "Show trace",
|
||||
"show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]",
|
||||
"retrieval_error": "Error during logbook entry retrieval",
|
||||
"messages": {
|
||||
"was_away": "was detected away",
|
||||
@ -1640,6 +1640,7 @@
|
||||
"show_info": "Show info about script",
|
||||
"run_script": "Run script",
|
||||
"edit_script": "Edit script",
|
||||
"dev_script": "Debug script",
|
||||
"headers": {
|
||||
"name": "Name"
|
||||
},
|
||||
@ -1653,6 +1654,7 @@
|
||||
"id_already_exists_save_error": "You can't save this script because the ID is not unique, pick another ID or leave it blank to automatically generate one.",
|
||||
"id_already_exists": "This ID already exists",
|
||||
"introduction": "Use scripts to run a sequence of actions.",
|
||||
"show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]",
|
||||
"header": "Script: {name}",
|
||||
"default_name": "New Script",
|
||||
"modes": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user