ui(admin): node changes
This commit is contained in:
Matthew Penner
parent
7b38f05019
commit
8a24c1a142
11 changed files with 424 additions and 333 deletions
19
resources/scripts/api/admin/nodes/getNodeInformation.ts
Normal file
19
resources/scripts/api/admin/nodes/getNodeInformation.ts
Normal 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);
|
||||
});
|
||||
};
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
@ -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™
|
||||
</AdminBox>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,85 +17,51 @@ 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}/>
|
||||
<AdminBox title={'Limits'} css={tw`w-full relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting}/>
|
||||
|
||||
<Form css={tw`mb-0`}>
|
||||
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'memory'}
|
||||
name={'memory'}
|
||||
label={'Memory'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
<Form css={tw`mb-0`}>
|
||||
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'memory'}
|
||||
name={'memory'}
|
||||
label={'Memory'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'memoryOverallocate'}
|
||||
name={'memoryOverallocate'}
|
||||
label={'Memory Overallocate'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'memoryOverallocate'}
|
||||
name={'memoryOverallocate'}
|
||||
label={'Memory Overallocate'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'disk'}
|
||||
name={'disk'}
|
||||
label={'Disk'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`md:w-full md:flex md:flex-row mb-6`}>
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:mr-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'disk'}
|
||||
name={'disk'}
|
||||
label={'Disk'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'diskOverallocate'}
|
||||
name={'diskOverallocate'}
|
||||
label={'Disk Overallocate'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</AdminBox>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
|
||||
<Field
|
||||
id={'diskOverallocate'}
|
||||
name={'diskOverallocate'}
|
||||
label={'Disk Overallocate'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</AdminBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,81 +17,51 @@ 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}/>
|
||||
<AdminBox title={'Listen'} css={tw`w-full relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting}/>
|
||||
|
||||
<Form css={tw`mb-0`}>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'listenPortHTTP'}
|
||||
name={'listenPortHTTP'}
|
||||
label={'HTTP Listen Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
<Form css={tw`mb-0`}>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'listenPortHTTP'}
|
||||
name={'listenPortHTTP'}
|
||||
label={'HTTP Listen Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'publicPortHTTP'}
|
||||
name={'publicPortHTTP'}
|
||||
label={'HTTP Public Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'publicPortHTTP'}
|
||||
name={'publicPortHTTP'}
|
||||
label={'HTTP Public Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'listenPortSFTP'}
|
||||
name={'listenPortSFTP'}
|
||||
label={'SFTP Listen Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'listenPortSFTP'}
|
||||
name={'listenPortSFTP'}
|
||||
label={'SFTP Listen Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'publicPortSFTP'}
|
||||
name={'publicPortSFTP'}
|
||||
label={'SFTP Public Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</AdminBox>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
|
||||
<Field
|
||||
id={'publicPortSFTP'}
|
||||
name={'publicPortSFTP'}
|
||||
label={'SFTP Public Port'}
|
||||
type={'number'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</AdminBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<NodeSettingsContainer/>
|
||||
</Route>
|
||||
|
||||
<Route path={`${match.path}/configuration`} exact>
|
||||
|
|
@ -158,7 +132,7 @@ const NodeEditContainer = () => {
|
|||
export default () => {
|
||||
return (
|
||||
<Context.Provider>
|
||||
<NodeEditContainer/>
|
||||
<NodeRouter/>
|
||||
</Context.Provider>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,29 +1,159 @@
|
|||
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;
|
||||
}
|
||||
|
||||
const NodeSettingsContainer = () => {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
|
||||
const node = Context.useStoreState(state => state.node);
|
||||
|
||||
if (node === undefined) {
|
||||
return (
|
||||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminBox title={'Settings'} css={tw`w-full relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting}/>
|
||||
|
||||
<Form css={tw`mb-0`}>
|
||||
<div css={tw`mb-6`}>
|
||||
<Field
|
||||
id={'name'}
|
||||
name={'name'}
|
||||
label={'Name'}
|
||||
type={'text'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<LocationSelect selected={node?.relations.location || null}/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<DatabaseSelect selected={node?.relations.databaseHost || null}/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<Field
|
||||
id={'fqdn'}
|
||||
name={'fqdn'}
|
||||
label={'FQDN'}
|
||||
type={'text'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mt-6`}>
|
||||
<Label htmlFor={'scheme'}>SSL</Label>
|
||||
|
||||
<div>
|
||||
<label css={tw`inline-flex items-center mr-2`}>
|
||||
<FormikField
|
||||
name={'scheme'}
|
||||
type={'radio'}
|
||||
value={'https'}
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
|
||||
</label>
|
||||
|
||||
<label css={tw`inline-flex items-center ml-2`}>
|
||||
<FormikField
|
||||
name={'scheme'}
|
||||
type={'radio'}
|
||||
value={'http'}
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={tw`mt-6`}>
|
||||
<Label htmlFor={'behindProxy'}>Behind Proxy</Label>
|
||||
|
||||
<div>
|
||||
<label css={tw`inline-flex items-center mr-2`}>
|
||||
<FormikField
|
||||
name={'behindProxy'}
|
||||
type={'radio'}
|
||||
value={false}
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>No</span>
|
||||
</label>
|
||||
|
||||
<label css={tw`inline-flex items-center ml-2`}>
|
||||
<FormikField
|
||||
name={'behindProxy'}
|
||||
type={'radio'}
|
||||
value
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>Yes</span>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default () => {
|
||||
const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
|
|
@ -36,11 +166,11 @@ export default () => {
|
|||
);
|
||||
}
|
||||
|
||||
const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers<Values>) => {
|
||||
const submit = (values: 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 }))
|
||||
updateNode(node.id, values)
|
||||
.then(() => setNode({ ...node, ...values }))
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
clearAndAddHttpError({ key: 'node', error });
|
||||
|
|
@ -52,112 +182,63 @@ export default () => {
|
|||
<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,
|
||||
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),
|
||||
description: string().max(255),
|
||||
|
||||
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 }) => (
|
||||
<React.Fragment>
|
||||
<AdminBox title={'Settings'} css={tw`w-full relative`}>
|
||||
<SpinnerOverlay visible={isSubmitting}/>
|
||||
({ 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>
|
||||
|
||||
<Form css={tw`mb-0`}>
|
||||
<div css={tw`mb-6`}>
|
||||
<Field
|
||||
id={'name'}
|
||||
name={'name'}
|
||||
label={'Name'}
|
||||
type={'text'}
|
||||
/>
|
||||
<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 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>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<DatabaseSelect selected={node?.relations.databaseHost || null}/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mb-6`}>
|
||||
<Field
|
||||
id={'fqdn'}
|
||||
name={'fqdn'}
|
||||
label={'FQDN'}
|
||||
type={'text'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div css={tw`mt-6`}>
|
||||
<Label htmlFor={'scheme'}>SSL</Label>
|
||||
|
||||
<div>
|
||||
<label css={tw`inline-flex items-center mr-2`}>
|
||||
<FormikField
|
||||
name={'scheme'}
|
||||
type={'radio'}
|
||||
value={'https'}
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
|
||||
</label>
|
||||
|
||||
<label css={tw`inline-flex items-center ml-2`}>
|
||||
<FormikField
|
||||
name={'scheme'}
|
||||
type={'radio'}
|
||||
value={'http'}
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={tw`mt-6`}>
|
||||
<Label htmlFor={'behindProxy'}>Behind Proxy</Label>
|
||||
|
||||
<div>
|
||||
<label css={tw`inline-flex items-center mr-2`}>
|
||||
<FormikField
|
||||
name={'behindProxy'}
|
||||
type={'radio'}
|
||||
value={false}
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>No</span>
|
||||
</label>
|
||||
|
||||
<label css={tw`inline-flex items-center ml-2`}>
|
||||
<FormikField
|
||||
name={'behindProxy'}
|
||||
type={'radio'}
|
||||
value
|
||||
/>
|
||||
<span css={tw`text-neutral-300 ml-2`}>Yes</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</AdminBox>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Formik>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue