feat: starting on deployments page (#420)

Super basic layout for displaying deployments
<img width="1624" alt="Screenshot 2023-09-26 at 2 04 56 PM"
src="https://github.com/TBD54566975/ftl/assets/51647/24bcc8e6-26c3-4dea-8663-f3917ab91241">
<img width="1624" alt="Screenshot 2023-09-26 at 2 04 52 PM"
src="https://github.com/TBD54566975/ftl/assets/51647/0ace299e-b4c3-4c00-8454-a6157174086e">

console/client/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FTL</title>
-    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
   </head>
 

console/client/src/App.tsx

@@ -1,4 +1,6 @@
 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 { ModulesPage } from './features/modules/ModulesPage.tsx'
 import { TimelinePage } from './features/timeline/TimelinePage.tsx'
@@ -13,6 +15,8 @@ export const App = () => {
           <Route path='/' element={<Navigate to='events' replace />} />
           <Route path='events' element={<TimelinePage />} />
           <Route path='modules' element={<ModulesPage />} />
+          <Route path='deployments' element={<DeploymentsPage />} />
+          <Route path='deployments/:deploymentName' element={<DeploymentPage />} />
           <Route path='graph' element={<GraphPage />} />
         </Route>
       </Routes>

console/client/src/components/ButtonSmall.tsx

@@ -0,0 +1,17 @@
+interface Props {
+  children: React.ReactNode
+  onClick?: () => void
+  className?: string
+}
+
+export const ButtonSmall = ({ children, onClick }: Props) => {
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      className='rounded bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+    >
+      {children}
+    </button>
+  )
+}

console/client/src/components/Card.tsx

@@ -1,6 +1,19 @@
 interface Props {
+  topBarColor?: string
+  onClick?: () => void
   children: React.ReactNode
 }
-export const Card = ({ children }: Props) => {
-  return <div className='p-2 rounded-md border border-gray-500'>{children}</div>
+export const Card = ({ topBarColor, onClick, children }: Props) => {
+  return (
+    <div
+      onClick={onClick}
+      className={`relative rounded-md border border-gray-200 dark:border-gray-500 ${onClick ? 'cursor-pointer' : ''}`}
+    >
+      {topBarColor && (
+        <div className='absolute top-0 left-0 right-0 h-1 bg-green-400 rounded-t-md -mt-px -ml-px -mr-px'></div>
+      )}
+
+      <div className={`${topBarColor ? 'mt-1' : ''} p-2`}>{children}</div>
+    </div>
+  )
 }

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

@@ -0,0 +1,74 @@
+import { RocketLaunchIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { ButtonSmall } from '../../components/ButtonSmall'
+import { Card } from '../../components/Card'
+import { PageHeader } from '../../components/PageHeader'
+import { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { MetadataCalls, VerbRef } from '../../protos/xyz/block/ftl/v1/schema/schema_pb'
+import { modulesContext } from '../../providers/modules-provider'
+import { verbRefString } from '../verbs/verb.utils'
+
+export const DeploymentPage = () => {
+  const { deploymentName } = useParams()
+  const modules = React.useContext(modulesContext)
+  const [module, setModule] = React.useState<Module | undefined>()
+  const [calls, setCalls] = React.useState<VerbRef[]>([])
+
+  React.useEffect(() => {
+    if (modules) {
+      const module = modules.modules.find((module) => module.deploymentName === deploymentName)
+      setModule(module)
+    }
+  }, [modules, deploymentName])
+
+  React.useEffect(() => {
+    if (!module) return
+
+    const verbCalls: VerbRef[] = []
+
+    const metadata = module.verbs
+      .map((v) => v.verb)
+      .map((v) => v?.metadata)
+      .flat()
+
+    const metadataCalls = metadata
+      .filter((metadata) => metadata?.value.case === 'calls')
+      .map((metadata) => metadata?.value.value as MetadataCalls)
+
+    const calls = metadataCalls.map((metadata) => metadata?.calls).flat()
+
+    calls.forEach((call) => {
+      if (!verbCalls.find((v) => v.name === call.name && v.module === call.module)) {
+        verbCalls.push({ name: call.name, module: call.module } as VerbRef)
+      }
+    })
+
+    setCalls(Array.from(verbCalls))
+  }, [modules])
+
+  return (
+    <>
+      <PageHeader icon={<RocketLaunchIcon />} title={`Deployments - ${deploymentName}`} />
+
+      <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')}>
+              {verb.verb?.name}
+              <p className='text-xs text-gray-400'>{verb.verb?.name}</p>
+            </Card>
+          ))}
+        </div>
+        <h2 className='py-2'>Calls</h2>
+        <ul className='space-y-2'>
+          {calls?.map((verb) => (
+            <li key={`${module?.name}-${verb.module}-${verb.name}`} className='text-xs'>
+              <ButtonSmall>{verbRefString(verb)}</ButtonSmall>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { RocketLaunchIcon } from '@heroicons/react/24/outline'
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Card } from '../../components/Card'
+import { PageHeader } from '../../components/PageHeader'
+import { modulesContext } from '../../providers/modules-provider'
+
+export const DeploymentsPage = () => {
+  const modules = React.useContext(modulesContext)
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <PageHeader icon={<RocketLaunchIcon />} title='Deployments' />
+      <div className='m-4 grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4'>
+        {modules.modules.map((module) => (
+          <Card
+            key={module.deploymentName}
+            topBarColor='bg-green-500'
+            onClick={() => navigate(`/deployments/${module.deploymentName}`)}
+          >
+            {module.name}
+            <p className='text-xs text-gray-400'>{module.deploymentName}</p>
+          </Card>
+        ))}
+      </div>
+    </>
+  )
+}

console/client/src/layout/Navigation.tsx

@@ -1,4 +1,4 @@
-import { CubeTransparentIcon, ListBulletIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline'
+import { CubeTransparentIcon, ListBulletIcon, RocketLaunchIcon, Square3Stack3DIcon } from '@heroicons/react/24/outline'
 import { useContext } from 'react'
 import { Link, NavLink } from 'react-router-dom'
 import { DarkModeSwitch } from '../components/DarkModeSwitch'
@@ -8,6 +8,7 @@ import { classNames } from '../utils'
 const navigation = [
   { name: 'Events', href: '/events', icon: ListBulletIcon },
   { name: 'Modules', href: '/modules', icon: Square3Stack3DIcon },
+  { name: 'Deployments', href: '/deployments', icon: RocketLaunchIcon },
   { name: 'Graph', href: '/graph', icon: CubeTransparentIcon },
 ]
 
@@ -54,7 +55,7 @@ export const Navigation = () => {
                                 aria-hidden='true'
                               />
                               {item.name}
-                              {item.href === '/modules' && (
+                              {['/modules', '/deployments'].includes(item.href) && (
                                 <span
                                   className='ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-indigo-600 px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-white ring-1 ring-inset ring-indigo-500'
                                   aria-hidden='true'