Add basic support for listing a server's databases

Author: DaneEveritt

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -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'}>

resources/scripts/components/elements/Spinner.tsx

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

resources/scripts/components/server/ServerDatabases.tsx

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

resources/scripts/components/server/databases/DatabaseRow.tsx

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

resources/scripts/components/server/databases/DatabasesContainer.tsx

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

resources/scripts/routers/ServerRouter.tsx

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