From c04735b1b9c71e41ea5f0f15b6c736a707c90065 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Tue, 19 Aug 2025 08:07:31 -0500
Subject: [PATCH] Add hostname toggle functionality to Request Breakdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the ability to expand the hostname breakdown section from the default top 10 to show all hostnames, improving usability for traces with many different domains.

Features:
- Default view shows top 10 hostnames for better performance and readability
- Toggle button to expand/collapse between "top 10" and "all hostnames" views
- Dynamic status text indicating current view and total hostname count
- Styled toggle button matching the page gradient theme with hover effects
- Responsive design with mobile-friendly stacked layout
- State management to preserve user's view preference during session

Benefits:
- Faster initial load by limiting displayed rows
- On-demand access to complete hostname data when needed
- Better UX for traces with many hostnames while maintaining performance

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/RequestBreakdown.module.css | 32 ++++++++++++++++++++++
 src/components/RequestBreakdown.tsx        | 27 ++++++++++++++++--
 2 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/components/RequestBreakdown.module.css b/src/components/RequestBreakdown.module.css
index 216d26d..b6916a0 100644
--- a/src/components/RequestBreakdown.module.css
+++ b/src/components/RequestBreakdown.module.css
@@ -156,6 +156,28 @@
   font-size: 14px;
   text-align: center;
   font-style: italic;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+}
+
+.toggleButton {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-style: normal;
+}
+
+.toggleButton:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }
 
 /* Responsive Design */
@@ -231,4 +253,14 @@
   .progressBar {
     height: 4px;
   }
+
+  .moreInfo {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .toggleButton {
+    padding: 8px 16px;
+    font-size: 13px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/RequestBreakdown.tsx b/src/components/RequestBreakdown.tsx
index a9b691a..90c4add 100644
--- a/src/components/RequestBreakdown.tsx
+++ b/src/components/RequestBreakdown.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useDatabaseTraceData } from '../hooks/useDatabaseTraceData'
 import { processHTTPRequests } from './httprequestviewer/lib/httpRequestProcessor'
 import { addRequestPostProcessing } from './httprequestviewer/lib/requestPostProcessor'
@@ -34,6 +34,7 @@ interface CategoryBreakdown {
 
 const RequestBreakdown: React.FC<RequestBreakdownProps> = ({ traceId }) => {
   const { traceData, loading, error } = useDatabaseTraceData(traceId)
+  const [showAllHostnames, setShowAllHostnames] = useState(false)
 
   const httpRequests = useMemo(() => {
     if (!traceData) return []
@@ -389,7 +390,7 @@ const RequestBreakdown: React.FC<RequestBreakdownProps> = ({ traceId }) => {
             <span>Response Time %</span>
             <span>Avg Response Time</span>
           </div>
-          {hostnameBreakdown.slice(0, 10).map(item => (
+          {(showAllHostnames ? hostnameBreakdown : hostnameBreakdown.slice(0, 10)).map(item => (
             <div key={item.name} className={styles.tableRow}>
               <span className={styles.categoryName}>{item.name}</span>
               <span>{item.count}</span>
@@ -428,7 +429,27 @@ const RequestBreakdown: React.FC<RequestBreakdownProps> = ({ traceId }) => {
         </div>
         {hostnameBreakdown.length > 10 && (
           <div className={styles.moreInfo}>
-            Showing top 10 of {hostnameBreakdown.length} hostnames
+            {showAllHostnames ? (
+              <>
+                Showing all {hostnameBreakdown.length} hostnames
+                <button 
+                  onClick={() => setShowAllHostnames(false)}
+                  className={styles.toggleButton}
+                >
+                  Show Top 10 Only
+                </button>
+              </>
+            ) : (
+              <>
+                Showing top 10 of {hostnameBreakdown.length} hostnames
+                <button 
+                  onClick={() => setShowAllHostnames(true)}
+                  className={styles.toggleButton}
+                >
+                  Show All Hostnames
+                </button>
+              </>
+            )}
           </div>
         )}
       </div>