server connections

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 = () => {
-      if (oldClick) oldClick();
-      setIsExpanded(!isExpanded);
+    appobj = {
+      ...appobj,
+      onClick: () => {
+        if (oldClick) oldClick();
+        // 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>
-      <DropDownMenuItem onClick={handleRefresh}>Refresh</DropDownMenuItem>
-      <DropDownMenuItem onClick={handleDisconnect}>Disconnect</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>