dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 18:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

ssh tunnel - wking POC

Browse Source
This commit is contained in:
Jan Prochazka
2021-02-11 11:34:54 +01:00
parent e243ecd96a
commit 728ca72cc1
15 changed files with 187 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/modals/AboutModal.js
View File

@@ -70,7 +70,7 @@ export default function AboutModal({ modalState }) {
<Link label="Web" href="https://dbgate.org">
dbgate.org
</Link>
<Link label="Source codes" href="https://github.com/dbshell/dbgate/">
<Link label="Source codes" href="https://github.com/dbgate/dbgate/">
github
</Link>
<Link label="Docker container" href="https://hub.docker.com/r/dbgate/dbgate">

77
packages/web/src/modals/ConnectionModal.js
View File

@@ -1,7 +1,14 @@
import React from 'react';
import axios from '../utility/axios';
import ModalBase from './ModalBase';
import { FormButton, FormTextField, FormSelectField, FormSubmit, FormPasswordField } from '../utility/forms';
import {
FormButton,
FormTextField,
FormSelectField,
FormSubmit,
FormPasswordField,
FormCheckboxField,
} from '../utility/forms';
import ModalHeader from './ModalHeader';
import ModalFooter from './ModalFooter';
import ModalContent from './ModalContent';
@@ -9,6 +16,7 @@ import useExtensions from '../utility/useExtensions';
import LoadingInfo from '../widgets/LoadingInfo';
import { FontIcon } from '../icons';
import { FormProvider, useForm } from '../utility/FormProvider';
import { TabControl, TabPage } from '../widgets/TabControl';
// import FormikForm from '../utility/FormikForm';
function DriverFields({ extensions }) {
@@ -60,6 +68,20 @@ function DriverFields({ extensions }) {
);
}
function SshTunnelFields() {
const { values } = useForm();
const { useSshTunnel } = values;
return (
<>
<FormCheckboxField label="Use SSH tunnel" name="useSshTunnel" />
<FormTextField label="SSH Host" name="sshHost" disabled={!useSshTunnel} />
<FormTextField label="SSH Port" name="sshPort" disabled={!useSshTunnel} />
<FormTextField label="SSH Login" name="sshLogin" disabled={!useSshTunnel} />
<FormPasswordField label="SSH Password" name="sshPassword" disabled={!useSshTunnel} />
</>
);
}
export default function ConnectionModal({ modalState, connection = undefined }) {
const [sqlConnectResult, setSqlConnectResult] = React.useState(null);
const extensions = useExtensions();
@@ -90,31 +112,38 @@ export default function ConnectionModal({ modalState, connection = undefined })
<ModalBase modalState={modalState}>
<ModalHeader modalState={modalState}>{connection ? 'Edit connection' : 'Add connection'}</ModalHeader>
<FormProvider initialValues={connection || { server: 'localhost', engine: 'mssql@dbgate-plugin-mssql' }}>
<ModalContent>
<FormSelectField label="Database engine" name="engine">
<option value="(select driver)"></option>
{extensions.drivers.map(driver => (
<option value={driver.engine} key={driver.engine}>
{driver.title}
</option>
))}
{/* <option value="mssql">Microsoft SQL Server</option>
<ModalContent noPadding>
<TabControl isInline>
<TabPage label="Main" key="main">
<FormSelectField label="Database engine" name="engine">
<option value="(select driver)"></option>
{extensions.drivers.map(driver => (
<option value={driver.engine} key={driver.engine}>
{driver.title}
</option>
))}
{/* <option value="mssql">Microsoft SQL Server</option>
<option value="mysql">MySQL</option>
<option value="postgres">Postgre SQL</option> */}
</FormSelectField>
<DriverFields extensions={extensions} />
<FormTextField label="Display name" name="displayName" />
{!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'connected' && (
<div>
Connected: <FontIcon icon="img ok" /> {sqlConnectResult.version}
</div>
)}
{!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error' && (
<div>
Connect failed: <FontIcon icon="img error" /> {sqlConnectResult.error}
</div>
)}
{isTesting && <LoadingInfo message="Testing connection" />}
</FormSelectField>
<DriverFields extensions={extensions} />
<FormTextField label="Display name" name="displayName" />
{!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'connected' && (
<div>
Connected: <FontIcon icon="img ok" /> {sqlConnectResult.version}
</div>
)}
{!isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error' && (
<div>
Connect failed: <FontIcon icon="img error" /> {sqlConnectResult.error}
</div>
)}
{isTesting && <LoadingInfo message="Testing connection" />}
</TabPage>
<TabPage label="SSH Tunnel" key="sshTunnel">
<SshTunnelFields />
</TabPage>
</TabControl>
</ModalContent>
<ModalFooter>

17
packages/web/src/modals/ModalContent.js
View File

@@ -5,10 +5,23 @@ import useTheme from '../theme/useTheme';
const Wrapper = styled.div`
border-bottom: 1px solid ${props => props.theme.border};
border-top: 1px solid ${props => props.theme.border};
${props =>
// @ts-ignore
!props.noPadding &&
`
padding: 15px;
`}
`;
export default function ModalContent({ children }) {
export default function ModalContent({ children, noPadding = false }) {
const theme = useTheme();
return <Wrapper theme={theme}>{children}</Wrapper>;
return (
<Wrapper
theme={theme}
// @ts-ignore
noPadding={noPadding}
>
{children}
</Wrapper>
);
}