block · wesbillman · Nov 21, 2024 · Nov 20, 2024 · Nov 21, 2024
@@ -403,6 +403,21 @@ func (c *ConsoleService) sendStreamModulesResp(ctx context.Context, stream *conn
 	builtin := schema.Builtins()
 	sch.Modules = append(sch.Modules, builtin)
 
+	// Get topology
+	sorted, err := buildengine.TopologicalSort(graph(sch))
+	if err != nil {
+		return fmt.Errorf("failed to sort modules: %w", err)
+	}
+	topology := &pbconsole.Topology{
+		Levels: make([]*pbconsole.TopologyGroup, len(sorted)),
+	}
+	for i, level := range sorted {
+		group := &pbconsole.TopologyGroup{
+			Modules: level,
+		}
+		topology.Levels[i] = group
+	}
+
 	refMap, err := getSchemaRefs(sch)
 	if err != nil {
 		return fmt.Errorf("failed to find references: %w", err)
@@ -427,7 +442,8 @@ func (c *ConsoleService) sendStreamModulesResp(ctx context.Context, stream *conn
 	modules = append(modules, builtinModule)
 
 	err = stream.Send(&pbconsole.StreamModulesResponse{
-		Modules: modules,
+		Modules:  modules,
+		Topology: topology,
 	})
 	if err != nil {
 		return fmt.Errorf("failed to send StreamModulesResponse to stream: %w", err)

@@ -217,6 +217,7 @@ message GetModulesResponse {
 message StreamModulesRequest {}
 message StreamModulesResponse {
   repeated Module modules = 1;
+  Topology topology = 2;
 }
 
 // Query for events.

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="en" class="bg-white dark:bg-gray-800 h-full">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,7 +8,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
   </head>
 
-  <body class="bg-white dark:bg-gray-800 h-full w-full">
+  <body class="h-full w-full">
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

@@ -3,32 +3,45 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useClient } from '../../hooks/use-client'
 import { useVisibility } from '../../hooks/use-visibility'
 import { ConsoleService } from '../../protos/xyz/block/ftl/v1/console/console_connect'
-import type { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { Module, Topology } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 
 const streamModulesKey = 'streamModules'
 
+type StreamModulesResult = {
+  modules: Module[]
+  topology: Topology
+}
+
 export const useStreamModules = () => {
   const client = useClient(ConsoleService)
   const queryClient = useQueryClient()
   const isVisible = useVisibility()
 
   const queryKey = [streamModulesKey]
 
-  const streamModules = async ({ signal }: { signal: AbortSignal }) => {
+  const streamModules = async ({ signal }: { signal: AbortSignal }): Promise<StreamModulesResult> => {
     try {
       console.debug('streaming modules')
       let hasModules = false
       for await (const response of client.streamModules({}, { signal })) {
         console.debug('stream-modules-response:', response)
-        if (response.modules) {
+        if (response.modules || response.topology) {
           hasModules = true
-          const newModuleNames = response.modules.map((m) => m.name)
-          queryClient.setQueryData<Module[]>(queryKey, (prev = []) => {
-            return [...response.modules, ...prev.filter((m) => !newModuleNames.includes(m.name))].sort((a, b) => a.name.localeCompare(b.name))
+          queryClient.setQueryData<StreamModulesResult>(queryKey, (prev = { modules: [], topology: {} as Topology }) => {
+            const newModules = response.modules
+              ? [...response.modules, ...prev.modules.filter((m) => !response.modules.map((nm) => nm.name).includes(m.name))].sort((a, b) =>
+                  a.name.localeCompare(b.name),
+                )
+              : prev.modules
+
+            return {
+              modules: newModules,
+              topology: response.topology || prev.topology,
+            }
           })
         }
       }
-      return hasModules ? (queryClient.getQueryData(queryKey) as Module[]) : []
+      return hasModules ? (queryClient.getQueryData(queryKey) as StreamModulesResult) : { modules: [], topology: {} as Topology }
     } catch (error) {
       if (error instanceof ConnectError) {
         if (error.code !== Code.Canceled) {
@@ -37,13 +50,13 @@ export const useStreamModules = () => {
       } else {
         console.error('Console service - streamModules:', error)
       }
-      return []
+      return { modules: [], topology: {} as Topology }
     }
   }
 
-  return useQuery<Module[]>({
+  return useQuery<StreamModulesResult>({
     queryKey: queryKey,
-    queryFn: async ({ signal }) => streamModules({ signal }),
+    queryFn: ({ signal }) => streamModules({ signal }),
     enabled: isVisible,
   })
 }
@@ -1,8 +1,8 @@
 import type React from 'react'
 import { useState } from 'react'
 import type { ExpandablePanelProps } from '../features/console/ExpandablePanel'
-import RightPanel from '../features/console/right-panel/RightPanel'
 import useLocalStorage from '../hooks/use-local-storage'
+import RightPanel from './RightPanel'
 
 interface ResizablePanelsProps {
   initialRightPanelWidth?: number

@@ -1,5 +1,5 @@
 import type React from 'react'
-import { ExpandablePanel, type ExpandablePanelProps } from '../ExpandablePanel'
+import { ExpandablePanel, type ExpandablePanelProps } from '../features/console/ExpandablePanel'
 
 interface RightPanelProps {
   header: React.ReactNode

@@ -3,15 +3,19 @@ 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 { Config, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { Config, Data, Database, Enum, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
 import { type FTLNode, GraphPane } from '../graph/GraphPane'
 import { configPanels } from '../modules/decls/config/ConfigRightPanels'
+import { dataPanels } from '../modules/decls/data/DataRightPanels'
+import { databasePanels } from '../modules/decls/database/DatabaseRightPanels'
+import { enumPanels } from '../modules/decls/enum/EnumRightPanels'
+import { secretPanels } from '../modules/decls/secret/SecretRightPanels'
+import { verbPanels } from '../modules/decls/verb/VerbRightPanel'
 import { Timeline } from '../timeline/Timeline'
 import type { ExpandablePanelProps } from './ExpandablePanel'
-import { modulePanels } from './right-panel/ModulePanels'
-import { headerForNode } from './right-panel/RightPanelHeader'
-import { secretPanels } from './right-panel/SecretPanels'
-import { verbPanels } from './right-panel/VerbPanels'
+import { modulePanels } from './ModulePanels'
+import { headerForNode } from './RightPanelHeader'
+// import { verbPanels } from './right-panel/VerbPanels'
 
 export const ConsolePage = () => {
   const modules = useModules()
@@ -42,14 +46,24 @@ const panelsForNode = (modules: Module[], node: FTLNode | null, navigate: Naviga
   if (node instanceof Module) {
     return modulePanels(modules, node, navigate)
   }
-  if (node instanceof Verb) {
-    return verbPanels(node)
+
+  if (node instanceof Config) {
+    return configPanels(node)
   }
   if (node instanceof Secret) {
     return secretPanels(node)
   }
-  if (node instanceof Config) {
-    return configPanels(node)
+  if (node instanceof Database) {
+    return databasePanels(node)
+  }
+  if (node instanceof Enum) {
+    return enumPanels(node)
+  }
+  if (node instanceof Data) {
+    return dataPanels(node)
+  }
+  if (node instanceof Verb) {
+    return verbPanels(node)
   }
   return [] as ExpandablePanelProps[]
 }
@@ -1,19 +1,10 @@
-import {
-  ArrowLeftRightIcon,
-  CodeSquareIcon,
-  FunctionIcon,
-  InboxDownloadIcon,
-  InboxUploadIcon,
-  LinkSquare02Icon,
-  Settings02Icon,
-  SquareLock02Icon,
-} from 'hugeicons-react'
+import { ArrowLeftRightIcon, FunctionIcon, InboxDownloadIcon, InboxUploadIcon, LinkSquare02Icon, Settings02Icon, SquareLock02Icon } from 'hugeicons-react'
 import type { NavigateFunction } from 'react-router-dom'
-import { CodeBlock } from '../../../components'
-import { RightPanelAttribute } from '../../../components/RightPanelAttribute'
-import type { Module } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { callsIn, callsOut } from '../../modules/module.utils'
-import type { ExpandablePanelProps } from '../ExpandablePanel'
+import { RightPanelAttribute } from '../../components/RightPanelAttribute'
+import type { Module } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import { callsIn, callsOut } from '../modules/module.utils'
+import { Schema } from '../modules/schema/Schema'
+import type { ExpandablePanelProps } from './ExpandablePanel'
 
 export const modulePanels = (allModules: Module[], module: Module, navigate: NavigateFunction): ExpandablePanelProps[] => {
   const panels = []
@@ -83,15 +74,9 @@ export const modulePanels = (allModules: Module[], module: Module, navigate: Nav
   })
 
   panels.push({
-    icon: CodeSquareIcon,
     title: 'Schema',
-    expanded: false,
-    children: (
-      <div className='p-0'>
-        <CodeBlock code={module.schema} language='json' />
-      </div>
-    ),
-    padding: 'p-0',
+    expanded: true,
+    children: <Schema schema={module.schema} />,
   })
 
   return panels

@@ -0,0 +1,66 @@
+import { CellsIcon, PackageIcon } from 'hugeicons-react'
+import { Config, Data, Database, Enum, Module, Secret, Verb } from '../../protos/xyz/block/ftl/v1/console/console_pb'
+import type { FTLNode } from '../graph/GraphPane'
+import { RightPanelHeader } from '../modules/decls/RightPanelHeader'
+import { declIcon } from '../modules/module.utils'
+
+export const headerForNode = (node: FTLNode | null) => {
+  if (!node) {
+    return header({
+      IconComponent: CellsIcon,
+      content: <div className='text-sm font-medium truncate'>Root</div>,
+    })
+  }
+  if (node instanceof Module) {
+    return moduleHeader(node)
+  }
+  if (node instanceof Verb) {
+    if (!node.verb) return
+    return <RightPanelHeader Icon={declIcon('verb', node.verb)} title={node.verb.name} />
+  }
+  if (node instanceof Config) {
+    if (!node.config) return
+    return <RightPanelHeader Icon={declIcon('config', node.config)} title={node.config.name} />
+  }
+  if (node instanceof Secret) {
+    if (!node.secret) return
+    return <RightPanelHeader Icon={declIcon('secret', node.secret)} title={node.secret.name} />
+  }
+  if (node instanceof Data) {
+    if (!node.data) return
+    return <RightPanelHeader Icon={declIcon('data', node.data)} title={node.data.name} />
+  }
+  if (node instanceof Database) {
+    if (!node.database) return
+    return <RightPanelHeader Icon={declIcon('database', node.database)} title={node.database.name} />
+  }
+  if (node instanceof Enum) {
+    if (!node.enum) return
+    return <RightPanelHeader Icon={declIcon('enum', node.enum)} title={node.enum.name} />
+  }
+}
+
+const header = ({ IconComponent, content }: { IconComponent: React.ElementType; content: React.ReactNode }) => {
+  return (
+    <div className='flex items-center gap-2 px-2 py-2'>
+      <IconComponent className='h-5 w-5 text-indigo-600' />
+      <div className='flex flex-col min-w-0'>{content}</div>
+    </div>
+  )
+}
+
+const moduleHeader = (module: Module) => {
+  return header({
+    IconComponent: PackageIcon,
+    content: (
+      <>
+        <div className='text-sm font-medium truncate'>{module.name}</div>
+        <div className='flex pt-1'>
+          <span className='font-roboto-mono inline-flex items-center rounded truncate bg-slate-200 dark:bg-slate-700 text-slate-500 dark:text-slate-400 text-xs px-1'>
+            <span className='truncate'>{module.deploymentKey}</span>
+          </span>
+        </div>
+      </>
+    ),
+  })
+}