feat: show real version in console nav (#2526)

Fixes #2488

![Screenshot 2024-08-28 at 12 14
03 PM](https://github.com/user-attachments/assets/b9fe7e81-5b8d-4fab-98ae-79007b992550)

frontend/src/api/modules/use-modules.ts

@@ -10,15 +10,15 @@ const useModulesKey = 'modules'
 export const useModules = () => {
   const client = useClient(ConsoleService)
   const queryClient = useQueryClient()
-  const { data: streamingData } = useSchema()
+  const { data: schemaData } = useSchema()
 
   useEffect(() => {
-    if (streamingData) {
+    if (schemaData) {
       queryClient.invalidateQueries({
         queryKey: [useModulesKey],
       })
     }
-  }, [streamingData, queryClient])
+  }, [schemaData, queryClient])
 
   const fetchModules = async (signal: AbortSignal) => {
     try {
@@ -40,6 +40,6 @@ export const useModules = () => {
   return useQuery({
     queryKey: [useModulesKey],
     queryFn: async ({ signal }) => fetchModules(signal),
-    enabled: !!streamingData,
+    enabled: !!schemaData,
   })
 }

frontend/src/api/status/use-status.ts

@@ -0,0 +1,32 @@
+import { Code, ConnectError } from '@connectrpc/connect'
+import { useQuery } from '@tanstack/react-query'
+import { useClient } from '../../hooks/use-client'
+import { ControllerService } from '../../protos/xyz/block/ftl/v1/ftl_connect'
+
+const useStatusKey = 'status'
+
+export const useStatus = () => {
+  const client = useClient(ControllerService)
+
+  const fetchStatus = async (signal: AbortSignal) => {
+    try {
+      console.debug('fetching status from FTL')
+      const status = await client.status({}, { signal })
+      return status
+    } catch (error) {
+      if (error instanceof ConnectError) {
+        if (error.code !== Code.Canceled) {
+          console.error('fetchStatus - Connect error:', error)
+        }
+      } else {
+        console.error('fetchStatus:', error)
+      }
+      throw error
+    }
+  }
+
+  return useQuery({
+    queryKey: [useStatusKey],
+    queryFn: async ({ signal }) => fetchStatus(signal),
+  })
+}

frontend/src/api/timeline/use-timeline.ts

@@ -20,7 +20,7 @@ export const useTimeline = (isStreaming: boolean, filters: EventsQuery_Filter[],
 
   const fetchTimeline = async ({ signal }: { signal: AbortSignal }) => {
     try {
-      console.log('fetching timeline')
+      console.debug('fetching timeline')
       const response = await client.getEvents({ filters, limit, order }, { signal })
       return response.events
     } catch (error) {
@@ -35,8 +35,8 @@ export const useTimeline = (isStreaming: boolean, filters: EventsQuery_Filter[],
 
   const streamTimeline = async ({ signal }: { signal: AbortSignal }) => {
     try {
-      console.log('streaming timeline')
-      console.log('filters:', filters)
+      console.debug('streaming timeline')
+      console.debug('filters:', filters)
       for await (const response of client.streamEvents({ updateInterval: { seconds: BigInt(1) }, query: { limit, filters, order } }, { signal })) {
         if (response.events) {
           const prev = queryClient.getQueryData<Event[]>(queryKey) ?? []

frontend/src/layout/Layout.tsx

@@ -1,10 +1,14 @@
 import { Outlet } from 'react-router-dom'
+import { useStatus } from '../api/status/use-status'
 import { Navigation } from './navigation/Navigation'
 
 export const Layout = () => {
+  const status = useStatus()
+  const version = status.data?.controllers?.[0]?.version
+
   return (
     <div className='min-w-[800px] min-h-[600px] max-w-full max-h-full h-full flex flex-col dark:bg-gray-800 bg-white text-gray-700 dark:text-gray-200'>
-      <Navigation />
+      <Navigation version={version} />
       <main className='flex-1'>
         <Outlet />
       </main>

frontend/src/layout/navigation/Navigation.tsx

@@ -12,7 +12,7 @@ const navigation = [
   { name: 'Infrastructure', href: '/infrastructure', icon: ServerStackIcon },
 ]
 
-export const Navigation = () => {
+export const Navigation = ({ version }: { version?: string }) => {
   return (
     <nav className='bg-indigo-600'>
       <div className='mx-auto px-4 sm:px-6'>
@@ -40,7 +40,7 @@ export const Navigation = () => {
           </div>
           <div>
             <div className='ml-4 flex items-center space-x-4'>
-              <Version version='v0.235.0' />
+              <Version version={version} />
               <DarkModeSwitch />
             </div>
           </div>

frontend/src/layout/navigation/Version.tsx

@@ -1,3 +1,3 @@
-export const Version = ({ version }: { version: string }) => {
+export const Version = ({ version }: { version?: string }) => {
   return <span className='text-xs font-roboto-mono text-gray-300'>{version}</span>
 }