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)(
+
+ );
+});