mirror of
https://github.com/pelican-dev/panel.git
synced 2025-10-31 14:36:52 +01:00
Remove network tab
This commit is contained in:
Lance Pioch
parent
343a5b81bc
commit
7c8b204d13
@ -1,119 +0,0 @@
|
||||
import React, { memo, useCallback, useState } from 'react';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import tw from 'twin.macro';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
|
||||
import InputSpinner from '@/components/elements/InputSpinner';
|
||||
import { Textarea } from '@/components/elements/Input';
|
||||
import Can from '@/components/elements/Can';
|
||||
import { Button } from '@/components/elements/button/index';
|
||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||
import { Allocation } from '@/api/server/getServer';
|
||||
import styled from 'styled-components/macro';
|
||||
import { debounce } from 'debounce';
|
||||
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
|
||||
import { useFlashKey } from '@/plugins/useFlash';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import CopyOnClick from '@/components/elements/CopyOnClick';
|
||||
import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
|
||||
import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
|
||||
import getServerAllocations from '@/api/swr/getServerAllocations';
|
||||
import { ip } from '@/lib/formatters';
|
||||
import Code from '@/components/elements/Code';
|
||||
|
||||
const Label = styled.label`
|
||||
${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
allocation: Allocation;
|
||||
}
|
||||
|
||||
const AllocationRow = ({ allocation }: Props) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const { mutate } = getServerAllocations();
|
||||
|
||||
const onNotesChanged = useCallback((id: number, notes: string) => {
|
||||
mutate((data) => data?.map((a) => (a.id === id ? { ...a, notes } : a)), false);
|
||||
}, []);
|
||||
|
||||
const setAllocationNotes = debounce((notes: string) => {
|
||||
setLoading(true);
|
||||
clearFlashes();
|
||||
|
||||
setServerAllocationNotes(uuid, allocation.id, notes)
|
||||
.then(() => onNotesChanged(allocation.id, notes))
|
||||
.catch((error) => clearAndAddHttpError(error))
|
||||
.then(() => setLoading(false));
|
||||
}, 750);
|
||||
|
||||
const setPrimaryAllocation = () => {
|
||||
clearFlashes();
|
||||
mutate((data) => data?.map((a) => ({ ...a, isDefault: a.id === allocation.id })), false);
|
||||
|
||||
setPrimaryServerAllocation(uuid, allocation.id).catch((error) => {
|
||||
clearAndAddHttpError(error);
|
||||
mutate();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
|
||||
<div className={'flex items-center w-full md:w-auto'}>
|
||||
<div className={'pl-4 pr-6 text-neutral-400'}>
|
||||
<FontAwesomeIcon icon={faNetworkWired} />
|
||||
</div>
|
||||
<div className={'mr-4 flex-1 md:w-40'}>
|
||||
{allocation.alias ? (
|
||||
<CopyOnClick text={allocation.alias}>
|
||||
<Code dark className={'w-40 truncate'}>
|
||||
{allocation.alias}
|
||||
</Code>
|
||||
</CopyOnClick>
|
||||
) : (
|
||||
<CopyOnClick text={ip(allocation.ip)}>
|
||||
<Code dark>{ip(allocation.ip)}</Code>
|
||||
</CopyOnClick>
|
||||
)}
|
||||
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
|
||||
</div>
|
||||
<div className={'w-16 md:w-24 overflow-hidden'}>
|
||||
<Code dark>{allocation.port}</Code>
|
||||
<Label>Port</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
|
||||
<InputSpinner visible={loading}>
|
||||
<Textarea
|
||||
className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
|
||||
placeholder={'Notes'}
|
||||
defaultValue={allocation.notes || undefined}
|
||||
onChange={(e) => setAllocationNotes(e.currentTarget.value)}
|
||||
/>
|
||||
</InputSpinner>
|
||||
</div>
|
||||
<div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
|
||||
{allocation.isDefault ? (
|
||||
<Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>
|
||||
Primary
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Can action={'allocation.delete'}>
|
||||
<DeleteAllocationButton allocation={allocation.id} />
|
||||
</Can>
|
||||
<Can action={'allocation.update'}>
|
||||
<Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
|
||||
Make Primary
|
||||
</Button.Text>
|
||||
</Can>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</GreyRowBox>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(AllocationRow, isEqual);
|
||||
@ -1,61 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import tw from 'twin.macro';
|
||||
import Icon from '@/components/elements/Icon';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
|
||||
import getServerAllocations from '@/api/swr/getServerAllocations';
|
||||
import { useFlashKey } from '@/plugins/useFlash';
|
||||
import { Dialog } from '@/components/elements/dialog';
|
||||
import { Button } from '@/components/elements/button/index';
|
||||
|
||||
interface Props {
|
||||
allocation: number;
|
||||
}
|
||||
|
||||
const DeleteAllocationButton = ({ allocation }: Props) => {
|
||||
const [confirm, setConfirm] = useState(false);
|
||||
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
|
||||
|
||||
const { mutate } = getServerAllocations();
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
|
||||
|
||||
const deleteAllocation = () => {
|
||||
clearFlashes();
|
||||
|
||||
mutate((data) => data?.filter((a) => a.id !== allocation), false);
|
||||
setServerFromState((s) => ({ ...s, allocations: s.allocations.filter((a) => a.id !== allocation) }));
|
||||
|
||||
deleteServerAllocation(uuid, allocation).catch((error) => {
|
||||
clearAndAddHttpError(error);
|
||||
mutate();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog.Confirm
|
||||
open={confirm}
|
||||
onClose={() => setConfirm(false)}
|
||||
title={'Remove Allocation'}
|
||||
confirm={'Delete'}
|
||||
onConfirmed={deleteAllocation}
|
||||
>
|
||||
This allocation will be immediately removed from your server.
|
||||
</Dialog.Confirm>
|
||||
<Button.Danger
|
||||
variant={Button.Variants.Secondary}
|
||||
size={Button.Sizes.Small}
|
||||
shape={Button.Shapes.IconSquare}
|
||||
type={'button'}
|
||||
onClick={() => setConfirm(true)}
|
||||
>
|
||||
<Icon icon={faTrashAlt} css={tw`w-3 h-auto`} />
|
||||
</Button.Danger>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteAllocationButton;
|
||||
@ -1,84 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import { useFlashKey } from '@/plugins/useFlash';
|
||||
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import AllocationRow from '@/components/server/network/AllocationRow';
|
||||
import Button from '@/components/elements/Button';
|
||||
import createServerAllocation from '@/api/server/network/createServerAllocation';
|
||||
import tw from 'twin.macro';
|
||||
import Can from '@/components/elements/Can';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import getServerAllocations from '@/api/swr/getServerAllocations';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';
|
||||
|
||||
const NetworkContainer = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
|
||||
const allocationLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.allocations);
|
||||
const allocations = ServerContext.useStoreState((state) => state.server.data!.allocations, isEqual);
|
||||
const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
|
||||
|
||||
const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
|
||||
const { data, error, mutate } = getServerAllocations();
|
||||
|
||||
useEffect(() => {
|
||||
mutate(allocations);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
clearAndAddHttpError(error);
|
||||
}, [error]);
|
||||
|
||||
useDeepCompareEffect(() => {
|
||||
if (!data) return;
|
||||
|
||||
setServerFromState((state) => ({ ...state, allocations: data }));
|
||||
}, [data]);
|
||||
|
||||
const onCreateAllocation = () => {
|
||||
clearFlashes();
|
||||
|
||||
setLoading(true);
|
||||
createServerAllocation(uuid)
|
||||
.then((allocation) => {
|
||||
setServerFromState((s) => ({ ...s, allocations: s.allocations.concat(allocation) }));
|
||||
return mutate(data?.concat(allocation), false);
|
||||
})
|
||||
.catch((error) => clearAndAddHttpError(error))
|
||||
.then(() => setLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<ServerContentBlock showFlashKey={'server:network'} title={'Network'}>
|
||||
{!data ? (
|
||||
<Spinner size={'large'} centered />
|
||||
) : (
|
||||
<>
|
||||
{data.map((allocation) => (
|
||||
<AllocationRow key={`${allocation.ip}:${allocation.port}`} allocation={allocation} />
|
||||
))}
|
||||
{allocationLimit > 0 && (
|
||||
<Can action={'allocation.create'}>
|
||||
<SpinnerOverlay visible={loading} />
|
||||
<div css={tw`mt-6 sm:flex items-center justify-end`}>
|
||||
<p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
|
||||
You are currently using {data.length} of {allocationLimit} allowed allocations for
|
||||
this server.
|
||||
</p>
|
||||
{allocationLimit > data.length && (
|
||||
<Button css={tw`w-full sm:w-auto`} color={'primary'} onClick={onCreateAllocation}>
|
||||
Create Allocation
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Can>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ServerContentBlock>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkContainer;
|
||||
@ -4,7 +4,6 @@ import DatabasesContainer from '@/components/server/databases/DatabasesContainer
|
||||
import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
|
||||
import UsersContainer from '@/components/server/users/UsersContainer';
|
||||
import BackupContainer from '@/components/server/backups/BackupContainer';
|
||||
import NetworkContainer from '@/components/server/network/NetworkContainer';
|
||||
import StartupContainer from '@/components/server/startup/StartupContainer';
|
||||
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
|
||||
import SettingsContainer from '@/components/server/settings/SettingsContainer';
|
||||
@ -116,12 +115,6 @@ export default {
|
||||
name: 'Backups',
|
||||
component: BackupContainer,
|
||||
},
|
||||
{
|
||||
path: '/network',
|
||||
permission: 'allocation.*',
|
||||
name: 'Network',
|
||||
component: NetworkContainer,
|
||||
},
|
||||
{
|
||||
path: '/startup',
|
||||
permission: 'startup.*',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user