Database access through WebUI #49979

gabrielcorado · 2024-12-10T02:17:34Z

This PR implements the necessary WebUI changes to access PostgreSQL (and other protocols) databases. The flow is very close to the Kubernetes Pod Exec, so the code is highly inspired by it. Here's a simplified version of how the flow looks:

The user clicks the newly added "Connect in the browser" button on the database connect dialog (resources page).
A new tab opens, and the user fills in the database session information (fields are pre-filled with the information from the database). Then, click on the "Connect" button.
The dialog closes, and a terminal starts with the database REPL (as for this version, only PostgreSQL will be supported).

Demo (requires changes from other PRs)

Screen.Recording.2024-12-09.at.22.48.37.mov

(Besides this demo, the PR includes storybooks for all components/pages that have been changed.)

Note

This PR only includes the WebUI changes and won't have any effect without the other related changes: The REPL implementation (#49598) and web handler changes (#49749).

aws-amplify-us-west-2 · 2024-12-10T02:20:20Z

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-49979.d3pp5qlev8mo18.amplifyapp.com

gzdunek

First pass.

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

web/packages/teleport/src/Console/DocumentDb/DocumentDb.story.tsx

web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx

web/packages/teleport/src/Console/DocumentDb/DocumentDb.tsx

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

gzdunek · 2024-12-12T16:34:56Z

Sorry, I didn't manage to re-review today. I will do it in the morning!

greedy52

first pass

greedy52 · 2024-12-12T20:01:42Z

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

