dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-20 01:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

server connections handling

Browse Source
This commit is contained in:
Jan Prochazka
2020-05-01 11:41:18 +02:00
parent 44c19ad277
commit ca7eea8a05
11 changed files with 284 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/App.js
View File

@@ -6,8 +6,10 @@ import {
CurrentDatabaseProvider,
OpenedTabsProvider,
SavedSqlFilesProvider,
OpenedConnectionsProvider,
} from './utility/globalState';
import { SocketProvider } from './utility/SocketProvider';
import OpenedConnectionsPinger from './utility/OpnedConnectionsPinger';
function App() {
return (
@@ -16,7 +18,11 @@ function App() {
<SocketProvider>
<OpenedTabsProvider>
<SavedSqlFilesProvider>
<Screen />
<OpenedConnectionsProvider>
<OpenedConnectionsPinger>
<Screen />
</OpenedConnectionsPinger>
</OpenedConnectionsProvider>
</SavedSqlFilesProvider>
</OpenedTabsProvider>
</SocketProvider>

22
packages/web/src/appobj/AppObjectList.js
View File

@@ -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;

11
packages/web/src/appobj/AppObjects.js
View File

@@ -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>
);
}

43
packages/web/src/appobj/connectionAppObject.js
View File

@@ -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;

96
packages/web/src/icons.js
View File

@@ -27,7 +27,7 @@ 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}`;
if (type == 'fas' || type == 'far') className += ` ${type} ${name} ${parts.join(' ')}`;
if (_.includes(parts, 'spin')) className += ' fa-spin';
@@ -41,67 +41,73 @@ export function FontIcon({ icon, ...props }) {
return <i {...props} className={className} style={style} title={props.title} />;
}
export function ExpandIcon({ isBlank = false, isExpanded = false, isSelected = false, ...other }) {
export function ExpandIcon({
isBlank = false,
isExpanded = false,
isSelected = false,
blankColor = 'white',
...other
}) {
if (isBlank) {
return <FontIcon icon={`fas fa-square ${isSelected ? 'lightblue' : 'white'}`} {...other} />;
return <FontIcon icon={`fas fa-square ${isSelected ? 'lightblue' : blankColor}`} {...other} />;
}
return <FontIcon icon={`far ${isExpanded ? 'fa-minus-square' : 'fa-plus-square'} `} {...other} />;
}
export const TableIcon = props => getIconImage('table2.svg', props);
export const ViewIcon = props => getIconImage('view2.svg', props);
export const DatabaseIcon = props => getIconImage('database.svg', props);
export const ServerIcon = props => getIconImage('server.svg', props);
export const TableIcon = (props) => getIconImage('table2.svg', props);
export const ViewIcon = (props) => getIconImage('view2.svg', props);
export const DatabaseIcon = (props) => getIconImage('database.svg', props);
export const ServerIcon = (props) => getIconImage('server.svg', props);
export const MicrosoftIcon = props => getIconImage('microsoft.svg', props);
export const MySqlIcon = props => getIconImage('mysql.svg', props);
export const PostgreSqlIcon = props => getIconImage('postgresql.svg', props);
export const SqliteIcon = props => getIconImage('sqlite.svg', props);
export const MicrosoftIcon = (props) => getIconImage('microsoft.svg', props);
export const MySqlIcon = (props) => getIconImage('mysql.svg', props);
export const PostgreSqlIcon = (props) => getIconImage('postgresql.svg', props);
export const SqliteIcon = (props) => getIconImage('sqlite.svg', props);
export const ProcedureIcon = props => getIconImage('procedure2.svg', props);
export const FunctionIcon = props => getIconImage('function.svg', props);
export const TriggerIcon = props => getIconImage('trigger.svg', props);
export const ProcedureIcon = (props) => getIconImage('procedure2.svg', props);
export const FunctionIcon = (props) => getIconImage('function.svg', props);
export const TriggerIcon = (props) => getIconImage('trigger.svg', props);
export const HomeIcon = props => getIconImage('home.svg', props);
export const PrimaryKeyIcon = props => getIconImage('primarykey.svg', props);
export const ForeignKeyIcon = props => getIconImage('foreignkey.svg', props);
export const ComplexKeyIcon = props => getIconImage('complexkey.svg', props);
export const VariableIcon = props => getIconImage('variable.svg', props);
export const UniqueIcon = props => getIconImage('unique.svg', props);
export const IndexIcon = props => getIconImage('index.svg', props);
export const HomeIcon = (props) => getIconImage('home.svg', props);
export const PrimaryKeyIcon = (props) => getIconImage('primarykey.svg', props);
export const ForeignKeyIcon = (props) => getIconImage('foreignkey.svg', props);
export const ComplexKeyIcon = (props) => getIconImage('complexkey.svg', props);
export const VariableIcon = (props) => getIconImage('variable.svg', props);
export const UniqueIcon = (props) => getIconImage('unique.svg', props);
export const IndexIcon = (props) => getIconImage('index.svg', props);
export const StartIcon = props => getIconImage('start.svg', props);
export const DownCircleIcon = props => getIconImage('down_circle.svg', props);
export const StartIcon = (props) => getIconImage('start.svg', props);
export const DownCircleIcon = (props) => getIconImage('down_circle.svg', props);
export const ColumnIcon = props => getIconImage('column.svg', props);
export const ColumnIcon = (props) => getIconImage('column.svg', props);
export const SqlIcon = props => getIconImage('sql.svg', props);
export const ExcelIcon = props => getIconImage('excel.svg', props);
export const DiagramIcon = props => getIconImage('diagram.svg', props);
export const QueryDesignIcon = props => getIconImage('querydesign.svg', props);
export const LocalDbIcon = props => getIconImage('localdb.svg', props);
export const CsvIcon = props => getIconImage('csv.svg', props);
export const ChangeSetIcon = props => getIconImage('changeset.svg', props);
export const BinaryFileIcon = props => getIconImage('binaryfile.svg', props);
export const SqlIcon = (props) => getIconImage('sql.svg', props);
export const ExcelIcon = (props) => getIconImage('excel.svg', props);
export const DiagramIcon = (props) => getIconImage('diagram.svg', props);
export const QueryDesignIcon = (props) => getIconImage('querydesign.svg', props);
export const LocalDbIcon = (props) => getIconImage('localdb.svg', props);
export const CsvIcon = (props) => getIconImage('csv.svg', props);
export const ChangeSetIcon = (props) => getIconImage('changeset.svg', props);
export const BinaryFileIcon = (props) => getIconImage('binaryfile.svg', props);
export const ReferenceIcon = props => getIconImage('reference.svg', props);
export const LinkIcon = props => getIconImage('link.svg', props);
export const ReferenceIcon = (props) => getIconImage('reference.svg', props);
export const LinkIcon = (props) => getIconImage('link.svg', props);
export const SequenceIcon = props => getIconImage('sequence.svg', props);
export const CheckIcon = props => getIconImage('check.svg', props);
export const SequenceIcon = (props) => getIconImage('sequence.svg', props);
export const CheckIcon = (props) => getIconImage('check.svg', props);
export const LinkedServerIcon = props => getIconImage('linkedserver.svg', props);
export const LinkedServerIcon = (props) => getIconImage('linkedserver.svg', props);
export const EmptyIcon = props => getIconImage('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=', props);
export const EmptyIcon = (props) => getIconImage('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=', props);
export const TimesRedIcon = props => <FontIcon name="fas fa-times red" {...props} />;
export const TimesGreenCircleIcon = props => <FontIcon icon="fas fa-times-circle green" {...props} />;
export const GrayFilterIcon = props => <FontIcon icon="fas fa-filter lightgray" {...props} />;
export const ExclamationTriangleIcon = props => <FontIcon icon="fas fa-exclamation-triangle" {...props} />;
export const HourGlassIcon = props => <FontIcon icon="fas fa-hourglass" {...props} />;
export const InfoBlueCircleIcon = props => <FontIcon icon="fas fa-info-circle blue" {...props} />;
export const TimesRedIcon = (props) => <FontIcon name="fas fa-times red" {...props} />;
export const TimesGreenCircleIcon = (props) => <FontIcon icon="fas fa-times-circle green" {...props} />;
export const GrayFilterIcon = (props) => <FontIcon icon="fas fa-filter lightgray" {...props} />;
export const ExclamationTriangleIcon = (props) => <FontIcon icon="fas fa-exclamation-triangle" {...props} />;
export const HourGlassIcon = (props) => <FontIcon icon="fas fa-hourglass" {...props} />;
export const InfoBlueCircleIcon = (props) => <FontIcon icon="fas fa-info-circle blue" {...props} />;
export const SpinnerIcon = props => <FontIcon icon="fas fa-spinner spin" {...props} />;
export const SpinnerIcon = (props) => <FontIcon icon="fas fa-spinner spin" {...props} />;
export function getEngineIcon(engine) {
switch (engine) {

14
packages/web/src/utility/OpnedConnectionsPinger.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { useOpenedConnections } from './globalState';
import axios from './axios';
export default function OpenedConnectionsPinger({ children }) {
const openedConnections = useOpenedConnections();
React.useEffect(() => {
const handle = window.setInterval(() => {
axios.post('server-connections/ping', { connections: openedConnections });
}, 30 * 1000);
return () => window.clearInterval(handle);
}, [openedConnections]);
return children;
}

10
packages/web/src/utility/globalState.js
View File

@@ -84,15 +84,23 @@ export function useAppObjectParams() {
const newQuery = useNewQuery();
const openedTabs = useOpenedTabs();
const setSavedSqlFiles = useSetSavedSqlFiles();
const openedConnections = useOpenedConnections();
const setOpenedConnections = useSetOpenedConnections();
return {
setOpenedTabs,
currentDatabase,
newQuery,
openedTabs,
setSavedSqlFiles,
openedConnections,
setOpenedConnections,
};
}
const [SavedSqlFilesProvider, useSavedSqlFiles, useSetSavedSqlFiles] = createStorageState('savedSqlFiles', []);
export { SavedSqlFilesProvider, useSavedSqlFiles, useSetSavedSqlFiles };
const [OpenedConnectionsProvider, useOpenedConnections, useSetOpenedConnections] = createGlobalState([]);
export { OpenedConnectionsProvider, useOpenedConnections, useSetOpenedConnections };

13
packages/web/src/utility/metadataLoaders.js
View File

@@ -33,6 +33,12 @@ const databaseListLoader = ({ conid }) => ({
reloadTrigger: `database-list-changed-${conid}`,
});
const serverStatusLoader = () => ({
url: 'server-connections/server-status',
params: {},
reloadTrigger: `server-status-changed`,
});
const connectionListLoader = () => ({
url: 'connections/list',
params: {},
@@ -126,6 +132,13 @@ export function useDatabaseList(args) {
return useCore(databaseListLoader, args);
}
export function getServerStatus() {
return getCore(serverStatusLoader, {});
}
export function useServerStatus() {
return useCore(serverStatusLoader, {});
}
export function getConnectionList() {
return getCore(connectionListLoader, {});
}

7
packages/web/src/widgets/DatabaseWidget.js
View File

@@ -7,7 +7,7 @@ import databaseAppObject from '../appobj/databaseAppObject';
import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
import InlineButton from './InlineButton';
import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
import { useSqlObjectList, useDatabaseList, useConnectionList } from '../utility/metadataLoaders';
import { useSqlObjectList, useDatabaseList, useConnectionList, useServerStatus } from '../utility/metadataLoaders';
import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
function SubDatabaseList({ data }) {
@@ -31,6 +31,9 @@ function SubDatabaseList({ data }) {
function ConnectionList() {
const connections = useConnectionList();
const serverStatus = useServerStatus();
const connectionsWithStatus =
connections && serverStatus && connections.map((conn) => ({ ...conn, status: serverStatus[conn._id] }));
const [filter, setFilter] = React.useState('');
return (
@@ -43,7 +46,7 @@ function ConnectionList() {
<InnerContainer>
<AppObjectList
list={connections}
list={connectionsWithStatus}
makeAppObj={connectionAppObject({ boldCurrentDatabase: true })}
SubItems={SubDatabaseList}
filter={filter}