server connections

packages/api/src/controllers/serverConnections.js

@@ -5,7 +5,7 @@ const _ = require('lodash');
 
 module.exports = {
   opened: [],
-  closed: [],
+  closed: {},
 
   handle_databases(conid, { databases }) {
     const existing = this.opened.find((x) => x.conid == conid);
@@ -40,7 +40,7 @@ module.exports = {
       disconnected: false,
     };
     this.opened.push(newOpened);
-    this.closed = this.closed.filter((x) => x != conid);
+    delete this.closed[conid];
     socket.emitChanged(`server-status-changed`);
     // @ts-ignore
     subprocess.on('message', ({ msgtype, ...message }) => {
@@ -49,21 +49,24 @@ module.exports = {
     });
     subprocess.on('exit', () => {
       if (newOpened.disconnected) return;
-      this.opened = this.opened.filter((x) => x.conid != conid);
+      this.close(conid, false);
-      this.closed.push(conid);
-      socket.emitChanged(`server-status-changed`);
     });
     subprocess.send({ msgtype: 'connect', ...connection });
     return newOpened;
   },
 
-  close(conid) {
+  close(conid, kill = true) {
     const existing = this.opened.find((x) => x.conid == conid);
     if (existing) {
       existing.disconnected = true;
-      existing.subprocess.kill();
+      if (kill) existing.subprocess.kill();
+      const last = this.opened.find((x) => x.conid == conid);
       this.opened = this.opened.filter((x) => x.conid != conid);
-      this.closed.push(conid);
+      this.closed[conid] = {
+        ...(last && last.status),
+        name: 'error',
+      };
+      socket.emitChanged(`server-status-changed`);
     }
   },
 
@@ -76,15 +79,7 @@ module.exports = {
   serverStatus_meta: 'get',
   async serverStatus() {
     return {
-      ...this.closed.reduce(
+      ...this.closed,
-        (res, conid) => ({
-          ...res,
-          [conid]: {
-            name: 'error',
-          },
-        }),
-        {}
-      ),
       ..._.mapValues(_.keyBy(this.opened, 'conid'), 'status'),
     };
   },

packages/api/src/proc/serverConnectionProcess.js

@@ -20,9 +20,12 @@ async function handleRefresh() {
       lastDatabases = databasesString;
     }
   } catch (err) {
-    setStatusName('error');
+    setStatus({
-    console.error(err);
+      name: 'error',
-    process.exit(1);
+      message: err.message,
+    });
+    // console.error(err);
+    setTimeout(() => process.exit(1), 1000);
   }
 }
 
@@ -49,9 +52,12 @@ async function handleConnect(connection) {
     handleRefresh();
     setInterval(handleRefresh, 30 * 1000);
   } catch (err) {
-    setStatusName('error');
+    setStatus({
-    console.error(err);
+      name: 'error',
-    process.exit(1);
+      message: err.message,
+    });
+    // console.error(err);
+    setTimeout(() => process.exit(1), 1000);
   }
 }
 

packages/web/src/appobj/AppObjectList.js

@@ -34,14 +34,30 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
 
+  React.useEffect(() => {
+    if (!appobj.isExpandable) {
+      // if (data._id == '6pOY2iFY8Gsq7mk6') console.log('COLLAPSE1');
+      setIsExpanded(false);
+    }
+  }, [appobj && appobj.isExpandable]);
+
   // const { matcher } = appobj;
   // if (matcher && !matcher(filter)) return null;
-  if (onObjectClick) appobj.onClick = onObjectClick;
+
+  if (onObjectClick)
+    appobj = {
+      ...appobj,
+      onClick: onObjectClick,
+    };
   if (SubItems) {
     const oldClick = appobj.onClick;
-    appobj.onClick = () => {
+    appobj = {
+      ...appobj,
+      onClick: () => {
         if (oldClick) oldClick();
-      setIsExpanded(!isExpanded);
+        // if (data._id == '6pOY2iFY8Gsq7mk6') console.log('COLLAPSE2');
+        setIsExpanded((v) => !v);
+      },
     };
   }
 

packages/web/src/appobj/AppObjects.js

@@ -42,6 +42,7 @@ export function AppObjectCore({
   component = 'div',
   prefix = null,
   statusIcon,
+  statusTitle,
   ...other
 }) {
   const appObjectParams = useAppObjectParams();
@@ -71,7 +72,7 @@ export function AppObjectCore({
       {title}
       {statusIcon && (
         <StatusIconWrap>
-          <FontIcon icon={statusIcon} />
+          <FontIcon icon={statusIcon} title={statusTitle} />
         </StatusIconWrap>
       )}
     </Component>

packages/web/src/appobj/connectionAppObject.js

@@ -7,7 +7,7 @@ import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
 import { filterName } from '@dbgate/datalib';
 
-function Menu({ data, setOpenedConnections }) {
+function Menu({ data, setOpenedConnections, openedConnections }) {
   const handleEdit = () => {
     showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />);
   };
@@ -24,8 +24,12 @@ function Menu({ data, setOpenedConnections }) {
     <>
       <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
       <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+      {openedConnections.includes(data._id) && data.status && (
         <DropDownMenuItem onClick={handleRefresh}>Refresh</DropDownMenuItem>
+      )}
+      {openedConnections.includes(data._id) && (
         <DropDownMenuItem onClick={handleDisconnect}>Disconnect</DropDownMenuItem>
+      )}
     </>
   );
 }
@@ -47,13 +51,16 @@ const connectionAppObject = (flags) => (
     : null;
   const onClick = () => setOpenedConnections((c) => [...c, _id]);
 
-  // let isBusy = false;
   let statusIcon = null;
+  let statusTitle = null;
   if (openedConnections.includes(_id)) {
     if (!status) statusIcon = 'fas fa-spinner fa-spin';
     else if (status.name == 'pending') statusIcon = 'fas fa-spinner fa-spin';
     else if (status.name == 'ok') statusIcon = 'fas fa-check-circle green';
     else statusIcon = 'fas fa-times-circle red';
+    if (status && status.name == 'error') {
+      statusTitle = status.message;
+    }
   }
 
   return {
@@ -65,8 +72,8 @@ const connectionAppObject = (flags) => (
     isBold,
     isExpandable,
     onClick,
-    // isBusy,
     statusIcon,
+    statusTitle,
   };
 };
 

packages/web/src/icons.js

@@ -26,15 +26,12 @@ export function FontIcon({ icon, ...props }) {
 
   let className = props.className || '';
 
-  // if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
   if (type == 'fas' || type == 'far') className += ` ${type} ${name} ${parts.join(' ')}`;
 
-  if (_.includes(parts, 'spin')) className += ' fa-spin';
-
   const style = { ...props.style };
 
   const last = parts[parts.length - 1];
-  if (last && last != 'spin') {
+  if (last && last != 'fa-spin') {
     style['color'] = last;
   }
 

packages/web/src/widgets/DatabaseWidget.js

@@ -4,11 +4,12 @@ import _ from 'lodash';
 import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
 import databaseAppObject from '../appobj/databaseAppObject';
-import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
+import { useSetCurrentDatabase, useCurrentDatabase, useOpenedConnections } from '../utility/globalState';
 import InlineButton from './InlineButton';
 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';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -32,8 +33,17 @@ function SubDatabaseList({ data }) {
 function ConnectionList() {
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
+  const openedConnections = useOpenedConnections();
   const connectionsWithStatus =
-    connections && serverStatus && connections.map((conn) => ({ ...conn, status: serverStatus[conn._id] }));
+    connections && serverStatus
+      ? connections.map((conn) => ({ ...conn, status: serverStatus[conn._id] }))
+      : connections;
+
+  const handleRefreshConnections = () => {
+    for (const conid of openedConnections) {
+      axios.post('server-connections/refresh', { conid });
+    }
+  };
 
   const [filter, setFilter] = React.useState('');
   return (
@@ -41,7 +51,7 @@ function ConnectionList() {
       <WidgetTitle>Connections</WidgetTitle>
       <SearchBoxWrapper>
         <Input type="text" placeholder="Search connection" value={filter} onChange={(e) => setFilter(e.target.value)} />
-        <InlineButton>Refresh</InlineButton>
+        <InlineButton onClick={handleRefreshConnections}>Refresh</InlineButton>
       </SearchBoxWrapper>
 
       <InnerContainer>