show pages in iframe

packages/api/.env

@@ -1,7 +1,14 @@
 CONNECTIONS=mysql
-LABEL_mysql=localhost-mysql
+LABEL_mysql=MySql localhost
 SERVER_mysql=localhost
 USER_mysql=root
 PASSWORD_mysql=test
 PORT_mysql=3307
 ENGINE_mysql=mysql
+
+TOOLBAR=home
+ICON_home=fas fa-home
+TITLE_home=Home
+PAGE_home=home.html
+
+PAGES_DIRECTORY=/home/jena/jenasoft/dbgate-web/pages

packages/api/src/controllers/config.js

@@ -1,8 +1,18 @@
 module.exports = {
   get_meta: 'get',
   async get() {
+    const toolbarButtons = process.env.TOOLBAR;
+    const toolbar = toolbarButtons
+      ? toolbarButtons.split(',').map((name) => ({
+          name,
+          icon: process.env[`ICON_${name}`],
+          title: process.env[`TITLE_${name}`],
+          page: process.env[`PAGE_${name}`],
+        }))
+      : null;
     return {
       runAsPortal: !!process.env.CONNECTIONS,
+      toolbar,
     };
   },
 };

packages/api/src/main.js

@@ -37,6 +37,10 @@ function start(argument = null) {
   useController(app, '/jsldata', jsldata);
   useController(app, '/config', config);
 
+  if (process.env.PAGES_DIRECTORY) {
+    app.use('/pages', express.static(process.env.PAGES_DIRECTORY));
+  }
+
   if (fs.existsSync('/home/dbgate-docker/build')) {
     // server static files inside docker container
     app.use(express.static('/home/dbgate-docker/build'));

packages/web/src/icons.js

@@ -4,6 +4,11 @@ import _ from 'lodash';
 export function getIconImage(src, props) {
   const { size = 16, style = {}, className, title } = props || {};
   if (!src) return null;
+
+  if (src.startsWith('fas ') || src.startsWith('far ')) {
+    return <i className={src} />;
+  }
+
   if (src.endsWith('.svg')) {
     // eslint-disable-next-line
     src = `${process.env.PUBLIC_URL}/icons/${src}`;

packages/web/src/tabs/InfoPageTab.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import resolveApi from '../utility/resolveApi';
+
+export default function InfoPageTab({ page }) {
+  return <iframe src={`${resolveApi()}/pages/${page}`} />;
+}

packages/web/src/tabs/index.js

@@ -2,10 +2,12 @@ import TableDataTab from './TableDataTab';
 import ViewDataTab from './ViewDataTab';
 import TableStructureTab from './TableStructureTab';
 import QueryTab from './QueryTab';
+import InfoPageTab from './InfoPageTab';
 
 export default {
   TableDataTab,
   ViewDataTab,
   TableStructureTab,
   QueryTab,
+  InfoPageTab,
 };

packages/web/src/widgets/Toolbar.js

@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import ToolbarButton from './ToolbarButton';
 import useNewQuery from '../query/useNewQuery';
 import { useConfig } from '../utility/metadataLoaders';
+import { useSetOpenedTabs } from '../utility/globalState';
+import { openNewTab } from '../utility/common';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -15,10 +17,30 @@ export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
   const newQuery = useNewQuery();
   const config = useConfig();
+  const toolbar = config.toolbar || [];
+  const setOpenedTabs = useSetOpenedTabs();
 
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
+      {toolbar.map((button) => (
+        <ToolbarButton
+          key={button.name}
+          onClick={() => {
+            openNewTab(setOpenedTabs, {
+              title: button.title,
+              tabComponent: 'InfoPageTab',
+              icon: button.icon,
+              props: {
+                page: button.page,
+              },
+            });
+          }}
+          icon={button.icon}
+        >
+          {button.title}
+        </ToolbarButton>
+      ))}
       {config.runAsPortal == false && (
         <ToolbarButton onClick={modalState.open} icon="fas fa-database">
           Add connection