Add link between trace and editor (#8750)

This commit is contained in:
Bram Kragten 2021-03-30 02:05:51 +02:00 committed by GitHub
parent b866166425
commit cd2404f26a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 21 deletions

View File

@ -104,12 +104,21 @@ export class HaBlueprintAutomationEditor extends LitElement {
"ui.panel.config.automation.editor.enable_disable"
)}
</div>
<mwc-button
@click=${this._runActions}
.stateObj=${this.stateObj}
>
${this.hass.localize("ui.card.automation.trigger")}
</mwc-button>
<div>
<a href="/config/automation/trace/${this.config.id}">
<mwc-button>
${this.hass.localize(
"ui.panel.config.automation.editor.show_trace"
)}
</mwc-button>
</a>
<mwc-button
@click=${this._runActions}
.stateObj=${this.stateObj}
>
${this.hass.localize("ui.card.automation.trigger")}
</mwc-button>
</div>
</div>
`
: ""}

View File

@ -15,7 +15,6 @@ import {
loadTrace,
loadTraces,
} from "../../../../data/trace";
import "../../../../components/ha-icon-button";
import "../../../../components/trace/hat-script-graph";
import type { NodeInfo } from "../../../../components/trace/hat-graph";
import { haStyle } from "../../../../resources/styles";
@ -33,6 +32,13 @@ import "./ha-automation-trace-timeline";
import "./ha-automation-trace-config";
import { classMap } from "lit-html/directives/class-map";
import { traceTabStyles } from "./styles";
import {
mdiRayEndArrow,
mdiRayStartArrow,
mdiPencil,
mdiRefresh,
mdiDownload,
} from "@mdi/js";
@customElement("ha-automation-trace")
export class HaAutomationTrace extends LitElement {
@ -74,17 +80,18 @@ export class HaAutomationTrace extends LitElement {
const title = stateObj?.attributes.friendly_name || this._entityId;
const actionButtons = html`<ha-icon-button
label="Refresh"
icon="hass:refresh"
@click=${() => this._loadTraces()}
></ha-icon-button>
<ha-icon-button
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._runId}
label="Download Trace"
icon="hass:download"
@click=${this._downloadTrace}
></ha-icon-button>`;
>
<ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
</mwc-icon-button>
`;
return html`
<hass-tabs-subpage
@ -106,18 +113,27 @@ export class HaAutomationTrace extends LitElement {
${!this.narrow
? html`<div>
${title}
<a
class="linkButton"
href="/config/automation/edit/${this.automationId}"
>
<mwc-icon-button label="Edit Automation">
<ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
</mwc-icon-button>
</a>
</div>`
: ""}
${this._traces && this._traces.length > 0
? html`
<div>
<ha-icon-button
<mwc-icon-button
.disabled=${this._traces[this._traces.length - 1].run_id ===
this._runId}
label="Older trace"
icon="hass:ray-end-arrow"
@click=${this._pickOlderTrace}
></ha-icon-button>
>
<ha-svg-icon .path=${mdiRayEndArrow}></ha-svg-icon>
</mwc-icon-button>
<select .value=${this._runId} @change=${this._pickTrace}>
${repeat(
this._traces,
@ -131,12 +147,13 @@ export class HaAutomationTrace extends LitElement {
>`
)}
</select>
<ha-icon-button
<mwc-icon-button
.disabled=${this._traces[0].run_id === this._runId}
label="Newer trace"
icon="hass:ray-start-arrow"
@click=${this._pickNewerTrace}
></ha-icon-button>
>
<ha-svg-icon .path=${mdiRayStartArrow}></ha-svg-icon>
</mwc-icon-button>
</div>
`
: ""}
@ -417,6 +434,10 @@ export class HaAutomationTrace extends LitElement {
flex: 1;
background-color: var(--card-background-color);
}
.linkButton {
color: var(--primary-text-color);
}
`,
];
}