StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Network tab changes

Browse source 
Allows address feild to be copied to the clipboard when clicked
If alias is used changes it to hostname instead of ip address ( might just make it say address as that would cover both? )
Fixed overflow for allocations with a long alias
This commit is contained in:
Charles Morgan 2020-10-31 16:16:41 -04:00
parent ff64220741
commit 394cd815d2
No known key found for this signature in database
GPG key ID: D71946CD723249BD
4 changed files with 98 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -14,6 +14,7 @@ import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import useFlash from '@/plugins/useFlash';
import { ServerContext } from '@/state/server';
import CopyOnClick from '@/components/elements/CopyOnClick';
const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
@ -43,11 +44,12 @@ const AllocationRow = ({ allocation, onSetPrimary, onNotesChanged }: Props) => {
<GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-no-wrap mt-2`}>
<div css={tw`flex items-center w-full md:w-auto`}>
<div css={tw`pl-4 pr-6 text-neutral-400`}>
<FontAwesomeIcon icon={faNetworkWired}/>
<FontAwesomeIcon icon={faNetworkWired} />
</div>
<div css={tw`mr-4 flex-1 md:w-40`}>
<Code>{allocation.alias || allocation.ip}</Code>
<Label>IP Address</Label>
{allocation.alias ? <CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={allocation.ip}><Code>{allocation.ip}</Code></CopyOnClick>}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div>
<div css={tw`w-16 md:w-24 overflow-hidden`}>
<Code>{allocation.port}</Code>