diff --git a/webapp/packages/core-connections/public/icons/ssh_tunnel.png b/webapp/packages/core-connections/public/icons/ssh_tunnel.png new file mode 100644 index 0000000000..32191cd553 Binary files /dev/null and b/webapp/packages/core-connections/public/icons/ssh_tunnel.png differ diff --git a/webapp/packages/core-connections/public/icons/template_connection.svg b/webapp/packages/core-connections/public/icons/template_connection.svg index b4046b1e81..ea62ee1e5b 100644 --- a/webapp/packages/core-connections/public/icons/template_connection.svg +++ b/webapp/packages/core-connections/public/icons/template_connection.svg @@ -1,3 +1,3 @@ - + diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts index 3690122da4..3a7ac1a532 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts @@ -18,6 +18,7 @@ import { DatabaseConnection, ConnectionsResource } from '../ConnectionsResource' import { ConnectionsAdministration } from './ConnectionsAdministration'; import { ConnectionsDrawerItem } from './ConnectionsDrawerItem'; import { Origin } from './ConnectionsTable/ConnectionDetailsInfo/Origin'; +import { SSH } from './ConnectionsTable/ConnectionDetailsInfo/SSH'; import { Template } from './ConnectionsTable/ConnectionDetailsInfo/Template'; import { CreateConnectionService } from './CreateConnectionService'; @@ -65,6 +66,7 @@ export class ConnectionsAdministrationService extends Bootstrap { }); this.connectionDetailsPlaceholder.add(Origin, 0); this.connectionDetailsPlaceholder.add(Template, 1); + this.connectionDetailsPlaceholder.add(SSH, 2); } load(): void | Promise { } diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx new file mode 100644 index 0000000000..381f0654d4 --- /dev/null +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx @@ -0,0 +1,35 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import { observer } from 'mobx-react-lite'; +import styled from 'reshadow'; + +import { StaticImage, useMapResource } from '@cloudbeaver/core-blocks'; +import { useTranslate } from '@cloudbeaver/core-localization'; + +import { NetworkHandlerResource, SSH_TUNNEL_ID } from '../../../../NetworkHandlerResource'; +import type { DatabaseConnection } from '../../../ConnectionsResource'; +import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles'; + +interface Props { + context: DatabaseConnection; +} + +export const SSH: React.FC = observer(function SSH({ context }) { + const translate = useTranslate(); + const handler = useMapResource(NetworkHandlerResource, SSH_TUNNEL_ID); + const sshConfig = context.networkHandlersConfig.find(state => state.id === SSH_TUNNEL_ID); + + if (!sshConfig || !sshConfig.enabled) { + return null; + } + + return styled(CONNECTION_DETAILS_STYLES)( + + ); +});