server connections handling

packages/web/src/appobj/AppObjectList.js

@@ -38,7 +38,11 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
   // if (matcher && !matcher(filter)) return null;
   if (onObjectClick) appobj.onClick = onObjectClick;
   if (SubItems) {
-    appobj.onClick = () => setIsExpanded(!isExpanded);
+    const oldClick = appobj.onClick;
+    appobj.onClick = () => {
+      if (oldClick) oldClick();
+      setIsExpanded(!isExpanded);
+    };
   }
 
   let res = (
@@ -51,7 +55,11 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
       prefix={
         SubItems ? (
           <ExpandIconHolder2>
-            <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
+            {appobj.isExpandable ? (
+              <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
+            ) : (
+              <ExpandIcon isSelected={isHover} isBlank blankColor="#ccc" />
+            )}
           </ExpandIconHolder2>
         ) : null
       }
@@ -83,9 +91,9 @@ function AppObjectGroup({ group, items }) {
         <ExpandIconHolder>
           <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
         </ExpandIconHolder>
-        {group} {items && `(${items.filter(x => x.component).length})`}
+        {group} {items && `(${items.filter((x) => x.component).length})`}
       </GroupDiv>
-      {isExpanded && items.map(x => x.component)}
+      {isExpanded && items.map((x) => x.component)}
     </>
   );
 }
@@ -115,7 +123,7 @@ export function AppObjectList({
 
   if (groupFunc) {
     const listGrouped = _.compact(
-      (list || []).map(data => {
+      (list || []).map((data) => {
         const appobj = makeAppObj(data, appObjectParams);
         const { matcher } = appobj;
         if (matcher && !matcher(filter)) return null;
@@ -125,12 +133,12 @@ export function AppObjectList({
       })
     );
     const groups = _.groupBy(listGrouped, 'group');
-    return (groupOrdered || _.keys(groups)).map(group => (
+    return (groupOrdered || _.keys(groups)).map((group) => (
       <AppObjectGroup key={group} group={group} items={groups[group]} />
     ));
   }
 
-  return (list || []).map(data => {
+  return (list || []).map((data) => {
     const appobj = makeAppObj(data, appObjectParams);
     const { matcher } = appobj;
     if (matcher && !matcher(filter)) return null;

packages/web/src/appobj/AppObjects.js

@@ -5,6 +5,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
+import { FontIcon } from '../icons';
 
 const AppObjectDiv = styled.div`
   padding: 5px;
@@ -25,6 +26,10 @@ const IconWrap = styled.span`
   margin-right: 10px;
 `;
 
+const StatusIconWrap = styled.span`
+  margin-left: 5px;
+`;
+
 export function AppObjectCore({
   title,
   Icon,
@@ -36,6 +41,7 @@ export function AppObjectCore({
   isBusy,
   component = 'div',
   prefix = null,
+  statusIcon,
   ...other
 }) {
   const appObjectParams = useAppObjectParams();
@@ -63,6 +69,11 @@ export function AppObjectCore({
       {prefix}
       <IconWrap>{isBusy ? <i className="fas fa-spinner fa-spin"></i> : <Icon />}</IconWrap>
       {title}
+      {statusIcon && (
+        <StatusIconWrap>
+          <FontIcon icon={statusIcon} />
+        </StatusIconWrap>
+      )}
     </Component>
   );
 }

packages/web/src/appobj/connectionAppObject.js

@@ -7,34 +7,67 @@ import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
 import { filterName } from '@dbgate/datalib';
 
-function Menu({ data, makeAppObj }) {
+function Menu({ data, setOpenedConnections }) {
   const handleEdit = () => {
-    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+    showModal((modalState) => <ConnectionModal modalState={modalState} connection={data} />);
   };
   const handleDelete = () => {
     axios.post('connections/delete', data);
   };
+  const handleRefresh = () => {
+    axios.post('server-connections/refresh', { conid: data._id });
+  };
+  const handleDisconnect = () => {
+    setOpenedConnections((list) => list.filter((x) => x != data._id));
+  };
   return (
     <>
       <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
       <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleRefresh}>Refresh</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleDisconnect}>Disconnect</DropDownMenuItem>
     </>
   );
 }
 
-const connectionAppObject = flags => ({ _id, server, displayName, engine }) => {
+const connectionAppObject = (flags) => (
+  { _id, server, displayName, engine, status },
+  { openedConnections, setOpenedConnections }
+) => {
   const title = displayName || server;
   const key = _id;
+  const isExpandable = openedConnections.includes(_id);
   const Icon = getEngineIcon(engine);
-  const matcher = filter => filterName(filter, displayName, server);
+  const matcher = (filter) => filterName(filter, displayName, server);
   const { boldCurrentDatabase } = flags || {};
   const isBold = boldCurrentDatabase
     ? ({ currentDatabase }) => {
         return _.get(currentDatabase, 'connection._id') == _id;
       }
     : null;
+  const onClick = () => setOpenedConnections((c) => [...c, _id]);
 
-  return { title, key, Icon, Menu, matcher, isBold };
+  // let isBusy = false;
+  let statusIcon = 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';
+  }
+
+  return {
+    title,
+    key,
+    Icon,
+    Menu,
+    matcher,
+    isBold,
+    isExpandable,
+    onClick,
+    // isBusy,
+    statusIcon,
+  };
 };
 
 export default connectionAppObject;