Skip to content

Commit

Permalink
feat: Graph view improvements (#3453)
Browse files Browse the repository at this point in the history
This mostly just wires up all the data to the graph view so we can show
the decls and topology. This all might change in the future, but the
data needs to be there either way :)

![Screenshot 2024-11-21 at 2 29
55 PM](https://github.com/user-attachments/assets/a563077b-2849-42d2-9f51-e15df2d6214e)
![Screenshot 2024-11-21 at 2 31
42 PM](https://github.com/user-attachments/assets/3e800b4e-9fd4-4237-81c6-73d9f33ec38d)
![Screenshot 2024-11-21 at 2 31
53 PM](https://github.com/user-attachments/assets/85f858bd-e9fa-4a62-bd09-48ce5298b990)
  • Loading branch information
wesbillman authored Nov 21, 2024
1 parent 3d3ef70 commit c5c602e
Show file tree
Hide file tree
Showing 44 changed files with 846 additions and 736 deletions.
18 changes: 17 additions & 1 deletion backend/controller/console/console.go
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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)
Expand Down
725 changes: 369 additions & 356 deletions backend/protos/xyz/block/ftl/v1/console/console.pb.go

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions backend/protos/xyz/block/ftl/v1/console/console.proto
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ message GetModulesResponse {
message StreamModulesRequest {}
message StreamModulesResponse {
repeated Module modules = 1;
Topology topology = 2;
}

// Query for events.
Expand Down
4 changes: 2 additions & 2 deletions frontend/console/index.html
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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>
Expand Down
33 changes: 23 additions & 10 deletions frontend/console/src/api/modules/use-stream-modules.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
})
}
2 changes: 1 addition & 1 deletion frontend/console/src/components/ResizablePanels.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand Down
32 changes: 23 additions & 9 deletions frontend/console/src/features/console/ConsolePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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[]
}
Original file line number Diff line number Diff line change
@@ -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 = []
Expand Down Expand Up @@ -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
Expand Down
66 changes: 66 additions & 0 deletions frontend/console/src/features/console/RightPanelHeader.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
),
})
}
Loading

0 comments on commit c5c602e

Please sign in to comment.