From 95968ca449244083c44f7eee7237099fbc24b33d Mon Sep 17 00:00:00 2001
From: Ryan Rosello <goneby30+github@gmail.com>
Date: Wed, 12 Jun 2024 21:14:31 +1000
Subject: [PATCH] feat(trace-viewer): add request method/status to the network
 details tab

---
 packages/trace-viewer/src/ui/networkResourceDetails.css | 7 ++++++-
 packages/trace-viewer/src/ui/networkResourceDetails.tsx | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index fce4e8b2c3..ce0648b8c2 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -39,6 +39,11 @@
   font-weight: bold;
 }
 
+.network-request-details-general {
+  white-space: pre;
+  margin-left: 10px;
+}
+
 .network-request-details-tab .cm-wrapper {
   overflow: hidden;
 }
@@ -52,7 +57,7 @@
 .tab-network .toolbar::after {
   box-shadow: none !important;
 }
- 
+
 .tab-network .tabbed-pane-tab.selected {
   font-weight: bold;
 }
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index c5a974b69e..d450ace420 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -79,6 +79,12 @@ const RequestTab: React.FunctionComponent<{
   return <div className='network-request-details-tab'>
     <div className='network-request-details-header'>URL</div>
     <div className='network-request-details-url'>{resource.request.url}</div>
+    <div className='network-request-details-header'>Method</div>
+    <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
+    <div className='network-request-details-header'>Status</div>
+    <div className='network-request-details-general'>{`Status Code: ${resource.response.status >= 200 && resource.response.status < 400
+      ? `🟢 ${resource.response.status}`
+      : `🔴 ${resource.response.status}`}`}</div>
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
     {requestBody && <div className='network-request-details-header'>Request Body</div>}