chore: remove Page.Header console component (#2712)

Part 1 of #2490 Deletes the `Page.Header` component, which is an artifact of a bygone era. Since the timeline page also had a time range filter embedded in the header, I moved that over to the left-hand-side filter panel. It just need a tiny bit of resizing to fit. <img width="342" alt="Screenshot 2024-09-17 at 4 29 45 PM" src="https://github.com/user-attachments/assets/5769f782-1407-45ba-a6be-bcd1515ad506"> <img width="371" alt="Screenshot 2024-09-17 at 4 36 51 PM" src="https://github.com/user-attachments/assets/a9ad948c-eb07-4b4b-899d-47c15df56bbc"> --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
block · Sep 18, 2024 · 2e719cf · 2e719cf
1 parent a0e0272
commit 2e719cf
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 66 deletions.
diff --git a/frontend/console/src/features/console/ConsolePage.tsx b/frontend/console/src/features/console/ConsolePage.tsx
@@ -1,4 +1,3 @@
-import { CubeIcon } from 'hugeicons-react'
 import { useState } from 'react'
 import { type NavigateFunction, useNavigate } from 'react-router-dom'
 import { useModules } from '../../api/modules/use-modules'
@@ -25,7 +24,6 @@ export const ConsolePage = () => {
 
   return (
     <Page>
-      <Page.Header icon={<CubeIcon />} title='Console' />
       <Page.Body className='flex h-full'>
         <ResizablePanels
           mainContent={<GraphPane onTapped={setSelectedNode} />}

diff --git a/frontend/console/src/features/timeline/TimelinePage.tsx b/frontend/console/src/features/timeline/TimelinePage.tsx
@@ -1,4 +1,3 @@
-import { ListViewIcon } from 'hugeicons-react'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Page } from '../../layout'
@@ -35,11 +34,9 @@ export const TimelinePage = () => {
   return (
     <SidePanelProvider>
       <Page>
-        <Page.Header icon={<ListViewIcon className='size-5' />} title='Events'>
-          <TimelineTimeControls selectedTimeRange={selectedTimeRange} isTimelinePaused={isTimelinePaused} onTimeSettingsChange={handleTimeSettingsChanged} />
-        </Page.Header>
         <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'>

diff --git a/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx b/frontend/console/src/features/timeline/filters/TimelineTimeControls.tsx
@@ -101,20 +101,22 @@ export const TimelineTimeControls = ({
   const olderThan = newerThan ? Timestamp.fromDate(new Date(newerThan.toDate().getTime() - selected.value)) : undefined
   return (
     <>
-      <div className='flex items-center h-6'>
-        {newerThan && (
-          <span title={`${formatTimestampShort(olderThan)} - ${formatTimestampShort(newerThan)}`} className='text-xs font-roboto-mono mr-2 text-gray-400'>
-            {formatTimestampTime(olderThan)} - {formatTimestampTime(newerThan)}
-          </span>
-        )}
-
+      {newerThan && (
+        <div
+          title={`${formatTimestampShort(olderThan)} - ${formatTimestampShort(newerThan)}`}
+          className='text-xs font-roboto-mono mr-2 text-gray-400 pl-4 mt-2'
+        >
+          {formatTimestampTime(olderThan)} - {formatTimestampTime(newerThan)}
+        </div>
+      )}
+      <div className='flex items-center h-6 pl-2 mt-2'>
         <Listbox value={selected} onChange={handleRangeChanged}>
-          <div className='relative w-40 mr-2 mt-0.5 items-center'>
+          <div className='relative w-full mr-1 mt-0.5 items-center'>
             <ListboxButton
-              className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-3 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
+              className={`relative w-full cursor-pointer rounded-md ${bgColor} ${textColor} py-1 pl-2 pr-10 text-xs text-left shadow-sm ring-1 ring-inset ${borderColor} focus:outline-none focus:ring-2 focus:ring-indigo-600`}
             >
               <span className='block truncate'>{selected.label}</span>
-              <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2'>
+              <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1'>
                 <UnfoldLessIcon className='h-5 w-5 text-gray-400' aria-hidden='true' />
               </span>
             </ListboxButton>
@@ -165,14 +167,14 @@ export const TimelineTimeControls = ({
             <button
               type='button'
               onClick={handleTimeBackward}
-              className={`relative inline-flex items-center rounded-l-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
+              className={`relative inline-flex items-center rounded-l-md px-1.5 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
             >
               <Backward02Icon className='w-4 h-4' />
             </button>
             <button
               type='button'
               onClick={handleTimeForward}
-              className={`relative -ml-px inline-flex items-center rounded-r-md px-3 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
+              className={`relative -ml-px inline-flex items-center rounded-r-md px-1.5 text-sm font-semibold ring-1 ring-inset ${borderColor} hover:bg-gray-50 dark:hover:bg-indigo-700`}
             >
               <Forward02Icon className='w-4 h-4' />
             </button>

diff --git a/frontend/console/src/layout/Page.tsx b/frontend/console/src/layout/Page.tsx
@@ -1,52 +1,6 @@
-import { ArrowRight02Icon } from 'hugeicons-react'
 import type React from 'react'
 import { classNames } from '../utils'
 
-interface Breadcrumb {
-  label: string
-  link?: string
-}
-
-const Header = ({
-  icon,
-  title,
-  children,
-  breadcrumbs,
-  className,
-}: {
-  icon?: React.ReactNode
-  title: string
-  children?: React.ReactNode
-  breadcrumbs?: Breadcrumb[]
-  className?: string
-}) => {
-  return (
-    <div className={classNames(className, 'flex-none w-full z-10 shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70')}>
-      <div className='flex items-center'>
-        <span className='mt-1 text-indigo-500 mr-2 mb-1 h-5 w-5'>{icon}</span>
-        {breadcrumbs && breadcrumbs.length > 0 && (
-          <nav className='flex pr-2' aria-label='Breadcrumb'>
-            <ol className='flex items-center space-x-2'>
-              {breadcrumbs.map((crumb, index) => (
-                <li key={index}>
-                  <div className='flex items-center'>
-                    <a href={crumb.link || '#'} className='text-lg mr-2 hover:text-indigo-500'>
-                      {crumb.label}
-                    </a>
-                    <ArrowRight02Icon className='mt-0.5 h-5 w-5' />
-                  </div>
-                </li>
-              ))}
-            </ol>
-          </nav>
-        )}
-        <span className='text-lg'>{title}</span>
-      </div>
-      {children}
-    </div>
-  )
-}
-
 const Body: React.FC<{
   className?: string
   style?: React.CSSProperties
@@ -64,7 +18,6 @@ export const Page: React.FC<{
   style?: React.CSSProperties
   children?: React.ReactNode
 }> & {
-  Header: typeof Header
   Body: typeof Body
 } = ({ className, style, children }) => {
   return (
@@ -74,5 +27,4 @@ export const Page: React.FC<{
   )
 }
 
-Page.Header = Header
 Page.Body = Body