ui(admin): node changes

This commit is contained in:
Matthew Penner 2021-03-23 17:47:24 -06:00
parent 7b38f05019
commit 8a24c1a142
11 changed files with 424 additions and 333 deletions

View file

@ -0,0 +1,19 @@
import http from '@/api/http';
export interface NodeInformation {
version: string;
system: {
type: string;
arch: string;
release: string;
cpus: number;
};
}
export default (id: number): Promise<NodeInformation> => {
return new Promise((resolve, reject) => {
http.get(`/api/application/nodes/${id}/information`)
.then(({ data }) => resolve(data))
.catch(reject);
});
};

View file

@ -5,19 +5,11 @@ import styled from 'styled-components/macro';
import tw from 'twin.macro';
import { PaginatedResult } from '@/api/http';
export const TableHead = ({ children }: { children: React.ReactNode }) => {
return (
<thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
<tr>
<th css={tw`px-6 py-2`}/>
export const TableHeader = ({ name }: { name?: string }) => {
if (!name) {
return <th css={tw`px-6 py-2`}/>;
}
{children}
</tr>
</thead>
);
};
export const TableHeader = ({ name }: { name: string }) => {
return (
<th css={tw`px-6 py-2`}>
<span css={tw`flex flex-row items-center cursor-pointer`}>
@ -34,6 +26,17 @@ export const TableHeader = ({ name }: { name: string }) => {
);
};
export const TableHead = ({ children }: { children: React.ReactNode }) => {
return (
<thead css={tw`bg-neutral-900 border-t border-b border-neutral-500`}>
<tr>
<TableHeader/>
{children}
</tr>
</thead>
);
};
export const TableBody = ({ children }: { children: React.ReactNode }) => {
return (
<tbody>
@ -117,7 +120,7 @@ export function Pagination<T> ({ data: { pagination }, onPageSelect, children }:
Showing <span css={tw`text-neutral-300`}>{((pagination.currentPage - 1) * pagination.perPage) + 1}</span> to <span css={tw`text-neutral-300`}>{((pagination.currentPage - 1) * pagination.perPage) + pagination.count}</span> of <span css={tw`text-neutral-300`}>{pagination.total}</span> results
</p>
{ isFirstPage && isLastPage ?
{isFirstPage && isLastPage ?
null
:
<div css={tw`flex flex-row ml-auto`}>
@ -191,7 +194,7 @@ export const ContentWrapper = ({ checked, onSelectAllClick, children }: Params)
</svg>
</div>
<div css={tw`flex flex-row items-center px-2 py-1 ml-auto rounded cursor-pointer bg-neutral-600`}>
{/* <div css={tw`flex flex-row items-center px-2 py-1 ml-auto rounded cursor-pointer bg-neutral-600`}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`w-6 h-6 text-neutral-300`}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
</svg>
@ -199,7 +202,7 @@ export const ContentWrapper = ({ checked, onSelectAllClick, children }: Params)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={tw`w-4 h-4 ml-1 text-neutral-200`}>
<path clipRule="evenodd" fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
</svg>
</div>
</div> */}
</div>
{children}

View file

@ -75,7 +75,7 @@ export const InformationContainer = ({ title, initialValues, children, onSubmit
>
{
({ isSubmitting, isValid }) => (
<React.Fragment>
<>
<AdminBox title={title} css={tw`relative`}>
<SpinnerOverlay visible={isSubmitting}/>
@ -140,7 +140,7 @@ export const InformationContainer = ({ title, initialValues, children, onSubmit
</div>
</Form>
</AdminBox>
</React.Fragment>
</>
)
}
</Formik>

View file

@ -0,0 +1,92 @@
import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import AdminBox from '@/components/admin/AdminBox';
import getNodeInformation, { NodeInformation } from '@/api/admin/nodes/getNodeInformation';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Context } from '@/components/admin/nodes/NodeRouter';
const Code = ({ className, children }: { className?: string, children: React.ReactNode }) => {
return (
<code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }} className={className}>
{children}
</code>
);
};
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const [ loading, setLoading ] = useState(true);
const [ info, setInfo ] = useState<NodeInformation | null>(null);
const node = Context.useStoreState(state => state.node);
if (node === undefined) {
return (
<></>
);
}
useEffect(() => {
clearFlashes('node');
getNodeInformation(node.id)
.then(info => setInfo(info))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setLoading(false));
}, []);
if (loading) {
return (
<AdminBox title={'Node Information'} css={tw`relative`}>
<SpinnerOverlay visible={loading}/>
</AdminBox>
);
}
return (
<AdminBox title={'Node Information'}>
<table>
<tbody>
<tr>
<td css={tw`py-1 pr-6`}>Wings Version</td>
<td css={tw`py-1`}>
<Code css={tw`ml-auto`}>{info?.version}</Code>
</td>
</tr>
<tr>
<td css={tw`py-1 pr-6`}>Operating System</td>
<td css={tw`py-1`}>
<Code css={tw`ml-auto`}>{info?.system.type}</Code>
</td>
</tr>
<tr>
<td css={tw`py-1 pr-6`}>Architecture</td>
<td css={tw`py-1`}>
<Code css={tw`ml-auto`}>{info?.system.arch}</Code>
</td>
</tr>
<tr>
<td css={tw`py-1 pr-6`}>Kernel</td>
<td css={tw`py-1`}>
<Code css={tw`ml-auto`}>{info?.system.release}</Code>
</td>
</tr>
<tr>
<td css={tw`py-1 pr-6`}>CPU Threads</td>
<td css={tw`py-1`}>
<Code css={tw`ml-auto`}>{info?.system.cpus}</Code>
</td>
</tr>
</tbody>
</table>
{/* TODO: Description code-block with edit option */}
</AdminBox>
);
};

View file

@ -3,13 +3,13 @@ import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { faCode, faDragon } from '@fortawesome/free-solid-svg-icons';
import getNodeConfiguration from '@/api/admin/nodes/getNodeConfiguration';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { Context } from '@/components/admin/nodes/NodeRouter';
import CopyOnClick from '@/components/elements/CopyOnClick';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
export default () => {
const { clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const [ configuration, setConfiguration ] = useState('');
@ -22,6 +22,8 @@ export default () => {
}
useEffect(() => {
clearFlashes('node');
getNodeConfiguration(node.id)
.then((configuration) => setConfiguration(configuration))
.catch(error => {
@ -31,7 +33,7 @@ export default () => {
}, []);
return (
<div>
<>
<AdminBox title={'Configuration'} icon={faCode} css={tw`mb-4`}>
<div css={tw`relative`}>
<div css={tw`absolute top-0 right-0`}>
@ -41,7 +43,7 @@ export default () => {
</svg>
</CopyOnClick>
</div>
<pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md p-4 overflow-x-auto`}>
<pre css={tw`text-sm rounded font-mono bg-neutral-900 shadow-md px-4 py-3 overflow-x-auto`}>
{configuration}
</pre>
</div>
@ -50,6 +52,6 @@ export default () => {
<AdminBox title={'Auto Deploy'} icon={faDragon}>
Never&trade;
</AdminBox>
</div>
</>
);
};

View file

@ -1,27 +1,15 @@
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { number, object } from 'yup';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import updateNode from '@/api/admin/nodes/updateNode';
interface Values {
memory: number;
memoryOverallocate: number;
disk: number;
diskOverallocate: number;
}
import { Form, useFormikContext } from 'formik';
import { Context } from '@/components/admin/nodes/NodeRouter';
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { isSubmitting } = useFormikContext();
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
@ -29,37 +17,7 @@ export default () => {
);
}
const submit = ({ memory, memoryOverallocate, disk, diskOverallocate }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { memory, memoryOverallocate, disk, diskOverallocate })
.then(() => setNode({ ...node, memory, memoryOverallocate, disk, diskOverallocate }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
memory: node.memory,
memoryOverallocate: node.memoryOverallocate,
disk: node.disk,
diskOverallocate: node.diskOverallocate,
}}
validationSchema={object().shape({
memory: number().required(),
memoryOverallocate: number().required(),
disk: number().required(),
diskOverallocate: number().required(),
})}
>
{
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Limits'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
@ -105,9 +63,5 @@ export default () => {
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
);
};

View file

@ -1,27 +1,15 @@
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { object } from 'yup';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import updateNode from '@/api/admin/nodes/updateNode';
interface Values {
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
}
import { Form, useFormikContext } from 'formik';
import { Context } from '@/components/admin/nodes/NodeRouter';
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { isSubmitting } = useFormikContext();
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
@ -29,33 +17,7 @@ export default () => {
);
}
const submit = ({ listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
.then(() => setNode({ ...node, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
listenPortHTTP: node.listenPortHTTP,
publicPortHTTP: node.publicPortHTTP,
listenPortSFTP: node.listenPortSFTP,
publicPortSFTP: node.publicPortSFTP,
}}
validationSchema={object().shape({
})}
>
{
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Listen'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
@ -101,9 +63,5 @@ export default () => {
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
);
};

View file

@ -10,11 +10,9 @@ import Spinner from '@/components/elements/Spinner';
import FlashMessageRender from '@/components/FlashMessageRender';
import { ApplicationStore } from '@/state';
import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
import AdminBox from '@/components/admin/AdminBox';
import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
import NodeAboutContainer from '@/components/admin/nodes/NodeAboutContainer';
import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
interface ctx {
node: Node | undefined;
@ -29,15 +27,7 @@ export const Context = createContextStore<ctx>({
}),
});
const Code = ({ children }: { children: React.ReactNode }) => {
return (
<code css={tw`text-sm font-mono bg-neutral-900 rounded`} style={{ padding: '2px 6px' }}>
{children}
</code>
);
};
const NodeEditContainer = () => {
const NodeRouter = () => {
const location = useLocation();
const match = useRouteMatch<{ id?: string }>();
@ -116,27 +106,11 @@ const NodeEditContainer = () => {
<Switch location={location}>
<Route path={`${match.path}`} exact>
<AdminBox title={'Node Information'}>
<p>Version <Code>1.3.1</Code></p>
</AdminBox>
<NodeAboutContainer/>
</Route>
<Route path={`${match.path}/settings`} exact>
<div css={tw`flex flex-col lg:flex-row`}>
<div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
<NodeSettingsContainer/>
</div>
<div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
<div css={tw`flex w-full`}>
<NodeListenContainer/>
</div>
<div css={tw`flex w-full mt-4`}>
<NodeLimitContainer/>
</div>
</div>
</div>
</Route>
<Route path={`${match.path}/configuration`} exact>
@ -158,7 +132,7 @@ const NodeEditContainer = () => {
export default () => {
return (
<Context.Provider>
<NodeEditContainer/>
<NodeRouter/>
</Context.Provider>
);
};

View file

@ -1,34 +1,45 @@
import Button from '@/components/elements/Button';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { object, string } from 'yup';
import { number, object, string } from 'yup';
import updateNode from '@/api/admin/nodes/updateNode';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
import { Context } from '@/components/admin/nodes/NodeRouter';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import LocationSelect from '@/components/admin/nodes/LocationSelect';
import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
import Label from '@/components/elements/Label';
import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
interface Values {
public: boolean;
name: string;
description: string;
locationId: number;
databaseHostId: number | null;
fqdn: string;
scheme: string;
behindProxy: boolean;
public: boolean;
memory: number;
memoryOverallocate: number;
disk: number;
diskOverallocate: number;
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
}
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const NodeSettingsContainer = () => {
const { isSubmitting } = useFormikContext();
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
@ -36,39 +47,7 @@ export default () => {
);
}
const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, scheme, behindProxy })
.then(() => setNode({ ...node, name, description, locationId, fqdn, scheme, behindProxy }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
public: node.public,
name: node.name,
description: node.description || '',
locationId: node.locationId,
databaseHostId: node.databaseHostId,
fqdn: node.fqdn,
scheme: node.scheme,
behindProxy: node.behindProxy,
}}
validationSchema={object().shape({
name: string().required().max(191),
description: string().max(255),
})}
>
{
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Settings'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
@ -82,15 +61,6 @@ export default () => {
/>
</div>
<div css={tw`mb-6`}>
<Field
id={'description'}
name={'description'}
label={'Description'}
type={'text'}
/>
</div>
<div css={tw`mb-6`}>
<LocationSelect selected={node?.relations.location || null}/>
</div>
@ -155,9 +125,120 @@ export default () => {
</label>
</div>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'public'}>Automatic Allocation</Label>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'public'}
type={'radio'}
value={false}
/>
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'public'}
type={'radio'}
value
/>
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
</label>
</div>
</div>
</Form>
</AdminBox>
</React.Fragment>
);
};
export default () => {
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const node = Context.useStoreState(state => state.node);
const setNode = Context.useStoreActions(actions => actions.setNode);
if (node === undefined) {
return (
<></>
);
}
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, values)
.then(() => setNode({ ...node, ...values }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
})
.then(() => setSubmitting(false));
};
return (
<Formik
onSubmit={submit}
initialValues={{
name: node.name,
locationId: node.locationId,
databaseHostId: node.databaseHostId,
fqdn: node.fqdn,
scheme: node.scheme,
behindProxy: node.behindProxy,
public: node.public,
listenPortHTTP: node.listenPortHTTP,
publicPortHTTP: node.publicPortHTTP,
listenPortSFTP: node.listenPortSFTP,
publicPortSFTP: node.publicPortSFTP,
memory: node.memory,
memoryOverallocate: node.memoryOverallocate,
disk: node.disk,
diskOverallocate: node.diskOverallocate,
}}
validationSchema={object().shape({
name: string().required().max(191),
listenPortHTTP: number().required(),
publicPortHTTP: number().required(),
listenPortSFTP: number().required(),
publicPortSFTP: number().required(),
memory: number().required(),
memoryOverallocate: number().required(),
disk: number().required(),
diskOverallocate: number().required(),
})}
>
{
({ isSubmitting, isValid }) => (
<div css={tw`flex flex-col lg:flex-row`}>
<div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
<NodeSettingsContainer/>
</div>
<div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
<div css={tw`flex w-full`}>
<NodeListenContainer/>
</div>
<div css={tw`flex w-full mt-4`}>
<NodeLimitContainer/>
</div>
<div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
<div css={tw`flex flex-row`}>
<Button type="submit" size="small" css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
Save Changes
</Button>
</div>
</div>
</div>
</div>
)
}
</Formik>

View file

@ -101,7 +101,8 @@ const NodesContainer = () => {
<TableHeader name={'FQDN'}/>
<TableHeader name={'Total Memory'}/>
<TableHeader name={'Total Disk'}/>
<th css={tw`px-6 py-2`}/>
<TableHeader/>
<TableHeader/>
</TableHead>
<TableBody>
@ -147,7 +148,7 @@ const NodesContainer = () => {
<td css={tw`px-6 text-sm text-neutral-200 text-left whitespace-nowrap`}>{bytesToHuman(megabytesToBytes(node.disk))}</td>
<td css={tw`px-6 whitespace-nowrap`}>
{ node.scheme === 'https' ?
{node.scheme === 'https' ?
<span css={tw`px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-green-100 text-green-800`}>
Secure
</span>
@ -157,6 +158,13 @@ const NodesContainer = () => {
</span>
}
</td>
<td css={tw`px-6 whitespace-nowrap`}>
{/* TODO: Change color based off of online/offline status */}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" css={[ tw`h-5 w-5`, node.scheme === 'https' ? tw`text-green-200` : tw`text-red-300` ]}>
<path clipRule="evenodd" fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</td>
</TableRow>
))
}

View file

@ -15,7 +15,7 @@ import NewDatabaseContainer from '@/components/admin/databases/NewDatabaseContai
import DatabaseEditContainer from '@/components/admin/databases/DatabaseEditContainer';
import NodesContainer from '@/components/admin/nodes/NodesContainer';
import NewNodeContainer from '@/components/admin/nodes/NewNodeContainer';
import NodeEditContainer from '@/components/admin/nodes/NodeEditContainer';
import NodeRouter from '@/components/admin/nodes/NodeRouter';
import LocationsContainer from '@/components/admin/locations/LocationsContainer';
import LocationEditContainer from '@/components/admin/locations/LocationEditContainer';
import ServersContainer from '@/components/admin/servers/ServersContainer';
@ -226,7 +226,7 @@ const AdminRouter = ({ location, match }: RouteComponentProps) => {
<Route path={`${match.path}/nodes/new`} component={NewNodeContainer} exact/>
<Route
path={`${match.path}/nodes/:id`}
component={NodeEditContainer}
component={NodeRouter}
/>
<Route path={`${match.path}/servers`} component={ServersContainer} exact/>