Update index.html

index.html

@@ -51,9 +51,11 @@
 
     <section id="tabsContainer" class="hidden">
       <div id="tabButtons" class="flex border-b border-gray-300">
-        </div>
+        <!-- Tab buttons will be injected here -->
+      </div>
       <div id="tabContents" class="mt-0">
-        </div>
+        <!-- Tab contents will be injected here -->
+      </div>
     </section>
 
     <footer class="mt-6 text-xs text-gray-500">Concurrency Report • Generated by concurrency_tester</footer>
@@ -92,14 +94,16 @@
       </div>
 
       <div class="card p-4 bg-white border mb-6">
-        <h3 class="text-sm text-gray-500">Latency over time (attempt index)</h3>
+        <!-- UPDATED Chart Title -->
+        <h3 class="text-sm text-gray-500">Latency over time (by Start Time)</h3>
         <canvas class="latencyTime" height="80"></canvas>
       </div>
 
       <div class="card p-4 bg-white border">
         <h3 class="text-sm text-gray-500 mb-2">Attempts (table) — filter/search</h3>
         <div class="flex gap-2 mb-2">
-          <input class="searchInput p-2 border rounded w-full text-sm" placeholder="search status / error / attempt">
+          <!-- UPDATED Placeholder Text -->
+          <input class="searchInput p-2 border rounded w-full text-sm" placeholder="search req_id / status / error / attempt">
           <select class="filterOk p-2 border rounded text-sm">
             <option value="all">All</option>
             <option value="ok">Only OK</option>
@@ -111,7 +115,8 @@
             <thead class="bg-gray-50 sticky top-0">
               <tr>
                 <th class="p-2 text-left">#</th>
-                <th class="p-2 text-left">timestamp</th>
+                <th class="p-2 text-left">req_id</th> <!-- ADDED -->
+                <th class="p-2 text-left">Start Time</th> <!-- RENAMED -->
                 <th class="p-2 text-left">status</th>
                 <th class="p-2 text-left">latency_ms</th>
                 <th class="p-2 text-left">attempt</th>
