Alex/Pterodactyl-Panel
1
1
Fork 1
mirror of https://github.com/pterodactyl/panel.git synced 2024-11-23 01:22:30 +01:00
Code Issues Releases Wiki Activity

Show allocated ports on settings page

Browse Source
This commit is contained in:
Dane Everitt 2020-07-08 21:42:37 -07:00
parent 7b5139b2b1
commit 5c18fd1f0c
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
5 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/scripts/api/server/getServer.ts
View File

@ -4,7 +4,7 @@ export interface Allocation {
ip: string;
alias: string | null;
port: number;
default: boolean;
isDefault: boolean;
}
export interface Server {
@ -49,7 +49,7 @@ export const rawDataToServerObject = (data: any): Server => ({
ip: datum.ip,
alias: datum.ip_alias,
port: datum.port,
default: datum.is_default,
isDefault: datum.is_default,
})),
limits: { ...data.limits },
featureLimits: { ...data.feature_limits },

2
resources/scripts/components/dashboard/ServerRow.tsx
View File

@ -65,7 +65,7 @@ export default ({ server }: { server: Server }) => {
<FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
<p css={tw`text-sm text-neutral-400 ml-2`}>
{
server.allocations.filter(alloc => alloc.default).map(allocation => (
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
<span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
))
}

2
resources/scripts/components/dashboard/search/SearchModal.tsx
View File

@ -112,7 +112,7 @@ export default ({ ...props }: Props) => {
<p css={tw`text-sm`}>{server.name}</p>
<p css={tw`mt-1 text-xs text-neutral-400`}>
{
server.allocations.filter(alloc => alloc.default).map(allocation => (
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
<span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
))
}

63
resources/scripts/components/server/settings/ServerAllocationsContainer.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import styled from 'styled-components/macro';
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
const Row = styled.div`
${tw`flex items-center py-2 pl-4 pr-5 border-l-4 border-transparent transition-colors duration-150`};
& svg {
${tw`transition-colors duration-150`};
}
&:hover {
${tw`border-cyan-400`};
svg {
${tw`text-neutral-100`};
}
${Label} {
${tw`text-neutral-200`};
}
}
`;
export default () => {
const allocations = ServerContext.useStoreState(state => state.server.data!.allocations);
return (
<TitledGreyBox title={'Allocated Ports'}>
{allocations.map(({ ip, port, alias, isDefault }, index) => (
<Row key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
<div css={tw`mr-4 text-neutral-400`}>
<FontAwesomeIcon icon={faNetworkWired}/>
</div>
<div css={tw`mr-4`}>
<Code>{alias || ip}</Code>
<Label>IP Address</Label>
</div>
<div>
<Code>:{port}</Code>
<Label>Port</Label>
</div>
<div css={tw`flex-1 text-right`}>
{isDefault ?
<span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
Default
</span>
:
null
}
</div>
</Row>
))}
</TitledGreyBox>
);
};

14
resources/scripts/components/server/settings/SettingsContainer.tsx
View File

@ -13,6 +13,7 @@ import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import { LinkButton } from '@/components/elements/Button';
import ServerAllocationsContainer from '@/components/server/settings/ServerAllocationsContainer';
export default () => {
const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
@ -22,9 +23,9 @@ export default () => {
<PageContentBlock>
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
<div css={tw`md:flex`}>
<Can action={'file.sftp'}>
<div css={tw`w-full md:flex-1 md:mr-10`}>
<TitledGreyBox title={'SFTP Details'}>
<div css={tw`w-full md:flex-1 md:mr-10`}>
<Can action={'file.sftp'}>
<TitledGreyBox title={'SFTP Details'} css={tw`mb-6 md:mb-10`}>
<div>
<Label>Server Address</Label>
<Input
@ -59,9 +60,7 @@ export default () => {
</div>
</div>
</TitledGreyBox>
</div>
</Can>
<div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
</Can>
<Can action={'settings.rename'}>
<div css={tw`mb-6 md:mb-10`}>
<RenameServerBox/>
@ -71,6 +70,9 @@ export default () => {
<ReinstallServerBox/>
</Can>
</div>
<div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
<ServerAllocationsContainer/>
</div>
</div>
</PageContentBlock>
);