Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

admin(ui): use new node port columns

Browse source
This commit is contained in:
Matthew Penner 2021-02-11 10:21:49 -07:00
parent 5f56ff0fed
commit 3c2094890a
7 changed files with 160 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/scripts/api/admin/nodes/getNodes.ts
View file

@ -11,6 +11,10 @@ export interface Node {
description: string | null;
locationId: number;
fqdn: string;
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
scheme: string;
behindProxy: boolean;
maintenanceMode: boolean;
@ -19,8 +23,6 @@ export interface Node {
disk: number;
diskOverallocate: number;
uploadSize: number;
daemonListen: number;
daemonSftp: number;
daemonBase: string;
createdAt: Date;
updatedAt: Date;
@ -38,6 +40,10 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
description: attributes.description,
locationId: attributes.location_id,
fqdn: attributes.fqdn,
listenPortHTTP: attributes.listen_port_http,
publicPortHTTP: attributes.public_port_http,
listenPortSFTP: attributes.listen_port_sftp,
publicPortSFTP: attributes.public_port_sftp,
scheme: attributes.scheme,
behindProxy: attributes.behind_proxy,
maintenanceMode: attributes.maintenance_mode,
@ -46,8 +52,6 @@ export const rawDataToNode = ({ attributes }: FractalResponseData): Node => ({
disk: attributes.disk,
diskOverallocate: attributes.disk_overallocate,
uploadSize: attributes.upload_size,
daemonListen: attributes.daemon_listen,
daemonSftp: attributes.daemon_sftp,
daemonBase: attributes.daemon_base,
createdAt: new Date(attributes.created_at),
updatedAt: new Date(attributes.updated_at),

4
resources/scripts/api/admin/nodes/updateNode.ts
View file

@ -1,10 +1,10 @@
import http from '@/api/http';
import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';
export default (id: number, name: string, description: string | null, include: string[] = []): Promise<Node> => {
export default (id: number, node: Partial<Node>, include: string[] = []): Promise<Node> => {
return new Promise((resolve, reject) => {
http.patch(`/api/application/nodes/${id}`, {
name, description,
...node,
}, { params: { include: include.join(',') } })
.then(({ data }) => resolve(rawDataToNode(data)))
.catch(reject);

1
resources/scripts/components/admin/databases/DatabaseEditContainer.tsx
View file

@ -134,6 +134,7 @@ const EditInformationContainer = () => {
name={'password'}
label={'Password'}
type={'password'}
placeholder={'••••••••'}
/>
</div>
</div>

13
resources/scripts/components/admin/nodes/NodeEditContainer.tsx
View file

@ -1,5 +1,3 @@
import AdminBox from '@/components/admin/AdminBox';
import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import tw from 'twin.macro';
@ -12,6 +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 NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
interface ctx {
node: Node | undefined;
@ -119,10 +120,14 @@ const NodeEditContainer = () => {
</Route>
<Route path={`${match.path}/settings`} exact>
<div css={tw`flex flex-row`}>
<div css={tw`w-full flex flex-col`}>
<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`}>
<NodeLimitContainer/>
</div>
</div>
</Route>

122
resources/scripts/components/admin/nodes/NodeLimitContainer.tsx Normal file
View file

@ -0,0 +1,122 @@
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { number, object } from 'yup';
import Button from '@/components/elements/Button';
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;
}
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 = ({ 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, isValid }) => (
<React.Fragment>
<AdminBox title={'Limits'} css={tw`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>
<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-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'diskOverallocate'}
name={'diskOverallocate'}
label={'Disk Overallocate'}
type={'number'}
/>
</div>
</div>
<div css={tw`w-full flex flex-row items-center`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save
</Button>
</div>
</div>
</Form>
</AdminBox>
</React.Fragment>
)
}
</Formik>
);
};

34
resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
View file

@ -1,4 +1,3 @@
import LocationSelect from '@/components/admin/nodes/LocationSelect';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
@ -11,6 +10,7 @@ import { Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import LocationSelect from '@/components/admin/nodes/LocationSelect';
interface Values {
public: boolean;
@ -18,8 +18,8 @@ interface Values {
description: string;
locationId: number;
fqdn: string;
listenPort: number;
publicPort: number;
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
}
@ -36,11 +36,11 @@ export default () => {
);
}
const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('database');
const submit = ({ name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, name, description)
.then(() => setNode({ ...node, name, description }))
updateNode(node.id, { name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
.then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
@ -57,10 +57,10 @@ export default () => {
description: node.description || '',
locationId: node.locationId,
fqdn: node.fqdn,
listenPort: node.daemonListen,
publicPort: node.daemonListen,
listenPortSFTP: node.daemonSftp,
publicPortSFTP: node.daemonSftp,
listenPortHTTP: node.listenPortHTTP,
publicPortHTTP: node.publicPortHTTP,
listenPortSFTP: node.listenPortSFTP,
publicPortSFTP: node.publicPortSFTP,
}}
validationSchema={object().shape({
name: string().required().max(191),
@ -108,18 +108,18 @@ export default () => {
<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={'listenPort'}
name={'listenPort'}
label={'Listen Port'}
id={'listenPortHTTP'}
name={'listenPortHTTP'}
label={'HTTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`md:w-full md:flex md:flex-col md:ml-4 mb-6 md:mb-0`}>
<Field
id={'publicPort'}
name={'publicPort'}
label={'Public Port'}
id={'publicPortHTTP'}
name={'publicPortHTTP'}
label={'HTTP Public Port'}
type={'number'}
/>
</div>

2
resources/scripts/components/admin/servers/ServersContainer.tsx
View file

@ -142,7 +142,7 @@ const UsersContainer = () => {
</div>
<div css={tw`text-sm text-neutral-400`}>
{server.relations.node?.fqdn}:{server.relations.node?.daemonListen}
{server.relations.node?.fqdn}
</div>
</NavLink>
</td>