diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts
index b717bdee7d..3135775a2c 100644
--- a/src/components/trace/ha-timeline.ts
+++ b/src/components/trace/ha-timeline.ts
@@ -13,6 +13,8 @@ import "../ha-svg-icon";
@customElement("ha-timeline")
class HaTimeline extends LitElement {
+ @property({ type: Boolean, reflect: true }) public label = false;
+
@property({ type: Boolean }) public lastItem = false;
@property({ type: String }) public icon?: string;
@@ -24,7 +26,11 @@ class HaTimeline extends LitElement {
protected render() {
return html`
-
+ ${this.label
+ ? ""
+ : html`
+
+ `}
${this.lastItem ? "" : html`
`}
@@ -63,11 +69,17 @@ class HaTimeline extends LitElement {
:host(:not([lastItem])) {
min-height: 50px;
}
+ :host([label]) {
+ margin-top: -8px;
+ font-style: italic;
+ color: var(--timeline-label-color, var(--secondary-text-color));
+ }
.timeline-start {
display: flex;
flex-direction: column;
align-items: center;
- margin-right: 4px;
+ margin-right: 8px;
+ width: 24px;
}
ha-svg-icon {
color: var(
@@ -90,6 +102,10 @@ class HaTimeline extends LitElement {
:host(:not([lastItem])) .content {
padding-bottom: 16px;
}
+ :host([label]) .content {
+ margin-top: 0;
+ padding-top: 6px;
+ }
`,
buttonLinkStyle,
];
diff --git a/src/components/trace/hat-trace.ts b/src/components/trace/hat-trace.ts
index 6ae3287109..7be7d67594 100644
--- a/src/components/trace/hat-trace.ts
+++ b/src/components/trace/hat-trace.ts
@@ -19,7 +19,6 @@ import {
mdiCheckCircleOutline,
mdiCircle,
mdiCircleOutline,
- mdiClockOutline,
mdiPauseCircleOutline,
mdiRecordCircleOutline,
mdiStopCircleOutline,
@@ -93,7 +92,7 @@ export class HaAutomationTracer extends LitElement {
}
entries.push(html`
-
+
${relativeTime(lastReportedTime, this.hass.localize, {
compareTime: nextItemTimestamp,
includeTense: false,