database connections

packages/web/src/App.js

@@ -9,7 +9,7 @@ import {
   OpenedConnectionsProvider,
 } from './utility/globalState';
 import { SocketProvider } from './utility/SocketProvider';
-import OpenedConnectionsPinger from './utility/OpnedConnectionsPinger';
+import ConnectionsPinger from './utility/ConnectionsPinger';
 
 function App() {
   return (
@@ -19,9 +19,9 @@ function App() {
           <OpenedTabsProvider>
             <SavedSqlFilesProvider>
               <OpenedConnectionsProvider>
-                <OpenedConnectionsPinger>
+                <ConnectionsPinger>
                   <Screen />
-                </OpenedConnectionsPinger>
+                </ConnectionsPinger>
               </OpenedConnectionsProvider>
             </SavedSqlFilesProvider>
           </OpenedTabsProvider>

packages/web/src/utility/ConnectionsPinger.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import _ from 'lodash';
+import { useOpenedConnections, useCurrentDatabase } from './globalState';
+import axios from './axios';
+
+export default function ConnectionsPinger({ children }) {
+  const openedConnections = useOpenedConnections();
+  const currentDatabase = useCurrentDatabase();
+  React.useEffect(() => {
+    const handle = window.setInterval(() => {
+      axios.post('server-connections/ping', { connections: openedConnections });
+
+      const database = _.get(currentDatabase, 'name');
+      const conid = _.get(currentDatabase, 'connection._id');
+      if (conid && database) {
+        axios.post('database-connections/ping', { conid });
+      }
+    }, 30 * 1000);
+    return () => window.clearInterval(handle);
+  }, [openedConnections, currentDatabase]);
+  return children;
+}

packages/web/src/utility/OpnedConnectionsPinger.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { useOpenedConnections } from './globalState';
-import axios from './axios';
-
-export default function OpenedConnectionsPinger({ children }) {
-  const openedConnections = useOpenedConnections();
-  React.useEffect(() => {
-    const handle = window.setInterval(() => {
-      axios.post('server-connections/ping', { connections: openedConnections });
-    }, 30 * 1000);
-    return () => window.clearInterval(handle);
-  }, [openedConnections]);
-  return children;
-}

packages/web/src/widgets/DatabaseWidget.js

@@ -10,6 +10,7 @@ import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
 import { useSqlObjectList, useDatabaseList, useConnectionList, useServerStatus } from '../utility/metadataLoaders';
 import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
 import axios from '../utility/axios';
+import LoadingInfo from './LoadingInfo';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -68,6 +69,11 @@ function ConnectionList() {
 
 function SqlObjectList({ conid, database }) {
   const objects = useSqlObjectList({ conid, database });
+  const { status } = objects || {};
+
+  const handleRefreshDatabase = () => {
+    axios.post('database-connections/refresh', { conid, database });
+  };
 
   const [filter, setFilter] = React.useState('');
   const objectList = _.flatten(
@@ -85,15 +91,19 @@ function SqlObjectList({ conid, database }) {
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
         />
-        <InlineButton>Refresh</InlineButton>
+        <InlineButton onClick={handleRefreshDatabase}>Refresh</InlineButton>
       </SearchBoxWrapper>
       <InnerContainer>
-        <AppObjectList
-          list={objectList.map((x) => ({ ...x, conid, database }))}
-          makeAppObj={databaseObjectAppObject()}
-          groupFunc={(appobj) => appobj.groupTitle}
-          filter={filter}
-        />
+        {status && status.name == 'pending' ? (
+          <LoadingInfo message="Loading database structure" />
+        ) : (
+          <AppObjectList
+            list={objectList.map((x) => ({ ...x, conid, database }))}
+            makeAppObj={databaseObjectAppObject()}
+            groupFunc={(appobj) => appobj.groupTitle}
+            filter={filter}
+          />
+        )}
       </InnerContainer>
     </>
   );

packages/web/src/widgets/LoadingInfo.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Spinner = styled.div`
+  font-size: 20pt;
+  margin: 10px;
+`;
+
+export default function LoadingInfo({ message }) {
+  return (
+    <Container>
+      <Spinner>
+        <i className="fas fa-spinner fa-spin" />
+      </Spinner>
+      {message}
+    </Container>
+  );
+}