Update ResponseView to support timer function display

- Add `isTimer` flag to conditionally render response view tabs and details
- Hide preview and raw tabs for timer responses
- Automatically switch to logs tab for timer responses
- Conditionally hide status and size details for timer responses
This commit is contained in:
Peter Stockings
2025-02-17 00:09:02 +11:00
parent d5338f17c1
commit 29da93a9f8
2 changed files with 15 additions and 8 deletions

View File

@@ -580,6 +580,7 @@ const Editor = {
responseTime: this.responseTime, responseTime: this.responseTime,
responseSize: this.responseSize, responseSize: this.responseSize,
envEditorValue: this.jsonValue, envEditorValue: this.jsonValue,
isTimer: this.isTimer,
onClose: () => { onClose: () => {
this.response = null; this.response = null;
}, },

View File

@@ -11,11 +11,17 @@ const ResponseView = {
responseSize, // #bytes in the raw response responseSize, // #bytes in the raw response
envEditorValue, // The JSON environment from the editor (string) envEditorValue, // The JSON environment from the editor (string)
onClose, // Callback to clear or close this view onClose, // Callback to clear or close this view
isTimer, // Whether this is a timer response
} = vnode.attrs; } = vnode.attrs;
// If there's no response, nothing to show // If there's no response, nothing to show
if (!response) return null; if (!response) return null;
// If isTimer is true and we're on a hidden tab, switch to logs
if (isTimer && (this.tabIndex === 1 || this.tabIndex === 2)) {
this.tabIndex = 3;
}
return m("div", { class: "mt-2 p-1 rounded-md bg-gray-200 min-h-40" }, [ return m("div", { class: "mt-2 p-1 rounded-md bg-gray-200 min-h-40" }, [
/* ───────────────────────────────────────────────────────────────── /* ─────────────────────────────────────────────────────────────────
TAB HEADERS TAB HEADERS
@@ -61,7 +67,7 @@ const ResponseView = {
), ),
// Raw (tabIndex=2) // Raw (tabIndex=2)
m( !isTimer && m(
"div", "div",
{ {
class: class:
@@ -125,7 +131,7 @@ const ResponseView = {
), ),
// Preview (tabIndex=1) // Preview (tabIndex=1)
m( !isTimer && m(
"div", "div",
{ {
class: class:
@@ -162,7 +168,7 @@ const ResponseView = {
m("span", "Preview"), m("span", "Preview"),
] ]
), ),
] ].filter(Boolean)
), ),
// Right: Close icon // Right: Close icon
@@ -325,8 +331,8 @@ const ResponseView = {
─────────────────────────────────────────────────────────────────*/ ─────────────────────────────────────────────────────────────────*/
m("div", { class: "flex justify-end p-1" }, [ m("div", { class: "flex justify-end p-1" }, [
m("div", { class: "text-sm font-medium text-gray-600 space-x-4" }, [ m("div", { class: "text-sm font-medium text-gray-600 space-x-4" }, [
// Status // Status (hidden if isTimer)
m("span", [ !isTimer && m("span", [
"Status: ", "Status: ",
m( m(
"span", "span",
@@ -339,14 +345,14 @@ const ResponseView = {
response?.result?.status || "Error" response?.result?.status || "Error"
), ),
]), ]),
// Time // Time (always shown)
responseTime != null && responseTime != null &&
m("span", [ m("span", [
"Time: ", "Time: ",
m("span", { class: "text-green-600" }, `${responseTime}ms`), m("span", { class: "text-green-600" }, `${responseTime}ms`),
]), ]),
// Size // Size (hidden if isTimer)
responseSize != null && !isTimer && responseSize != null &&
m("span", [ m("span", [
"Size: ", "Size: ",
m("span", { class: "text-green-600" }, `${responseSize} bytes`), m("span", { class: "text-green-600" }, `${responseSize} bytes`),