@@ -192,20 +197,74 @@ function renderReportIntoPanel(panel, report, index){
   const pieCanvas = panel.querySelector('.statusPie').getContext('2d');
   chartInstances[index].statusPie = new Chart(pieCanvas, { type:'pie', data:{ labels:Object.keys(statuses), datasets:[{data:Object.values(statuses)}] }, options:{responsive:true} });
 
-  // Latency over time
+  // --- MODIFIED: Latency over time ---
   const timeCanvas = panel.querySelector('.latencyTime').getContext('2d');
-  chartInstances[index].latTime = new Chart(timeCanvas, { type:'line', data:{ labels: attempts.map((_,i)=>i+1), datasets:[{label:'latency_ms', data: attempts.map(a=>a.latency_ms || null), spanGaps:true, tension:0.2}] }, options:{responsive:true, plugins:{legend:{display:false}}, scales:{y:{title:{display:true,text:'ms'}}}} });
+  // Sort attempts by start time to make the chart coherent
+  const sortedAttempts = [...attempts].sort((a, b) => (a.start_timestamp || 0) - (b.start_timestamp || 0));
+  
+  chartInstances[index].latTime = new Chart(timeCanvas, { 
+      type:'line', 
+      data:{ 
+          datasets:[{
+              label:'latency_ms', 
+              // Use {x, y} data format
+              data: sortedAttempts.map(a => ({
+                  x: a.start_timestamp, // Use timestamp for x
+                  y: a.latency_ms || null 
+              })), 
+              spanGaps:true, 
+              tension:0.2,
+              pointRadius: 1, // Smaller points
+              borderWidth: 1.5 // Thinner line
+          }] 
+      }, 
+      options:{
+          responsive:true, 
+          plugins:{ 
+            legend:{display:false}, 
+            tooltip: {
+              callbacks: {
+                  title: (tooltipItems) => {
+                       // Show readable date in tooltip
+                       const ts = tooltipItems[0].parsed.x;
+                       return new Date(ts * 1000).toLocaleString();
+                  },
+                  label: (tooltipItem) => {
+                      return ` Latency: ${tooltipItem.parsed.y.toFixed(2)} ms`;
+                  }
+              }
+            }
+          }, 
+          scales:{
+              x: {
+                  type: 'linear', // Use linear scale for timestamps
+                  title:{display:true,text:'Start Time'},
+                  ticks: {
+                      // Format ticks to be readable times
+                      callback: function(value) {
+                          // Multiply by 1000 because JS Date uses milliseconds
+                          return new Date(value * 1000).toLocaleTimeString();
+                      }
+                  }
+              },
+              y:{title:{display:true,text:'ms'}}
+          }
+      } 
+  });
+  // --- END MODIFIED ---
 
-  // --- Table ---
-  const tbody = panel.querySelector('.attemptsBody'); 
+  // --- MODIFIED: Table ---
+  const tbody = panel.querySelector('.attemptsBody');  
   tbody.innerHTML=''; // Clear old data
-  attempts.forEach((a,i)=>{
+  attempts.sort((a, b) => a.req_id > b.req_id).forEach((a,i)=>{
     const tr = document.createElement('tr');
     tr.className = "border-b border-gray-100 hover:bg-gray-50";
-    tr.innerHTML = `<td class="p-2">${i+1}</td>
-      <td class="p-2">${a.timestamp || ''}</td>
+    // UPDATED innerHTML to include req_id and use start_timestamp
+    tr.innerHTML = `<td class="p-2">${a.req_id ?? i+1}</td>
+      <td class="p-2">${a.req_id ?? ''}</td>
+      <td class="p-2">${a.start_timestamp ? new Date(a.start_timestamp * 1000).toLocaleString() : ''}</td>
       <td class="p-2">${a.status ?? ''}</td>
-      <td class="p-2">${a.latency_ms ?? ''}</td>
+      <td class="p-2">${a.latency_ms ? a.latency_ms.toFixed(2) : ''}</td>
       <td class="p-2">${a.attempt ?? ''}</td>
       <td class="p-2">${a.ok ? 'yes' : 'no'}</td>
       <td class="p-2"><pre class="text-xs">${typeof a.body === 'string' ? a.body : JSON.stringify(a.body || a.error || '', null, 0)}</pre></td>`;
@@ -228,10 +287,20 @@ function renderReportIntoPanel(panel, report, index){
   panel.querySelector('.filterOk').onchange = () => applyFilter();
 
 
-  // --- Download Buttons ---
+  // --- MODIFIED: Download Buttons ---
   panel.querySelector('.downloadCsvBtn').onclick = () => {
-    const rows = [['timestamp','status','latency_ms','attempt','ok','error']];
-    (report.results || []).forEach(a=> rows.push([a.timestamp||'', a.status||'', a.latency_ms||'', a.attempt||'', a.ok||'', a.error||'']));
+    // UPDATED CSV headers and data rows
+    const rows = [['req_id','start_timestamp','status','latency_ms','attempt','ok','error','body']];
+    (report.results || []).forEach(a=> rows.push([
+        a.req_id||'', 
+        a.start_timestamp ? new Date(a.start_timestamp * 1000).toISOString() : '', // Use ISOString for CSV
+        a.status||'', 
+        a.latency_ms||'', 
+        a.attempt||'', 
+        a.ok||'', 
+        a.error||'',
+        typeof a.body === 'string' ? a.body : JSON.stringify(a.body || '')
+    ]));
     const csv = rows.map(r=> r.map(c=> '"'+String(c).replace(/"/g,'""')+'"').join(',')).join('\n');
     const blob = new Blob([csv],{type:'text/csv'});
     const url = URL.createObjectURL(blob);
@@ -378,11 +447,11 @@ document.getElementById('fileInput').addEventListener('change', async (ev)=>{
 
 // Paste/Render
 document.getElementById('renderBtn').addEventListener('click', ()=>{
-  const txt = document.getElementById('jsonPaste').value.trim(); 
+  const txt = document.getElementById('jsonPaste').value.trim();  
   if(!txt) { alert('Paste JSON first'); return; }
   
-  try { 
-    const j = JSON.parse(txt); 
+  try {  
+    const j = JSON.parse(txt);  
     if (Array.isArray(j)) {
         // It's an array of reports
         j.forEach((report, i) => {
@@ -392,14 +461,14 @@ document.getElementById('renderBtn').addEventListener('click', ()=>{
         // It's a single report
         addReport(j, `Pasted Report ${allReports.length + 1}`);
     }
-  } catch(e) { 
-    alert('Invalid JSON: ' + e.message); 
+  } catch(e) {  
+    alert('Invalid JSON: ' + e.message);  
   }
 });
 
 // Clear Paste Area
-document.getElementById('clearBtn').addEventListener('click', ()=>{ 
-    document.getElementById('jsonPaste').value=''; 
+document.getElementById('clearBtn').addEventListener('click', ()=>{  
+    document.getElementById('jsonPaste').value='';  
 });
 
 // Clear All
@@ -431,12 +500,21 @@ document.getElementById('clearAllBtn').addEventListener('click', () => {
 });
 
 
-// Load sample
+// --- MODIFIED: Load sample ---
 document.getElementById('loadSample').addEventListener('click', ()=>{
   const sample = {
     config:{total:20, concurrency:5, timeout:10, retries:1, service_url:'https://example.com'},
     summary:{requested:20, completed_attempts:20, successful_responses:15, failed_attempts:5, success_rate:75, latency_ms:{min:50, max:1200, mean:210, median:180, p90:480, p99:900}},
-    results: Array.from({length:20}, (_,i)=>({timestamp:new Date(Date.now()- (20-i)*1000).toISOString(), status: i<15?200:500, latency_ms: Math.round(50 + Math.random()*600), attempt:1, ok: i<15, body: i<15?{data:'ok'}:{error:'server'}}))
+    results: Array.from({length:20}, (_,i)=>({
+        req_id: i, // ADDED
+        start_timestamp: (Date.now() - (20-i)*1000 - Math.random()*1000) / 1000, // ADDED (as unix timestamp)
+        status: i<15?200:500, 
+        latency_ms: Math.round(50 + Math.random()*600 + (i%5)*50), // Add some variance 
+        attempt:1, 
+        ok: i<15, 
+        body: i<15?{data:'ok'}:{error:'server'}
+        // 'timestamp' field removed
+    }))
   };
   addReport(sample, `Sample Report ${allReports.length + 1}`);
 });