+      {({ validator }) => (
+        <form>
+          <DialogContent minHeight="240px" flex="0 0 auto">
+            <FieldSelectCreatable


how do we handle wildcard? if no wildcard, it shouldn't be Creatable in my option.

isDisabled={dbUserOpts?.length == 1} will disable if single wildcard?

When we have a wildcard, the fields will be empty, and users must type it out.

Setting to disable will prevent them from changing the roles (I'm not sure if this will be desired).

i must have missed it. Where is the logic to remove wildcard from db users?

greedy52 · 2024-12-12T20:15:02Z

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

+              <FieldSelect
+                label="Database roles"
+                menuPosition="fixed"
+                isMulti={true}
+                onChange={setSelectedRoles}
+                value={selectedRoles}
+                options={dbRolesOpts}
+              />


It might be confusing to users what role selection does.

We should do either or both of the following:

have a hint/info tooltip that explains a) if no roles are selected, all allowed database roles will be provisioned on connection. b) otherwise, only selected databased roles will be provisioned.

select all roles in the box by default

I would also move role selection below database name selection. I might even put database name selection before user selection. WDYT?

I think selecting all roles initially might be better here. We can also always enforce at least one selected (when there are options available).

About the wildcard for roles, we don't have enough information to decide when to show this box. This would be a combination of the database having auto-user provisioning enabled and not having DAC configured on their selected roles (correct me if I need to include anything here). So, for now, only showing when the roles are available might not cover all scenarios, but it will work for the most part. WDYT?

Also worth mentioning that currently, the database roles information is not available. The web handler changes will add this.

just some facts

database roles do not support wildcard

database roles section is a very niche feature (like I mentioned, even the requestor of this feature might not be using it at the moment)

database roles and DAC permissions are mutually exclusive

So for simplicity, we could just leave this part out.

If we want to keep it:

So, for now, only showing when the roles are available might not cover all scenarios, but it will work for the most part.

this should be ok, also it's backend's responsibility to make sure the calculation is correct so we don't build more logic in frontend

I think selecting all roles initially might be better here.

I think this would be easiest as well.

We can also always enforce at least one selected (when there are options available).

IMHO not necessary

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

web/packages/teleport/src/services/session/types.ts

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

gzdunek

@gabrielcorado do you have a branch with all the changes? I'd like to test it locally :)

web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx

web/packages/teleport/src/Console/DocumentDb/useDbSession.tsx

web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx

web/packages/teleport/src/Console/stores/types.ts

web/packages/teleport/src/Console/DocumentDb/ConnectDialog.tsx

gabrielcorado · 2024-12-13T16:31:31Z

@gzdunek ~~I pushed a branch with all the changes for this feature to work (gabrielcorado/pg-webui-access-test). The only thing you'll need is a PostgreSQL database configured.~~

Update: Both PRs are merged at master. You can try pulling this branch and running it. (You still need a PostgreSQL database access configured).

gabrielcorado · 2024-12-13T17:28:42Z

After talking with @greedy52 we've done a few updates on the connect dialog:

Never disable the fields. This will prevent users from being able to change the value.
Remove wildcard (*) values from the select list.
Always select all roles (when available).

web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx

web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx

…onal/teleport into gabrielcorado/pg-webui-changes

* feat(web): add database terminal access * chore(web): make explict type cast * refactor(web): code review suggestions * chore(web): fix lint errors * refactor(web): lint errors * refactor: code review suggestions * refactor(web): filter wildcard options from connect dialog * chore(web): lint * refactor(web): code review suggestions

* Add PostgreSQL REPL implementation (#49598) * feat(repl): add postgres * refactor(repl): change repl to use a single Run function * test(repl): reduce usage of require.Eventually blocks * refactor(repl): code review suggestions * refactor(repl): code review suggestions * test(repl): increase timeout values * fix(repl): commands formatting * refactor(repl): send close pgconn using a different context * fix(repl): add proper spacing between multi queries * test(repl): add fuzz test for processing commands * Add WebSocket handler for WebUI database sessions (#49749) * feat(web): add websocket handler for database webui sessions * refactor: move common structs into a separate package * refactor(web): use ALPN local proxy to dial databases * feat(repl): add default registry * refactor(web): code review suggestions * refactor: update repl config parameters * refactor: move default getter implementation * feat(web): add supports_interactive field on dbs * refactor: code review suggestions * refactor: update database REPL interfaces * chore(web): remove debug print * feat: register postgres repl * refactor(web): update MakeDatabase to receive access checker and interactive * chore(web): remove unused function * Database access through WebUI (#49979) * feat(web): add database terminal access * chore(web): make explict type cast * refactor(web): code review suggestions * chore(web): fix lint errors * refactor(web): lint errors * refactor: code review suggestions * refactor(web): filter wildcard options from connect dialog * chore(web): lint * refactor(web): code review suggestions

feat(web): add database terminal access

f90e7b4

gabrielcorado added the no-changelog Indicates that a PR does not require a changelog entry label Dec 10, 2024

gabrielcorado requested a review from greedy52 December 10, 2024 02:17

github-actions bot added size/lg ui labels Dec 10, 2024

github-actions bot requested review from avatus and gzdunek December 10, 2024 02:18

chore(web): make explict type cast

fac876b

gzdunek reviewed Dec 10, 2024

View reviewed changes

gabrielcorado added 3 commits December 11, 2024 12:16

refactor(web): code review suggestions

cb254d1

chore(web): fix lint errors

941842e

Merge branch 'master' into gabrielcorado/pg-webui-changes

0434d47

gabrielcorado requested a review from gzdunek December 11, 2024 15:28

refactor(web): lint errors

02c6997

greedy52 reviewed Dec 12, 2024

View reviewed changes

gzdunek reviewed Dec 13, 2024

View reviewed changes

gabrielcorado added 2 commits December 13, 2024 12:00

refactor: code review suggestions

cd260cb

Merge branch 'master' into gabrielcorado/pg-webui-changes

8423d76

refactor(web): filter wildcard options from connect dialog

4183439

gabrielcorado requested review from gzdunek and greedy52 December 13, 2024 17:29

greedy52 approved these changes Dec 13, 2024

View reviewed changes

gabrielcorado added 2 commits December 13, 2024 14:40

chore(web): lint

d1b2af3

Merge branch 'master' into gabrielcorado/pg-webui-changes

5e26237

gzdunek approved these changes Dec 16, 2024

View reviewed changes

web/packages/teleport/src/Console/DocumentDb/DocumentDb.test.tsx Outdated Show resolved Hide resolved

web/packages/teleport/src/Console/DocumentSsh/Terminal/Terminal.tsx Outdated Show resolved Hide resolved

Merge branch 'master' into gabrielcorado/pg-webui-changes

cb1ac72

gabrielcorado requested a review from r0mant December 16, 2024 16:39

gabrielcorado added 2 commits December 16, 2024 13:39

Merge branch 'gabrielcorado/pg-webui-changes' of github.com:gravitati…

e6db769

…onal/teleport into gabrielcorado/pg-webui-changes

refactor(web): code review suggestions

34df1fc

r0mant approved these changes Dec 16, 2024

View reviewed changes

public-teleport-github-review-bot bot removed the request for review from avatus December 16, 2024 16:44

gabrielcorado added this pull request to the merge queue Dec 16, 2024

Merged via the queue into master with commit d5c6911 Dec 16, 2024
42 checks passed

gabrielcorado deleted the gabrielcorado/pg-webui-changes branch December 16, 2024 17:01

gabrielcorado mentioned this pull request Dec 16, 2024

[v17] PostgreSQL access through WebUI #50287

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Database access through WebUI #49979

Database access through WebUI #49979

gabrielcorado commented Dec 10, 2024 •

edited

Loading

aws-amplify-us-west-2 bot commented Dec 10, 2024

gzdunek left a comment

gzdunek commented Dec 12, 2024

greedy52 left a comment

greedy52 Dec 12, 2024

gabrielcorado Dec 13, 2024

greedy52 Dec 13, 2024 •

edited

Loading

greedy52 Dec 12, 2024

gabrielcorado Dec 13, 2024

gabrielcorado Dec 13, 2024

greedy52 Dec 13, 2024

gzdunek left a comment

gabrielcorado commented Dec 13, 2024 •

edited

Loading

gabrielcorado commented Dec 13, 2024

Database access through WebUI #49979

Database access through WebUI #49979

Conversation

gabrielcorado commented Dec 10, 2024 • edited Loading

aws-amplify-us-west-2 bot commented Dec 10, 2024

gzdunek left a comment

Choose a reason for hiding this comment

gzdunek commented Dec 12, 2024

greedy52 left a comment

Choose a reason for hiding this comment

greedy52 Dec 12, 2024

Choose a reason for hiding this comment

gabrielcorado Dec 13, 2024

Choose a reason for hiding this comment

greedy52 Dec 13, 2024 • edited Loading

Choose a reason for hiding this comment

greedy52 Dec 12, 2024

Choose a reason for hiding this comment

gabrielcorado Dec 13, 2024

Choose a reason for hiding this comment

gabrielcorado Dec 13, 2024

Choose a reason for hiding this comment

greedy52 Dec 13, 2024

Choose a reason for hiding this comment

gzdunek left a comment

Choose a reason for hiding this comment

gabrielcorado commented Dec 13, 2024 • edited Loading

gabrielcorado commented Dec 13, 2024

gabrielcorado commented Dec 10, 2024 •

edited

Loading

greedy52 Dec 13, 2024 •

edited

Loading

gabrielcorado commented Dec 13, 2024 •

edited

Loading