Format response time & size

templates/dashboard/http_functions/client.html

@@ -10,6 +10,37 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
 </div>
 
 <script>
+    function formatTime(milliseconds) {
+        if (milliseconds < 1000) {
+            return `${milliseconds} ms`;  // Display milliseconds directly if less than 1 second
+        }
+
+        const seconds = milliseconds / 1000;
+        if (seconds < 60) {
+            return `${seconds.toFixed(2)} s`;  // Display seconds if less than 1 minute
+        }
+
+        const minutes = seconds / 60;
+        if (minutes < 60) {
+            return `${minutes.toFixed(2)} min`;  // Display minutes if less than 1 hour
+        }
+
+        const hours = minutes / 60;
+        return `${hours.toFixed(2)} h`;  // Display hours for longer durations
+    }
+
+    function formatSize(bytes) {
+        if (bytes < 1024) {
+            return `${bytes} bytes`;
+        } else if (bytes < 1024 * 1024) {
+            return `${(bytes / 1024).toFixed(2)} KB`;
+        } else if (bytes < 1024 * 1024 * 1024) {
+            return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+        } else {
+            return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+        }
+    }
+
     var KeyValueList = (initialVnode) => {
         return {
             view: (vnode) => {
@@ -165,7 +196,7 @@ show_refresh=False, show_link=False, show_edit_form=True, show_client=True, show
                     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.space-x-2.pt-1", [{ key: 'Status', value: this.status }, { key: 'Time', value: formatTime(this.duration) }, { key: 'Size', value: formatSize(this.responseSize) }].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)