[4.x] Add duration to HTTP Client watcher (#1348)

* Add duration to HTTP Client watcher * compile --------- Co-authored-by: Taylor Otwell <taylor@laravel.com>
laravel · May 19, 2023 · d3de765 · d3de765
1 parent 154d291
commit d3de765
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=65e09ad17337bc012e95e6a52546ec50",
+    "/app.js": "/app.js?id=54c63c3498c11d92907a5865f25dbb08",
     "/app-dark.css": "/app-dark.css?id=b44bf369e5d39f6861be639ef866bf5a",
     "/app.css": "/app.css?id=41c5661581f2614180d6d33c17470f08"
 }
diff --git a/resources/js/screens/client-requests/index.vue b/resources/js/screens/client-requests/index.vue
@@ -14,6 +14,7 @@
             <th scope="col">Verb</th>
             <th scope="col">URI</th>
             <th scope="col">Status</th>
+            <th scope="col" class="text-right">Duration</th>
             <th scope="col">Happened</th>
             <th scope="col"></th>
         </tr>
@@ -34,6 +35,11 @@
                 </span>
             </td>
 
+            <td class="table-fit text-right text-muted">
+                <span v-if="slotProps.entry.content.duration">{{slotProps.entry.content.duration}}ms</span>
+                <span v-else>-</span>
+            </td>
+
             <td class="table-fit text-muted" :data-timeago="slotProps.entry.created_at" :title="slotProps.entry.created_at">
                 {{timeAgo(slotProps.entry.created_at)}}
             </td>

diff --git a/resources/js/screens/client-requests/preview.vue b/resources/js/screens/client-requests/preview.vue
@@ -44,6 +44,13 @@
                 </span>
             </td>
         </tr>
+
+        <tr>
+            <td class="table-fit text-muted">Duration</td>
+            <td>
+                {{slotProps.entry.content.duration || '-'}}ms
+            </td>
+        </tr>
         </template>
 
         <div slot="after-attributes-card" slot-scope="slotProps">

diff --git a/src/Watchers/ClientRequestWatcher.php b/src/Watchers/ClientRequestWatcher.php
@@ -66,6 +66,7 @@ public function recordResponse(ResponseReceived $event)
             'response_status' => $event->response->status(),
             'response_headers' => $this->headers($event->response->headers()),
             'response' => $this->response($event->response),
+            'duration' => $this->duration($event->response),
         ]));
     }
 
@@ -216,4 +217,17 @@ protected function input(Request $request)
             return [$data['name'] => $value];
         })->toArray();
     }
+
+    /**
+     * Get the request duration in milliseconds.
+     *
+     * @param  \Illuminate\Http\Client\Response  $response
+     * @return int|null
+     */
+    protected function duration(Response $response)
+    {
+        if ($response->transferStats && $response->transferStats->getTransferTime()) {
+            return floor($response->transferStats->getTransferTime() * 1000);
+        }
+    }
 }