feat(ui): more accurate request timing + show head complete & body co…

…mplete time when hovering over time taken tag in Response Panel
flawiddsouza · Oct 19, 2024 · 2ef4a7d · 2ef4a7d
1 parent a66ec7a
commit 2ef4a7d
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 11 deletions.
diff --git a/packages/browser-extension/v2/src/background.js b/packages/browser-extension/v2/src/background.js
@@ -142,25 +142,32 @@ async function handleSendRequest(message, sendResponse) {
             signal: abortController.get(eventId).signal
         })
 
-        const endTime = new Date()
+        const headEndTime = new Date()
 
         const status = response.status
         const statusText = response.statusText
         const responseHeaders = [...response.headers.entries()]
 
         const responseBlob = await response.blob()
+
+        const endTime = new Date()
+
         const mimeType = responseBlob.type
         const buffer = await responseBlob.arrayBuffer()
 
         const timeTaken = endTime - startTime
+        const headTimeTaken = headEndTime - startTime
+        const bodyTimeTaken = endTime - headEndTime
 
         const responseToSend = {
             status,
             statusText,
             headers: responseHeaders,
             mimeType,
             buffer: Array.from(new Uint8Array(buffer)),
-            timeTaken
+            timeTaken,
+            headTimeTaken,
+            bodyTimeTaken,
         }
 
         sendResponse({

diff --git a/packages/browser-extension/v3/src/background.js b/packages/browser-extension/v3/src/background.js
@@ -122,25 +122,32 @@ async function handleSendRequest(message, sendResponse) {
             signal: abortController.get(eventId).signal
         })
 
-        const endTime = new Date()
+        const headEndTime = new Date()
 
         const status = response.status
         const statusText = response.statusText
         const responseHeaders = [...response.headers.entries()]
 
         const responseBlob = await response.blob()
+
+        const endTime = new Date()
+
         const mimeType = responseBlob.type
         const buffer = await responseBlob.arrayBuffer()
 
         const timeTaken = endTime - startTime
+        const headTimeTaken = headEndTime - startTime
+        const bodyTimeTaken = endTime - headEndTime
 
         const responseToSend = {
             status,
             statusText,
             headers: responseHeaders,
             mimeType,
             buffer: Array.from(new Uint8Array(buffer)),
-            timeTaken
+            timeTaken,
+            headTimeTaken,
+            bodyTimeTaken,
         }
 
         sendResponse({

diff --git a/packages/electron/src/request.js b/packages/electron/src/request.js
@@ -122,25 +122,32 @@ async function handleSendRequest(data) {
             dispatcher: getAgentForRequest(urlParsed, disableSSLVerification),
         })
 
-        const endTime = new Date()
+        const headEndTime = new Date()
 
         const status = response.status
         const statusText = response.statusText
         const responseHeaders = [...response.headers.entries()]
 
         const responseBlob = await response.blob()
+
+        const endTime = new Date()
+
         const mimeType = responseBlob.type
         const buffer = await responseBlob.arrayBuffer()
 
         const timeTaken = endTime - startTime
+        const headTimeTaken = headEndTime - startTime
+        const bodyTimeTaken = endTime - headEndTime
 
         const responseToSend = {
             status,
             statusText,
             headers: responseHeaders,
             mimeType,
             buffer: Array.from(new Uint8Array(buffer)),
-            timeTaken
+            timeTaken,
+            headTimeTaken,
+            bodyTimeTaken,
         }
         return {
             event: 'response',

diff --git a/packages/test-api-streaming-response/.python-version b/packages/test-api-streaming-response/.python-version
@@ -0,0 +1 @@
+3.10
diff --git a/packages/test-api-streaming-response/README.md b/packages/test-api-streaming-response/README.md
@@ -0,0 +1,5 @@
+### Run
+
+```sh
+uv run app.py
+```
diff --git a/packages/test-api-streaming-response/app.py b/packages/test-api-streaming-response/app.py
@@ -0,0 +1,19 @@
+from flask import Flask, Response
+import time
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+@app.route('/')
+def stream():
+    def generate():
+        for i in range(1, 6):
+            yield f"data: Chunk {i}\n"
+            time.sleep(1)
+        yield 'data: End of streaming\n'
+
+    return Response(generate(), mimetype='text/event-stream')
+
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/packages/test-api-streaming-response/pyproject.toml b/packages/test-api-streaming-response/pyproject.toml
@@ -0,0 +1,10 @@
+[project]
+name = "test-api-streaming-response"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "flask-cors>=5.0.0",
+    "flask>=3.0.3",
+]
diff --git a/packages/test-api-streaming-response/uv.lock b/packages/test-api-streaming-response/uv.lock
diff --git a/packages/ui/src/components/ResponsePanel.vue b/packages/ui/src/components/ResponsePanel.vue
@@ -20,7 +20,7 @@
                     <span class="bold">{{ response.status }}</span>
                     {{ response.statusText === '' ? getStatusText(response.status) : response.statusText }}
                 </div>
-                <div class="tag ml-0_6rem" v-if="response.timeTaken">{{ humanFriendlyTime(response.timeTaken) }}</div>
+                <div class="tag ml-0_6rem" v-if="response.timeTaken" v-tooltip="getFullTimeTaken(response)" :key="response._id">{{ humanFriendlyTime(response.timeTaken) }}</div>
                 <div class="tag ml-0_6rem" v-if="responseSize">{{ humanFriendlySize(responseSize) }}</div>
             </div>
             <div class="response-panel-address-bar-select-container">
@@ -189,6 +189,7 @@ import {
 import { emitter } from '@/event-bus'
 import ResponseFilteringHelpModal from '@/components/modals/ResponseFilteringHelpModal.vue'
 import constants from '@/constants'
+import { vTooltip } from '@/directives/vTooltip'
 
 export default {
     components: {
@@ -199,6 +200,9 @@ export default {
         IframeFromBuffer,
         ResponsePanelTimeline,
     },
+    directives: {
+        tooltip: vTooltip
+    },
     props: {
         activeTab: Object
     },
@@ -601,6 +605,13 @@ export default {
                 }
             })
         },
+        getFullTimeTaken(response) {
+            if (!response.headTimeTaken && !response.bodyTimeTaken) {
+                return humanFriendlyTime(response.timeTaken)
+            }
+
+            return `Head: ${humanFriendlyTime(response.headTimeTaken)} | Body: ${humanFriendlyTime(response.bodyTimeTaken)}`
+        },
         bufferToJSONString,
         filterJSONResponse,
         filterXmlResponse,

diff --git a/packages/ui/src/directives/vTooltip.js b/packages/ui/src/directives/vTooltip.js
@@ -0,0 +1,24 @@
+export const vTooltip = {
+    mounted(el, binding) {
+        el.addEventListener('mouseenter', () => {
+            var tooltip = document.querySelector('.tooltip')
+            if(tooltip) {
+                tooltip.remove()
+            }
+            var div = document.createElement('div')
+            div.classList.add('tooltip')
+            div.innerText = binding.value
+            var dimens = el.getBoundingClientRect()
+            div.style.left = dimens.left + 'px'
+            div.style.top = (dimens.bottom + 5) + 'px'
+            document.body.appendChild(div)
+        })
+
+        el.addEventListener('mouseleave', () => {
+            var tooltip = document.querySelector('.tooltip')
+            if(tooltip) {
+                tooltip.remove()
+            }
+        })
+    }
+}
diff --git a/packages/ui/src/global.d.ts b/packages/ui/src/global.d.ts
@@ -86,6 +86,8 @@ export interface RequestInitialResponse {
     mimeType: string
     buffer: ArrayBuffer
     timeTaken: number
+    headTimeTaken?: number
+    bodyTimeTaken?: number
 }
 
 export interface RequestFinalResponse {
@@ -98,6 +100,8 @@ export interface RequestFinalResponse {
     mimeType: string
     buffer: ArrayBuffer
     timeTaken: number
+    headTimeTaken?: number
+    bodyTimeTaken?: number
     request: {
       method: string
       query: string

diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
@@ -287,25 +287,32 @@ export async function fetchWrapper(url: URL, method: string, headers: Record<str
         signal: abortControllerSignal
     })
 
-    const endTime = new Date()
+    const headEndTime = new Date()
 
     const status = response.status
     const statusText = response.statusText
     const responseHeaders = [...response.headers.entries()]
 
     const responseBlob = await response.blob()
+
+    const endTime = new Date()
+
     const mimeType = responseBlob.type
     const buffer = await responseBlob.arrayBuffer()
 
     const timeTaken = Number(endTime) - Number(startTime)
+    const headTimeTaken = Number(headEndTime) - Number(startTime)
+    const bodyTimeTaken = Number(endTime) - Number(headEndTime)
 
     return {
         status,
         statusText,
         headers: responseHeaders,
         mimeType,
         buffer,
-        timeTaken
+        timeTaken,
+        headTimeTaken,
+        bodyTimeTaken,
     }
 }
 
@@ -539,6 +546,8 @@ export async function handleRequest(
             mimeType: response.mimeType,
             buffer: response.buffer,
             timeTaken: response.timeTaken,
+            headTimeTaken: response.headTimeTaken,
+            bodyTimeTaken: response.bodyTimeTaken,
             request: {
                 method: request.method!,
                 query: url.search,

diff --git a/packages/ui/src/styles/main.css b/packages/ui/src/styles/main.css
@@ -772,3 +772,14 @@ select {
     color: rgb(237, 39, 39);
     font-size: 0.6rem !important;
 }
+
+.tooltip {
+    position: fixed;
+    z-index: 3;
+    background-color: var(--sidebar-item-active-color);
+    top: 0;
+    left: 0;
+    padding: 0.5em;
+    border-radius: var(--default-border-radius);
+    border: 3px solid var(--default-border-color);
+}
diff --git a/packages/web-standalone/app.js b/packages/web-standalone/app.js
@@ -76,25 +76,32 @@ app.post('/proxy', async(req, res) => {
             body: method !== 'GET' ? body : undefined
         })
 
-        const endTime = new Date()
+        const headEndTime = new Date()
 
         const status = response.status
         const statusText = response.statusText
         const responseHeaders = [...response.headers.entries()]
 
         const responseBlob = await response.blob()
+
+        const endTime = new Date()
+
         const mimeType = responseBlob.type
         const buffer = await responseBlob.arrayBuffer()
 
         const timeTaken = endTime - startTime
+        const headTimeTaken = headEndTime - startTime
+        const bodyTimeTaken = endTime - headEndTime
 
         const responseToSend = {
             status,
             statusText,
             headers: responseHeaders,
             mimeType,
             buffer: Array.from(new Uint8Array(buffer)),
-            timeTaken
+            timeTaken,
+            headTimeTaken,
+            bodyTimeTaken,
         }
 
         res.send({