generated from TBD54566975/tbd-project-template
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Graph view improvements (#3453)
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
1 parent
3d3ef70
commit c5c602e
Showing
44 changed files
with
846 additions
and
736 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
725 changes: 369 additions & 356 deletions
725
backend/protos/xyz/block/ftl/v1/console/console.pb.go
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...atures/console/right-panel/RightPanel.tsx → ...end/console/src/components/RightPanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
frontend/console/src/features/console/RightPanelHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
</> | ||
), | ||
}) | ||
} |
Oops, something went wrong.