Add basic support for listing a server's databases
This commit is contained in:
Dane Everitt
parent
986285402f
commit
e3db564175
7 changed files with 110 additions and 138 deletions
|
|
@ -9,8 +9,8 @@ import { Link } from 'react-router-dom';
|
|||
|
||||
export default () => (
|
||||
<div className={'my-10'}>
|
||||
<Link to={'/server/e9d6c836'} className={'flex no-underline text-neutral-200 cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
|
||||
<div className={'rounded-full bg-neutral-500 p-3'}>
|
||||
<Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
|
||||
<div className={'icon'}>
|
||||
<FontAwesomeIcon icon={faServer}/>
|
||||
</div>
|
||||
<div className={'w-1/2 ml-4'}>
|
||||
|
|
@ -49,8 +49,8 @@ export default () => (
|
|||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<div className={'flex mt-px cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
|
||||
<div className={'rounded-full bg-neutral-500 p-3'}>
|
||||
<div className={'grey-row-box cursor-pointer mt-2'}>
|
||||
<div className={'icon'}>
|
||||
<FontAwesomeIcon icon={faServer}/>
|
||||
</div>
|
||||
<div className={'w-1/2 ml-4'}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default ({ large }: { large?: boolean }) => (
|
||||
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
|
||||
export default ({ large, centered }: { large?: boolean; centered?: boolean }) => (
|
||||
centered ?
|
||||
<div className={classNames('flex justify-center', { 'm-20': large, 'm-6': !large })}>
|
||||
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
|
||||
</div>
|
||||
:
|
||||
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
|
||||
import getServerDatabases from '@/api/server/getServerDatabases';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
|
||||
export default () => {
|
||||
useEffect(() => {
|
||||
getServerDatabases('s');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'my-10'}>
|
||||
<div className={'flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
|
||||
<div className={'rounded-full bg-neutral-500 p-3'}>
|
||||
<FontAwesomeIcon icon={faDatabase}/>
|
||||
</div>
|
||||
<div className={'w-1/2 ml-4'}>
|
||||
<p className={'text-lg'}>sfgsfgd</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import { ServerDatabase } from '@/api/server/getServerDatabases';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
|
||||
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
|
||||
import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
|
||||
|
||||
export default ({ database }: { database: ServerDatabase }) => {
|
||||
return (
|
||||
<div className={'grey-row-box no-hover'}>
|
||||
<div className={'icon'}>
|
||||
<FontAwesomeIcon icon={faDatabase}/>
|
||||
</div>
|
||||
<div className={'flex-1 ml-4'}>
|
||||
<p className={'text-lg'}>{database.name}</p>
|
||||
</div>
|
||||
<div className={'ml-6'}>
|
||||
<p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Endpoint:</p>
|
||||
<p className={'text-center text-sm'}>{database.connectionString}</p>
|
||||
</div>
|
||||
<div className={'ml-6'}>
|
||||
<p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Connections From:</p>
|
||||
<p className={'text-center text-sm'}>{database.allowConnectionsFrom}</p>
|
||||
</div>
|
||||
<div className={'ml-6'}>
|
||||
<p className={'text-center text-xs text-neutral-500 uppercase mb-1 select-none'}>Username:</p>
|
||||
<p className={'text-center text-sm'}>{database.username}</p>
|
||||
</div>
|
||||
<div className={'ml-6'}>
|
||||
<button className={'btn btn-sm btn-secondary mr-2'}>
|
||||
<FontAwesomeIcon icon={faEye}/>
|
||||
</button>
|
||||
<button className={'btn btn-sm btn-secondary btn-red'}>
|
||||
<FontAwesomeIcon icon={faTrashAlt}/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import getServerDatabases, { ServerDatabase } from '@/api/server/getServerDatabases';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import FlashMessageRender from '@/components/FlashMessageRender';
|
||||
import DatabaseRow from '@/components/server/databases/DatabaseRow';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
|
||||
export default () => {
|
||||
const [ loading, setLoading ] = useState(true);
|
||||
const [ databases, setDatabases ] = useState<ServerDatabase[]>([]);
|
||||
const server = ServerContext.useStoreState(state => state.server.data!);
|
||||
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
useEffect(() => {
|
||||
clearFlashes('databases');
|
||||
getServerDatabases(server.uuid)
|
||||
.then(databases => {
|
||||
setDatabases(databases);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => addFlash({
|
||||
key: 'databases',
|
||||
title: 'Error',
|
||||
message: httpErrorToHuman(error),
|
||||
type: 'error',
|
||||
}));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={'my-10'}>
|
||||
<FlashMessageRender byKey={'databases'}/>
|
||||
{loading ?
|
||||
<Spinner large={true} centered={true}/>
|
||||
:
|
||||
<CSSTransition classNames={'fade'} timeout={250}>
|
||||
<React.Fragment>
|
||||
{databases.length > 0 ?
|
||||
databases.map(database => <DatabaseRow key={database.id} database={database}/>)
|
||||
:
|
||||
<p className={'text-sm text-neutral-200'}>No databases. :(</p>
|
||||
}
|
||||
</React.Fragment>
|
||||
</CSSTransition>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -5,9 +5,9 @@ import ServerConsole from '@/components/server/ServerConsole';
|
|||
import TransitionRouter from '@/TransitionRouter';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import WebsocketHandler from '@/components/server/WebsocketHandler';
|
||||
import ServerDatabases from '@/components/server/ServerDatabases';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { Provider } from 'react-redux';
|
||||
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
|
||||
|
||||
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
|
||||
const server = ServerContext.useStoreState(state => state.server.data);
|
||||
|
|
@ -45,7 +45,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
|
|||
<WebsocketHandler/>
|
||||
<Switch location={location}>
|
||||
<Route path={`${match.path}`} component={ServerConsole} exact/>
|
||||
<Route path={`${match.path}/databases`} component={ServerDatabases}/>
|
||||
<Route path={`${match.path}/databases`} component={DatabasesContainer}/>
|
||||
</Switch>
|
||||
</React.Fragment>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,114 +7,15 @@ code.clean {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Indicators for server online status.
|
||||
*/
|
||||
.indicator {
|
||||
@apply .bg-neutral-800 .border .border-primary-500;
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.grey-row-box {
|
||||
@apply .flex .rounded .no-underline .text-neutral-200 .items-center .bg-neutral-700 .p-4 .border .border-transparent;
|
||||
transition: border-color 150ms linear;
|
||||
|
||||
&.online {
|
||||
@apply .bg-green-600 .border-green-500;
|
||||
animation: onlineblink 2s infinite alternate;
|
||||
&:not(.no-hover):hover {
|
||||
@apply .border-neutral-500;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
@apply .bg-green-600 .border-red-500;
|
||||
animation: offlineblink 2s infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Usage indicator labels for the server listing.
|
||||
*/
|
||||
.usage {
|
||||
@apply .flex-1 .text-center .relative;
|
||||
|
||||
& > .indicator-title {
|
||||
@apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-primary-500;
|
||||
margin-top:-9px;
|
||||
padding: 0 8px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styling for elements that contain the core page content.
|
||||
*/
|
||||
.content-box {
|
||||
@apply .bg-white .p-6 .rounded .shadow .border .border-neutral-100;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flex boxes for server listing on user dashboard.
|
||||
*/
|
||||
.server-card-container {
|
||||
@apply .mb-4 .w-full;
|
||||
|
||||
@screen md {
|
||||
@apply .w-1/2 .pr-4;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
@apply .pr-0;
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
@apply .w-1/3 .pr-4;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
@apply .pr-4;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
@apply .pr-0;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
@apply .flex .flex-col;
|
||||
transition: box-shadow 150ms ease-in;
|
||||
|
||||
&:hover {
|
||||
@apply .shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
& > div > .server-card {
|
||||
@apply .flex .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
& .identifier-icon {
|
||||
@apply .select-none .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
|
||||
}
|
||||
|
||||
& a, & a:visited {
|
||||
@apply .no-underline .text-neutral-800;
|
||||
}
|
||||
}
|
||||
|
||||
& > div > .footer {
|
||||
@apply .border .border-neutral-100 .border-t-0 .bg-neutral-50 .shadow-inner;
|
||||
}
|
||||
}
|
||||
|
||||
.pillbox {
|
||||
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
|
||||
}
|
||||
|
||||
.server-search {
|
||||
@apply .w-full .my-4;
|
||||
|
||||
& > input[type="text"] {
|
||||
@apply .w-full .p-4 .rounded .border .border-neutral-200 .text-neutral-500;
|
||||
transition: border 150ms ease-in;
|
||||
|
||||
&:focus {
|
||||
@apply .border-primary-500;
|
||||
}
|
||||
& > div.icon {
|
||||
@apply .rounded-full .bg-neutral-500 .p-3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue