Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[v15] [Web] Update database connection instructions #39027

Merged
merged 2 commits into from Mar 6, 2024
Merged

[v15] [Web] Update database connection instructions #39027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
086a346
remove tsh db login from modal
rudream Mar 1, 2024
a47c1b3
update commands based on dbprotocols
rudream Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion web/packages/shared/services/databases/databases.ts
View file
Open in desktop
Expand Up @@ -43,7 +43,9 @@ export type DbProtocol =
| 'cassandra'
| 'elasticsearch'
| 'opensearch'
| 'dynamodb';
| 'dynamodb'
| 'clickhouse'
| 'clickhouse-http';

const formatProtocol = (input: DbProtocol) => {
switch (input) {
Expand Down
35 changes: 34 additions & 1 deletion web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.story.tsx
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ export default {
title: 'Teleport/Databases/Connect',
};

export const Connect = () => (
export const ConnectDbNameFlagRequired = () => (
<ConnectDialog
username="yassine"
dbName="aurora"
Expand All @@ -35,6 +35,39 @@ export const Connect = () => (
/>
);

export const ConnectDbNameFlagOptional = () => (
<ConnectDialog
username="yassine"
dbName="cockroach"
dbProtocol="cockroachdb"
clusterId="im-a-cluster"
onClose={() => null}
authType="local"
/>
);

export const ConnectNoDbNameFlag = () => (
<ConnectDialog
username="yassine"
dbName="cassandra"
dbProtocol="cassandra"
clusterId="im-a-cluster"
onClose={() => null}
authType="local"
/>
);

export const ConnectDynamodb = () => (
<ConnectDialog
username="yassine"
dbName="dynamo"
dbProtocol="dynamodb"
clusterId="im-a-cluster"
onClose={() => null}
authType="local"
/>
);

export const ConnectWithRequestId = () => {
return (
<ConnectDialog
Expand Down
24 changes: 22 additions & 2 deletions web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx
View file
Open in desktop
Expand Up @@ -25,17 +25,37 @@ import { ConnectWithRequestId } from './ConnectDialog.story';
test('correct connect command generated for postgres db', () => {
render(<ConnectDialog {...props} dbProtocol="postgres" />);

// --db-name flag should be required
const expectedOutput =
'tsh db connect [--db-user=<user>] [--db-name=<name>] aurora';
'tsh db connect aurora --db-user=<user> --db-name=<name>';

expect(screen.getByText(expectedOutput)).toBeInTheDocument();
});

test('correct connect command generated for mysql db', () => {
render(<ConnectDialog {...props} dbProtocol="mysql" />);

// --db-name flag should be optional
const expectedOutput =
'tsh db connect [--db-user=<user>] [--db-name=<name>] aurora';
'tsh db connect aurora --db-user=<user> [--db-name=<name>]';

expect(screen.getByText(expectedOutput)).toBeInTheDocument();
});

test('correct connect command generated for redis', () => {
render(<ConnectDialog {...props} dbProtocol="redis" />);

// There should be no --db-name flag
const expectedOutput = 'tsh db connect aurora --db-user=<user>';

expect(screen.getByText(expectedOutput)).toBeInTheDocument();
});

test('correct connect command generated for dynamodb', () => {
render(<ConnectDialog {...props} dbProtocol="dynamodb" />);

// Command should be `tsh proxy db --tunnel` instead of `tsh connect db`
const expectedOutput = 'tsh proxy db --tunnel aurora --db-user=<user>';

expect(screen.getByText(expectedOutput)).toBeInTheDocument();
});
Expand Down
47 changes: 35 additions & 12 deletions web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.tsx
View file
Open in desktop
Expand Up @@ -37,7 +37,40 @@ export default function ConnectDialog({
onClose,
authType,
accessRequestId,
dbProtocol,
}: Props) {
// For dynamodb and clickhouse-http protocols, the command is `tsh proxy db --tunnel` instead of `tsh db connect`.
let connectCommand =
dbProtocol == 'dynamodb' || dbProtocol == 'clickhouse-http'
? 'proxy db --tunnel'
: 'db connect';

// Adjust `--db-name` flag based on db protocol, as it's required for
// some, optional for some, and unsupported by some.
let dbNameFlag: string;
switch (dbProtocol) {
case 'postgres':
case 'sqlserver':
case 'oracle':
case 'mongodb':
// Required
dbNameFlag = ' --db-name=<name>';
break;
case 'cassandra':
case 'clickhouse':
case 'clickhouse-http':
case 'dynamodb':
case 'opensearch':
case 'elasticsearch':
case 'redis':
// No flag
dbNameFlag = '';
break;
default:
// Default to optional
dbNameFlag = ' [--db-name=<name>]';
}

return (
<Dialog
dialogCss={() => ({
Expand Down Expand Up @@ -71,26 +104,16 @@ export default function ConnectDialog({
<Text bold as="span">
Step 2
</Text>
{' - Retrieve credentials for the database'}
<TextSelectCopy
mt="2"
text={`tsh db login [--db-user=<user>] [--db-name=<name>] ${dbName}`}
/>
</Box>
<Box mb={4}>
<Text bold as="span">
Step 3
</Text>
{' - Connect to the database'}
<TextSelectCopy
mt="2"
text={`tsh db connect [--db-user=<user>] [--db-name=<name>] ${dbName}`}
text={`tsh ${connectCommand} ${dbName} --db-user=<user> ${dbNameFlag}`}
/>
</Box>
{accessRequestId && (
<Box mb={4}>
<Text bold as="span">
Step 4 (Optional)
Step 3 (Optional)
</Text>
{' - When finished, drop the assumed role'}
<TextSelectCopy mt="2" text={`tsh request drop`} />
Expand Down
78 changes: 3 additions & 75 deletions web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
View file
Open in desktop
Expand Up @@ -291,42 +291,6 @@ exports[`render dialog with instructions to connect to database 1`] = `
class="c10"
>
Step 2
</span>
- Retrieve credentials for the database
<div
class="c11 c12"
color="light"
>
<div
class="c13 c14"
style="overflow: auto; white-space: pre; word-break: break-all; font-size: 12px; font-family: \\"Droid Sans Mono\\", \\"monospace\\", monospace, \\"Droid Sans Fallback\\";"
>
<div
class="c15"
style="user-select: none;"
>
$
</div>
<div>
tsh db login [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
</div>
</div>
<button
class="c16"
kind="primary"
style="max-width: 48px; width: 100%; padding: 4px 8px; min-height: 10px; font-size: 10px;"
>
Copy
</button>
</div>
</div>
<div
class="c9"
>
<span
class="c10"
>
Step 3
</span>
- Connect to the database
<div
Expand All @@ -344,7 +308,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
$
</div>
<div>
tsh db connect [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
tsh db connect aurora --db-user=&lt;user&gt; --db-name=&lt;name&gt;
</div>
</div>
<button
Expand Down Expand Up @@ -679,42 +643,6 @@ exports[`render dialog with instructions to connect to database with requestId 1
class="c10"
>
Step 2
</span>
- Retrieve credentials for the database
<div
class="c11 c12"
color="light"
>
<div
class="c13 c14"
style="overflow: auto; white-space: pre; word-break: break-all; font-size: 12px; font-family: \\"Droid Sans Mono\\", \\"monospace\\", monospace, \\"Droid Sans Fallback\\";"
>
<div
class="c15"
style="user-select: none;"
>
$
</div>
<div>
tsh db login [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
</div>
</div>
<button
class="c16"
kind="primary"
style="max-width: 48px; width: 100%; padding: 4px 8px; min-height: 10px; font-size: 10px;"
>
Copy
</button>
</div>
</div>
<div
class="c9"
>
<span
class="c10"
>
Step 3
</span>
- Connect to the database
<div
Expand All @@ -732,7 +660,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
$
</div>
<div>
tsh db connect [--db-user=&lt;user&gt;] [--db-name=&lt;name&gt;] aurora
tsh db connect aurora --db-user=&lt;user&gt; --db-name=&lt;name&gt;
</div>
</div>
<button
Expand All @@ -750,7 +678,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
<span
class="c10"
>
Step 4 (Optional)
Step 3 (Optional)
</span>
- When finished, drop the assumed role
<div
Expand Down