ui: air: support changing bucket size on the graphs

Signed-off-by: Jakub Kicinski <kuba@kernel.org>

Author: kuba-moo

ui/air.html

@@ -719,11 +719,23 @@ <h2>Service Status</h2>
                     </tbody>
                 </table>
             </div>
-            <h3>Review Counts (6-hour buckets)</h3>
+            <div style="display: flex; align-items: center; gap: 15px;">
+                <h3 style="margin: 0;">Review Counts</h3>
+                <label style="display: flex; align-items: center; gap: 6px; font-size: 14px;">
+                    Bucket size:
+                    <select id="bucketSize" onchange="applyFilterAndUpdateDisplay()" style="padding: 4px 8px;">
+                        <option value="3">3h</option>
+                        <option value="6">6h</option>
+                        <option value="12">12h</option>
+                        <option value="24" selected>24h</option>
+                        <option value="48">48h</option>
+                    </select>
+                </label>
+            </div>
             <div class="chart-container">
                 <canvas id="reviewChart"></canvas>
             </div>
-            <h3 style="margin-top: 40px;">Daily Averages (by feedback status)</h3>
+            <h3 style="margin-top: 40px;">Cost and Time (by feedback status)</h3>
             <div class="chart-container">
                 <canvas id="averagesChart"></canvas>
             </div>
@@ -1230,18 +1242,17 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
             // Check if any review has cost data (indicates superuser)
             const hasCostData = reviews.some(r => r.cost_usd !== undefined);
 
-            // Group reviews by 6-hour time buckets and status
+            const bucketSize = parseInt(document.getElementById('bucketSize').value);
+
+            // Group reviews by time buckets and status
             const dataByBucket = {};
 
             reviews.forEach(review => {
-                    // Parse date and round to nearest 6-hour bucket
+                    // Parse date and round to nearest bucket
                     const timestamp = parseUTCDate(review.date);
-                    const hours = timestamp.getHours();
-                    const bucketHour = Math.floor(hours / 6) * 6; // 0, 6, 12, or 18
-
-                    // Create bucket key (ISO format with hour set to bucket start)
-                    timestamp.setHours(bucketHour, 0, 0, 0);
-                    const bucketKey = timestamp.toISOString();
+                    const bucketMs = bucketSize * 3600000;
+                    const bucketStart = new Date(Math.floor(timestamp.getTime() / bucketMs) * bucketMs);
+                    const bucketKey = bucketStart.toISOString();
 
                     if (!dataByBucket[bucketKey]) {
                         dataByBucket[bucketKey] = {
@@ -1267,7 +1278,7 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                     }
                 });
 
-                console.log('Data by 6-hour bucket:', dataByBucket);
+                console.log(`Data by ${bucketSize}-hour bucket:`, dataByBucket);
 
                 // Convert to sorted arrays, null for zero values (so lines aren't drawn)
                 const buckets = Object.keys(dataByBucket).sort();
@@ -1470,7 +1481,8 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                 hasFeedback: review.has_feedback || false
             }));
 
-            // Group reviews by day and calculate averages, separated by feedback status
+            // Group reviews by bucket and calculate averages, separated by feedback status
+            const bucketSize = parseInt(document.getElementById('bucketSize').value);
             const dataByDay = {};
 
             reviewsWithFeedback.forEach(review => {
@@ -1479,10 +1491,11 @@ <h3 style="margin-top: 40px;">Feedback Breakdown (36-hour rolling)</h3>
                         return;
                     }
 
-                    // Parse date and get day (midnight)
+                    // Parse date and round to bucket
                     const timestamp = parseUTCDate(review.date);
-                    timestamp.setHours(0, 0, 0, 0);
-                    const dayKey = timestamp.toISOString();
+                    const bucketMs = bucketSize * 3600000;
+                    const bucketStart = new Date(Math.floor(timestamp.getTime() / bucketMs) * bucketMs);
+                    const dayKey = bucketStart.toISOString();
 
                     if (!dataByDay[dayKey]) {
                         dataByDay[dayKey] = {