Add network info

Adds network info to the server details section, Also copied to clipboard when clicked.

Closes https://github.com/pterodactyl/panel/issues/2585
This commit is contained in:
Charles Morgan 2020-11-01 02:50:35 -05:00
parent 9ff691bfde
commit e80b125543
No known key found for this signature in database
GPG key ID: D71946CD723249BD

View file

@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import tw from 'twin.macro'; import tw from 'twin.macro';
import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons'; import { faCircle, faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { bytesToHuman, megabytesToHuman } from '@/helpers'; import { bytesToHuman, megabytesToHuman } from '@/helpers';
import TitledGreyBox from '@/components/elements/TitledGreyBox'; import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import CopyOnClick from '@/components/elements/CopyOnClick';
interface Stats { interface Stats {
memory: number; memory: number;
@ -49,6 +50,9 @@ const ServerDetailsBlock = () => {
const name = ServerContext.useStoreState(state => state.server.data!.name); const name = ServerContext.useStoreState(state => state.server.data!.name);
const limits = ServerContext.useStoreState(state => state.server.data!.limits); const limits = ServerContext.useStoreState(state => state.server.data!.limits);
const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map(
allocation => allocation.alias + ':' + allocation.port || allocation.ip + ':' + allocation.port
)).toString();
const disklimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited'; const disklimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited'; const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
@ -66,6 +70,12 @@ const ServerDetailsBlock = () => {
/> />
 {!status ? 'Connecting...' : status}  {!status ? 'Connecting...' : status}
</p> </p>
<CopyOnClick text={primaryAllocation}>
<p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faEthernet} fixedWidth css={tw`mr-1`}/>
<code css={tw`ml-1`}>{primaryAllocation}</code>
</p>
</CopyOnClick>
<p css={tw`text-xs mt-2`}> <p css={tw`text-xs mt-2`}>
<FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}% <FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {stats.cpu.toFixed(2)}%
</p> </p>