Merge pull request #354 from ethpandaops/fix/timings

mattevans · web-flow · commit 570594877181 · 2025-12-16T16:00:45.000+10:00
fix: exec timings
diff --git a/src/pages/ethereum/execution/timings/IndexPage.tsx b/src/pages/ethereum/execution/timings/IndexPage.tsx
@@ -20,8 +20,8 @@ import type { TimeRange } from './IndexPage.types';
  * Displays CL-EL communication timing data for engine_newPayload and engine_getBlobs API calls
  */
 export function IndexPage(): JSX.Element {
-  // Time range state - default to last 24 hours for hourly aggregated data
-  const [timeRange, setTimeRange] = useState<TimeRange>('day');
+  // Time range state - default to last 1 hour
+  const [timeRange, setTimeRange] = useState<TimeRange>('1hour');
 
   // Reference nodes filter - default to true (only ethPandaOps controlled fleet)
   const [referenceNodesOnly, setReferenceNodesOnly] = useState(true);
@@ -35,8 +35,15 @@ export function IndexPage(): JSX.Element {
     { id: 'getBlobs', anchors: ['blob-duration'] },
   ]);
 
-  // Fetch all engine timing data
-  const { data, isLoading, error } = useEngineTimingsData({ timeRange, referenceNodesOnly });
+  // Map tab index to tab name
+  const activeTab = selectedIndex === 0 ? 'newPayload' : 'getBlobs';
+
+  // Fetch engine timing data (getBlobs queries only run when that tab is visited)
+  const { data, isLoading, isLoadingBlobs, error } = useEngineTimingsData({
+    timeRange,
+    referenceNodesOnly,
+    activeTab,
+  });
 
   // Loading state
   if (isLoading) {
@@ -92,7 +99,7 @@ export function IndexPage(): JSX.Element {
       <div className="mb-6 flex items-center gap-4">
         <span className="text-sm font-medium text-muted">Time Range:</span>
         <div className="flex gap-2">
-          {(['hour', 'day', '7days'] as const).map(range => (
+          {(['1hour', '3hours', '6hours'] as const).map(range => (
             <button
               key={range}
               onClick={() => setTimeRange(range)}
@@ -102,7 +109,7 @@ export function IndexPage(): JSX.Element {
                   : 'bg-surface text-muted hover:bg-surface/80 hover:text-foreground'
               }`}
             >
-              {range === 'hour' ? 'Last Hour' : range === 'day' ? 'Last 24h' : 'Last 7 Days'}
+              {range === '1hour' ? 'Last 1h' : range === '3hours' ? 'Last 3h' : 'Last 6h'}
             </button>
           ))}
         </div>
@@ -212,12 +219,12 @@ export function IndexPage(): JSX.Element {
         <TabPanels className="mt-6">
           {/* newPayload Tab */}
           <TabPanel>
-            <NewPayloadTab data={data} timeRange={timeRange} />
+            <NewPayloadTab data={data} />
           </TabPanel>
 
           {/* getBlobs Tab */}
           <TabPanel>
-            <GetBlobsTab data={data} timeRange={timeRange} />
+            <GetBlobsTab data={data} isLoading={isLoadingBlobs} />
           </TabPanel>
         </TabPanels>
       </TabGroup>
diff --git a/src/pages/ethereum/execution/timings/IndexPage.types.ts b/src/pages/ethereum/execution/timings/IndexPage.types.ts
@@ -3,7 +3,7 @@ import { z } from 'zod';
 /**
  * Time range options for engine timing data
  */
-export type TimeRange = 'hour' | 'day' | '7days';
+export type TimeRange = '1hour' | '3hours' | '6hours';
 
 /**
  * Tab identifiers for the timings page
@@ -19,7 +19,7 @@ export const timingsSearchSchema = z.object({
   tab: z.enum(['overview', 'newPayload', 'getBlobs', 'clients']).optional(),
 
   // Time range for data queries
-  range: z.enum(['hour', 'day', '7days']).optional(),
+  range: z.enum(['1hour', '3hours', '6hours']).optional(),
 
   // Filter to reference nodes only (ethPandaOps controlled fleet)
   refNodes: z.boolean().optional(),
@@ -33,7 +33,7 @@ export type TimingsSearch = z.infer<typeof timingsSearchSchema>;
 /**
  * Default time range for the page
  */
-export const DEFAULT_TIME_RANGE: TimeRange = 'day';
+export const DEFAULT_TIME_RANGE: TimeRange = '1hour';
 
 /**
  * Status values for engine_newPayload responses
diff --git a/src/pages/ethereum/execution/timings/components/GetBlobsTab/GetBlobsTab.tsx b/src/pages/ethereum/execution/timings/components/GetBlobsTab/GetBlobsTab.tsx
@@ -3,29 +3,77 @@ import { Card } from '@/components/Layout/Card';
 import { Stats } from '@/components/DataDisplay/Stats';
 import { MultiLineChart } from '@/components/Charts/MultiLine';
 import { BarChart } from '@/components/Charts/Bar';
+import { LoadingContainer } from '@/components/Layout/LoadingContainer';
 import { useThemeColors } from '@/hooks/useThemeColors';
 import { formatSlot } from '@/utils';
 import type { EngineTimingsData } from '../../hooks/useEngineTimingsData';
-import type { TimeRange } from '../../IndexPage.types';
 import { ClientVersionBreakdown } from '../ClientVersionBreakdown';
 
 export interface GetBlobsTabProps {
   data: EngineTimingsData;
-  timeRange: TimeRange;
+  isLoading?: boolean;
+}
+
+/**
+ * Loading skeleton for the getBlobs tab
+ */
+function GetBlobsTabSkeleton(): JSX.Element {
+  return (
+    <div className="space-y-6">
+      {/* Stats skeleton */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Card key={index}>
+            <div className="space-y-2 p-4">
+              <LoadingContainer className="h-3 w-20 rounded-xs" />
+              <LoadingContainer className="h-8 w-24 rounded-xs" />
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Client breakdown skeleton */}
+      <Card>
+        <div className="space-y-4 p-4">
+          <LoadingContainer className="h-5 w-40 rounded-xs" />
+          <LoadingContainer className="h-48 w-full rounded-xs" />
+        </div>
+      </Card>
+
+      {/* Charts skeleton */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        {Array.from({ length: 2 }).map((_, index) => (
+          <Card key={index}>
+            <div className="space-y-4 p-4">
+              <LoadingContainer className="h-5 w-32 rounded-xs" />
+              <LoadingContainer className="h-[375px] w-full rounded-xs" />
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
 }
 
 /**
  * GetBlobs tab showing detailed engine_getBlobs timing analysis
  */
-export function GetBlobsTab({ data, timeRange }: GetBlobsTabProps): JSX.Element {
+export function GetBlobsTab({ data, isLoading }: GetBlobsTabProps): JSX.Element {
   const themeColors = useThemeColors();
+
+  // Show skeleton while loading
+  if (isLoading) {
+    return <GetBlobsTabSkeleton />;
+  }
+
   const { getBlobsBySlot, getBlobsByElClient, getBlobsDurationHistogram, getBlobsHourly, getBlobsDaily } = data;
 
   // Filter to SUCCESS status only for duration-based charts
   const successBlobsByElClient = getBlobsByElClient.filter(r => r.status?.toUpperCase() === 'SUCCESS');
 
   // Determine which aggregated data source to use based on time range
-  const useHourlyData = timeRange === 'hour' || timeRange === 'day';
+  // Always use hourly data since all time ranges are < 24 hours
+  const useHourlyData = true;
 
   // Calculate summary stats from pre-aggregated hourly/daily data
   const aggregatedStats = (() => {
diff --git a/src/pages/ethereum/execution/timings/components/NewPayloadTab/NewPayloadTab.tsx b/src/pages/ethereum/execution/timings/components/NewPayloadTab/NewPayloadTab.tsx
@@ -9,18 +9,16 @@ import { ScatterAndLineChart } from '@/components/Charts/ScatterAndLine';
 import { useThemeColors } from '@/hooks/useThemeColors';
 import { formatSlot } from '@/utils';
 import type { EngineTimingsData } from '../../hooks/useEngineTimingsData';
-import type { TimeRange } from '../../IndexPage.types';
 import { ClientVersionBreakdown } from '../ClientVersionBreakdown';
 
 export interface NewPayloadTabProps {
   data: EngineTimingsData;
-  timeRange: TimeRange;
 }
 
 /**
  * NewPayload tab showing detailed engine_newPayload timing analysis
  */
-export function NewPayloadTab({ data, timeRange }: NewPayloadTabProps): JSX.Element {
+export function NewPayloadTab({ data }: NewPayloadTabProps): JSX.Element {
   const themeColors = useThemeColors();
   const { newPayloadBySlot, newPayloadDurationHistogram, newPayloadByElClient } = data;
 
@@ -31,8 +29,8 @@ export function NewPayloadTab({ data, timeRange }: NewPayloadTabProps): JSX.Elem
   const [visibleScatterSeries, setVisibleScatterSeries] = useState<Set<string>>(new Set());
   const [scatterSeriesInitialized, setScatterSeriesInitialized] = useState(false);
 
-  // Determine which aggregated data source to use based on time range
-  const useHourlyData = timeRange === 'hour' || timeRange === 'day';
+  // Always use hourly data since all time ranges are < 24 hours
+  const useHourlyData = true;
   const { newPayloadHourly, newPayloadDaily } = data;
 
   // Calculate summary stats from pre-aggregated hourly/daily data
diff --git a/src/pages/ethereum/execution/timings/hooks/useEngineTimingsData.ts b/src/pages/ethereum/execution/timings/hooks/useEngineTimingsData.ts
