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

ui(admin): fix eslint errors, add CreateAllocationForm

Browse source
This commit is contained in:
Matthew Penner 2021-07-20 13:20:41 -06:00
parent d32b3a0473
commit 84b207eddb
14 changed files with 311 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

14
resources/scripts/components/admin/databases/DatabasesContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getDatabases, { Context as DatabasesContext, Filters } from '@/api/admin/databases/getDatabases';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';

14
resources/scripts/components/admin/locations/LocationsContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getLocations, { Context as LocationsContext, Filters } from '@/api/admin/locations/getLocations';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import NewLocationButton from '@/components/admin/locations/NewLocationButton';
import CopyOnClick from '@/components/elements/CopyOnClick';

14
resources/scripts/components/admin/mounts/MountsContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getMounts, { Context as MountsContext, Filters } from '@/api/admin/mounts/getMounts';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -7,17 +7,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';

14
resources/scripts/components/admin/nests/NestEggTable.tsx
View file

@ -1,21 +1,11 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getEggs, { Context as EggsContext, Filters } from '@/api/admin/nests/getEggs';
import useFlash from '@/plugins/useFlash';
import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import { Context } from '@/components/admin/nests/NestEditContainer';
const RowCheckbox = ({ id }: { id: number}) => {

14
resources/scripts/components/admin/nests/NestsContainer.tsx
View file

@ -1,5 +1,5 @@
import CopyOnClick from '@/components/elements/CopyOnClick';
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getNests, { Context as NestsContext, Filters } from '@/api/admin/nests/getNests';
import NewNestButton from '@/components/admin/nests/NewNestButton';
import FlashMessageRender from '@/components/FlashMessageRender';
@ -9,17 +9,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
const RowCheckbox = ({ id }: { id: number}) => {
const isChecked = AdminContext.useStoreState(state => state.nests.selectedNests.indexOf(id) >= 0);

97
resources/scripts/components/admin/nodes/CreateAllocationForm.tsx Normal file
View file

@ -0,0 +1,97 @@
import { Form, Formik, FormikHelpers } from 'formik';
import React, { useEffect, useState } from 'react';
import tw from 'twin.macro';
import { array, number, object, string } from 'yup';
import getAllocations from '@/api/admin/nodes/getAllocations';
import Button from '@/components/elements/Button';
import SelectField, { Option } from '@/components/elements/SelectField';
interface Values {
ips: string[];
ports: number[];
}
const distinct = (value: any, index: any, self: any) => {
return self.indexOf(value) === index;
};
function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
const [ ips, setIPs ] = useState<Option[]>([]);
const [ ports ] = useState<Option[]>([]);
useEffect(() => {
getAllocations(nodeId)
.then(allocations => {
setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
return { value: ip, label: ip };
}));
});
}, [ nodeId ]);
const isValidIP = (inputValue: string): boolean => {
// TODO: Better way of checking for a valid ip (and CIDR).
return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
};
const isValidPort = (inputValue: string): boolean => {
// TODO: Better way of checking for a valid port (and port range)
return inputValue.match(/^([0-9-]+)$/) !== null;
};
const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
setSubmitting(false);
};
return (
<Formik
onSubmit={submit}
initialValues={{
ips: [] as string[],
ports: [] as number[],
}}
validationSchema={object().shape({
ips: array(string()).min(1, 'You must select at least one ip address.'),
ports: array(number()).min(1, 'You must select at least one port.'),
})}
>
{
({ isSubmitting, isValid }) => (
<Form>
<SelectField
id={'ips'}
name={'ips'}
label={'IPs and CIDRs'}
options={ips}
isValidNewOption={isValidIP}
isMulti
isSearchable
isCreatable
css={tw`mb-6`}
/>
<SelectField
id={'ports'}
name={'ports'}
label={'Ports'}
options={ports}
isValidNewOption={isValidPort}
isMulti
isSearchable
isCreatable
/>
<div css={tw`w-full flex flex-row items-center mt-6`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Create Allocations
</Button>
</div>
</div>
</Form>
)
}
</Formik>
);
}
export default CreateAllocationForm;

84
resources/scripts/components/admin/nodes/NodeAllocationContainer.tsx
View file

