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 ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
|
||||||
import UsersContainer from '@/components/server/users/UsersContainer';
|
import UsersContainer from '@/components/server/users/UsersContainer';
|
||||||
import BackupContainer from '@/components/server/backups/BackupContainer';
|
import BackupContainer from '@/components/server/backups/BackupContainer';
|
||||||
import NetworkContainer from '@/components/server/network/NetworkContainer';
|
|
||||||
import StartupContainer from '@/components/server/startup/StartupContainer';
|
import StartupContainer from '@/components/server/startup/StartupContainer';
|
||||||
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
|
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
|
||||||
import SettingsContainer from '@/components/server/settings/SettingsContainer';
|
import SettingsContainer from '@/components/server/settings/SettingsContainer';
|
||||||
@ -116,12 +115,6 @@ export default {
|
|||||||
name: 'Backups',
|
name: 'Backups',
|
||||||
component: BackupContainer,
|
component: BackupContainer,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/network',
|
|
||||||
permission: 'allocation.*',
|
|
||||||
name: 'Network',
|
|
||||||
component: NetworkContainer,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/startup',
|
path: '/startup',
|
||||||
permission: 'startup.*',
|
permission: 'startup.*',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user