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:
parent
9ff691bfde
commit
e80b125543
1 changed files with 11 additions and 1 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue