load database list

api/src/controllers/serverConnections.js

@@ -6,21 +6,25 @@ module.exports = {
   opened: [],
 
   handle_databases(id, { databases }) {
-    const existing = this.opened.find(x => x.connection.id == id);
+    const existing = this.opened.find(x => x.id == id);
     if (!existing) return;
     existing.databases = databases;
     socket.emit(`database-list-changed-${id}`);
   },
+  handle_error(id, { error }) {
+    console.log(error);
+  },
 
   async ensureOpened(id) {
-    const existing = this.opened.find(x => x.connection.id == id);
+    const existing = this.opened.find(x => x.id == id);
     if (existing) return existing;
-    const connection = await connections.get(id);
+    const connection = await connections.get({ id });
     const subprocess = fork(`${__dirname}/../proc/serverConnectionProcess.js`);
     const newOpened = {
       id,
       subprocess,
       databases: [],
+      connection,
     };
     this.opened.push(newOpened);
     subprocess.on('message', ({ msgtype, ...message }) => {

api/src/index.js

@@ -6,6 +6,7 @@ const io = require('socket.io');
 
 const useController = require('./utility/useController');
 const connections = require('./controllers/connections');
+const serverConnections = require('./controllers/serverConnections');
 const socket = require('./utility/socket');
 
 const app = express();
@@ -21,5 +22,6 @@ app.get('/', (req, res) => {
 });
 
 useController(app, '/connections', connections);
+useController(app, '/server-connections', serverConnections);
 
 server.listen(3000);

api/src/proc/serverConnectionProcess.js

@@ -11,9 +11,11 @@ async function handleRefreshDatabases() {
 
 async function handleConnect(connection) {
   storedConnection = connection;
-  const driver = require(`../engines/${storedConnection.engine}/index`);
+
+  const driver = engines(storedConnection);
   systemConnection = await driver.connect(storedConnection);
-  setInterval(handleRefreshDatabases, 30 * 1000);
+  handleRefreshDatabases();
+  // setInterval(handleRefreshDatabases, 30 * 1000);
 }
 
 const messageHandlers = {

web/src/appobj/AppObjectList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import { showMenu } from '../modals/DropDownMenu';
+import { AppObjectCore } from './AppObjects';
+
+export function AppObjectList({ list, makeAppObj, SubItems }) {
+  return (list || []).map(x => {
+    const appobj = makeAppObj(x);
+    let res = <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} />;
+    if (SubItems) {
+      res = (
+        <>
+          {res}
+          <SubItems data={x} />
+        </>
+      );
+    }
+    return res;
+  });
+}

web/src/appobj/AppObjects.js

@@ -36,10 +36,3 @@ export function AppObjectControl({ data, makeAppObj }) {
   const appobj = makeAppObj(data);
   return <AppObjectCore {...appobj} data={data} makeAppObj={makeAppObj} />;
 }
-
-export function AppObjectList({ list, makeAppObj }) {
-  return (list || []).map(x => {
-    const appobj = makeAppObj(x);
-    return <AppObjectCore key={appobj.key} {...appobj} data={x} makeAppObj={makeAppObj} />;
-  });
-}

web/src/appobj/databaseAppObject.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { MicrosoftIcon, SqliteIcon, PostgreSqlIcon, MySqlIcon, ServerIcon, DatabaseIcon } from '../icons';
+import { DropDownMenuItem } from '../modals/DropDownMenu';
+import showModal from '../modals/showModal';
+import ConnectionModal from '../modals/ConnectionModal';
+import axios from '../utility/axios';
+
+function Menu({ data, makeAppObj }) {
+  const handleEdit = () => {
+    showModal(modalState => <ConnectionModal modalState={modalState} connection={data} />);
+  };
+  const handleDelete = () => {
+    axios.post('connections/delete', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleEdit}>Edit</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+    </>
+  );
+}
+
+export default function databaseAppObject({ name }) {
+  const title = name;
+  const key = name;
+  const Icon = DatabaseIcon;
+
+  return { title, key, Icon, Menu };
+}

web/src/widgets/DatabaseWidget.js

@@ -2,8 +2,18 @@ import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import useFetch from '../utility/useFetch';
-import { AppObjectList } from '../appobj/AppObjects';
+import { AppObjectList } from '../appobj/AppObjectList';
 import connectionAppObject from '../appobj/connectionAppObject';
+import databaseAppObject from '../appobj/databaseAppObject';
+
+function SubDatabaseList({ data }) {
+  const { _id } = data;
+  const databases = useFetch({
+    url: `server-connections/list-databases?id=${_id}`,
+    reloadTrigger: `database-list-changed-${_id}`,
+  });
+  return <AppObjectList list={databases} makeAppObj={databaseAppObject} />
+}
 
 export default function DatabaseWidget() {
   const modalState = useModalState();
@@ -15,7 +25,7 @@ export default function DatabaseWidget() {
     <>
       <ConnectionModal modalState={modalState} />
       <button onClick={modalState.open}>Add connection</button>
-      <AppObjectList list={connections} makeAppObj={connectionAppObject} />
+      <AppObjectList list={connections} makeAppObj={connectionAppObject} SubItems={SubDatabaseList} />
     </>
   );
 }