mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

better connection dialog

Browse Source
This commit is contained in:
Jan Prochazka 2020-11-28 09:29:13 +01:00
parent 49628ad3cf
commit f60fd9cc63
3 changed files with 37 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/appobj/connectionAppObject.js
View File

@ -76,7 +76,7 @@ const connectionAppObject = (flags) => (
if (openedConnections.includes(_id)) {
if (!status) statusIcon = 'icon loading';
else if (status.name == 'pending') statusIcon = 'icon loading';
else if (status.name == 'ok') statusIcon = 'img green-ok';
else if (status.name == 'ok') statusIcon = 'img ok';
else statusIcon = 'img error';
if (status && status.name == 'error') {
statusTitle = status.message;

2
packages/web/src/icons.js
View File

@ -44,7 +44,7 @@ const iconNames = {
'icon chevron-down': 'mdi mdi-chevron-down',
'icon plugin': 'mdi mdi-toy-brick',
'img green-ok': 'mdi mdi-check-circle color-green-8',
'img ok': 'mdi mdi-check-circle color-green-8',
'img alert': 'mdi mdi-alert-circle color-blue-6',
'img error': 'mdi mdi-close-circle color-red-7',
// 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',

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

@ -8,22 +8,34 @@ import ModalHeader from './ModalHeader';
import ModalFooter from './ModalFooter';
import ModalContent from './ModalContent';
import useExtensions from '../utility/useExtensions';
import LoadingInfo from '../widgets/LoadingInfo';
import { FontIcon } from '../icons';
// import FormikForm from '../utility/FormikForm';
export default function ConnectionModal({ modalState, connection = undefined }) {
const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected');
const [sqlConnectResult, setSqlConnectResult] = React.useState(null);
const extensions = useExtensions();
const [isTesting, setIsTesting] = React.useState(false);
const testIdRef = React.useRef(0);
const handleTest = async (values) => {
setIsTesting(true);
testIdRef.current += 1;
const testid = testIdRef.current;
const resp = await axios.post('connections/test', values);
const { error, version } = resp.data;
if (testIdRef.current != testid) return;
setSqlConnectResult(error || version);
setIsTesting(false);
setSqlConnectResult(resp.data);
};
const handleCancel = async () => {
testIdRef.current += 1; // invalidate current test
setIsTesting(false);
};
const handleSubmit = async (values) => {
const resp = await axios.post('connections/save', values);
axios.post('connections/save', values);
modalState.close();
};
return (
@ -46,13 +58,28 @@ export default function ConnectionModal({ modalState, connection = undefined })
<FormTextField label="Server" name="server" />
<FormTextField label="Port" name="port" />
<FormTextField label="User" name="user" />
<FormTextField label="Password" name="password" />
<FormTextField label="Password" name="password" type="password" />
<FormTextField label="Display name" name="displayName" />
<div>Connect result: {sqlConnectResult}</div>
{!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" />}
</ModalContent>
<ModalFooter>
<FormButton text="Test" onClick={handleTest} />
{isTesting ? (
<FormButton text="Cancel" onClick={handleCancel} />
) : (
<FormButton text="Test" onClick={handleTest} />
)}
<FormSubmit text="Save" />
</ModalFooter>
</Form>