Merge branch 'main' of github.com:TBD54566975/ftl into eirby/modules-…

…viz-zoom-pan

console/client/src/App.tsx

@@ -2,8 +2,10 @@ import { Navigate, Route, Routes } from 'react-router-dom'
 import { DeploymentPage } from './features/deployments/DeploymentPage.tsx'
 import { DeploymentsPage } from './features/deployments/DeploymentsPage.tsx'
 import { GraphPage } from './features/graph/GraphPage.tsx'
+import { ModulePage } from './features/modules/ModulePage.tsx'
 import { ModulesPage } from './features/modules/ModulesPage.tsx'
 import { TimelinePage } from './features/timeline/TimelinePage.tsx'
+import { VerbPage } from './features/verbs/VerbPage.tsx'
 import { Layout } from './layout/Layout.tsx'
 import { bgColor, textColor } from './utils/style.utils.ts'
 
@@ -14,9 +16,14 @@ export const App = () => {
         <Route path='/' element={<Layout />}>
           <Route path='/' element={<Navigate to='events' replace />} />
           <Route path='events' element={<TimelinePage />} />
+
           <Route path='modules' element={<ModulesPage />} />
+          <Route path='modules/:moduleName' element={<ModulePage />} />
+          <Route path='modules/:moduleName/verbs/:verbName' element={<VerbPage />} />
+
           <Route path='deployments' element={<DeploymentsPage />} />
           <Route path='deployments/:deploymentName' element={<DeploymentPage />} />
+
           <Route path='graph' element={<GraphPage />} />
         </Route>
       </Routes>

console/client/src/components/PageHeader.tsx

@@ -1,18 +1,39 @@
-import { panelColor } from '../utils'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import React from 'react'
+
+interface Breadcrumb {
+  label: string
+  link?: string
+}
 
 interface Props {
   icon?: React.ReactNode
-  title?: string
+  title: string
   children?: React.ReactNode
+  breadcrumbs?: Breadcrumb[]
 }
 
-export const PageHeader = ({ icon, title, children }: Props) => {
+export const PageHeader = ({ icon, title, children, breadcrumbs }: Props) => {
   return (
-    <div
-      className={`sticky top-0 z-10 ${panelColor} shadow dark:shadow-md flex justify-between items-center py-2 px-4 text-gray-70`}
-    >
+    <div className={`sticky top-0 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 pr-1 h-6 w-6'>{icon}</span>
+        <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 role='list' 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>
+                    <ChevronRightIcon className='mt-0.5 h-5 w-5' />
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </nav>
+        )}
         <span className='text-lg'>{title}</span>
       </div>
       {children}

console/client/src/features/deployments/DeploymentPage.tsx

@@ -1,6 +1,6 @@
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
 import React from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import { ButtonSmall } from '../../components/ButtonSmall'
 import { Card } from '../../components/Card'
 import { PageHeader } from '../../components/PageHeader'
@@ -10,6 +10,7 @@ import { modulesContext } from '../../providers/modules-provider'
 import { verbRefString } from '../verbs/verb.utils'
 
 export const DeploymentPage = () => {
+  const navigate = useNavigate()
   const { deploymentName } = useParams()
   const modules = React.useContext(modulesContext)
   const [module, setModule] = React.useState<Module | undefined>()
@@ -49,12 +50,20 @@ export const DeploymentPage = () => {
 
   return (
     <>
-      <PageHeader icon={<RocketLaunchIcon />} title={`Deployments - ${deploymentName}`} />
+      <PageHeader
+        icon={<RocketLaunchIcon />}
+        title={module?.deploymentName || 'Loading...'}
+        breadcrumbs={[{ label: 'Deployments', link: '/deployments' }]}
+      />
 
       <div className='m-4'>
         <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
           {module?.verbs.map((verb) => (
-            <Card key={module.deploymentName} topBarColor='bg-green-500' onClick={() => console.log('click')}>
+            <Card
+              key={module.deploymentName}
+              topBarColor='bg-green-500'
+              onClick={() => navigate(`/modules/${module.name}/verbs/${verb.verb?.name}`)}
+            >
               {verb.verb?.name}
               <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
             </Card>

console/client/src/features/modules/ModulePage.tsx

@@ -0,0 +1,45 @@
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Card } from '../../components/Card'
+import { PageHeader } from '../../components/PageHeader'
+import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { modulesContext } from '../../providers/modules-provider'
+
+export const ModulePage = () => {
+  const navigate = useNavigate()
+  const { moduleName } = useParams()
+  const modules = React.useContext(modulesContext)
+  const [module, setModule] = React.useState<Module | undefined>()
+
+  React.useEffect(() => {
+    if (modules) {
+      const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
+      setModule(module)
+    }
+  }, [modules, moduleName])
+
+  return (
+    <>
+      <PageHeader
+        icon={<Square3Stack3DIcon />}
+        title={module?.name || ''}
+        breadcrumbs={[{ label: 'Modules', link: '/modules' }]}
+      />
+      <div className='m-4'>
+        <div className='grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
+          {module?.verbs.map((verb) => (
+            <Card
+              key={verb.verb?.name}
+              topBarColor='bg-green-500'
+              onClick={() => navigate(`/modules/${module.name}/verbs/${verb.verb?.name}`)}
+            >
+              {verb.verb?.name}
+              <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { PageHeader } from '../../components/PageHeader'
+import { Module, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { modulesContext } from '../../providers/modules-provider'
+
+export const VerbPage = () => {
+  const { moduleName, verbName } = useParams()
+  const modules = React.useContext(modulesContext)
+  const [module, setModule] = React.useState<Module | undefined>()
+  const [verb, setVerb] = React.useState<Verb | undefined>()
+
+  React.useEffect(() => {
+    if (modules) {
+      const module = modules.modules.find((module) => module.name === moduleName?.toLocaleLowerCase())
+      setModule(module)
+      console.log(module)
+      const verb = module?.verbs.find((verb) => verb.verb?.name.toLocaleLowerCase() === verbName?.toLocaleLowerCase())
+      setVerb(verb)
+    }
+  }, [modules, moduleName])
+
+  return (
+    <>
+      <PageHeader
+        icon={<Square3Stack3DIcon />}
+        title={verb?.verb?.name || ''}
+        breadcrumbs={[
+          { label: 'Modules', link: '/modules' },
+          { label: module?.name || '', link: `/modules/${module?.name}` },
+        ]}
+      />
+      <div className='m-4'>
+        <h1>Verb: {verb?.verb?.name}</h1>
+      </div>
+    </>
+  )
+}