Add blueprint config to trace (#8751)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/data/automation.ts

@@ -238,6 +238,9 @@ export const deleteAutomation = (hass: HomeAssistant, id: string) =>
 
 let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
 
+export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
+  hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);
+
 export const showAutomationEditor = (
   el: HTMLElement,
   data?: Partial<AutomationConfig>

src/data/trace.ts

@@ -1,6 +1,9 @@
 import { strStartsWith } from "../common/string/starts-with";
 import { HomeAssistant, Context } from "../types";
-import { ManualAutomationConfig } from "./automation";
+import {
+  BlueprintAutomationConfig,
+  ManualAutomationConfig,
+} from "./automation";
 
 interface BaseTraceStep {
   path: string;
@@ -87,6 +90,7 @@ export interface AutomationTraceExtended extends AutomationTrace {
   trace: Record<string, ActionTraceStep[]>;
   context: Context;
   config: ManualAutomationConfig;
+  blueprint_inputs?: BlueprintAutomationConfig;
   error?: string;
 }
 

src/panels/config/automation/ha-automation-editor.ts

@@ -36,6 +36,7 @@ import {
   AutomationConfig,
   AutomationEntity,
   deleteAutomation,
+  getAutomationConfig,
   getAutomationEditorInitData,
   showAutomationEditor,
   triggerAutomationActions,
@@ -303,39 +304,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       oldAutomationId !== this.automationId
     ) {
       this._setEntityId();
-      this.hass
+      this._loadConfig();
-        .callApi<AutomationConfig>(
-          "GET",
-          `config/automation/config/${this.automationId}`
-        )
-        .then(
-          (config) => {
-            // Normalize data: ensure trigger, action and condition are lists
-            // Happens when people copy paste their automations into the config
-            for (const key of ["trigger", "condition", "action"]) {
-              const value = config[key];
-              if (value && !Array.isArray(value)) {
-                config[key] = [value];
-              }
-            }
-            this._dirty = false;
-            this._config = config;
-          },
-          (resp) => {
-            showAlertDialog(this, {
-              text:
-                resp.status_code === 404
-                  ? this.hass.localize(
-                      "ui.panel.config.automation.editor.load_error_not_editable"
-                    )
-                  : this.hass.localize(
-                      "ui.panel.config.automation.editor.load_error_unknown",
-                      "err_no",
-                      resp.status_code
-                    ),
-            }).then(() => history.back());
-          }
-        );
     }
 
     if (changedProps.has("automationId") && !this.automationId && this.hass) {
@@ -378,6 +347,36 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._entityId = automation?.entity_id;
   }
 
+  private async _loadConfig() {
+    try {
+      const config = await getAutomationConfig(this.hass, this.automationId);
+
+      // Normalize data: ensure trigger, action and condition are lists
+      // Happens when people copy paste their automations into the config
+      for (const key of ["trigger", "condition", "action"]) {
+        const value = config[key];
+        if (value && !Array.isArray(value)) {
+          config[key] = [value];
+        }
+      }
+      this._dirty = false;
+      this._config = config;
+    } catch (err) {
+      showAlertDialog(this, {
+        text:
+          err.status_code === 404
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.load_error_not_editable"
+              )
+            : this.hass.localize(
+                "ui.panel.config.automation.editor.load_error_unknown",
+                "err_no",
+                err.status_code
+              ),
+      }).then(() => history.back());
+    }
+  }
+
   private _valueChanged(ev: CustomEvent<{ value: AutomationConfig }>) {
     ev.stopPropagation();
     this._config = ev.detail.value;

src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts

@@ -0,0 +1,34 @@
+import { safeDump } from "js-yaml";
+import {
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-code-editor";
+import { HomeAssistant } from "../../../../types";
+import { AutomationTraceExtended } from "../../../../data/trace";
+
+@customElement("ha-automation-trace-blueprint-config")
+export class HaAutomationTraceBlueprintConfig extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public trace!: AutomationTraceExtended;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-code-editor
+        .value=${safeDump(this.trace.blueprint_inputs || "").trimRight()}
+        readOnly
+      ></ha-code-editor>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trace-blueprint-config": HaAutomationTraceBlueprintConfig;
+  }
+}

src/panels/config/automation/trace/ha-automation-trace.ts

@@ -39,6 +39,7 @@ import {
   mdiRefresh,
   mdiDownload,
 } from "@mdi/js";
+import "./ha-automation-trace-blueprint-config";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -70,7 +71,8 @@ export class HaAutomationTrace extends LitElement {
     | "details"
     | "config"
     | "timeline"
-    | "logbook" = "details";
+    | "logbook"
+    | "blueprint" = "details";
 
   protected render(): TemplateResult {
     const stateObj = this._entityId
@@ -197,6 +199,19 @@ export class HaAutomationTrace extends LitElement {
                         </div>
                       `
                     )}
+                    ${this._trace.blueprint_inputs
+                      ? html`
+                          <div
+                            .view=${"blueprint"}
+                            class=${classMap({
+                              active: this._view === "blueprint",
+                            })}
+                            @click=${this._showTab}
+                          >
+                            Blueprint Config
+                          </div>
+                        `
+                      : ""}
                   </div>
                   ${this._selected === undefined ||
                   this._logbookEntries === undefined ||
@@ -227,6 +242,13 @@ export class HaAutomationTrace extends LitElement {
                           .entries=${this._logbookEntries}
                         ></ha-logbook>
                       `
+                    : this._view === "blueprint"
+                    ? html`
+                        <ha-automation-trace-blueprint-config
+                          .hass=${this.hass}
+                          .trace=${this._trace}
+                        ></ha-automation-trace-blueprint-config>
+                      `
                     : html`
                         <ha-automation-trace-timeline
                           .hass=${this.hass}