@ -1,90 +1,14 @@
import Label from '@/components/elements/Label';
import React, { useEffect, useState } from 'react';
import AdminBox from '@/components/admin/AdminBox';
import Creatable from 'react-select/creatable';
import { ActionMeta, GroupTypeBase, InputActionMeta, ValueType } from 'react-select/src/types';
import { SelectStyle } from '@/components/elements/Select2';
import tw from 'twin.macro';
import getAllocations from '@/api/admin/nodes/getAllocations';
import React from 'react';
import { useRouteMatch } from 'react-router-dom';
interface Option {
value: string;
label: string;
}
const distinct = (value: any, index: any, self: any) => {
return self.indexOf(value) === index;
};
import AdminBox from '@/components/admin/AdminBox';
import CreateAllocationForm from '@/components/admin/nodes/CreateAllocationForm';
export default () => {
const match = useRouteMatch<{ id: string }>();
const [ ips, setIPs ] = useState<Option[]>([]);
const [ ports ] = useState<Option[]>([]);
useEffect(() => {
getAllocations(match.params.id)
.then(allocations => {
setIPs(allocations.map(a => a.ip).filter(distinct).map(ip => {
return { value: ip, label: ip };
}));
});
}, []);
const onChange = (value: ValueType<Option, any>, action: ActionMeta<any>) => {
console.log({
event: 'onChange',
value,
action,
});
};
const onInputChange = (newValue: string, actionMeta: InputActionMeta) => {
console.log({
event: 'onInputChange',
newValue,
actionMeta,
});
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const isValidNewOption1 = (inputValue: string, selectValue: ValueType<Option, any>, selectOptions: ReadonlyArray<Option | GroupTypeBase<Option>>): boolean => {
return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const isValidNewOption2 = (inputValue: string, selectValue: ValueType<Option, any>, selectOptions: ReadonlyArray<Option | GroupTypeBase<Option>>): boolean => {
return inputValue.match(/^([0-9-]+)$/) !== null;
};
return (
<AdminBox title={'Allocations'}>
<div css={tw`mb-6`}>
<Label>IPs and CIDRs</Label>
<Creatable
options={ips}
styles={SelectStyle}
onChange={onChange}
onInputChange={onInputChange}
isValidNewOption={isValidNewOption1}
isMulti
isSearchable
/>
</div>
<div css={tw`mb-6`}>
<Label>Ports</Label>
<Creatable
options={ports}
styles={SelectStyle}
// onChange={onChange}
// onInputChange={onInputChange}
isValidNewOption={isValidNewOption2}
isMulti
isSearchable
/>
</div>
<CreateAllocationForm nodeId={match.params.id}/>
</AdminBox>
);
};

14
resources/scripts/components/admin/nodes/NodesContainer.tsx
View file

@ -1,5 +1,5 @@
import { Filters } from '@/api/admin/servers/getServers';
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getNodes, { Context as NodesContext } from '@/api/admin/nodes/getNodes';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';
@ -8,17 +8,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';
import { bytesToHuman, megabytesToBytes } from '@/helpers';

14
resources/scripts/components/admin/roles/RolesContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getRoles, { Context as RolesContext, Filters } from '@/api/admin/roles/getRoles';
import { AdminContext } from '@/state/admin';
import NewRoleButton from '@/components/admin/roles/NewRoleButton';
@ -8,17 +8,7 @@ import { NavLink, useRouteMatch } from 'react-router-dom';
import tw from 'twin.macro';
import AdminContentBlock from '@/components/admin/AdminContentBlock';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
TableBody,
TableHead,
TableHeader,
TableRow,
Pagination,
Loading,
NoItems,
ContentWrapper,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, TableRow, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import CopyOnClick from '@/components/elements/CopyOnClick';
const RowCheckbox = ({ id }: { id: number }) => {

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

@ -1,16 +1,7 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import getServers, { Context as ServersContext, Filters } from '@/api/admin/servers/getServers';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import AdminTable, {
ContentWrapper,
Loading,
NoItems,
Pagination,
TableBody,
TableHead,
TableHeader,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import CopyOnClick from '@/components/elements/CopyOnClick';
import FlashMessageRender from '@/components/FlashMessageRender';

13
resources/scripts/components/admin/users/UsersContainer.tsx
View file

@ -1,17 +1,8 @@
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect } from 'react';
import AdminCheckbox from '@/components/admin/AdminCheckbox';
import CopyOnClick from '@/components/elements/CopyOnClick';
import getUsers, { Context as UsersContext, Filters } from '@/api/admin/users/getUsers';
import AdminTable, {
ContentWrapper,
Loading,
NoItems,
Pagination,
TableBody,
TableHead,
TableHeader,
useTableHooks
} from '@/components/admin/AdminTable';
import AdminTable, { TableBody, TableHead, TableHeader, Pagination, Loading, NoItems, ContentWrapper, useTableHooks } from '@/components/admin/AdminTable';
import Button from '@/components/elements/Button';
import FlashMessageRender from '@/components/FlashMessageRender';
import useFlash from '@/plugins/useFlash';