chore: remove page component and other unused code (#3138)

Fixes #2490

frontend/console/src/features/console/ConsolePage.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
+import { Loader } from '../../components/Loader'
 import { ResizablePanels } from '../../components/ResizablePanels'
-import { Page } from '../../layout'
 import { Config, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { type FTLNode, GraphPane } from '../graph/GraphPane'
-import BottomPanel from './BottomPanel'
+import { Timeline } from '../timeline/Timeline'
 import type { ExpandablePanelProps } from './ExpandablePanel'
 import { configPanels } from './right-panel/ConfigPanels'
 import { modulePanels } from './right-panel/ModulePanels'
@@ -19,20 +19,22 @@ export const ConsolePage = () => {
   const [selectedNode, setSelectedNode] = useState<FTLNode | null>(null)
 
   if (!modules.isSuccess) {
-    return <Page>Loading...</Page>
+    return (
+      <div className='flex justify-center items-center h-full'>
+        <Loader />
+      </div>
+    )
   }
 
   return (
-    <Page>
-      <Page.Body className='flex h-full'>
-        <ResizablePanels
-          mainContent={<GraphPane onTapped={setSelectedNode} />}
-          rightPanelHeader={headerForNode(selectedNode)}
-          rightPanelPanels={panelsForNode(modules.data.modules, selectedNode, navigate)}
-          bottomPanelContent={<BottomPanel />}
-        />
-      </Page.Body>
-    </Page>
+    <div className='flex h-full'>
+      <ResizablePanels
+        mainContent={<GraphPane onTapped={setSelectedNode} />}
+        rightPanelHeader={headerForNode(selectedNode)}
+        rightPanelPanels={panelsForNode(modules.data.modules, selectedNode, navigate)}
+        bottomPanelContent={<Timeline timeSettings={{ isTailing: true, isPaused: false }} filters={[]} />}
+      />
+    </div>
   )
 }
 

frontend/console/src/features/timeline/TimelinePage.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Page } from '../../layout'
 import type { EventsQuery_Filter } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
 import { Timeline } from './Timeline'
@@ -33,17 +32,15 @@ export const TimelinePage = () => {
 
   return (
     <SidePanelProvider>
-      <Page>
-        <Page.Body className='flex'>
-          <div className='sticky top-0 flex-none overflow-y-auto'>
-            <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
-            <TimelineFilterPanel onFiltersChanged={handleFiltersChanged} />
-          </div>
-          <div className='flex-grow overflow-y-scroll'>
-            <Timeline timeSettings={timeSettings} filters={filters} />
-          </div>
-        </Page.Body>
-      </Page>
+      <div className='flex h-full'>
+        <div className='flex-none overflow-y-auto'>
+          <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
+          <TimelineFilterPanel onFiltersChanged={handleFiltersChanged} />
+        </div>
+        <div className='flex-grow overflow-y-scroll'>
+          <Timeline timeSettings={timeSettings} filters={filters} />
+        </div>
+      </div>
     </SidePanelProvider>
   )
 }

frontend/console/src/features/traces/TraceRequestList.tsx

@@ -4,6 +4,8 @@ import type { Event } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { SidePanelContext } from '../../providers/side-panel-provider'
 import TimelineEventList from '../timeline/TimelineEventList'
 import { TimelineCallDetails } from '../timeline/details/TimelineCallDetails'
+import { TimelineDetailsHeader } from '../timeline/details/TimelineDetailsHeader'
+import { TimelineIngressDetails } from '../timeline/details/TimelineIngressDetails'
 import { groupEventsByRequestKey } from './traces.utils'
 
 export const TraceRequestList = ({ module, verb }: { module: string; verb?: string }) => {
@@ -22,7 +24,14 @@ export const TraceRequestList = ({ module, verb }: { module: string; verb?: stri
       return
     }
     setSelectedEventId(event.id)
-    openPanel(<TimelineCallDetails event={event} />)
+    switch (event.entry?.case) {
+      case 'call':
+        openPanel(<TimelineCallDetails event={event} />, <TimelineDetailsHeader event={event} />)
+        break
+      case 'ingress':
+        openPanel(<TimelineIngressDetails event={event} />, <TimelineDetailsHeader event={event} />)
+        break
+    }
   }
 
   const events = Object.entries(traceEvents).map(([_, events]) => events[0])

frontend/console/src/features/verbs/VerbPage.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
 import { Loader } from '../../components/Loader'
 import { ResizablePanels } from '../../components/ResizablePanels'
-import { Page } from '../../layout'
 import type { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { NotificationType, NotificationsContext } from '../../providers/notifications-provider'
 import { SidePanelProvider } from '../../providers/side-panel-provider'
@@ -55,16 +54,16 @@ export const VerbPage = ({ moduleName, declName }: { moduleName: string; declNam
 
   return (
     <SidePanelProvider>
-      <Page>
-        <Page.Body className='flex h-full'>
+      <div className='flex flex-col h-full'>
+        <div className='flex h-full'>
           <ResizablePanels
             mainContent={<VerbRequestForm module={module} verb={verb} />}
             rightPanelHeader={header}
             rightPanelPanels={verbPanels(verb)}
             bottomPanelContent={<TraceRequestList module={module.name} verb={verb.verb?.name} />}
           />
-        </Page.Body>
-      </Page>
+        </div>
+      </div>
     </SidePanelProvider>
   )
 }