From 6044d2e00b833aacd21950b7c10c2cf19b4ae19d Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Fri, 29 Mar 2024 18:38:48 +1100
Subject: [PATCH] For postman-like mithril.js driven client made the following
 minor changes

* Display response status, size, time
* Toggle between response body (text), Browser preview (HTML), & headers
---
 .../dashboard/http_functions/client.html      | 159 +++++++++++-------
 1 file changed, 98 insertions(+), 61 deletions(-)

diff --git a/templates/dashboard/http_functions/client.html b/templates/dashboard/http_functions/client.html
index bd92331..e735df0 100644
--- a/templates/dashboard/http_functions/client.html
+++ b/templates/dashboard/http_functions/client.html
@@ -10,6 +10,35 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
 </div>
 
 <script>
+    var KeyValueList = (initialVnode) => {
+        return {
+            view: (vnode) => {
+                return m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
+                    m("div", [
+                        m("div.flex-col.space-y-2.mb-3", vnode.attrs.list.map(({ key, value }, index) => m('div.flex', [
+                            m("input.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
+                                placeholder: "Key",
+                                value: key,
+                                oninput: (e) => vnode.attrs.list[index].key = e.target.value
+                            }),
+                            m("input.ml-3.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
+                                placeholder: "Value",
+                                value: value,
+                                oninput: (e) => vnode.attrs.list[index].value = e.target.value
+                            }),
+                            m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
+                                onclick: () => vnode.attrs.list.splice(index, 1)
+                            }, "Remove")
+                        ]))),
+                        m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
+                            onclick: () => vnode.attrs.list.push({ key: '', value: '' })
+                        }, "Add")
+                    ])
+                ])
+            }
+        }
+    }
+
     var RequestClient = {
         // Initialize component state
         init: function () {
@@ -17,11 +46,17 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
             this.url = "{{ url_for('execute_http_function', user_id=user_id, function=name) }}";
             this.body = '{}';
             this.response = '';
-            this.activeTab = 'query params';
+            this.duration = 0;
+            this.status = 0;
+            this.responseHeaders = [];
+            this.responseSize = 0;
+            this.activeTab = 'Query Params';
+            this.activeResponseTab = 'Body'
             this.headers = [{ key: 'Content-Type', value: 'application/json' }, { key: '', value: '' }];
             this.queryParams = [{ key: '', value: '' }];
         },
         sendRequest: function () {
+            let startTime = performance.now();
             let url = this.url;
             const query = this.queryParams.filter(p => p.key && p.value)
                 .map(p => `${encodeURIComponent(p.key)}=${encodeURIComponent(p.value)}`)
@@ -40,8 +75,19 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
                 body: !['GET', 'HEAD'].includes(this.method) ? this.body : undefined,
                 headers
             })
-                .then(response => response.text())
+                .then(response => {
+                    let endTime = performance.now();
+                    this.duration = endTime - startTime;
+                    this.status = response.status;
+                    this.responseHeaders = [...response.headers].map(([key, value]) => ({ key, value }));
+
+                    return response.text().then(text => {
+                        this.response = text;
+                        return text;
+                    });
+                })
                 .then(text => {
+                    this.responseSize = new Blob([text]).size; // This approach will give the size of the response body
                     this.response = text;
                     m.redraw();
                 });
@@ -69,73 +115,64 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
                 m("div", [
                     // Tab headers
                     m("ul.flex.mt-5.border.border-gray-300.rounded-t-lg", [
-                        ["Query Params", "Headers", "Body"].map((tab, index) => m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
-                            class: this.activeTab === tab.toLowerCase() ? "border-b-2 text-orange-600" : "",
-                            onclick: () => this.activeTab = tab.toLowerCase()
-                        }, tab))
+                        [{ name: "Query Params", count: this.queryParams.filter(p => p.key && p.value).length }, { name: "Headers", count: this.headers.filter(p => p.key && p.value).length }, { name: "Body", count: null }].map(({ name, count }, index) => m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
+                            class: this.activeTab === name ? "border-b-2 text-orange-600" : "",
+                            onclick: () => this.activeTab = name
+                        }, `${name}${count ? ` (${count})` : ``}`))
                     ]),
                     // Tab content
