mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Improve pipeline debug styling (#15849)
This commit is contained in:
parent
30b8dc258a
commit
1c9e3915e8
@ -119,8 +119,6 @@ export const runPipelineFromText = (
|
||||
return;
|
||||
}
|
||||
|
||||
run.events.push(updateEvent);
|
||||
|
||||
if (updateEvent.type === "stt-start") {
|
||||
run = { ...run, stage: "stt", stt: updateEvent.data };
|
||||
} else if (updateEvent.type === "stt-finish") {
|
||||
@ -139,8 +137,12 @@ export const runPipelineFromText = (
|
||||
} else if (updateEvent.type === "error") {
|
||||
run = { ...run, stage: "error", error: updateEvent.data };
|
||||
unsubProm.then((unsub) => unsub());
|
||||
} else {
|
||||
run = { ...run };
|
||||
}
|
||||
|
||||
run.events = [...run.events, updateEvent];
|
||||
|
||||
callback(run);
|
||||
},
|
||||
{
|
||||
|
@ -2,6 +2,8 @@ import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import "../../../../../../components/ha-card";
|
||||
import "../../../../../../components/ha-button";
|
||||
import "../../../../../../components/ha-circular-progress";
|
||||
import "../../../../../../components/ha-expansion-panel";
|
||||
import "../../../../../../components/ha-textfield";
|
||||
import {
|
||||
PipelineRun,
|
||||
@ -12,6 +14,58 @@ import { SubscribeMixin } from "../../../../../../mixins/subscribe-mixin";
|
||||
import { haStyle } from "../../../../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../../../../types";
|
||||
|
||||
const RUN_DATA = {
|
||||
pipeline: "Pipeline",
|
||||
language: "Language",
|
||||
};
|
||||
|
||||
const ERROR_DATA = {
|
||||
code: "Code",
|
||||
message: "Message",
|
||||
};
|
||||
|
||||
const INTENT_DATA = {
|
||||
engine: "Engine",
|
||||
intent_input: "Input",
|
||||
};
|
||||
|
||||
const renderProgress = (
|
||||
pipelineRun: PipelineRun,
|
||||
stage: PipelineRun["stage"]
|
||||
) =>
|
||||
pipelineRun.stage !== stage && stage in pipelineRun
|
||||
? html`✅`
|
||||
: pipelineRun.stage === stage
|
||||
? html`<ha-circular-progress size="tiny" active></ha-circular-progress>`
|
||||
: "";
|
||||
|
||||
const renderData = (data: Record<string, any>, keys: Record<string, string>) =>
|
||||
Object.entries(keys).map(
|
||||
([key, label]) =>
|
||||
html`
|
||||
<div class="row">
|
||||
<div>${label}</div>
|
||||
<div>${data[key]}</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
const dataMinusKeysRender = (
|
||||
data: Record<string, any>,
|
||||
keys: Record<string, string>
|
||||
) => {
|
||||
const result = {};
|
||||
let render = false;
|
||||
for (const key in data) {
|
||||
if (key in keys) {
|
||||
continue;
|
||||
}
|
||||
render = true;
|
||||
result[key] = data[key];
|
||||
}
|
||||
return render ? html`<pre>${JSON.stringify(result, null, 2)}</pre>` : "";
|
||||
};
|
||||
|
||||
@customElement("assist-pipeline-debug")
|
||||
export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
@ -52,11 +106,44 @@ export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
|
||||
</ha-card>
|
||||
${this._pipelineRun
|
||||
? html`
|
||||
<ha-card heading="Pipeline Run">
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<pre>${JSON.stringify(this._pipelineRun, null, 2)}</pre>
|
||||
<div class="row heading">
|
||||
<div>Run</div>
|
||||
<div>${this._pipelineRun.stage}</div>
|
||||
</div>
|
||||
|
||||
${renderData(this._pipelineRun.run, RUN_DATA)}
|
||||
${this._pipelineRun.error
|
||||
? renderData(this._pipelineRun.error, ERROR_DATA)
|
||||
: ""}
|
||||
</div>
|
||||
</ha-card>
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
<div class="row heading">
|
||||
<span>Natural Language Processing</span>
|
||||
${renderProgress(this._pipelineRun, "intent")}
|
||||
</div>
|
||||
${this._pipelineRun.intent
|
||||
? html`
|
||||
<div class="card-content">
|
||||
${renderData(this._pipelineRun.intent, INTENT_DATA)}
|
||||
${dataMinusKeysRender(
|
||||
this._pipelineRun.intent,
|
||||
INTENT_DATA
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
</ha-card>
|
||||
<ha-card>
|
||||
<ha-expansion-panel>
|
||||
<span slot="header">Raw</span>
|
||||
<pre>${JSON.stringify(this._pipelineRun, null, 2)}</pre>
|
||||
</ha-expansion-panel>
|
||||
</ha-card>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
@ -92,9 +179,19 @@ export class AssistPipelineDebug extends SubscribeMixin(LitElement) {
|
||||
.run-pipeline-card ha-textfield {
|
||||
display: block;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
ha-expansion-panel {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.heading {
|
||||
font-weight: 500;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user