connection testing

packages/web/src/modals/DatabaseLoginModal.svelte

@@ -11,15 +11,20 @@
   import { onDestroy, onMount } from 'svelte';
   import { writable } from 'svelte/store';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import Link from '../elements/Link.svelte';
   import FormPasswordField from '../forms/FormPasswordField.svelte';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FormSubmit from '../forms/FormSubmit.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
   import { apiCall, setVolatileConnectionRemapping } from '../utility/api';
+  import { dispatchCacheChange } from '../utility/cache';
+  import createRef from '../utility/createRef';
 
   import { getConnectionInfo } from '../utility/metadataLoaders';
+  import ErrorMessageModal from './ErrorMessageModal.svelte';
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal } from './modalTools';
+  import { closeCurrentModal, showModal } from './modalTools';
 
   export let conid;
   export let passwordMode;
@@ -27,6 +32,10 @@
   const values = writable({});
   let connection;
 
+  let isTesting;
+  let sqlConnectResult;
+  const testIdRef = createRef(0);
+
   currentModalConid = conid;
 
   onMount(async () => {
@@ -44,14 +53,31 @@
     currentModalConid = null;
   });
 
+  function handleCancelTest() {
+    testIdRef.update(x => x + 1); // invalidate current test
+    isTesting = false;
+  }
+
   async function handleSubmit(ev) {
-    const con = await apiCall('connections/save-volatile', {
+    isTesting = true;
+    testIdRef.update(x => x + 1);
+    const testid = testIdRef.get();
+    const resp = await apiCall('connections/save-volatile', {
       conid,
       user: ev.detail.user,
       password: ev.detail.password,
+      test: true,
     });
-    setVolatileConnectionRemapping(conid, con._id);
-    closeCurrentModal();
+    if (testIdRef.get() != testid) return;
+    isTesting = false;
+    if (resp.msgtype == 'connected') {
+      setVolatileConnectionRemapping(conid, resp._id);
+      dispatchCacheChange(`database-list-changed-${conid}`);
+      dispatchCacheChange(`server-status-changed`);
+      closeCurrentModal();
+    } else {
+      sqlConnectResult = resp;
+    }
   }
 </script>
 
@@ -74,9 +100,36 @@
       focused={passwordMode == 'askPassword'}
     />
 
+    {#if isTesting}
+      <div>
+        <FontIcon icon="icon loading" /> Testing connection
+      </div>
+    {/if}
+
+    {#if !isTesting && sqlConnectResult && sqlConnectResult.msgtype == 'error'}
+      <div class="error-result">
+        Connect failed: <FontIcon icon="img error" />
+        {sqlConnectResult.error}
+        <Link
+          onClick={() =>
+            showModal(ErrorMessageModal, {
+              message: sqlConnectResult.detail,
+              showAsCode: true,
+              title: 'Database connection error',
+            })}
+        >
+          Show detail
+        </Link>
+      </div>
+    {/if}
+
     <svelte:fragment slot="footer">
-      <FormSubmit value="Connect" on:click={handleSubmit} />
-      <FormStyledButton value="Cancel" on:click={closeCurrentModal} />
+      {#if isTesting}
+        <FormStyledButton value="Stop connecting" on:click={handleCancelTest} />
+      {:else}
+        <FormSubmit value="Connect" on:click={handleSubmit} />
+      {/if}
+      <FormStyledButton value="Close" on:click={closeCurrentModal} />
     </svelte:fragment>
   </ModalBase>
 </FormProviderCore>

packages/web/src/utility/api.ts

@@ -29,6 +29,10 @@ export function setVolatileConnectionRemapping(existingConnectionId, volatileCon
   volatileConnectionMap[existingConnectionId] = volatileConnectionId;
 }
 
+export function getVolatileRemapping(conid) {
+  return volatileConnectionMap[conid] || conid;
+}
+
 function wantEventSource() {
   if (!eventSource) {
     eventSource = new EventSource(`${resolveApi()}/stream`);
@@ -61,7 +65,11 @@ function processApiResponse(route, args, resp) {
 }
 
 function transformApiArgs(args) {
-  return _.mapValues(args, (v, k) => (k == 'conid' && v && volatileConnectionMap[v] ? volatileConnectionMap[v] : v));
+  return _.mapValues(args, (v, k) => {
+    if (k == 'conid' && v && volatileConnectionMap[v]) return volatileConnectionMap[v];
+    if (k == 'conidArray' && _.isArray(v)) return v.map(x => volatileConnectionMap[x] || x);
+    return v;
+  });
 }
 
 export async function apiCall(route: string, args: {} = undefined) {

packages/web/src/utility/cache.ts

@@ -105,7 +105,7 @@ export async function unsubscribeCacheChange(reloadTrigger, cacheKey, reloadHand
   }
 }
 
-function dispatchCacheChange(reloadTrigger) {
+export function dispatchCacheChange(reloadTrigger) {
   // console.log('CHANGE', reloadTrigger);
   cacheClean(reloadTrigger);
 

packages/web/src/utility/connectionsPinger.js

@@ -10,7 +10,7 @@ import { getConnectionList } from './metadataLoaders';
 // };
 
 const doServerPing = value => {
-  apiCall('server-connections/ping', { connections: value });
+  apiCall('server-connections/ping', { conidArray: value });
 };
 
 const doDatabasePing = value => {

packages/web/src/widgets/ConnectionList.svelte

@@ -21,7 +21,7 @@
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
   import FontIcon from '../icons/FontIcon.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
-  import { apiCall } from '../utility/api';
+  import { apiCall, getVolatileRemapping } from '../utility/api';
   import LargeButton from '../buttons/LargeButton.svelte';
   import { plusExpandIcon, chevronExpandIcon } from '../icons/expandIcons';
   import { safeJsonParse } from 'dbgate-tools';
@@ -33,7 +33,7 @@
 
   $: connectionsWithStatus =
     $connections && $serverStatus
-      ? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
+      ? $connections.map(conn => ({ ...conn, status: $serverStatus[getVolatileRemapping(conn._id)] }))
       : $connections;
 
   $: connectionsWithStatusFiltered = connectionsWithStatus?.filter(