-                    this.activeTab === 'query params' ? m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
-                        m("div", [
-                            m("div.flex-col.space-y-2.mb-3", this.queryParams.map(({ key, value }, index) => m('div.flex', [
-                                m("input.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
-                                    placeholder: "Key",
-                                    name: "keyItem",
-                                    value: key,
-                                    oninput: (e) => this.queryParams[index].key = e.target.value
-                                }),
-                                m("input.ml-3.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
-                                    placeholder: "Value",
-                                    name: "valueItem",
-                                    value: value,
-                                    oninput: (e) => this.queryParams[index].value = e.target.value
-                                }),
-                                m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
-                                    onclick: () => this.queryParams.splice(index, 1)
-                                }, "Remove")
-                            ]))),
-                            m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
-                                onclick: () => this.queryParams.push({ key: '', value: '' })
-                            }, "Add")
-                        ])
-                    ])
-                        : '',
-                    this.activeTab === 'headers' ? m("div.px-4.py-4.rounded-b-lg.border.border-t-0.border-gray-300", [
-                        m("div", [
-                            m("div.flex-col.space-y-2.mb-3", this.headers.map(({ key, value }, index) => m('div.flex', [
-                                m("input.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
-                                    placeholder: "Key",
-                                    name: "keyItem",
-                                    value: key,
-                                    oninput: (e) => this.headers[index].key = e.target.value
-                                }),
-                                m("input.ml-3.px-4.py-1.5.w-full.border.border-gray-300.rounded-md.hover:border-orange-500.focus:outline-orange-500", {
-                                    placeholder: "Value",
-                                    name: "valueItem",
-                                    value: value,
-                                    oninput: (e) => this.headers[index].value = e.target.value
-                                }),
-                                m("button.ml-4.px-4.rounded-md.text-red-500.border.border-red-300.hover:bg-red-100", {
-                                    onclick: () => this.headers.splice(index, 1)
-                                }, "Remove")
-                            ]))),
-                            m("button.px-6.py-1.rounded-md.text-orange-600.border.border-orange-400.hover:bg-orange-100", {
-                                onclick: () => this.headers.push({ key: '', value: '' })
-                            }, "Add")
-                        ])
-                    ])
-                        : '',
-                    this.activeTab === 'body' ? m("textarea#request-body", {
+                    this.activeTab === 'Query Params' ? m(KeyValueList, { list: this.queryParams }) : '',
+                    this.activeTab === 'Headers' ? m(KeyValueList, { list: this.headers }) : '',
+                    this.activeTab === 'Body' ? m("textarea", {
                         oninput: (e) => this.body = e.target.value,
                         value: this.body,
                         rows: 4,
                         class: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300"
                     }) : ''
                 ]),
-                m("div.my-4", [
-                    m("span.text-2xl.font-medium", "Response"),
-                    m("pre", this.response)
-                ])
+                this.response ? m("div.my-4.p-4.shadow.rounded-lg", [
+                    m("div.flex.items-center.mb-4.justify-between", [
+                        m("ul.flex.border.border-gray-300.rounded-t-lg", [{ name: 'Body', count: null }, { name: 'Headers', count: this.responseHeaders.length }, { name: 'Browser Preview', count: null }].map(({ name, count }) =>
+                            m("li.mr-3.py-2.px-4.border-orange-400.focus:outline-none.hover:text-orange-500.cursor-pointer", {
+                                class: this.activeResponseTab === name ? "border-b-2 text-orange-600" : "",
+                                onclick: () => this.activeResponseTab = name
+                            }, `${name}${count ? ` (${count})` : ``}`))),
+                        m("svg", { class: "h-6 w-6 cursor-pointer", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", onclick: () => this.response = '' },
+                            m("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M6 18L18 6M6 6l12 12" })
+                        )
+                    ]),
+                    this.activeResponseTab == 'Headers' ? m("div.relative.overflow-x-auto.shadow-md.sm:rounded-lg", [
+                        m("table.w-full.text-sm.text-left.rtl:text-right.text-gray-500.dark:text-gray-400", [
+                            m("thead.text-xs.text-gray-700.uppercase.bg-gray-50.dark:bg-gray-700.dark:text-gray-400", [
+                                m("tr", [
+                                    m("th.px-6.py-3", "Key"),
+                                    m("th.px-6.py-3", "Value")
+                                ])
+                            ]),
+                            m("tbody",
+                                this.responseHeaders.map(({ key, value }) =>
+                                    m("tr.bg-white.dark:bg-gray-900.border-b.dark:border-gray-700", [
+                                        m("th.scope.row.px-6.py-4.font-medium.text-gray-900.dark:text-white", key),
+                                        m("td.px-6.py-4", value)
+                                    ])
+                                )
+                            )
+                        ])
+                    ]) : null,
+                    this.activeResponseTab == 'Body' ? m("div.overflow-auto.max-h-64.bg-gray-100.p-2.rounded-lg", [
+                        m("pre.text-sm", this.response)
+                    ]) : null,
+                    this.activeResponseTab == 'Browser Preview' ? m("div.p-2.rounded-lg", m.trust(this.response)) : null,
+                    m("div.flex", [
+                        m("div.grow", ""),
+                        m("div.flex.space-x-2.pt-1", [{ key: 'Status', value: this.status }, { key: 'Time', value: `${this.duration.toFixed(2)} ms` }, { key: 'Size', value: `${this.responseSize} bytes` }].map(({ key, value }) =>
+                            m("div.flex.items-center.justify-between", [
+                                m("span.text-gray-600", `${key}:`),
+                                m("span.font-semibold.pl-1.text-green-400", value)
+                            ])))
+                    ])
+                ]) : null
+
             ]);
         }
     };