handle disconnected database

packages/web/src/utility/metadataLoaders.js

@@ -27,6 +27,12 @@ const sqlObjectListLoader = ({ conid, database }) => ({
   reloadTrigger: [`database-structure-changed-${conid}-${database}`, `database-status-changed-${conid}-${database}`],
 });
 
+const databaseStatusLoader = ({ conid, database }) => ({
+  url: 'database-connections/status',
+  params: { conid, database },
+  reloadTrigger: `database-status-changed-${conid}-${database}`,
+});
+
 const databaseListLoader = ({ conid }) => ({
   url: 'server-connections/list-databases',
   params: { conid },
@@ -125,6 +131,13 @@ export function useSqlObjectList(args) {
   return useCore(sqlObjectListLoader, args);
 }
 
+export function getDatabaseStatus(args) {
+  return getCore(databaseStatusLoader, args);
+}
+export function useDatabaseStatus(args) {
+  return useCore(databaseStatusLoader, args);
+}
+
 export function getDatabaseList(args) {
   return getCore(databaseListLoader, args);
 }

packages/web/src/widgets/StatusBar.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 
 import { getEngineIcon } from '../icons';
 import { useCurrentDatabase } from '../utility/globalState';
+import { useDatabaseStatus } from '../utility/metadataLoaders';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -18,6 +20,7 @@ const Item = styled.div`
 
 export default function StatusBar() {
   const { name, connection } = useCurrentDatabase() || {};
+  const status = useDatabaseStatus(connection ? { conid: connection._id, database: name } : {});
   const { displayName, server, user, engine } = connection || {};
   const EngineIcon = getEngineIcon(engine);
   return (
@@ -38,6 +41,26 @@ export default function StatusBar() {
           <i className="fas fa-user" /> {user}
         </Item>
       )}
+
+      {status && (
+        <Item>
+          {status.name == 'pending' && (
+            <>
+              <FontIcon icon="fas fa-spinner fa-spin" /> Loading
+            </>
+          )}
+          {status.name == 'ok' && (
+            <>
+              <FontIcon icon="fas fa-check-circle lime" /> Connected
+            </>
+          )}
+          {status.name == 'error' && (
+            <>
+              <FontIcon icon="fas fa-times-circle red" /> Error
+            </>
+          )}
+        </Item>
+      )}
     </Container>
   );
 }