Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

50
resources/scripts/components/server/console/ServerDetailsBlock.tsx
View file

@ -1,4 +1,3 @@
import React, { useEffect, useMemo, useState } from 'react';
import {
faClock,
faCloudDownloadAlt,
@ -8,18 +7,21 @@ import {
faMicrochip,
faWifi,
} from '@fortawesome/free-solid-svg-icons';
import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
import { ServerContext } from '@/state/server';
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { useEffect, useMemo, useState } from 'react';
import { SocketEvent, SocketRequest } from '@/components/server/events';
import UptimeDuration from '@/components/server/UptimeDuration';
import StatBlock from '@/components/server/console/StatBlock';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
import classNames from 'classnames';
import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
import { capitalize } from '@/lib/strings';
import { ServerContext } from '@/state/server';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
type Stats = Record<'memory' | 'cpu' | 'disk' | 'uptime' | 'rx' | 'tx', number>;
const getBackgroundColor = (value: number, max: number | null): string | undefined => {
function getBackgroundColor(value: number, max: number | null): string | undefined {
const delta = !max ? 0 : value / max;
if (delta > 0.8) {
@ -30,22 +32,24 @@ const getBackgroundColor = (value: number, max: number | null): string | undefin
}
return undefined;
};
}
const Limit = ({ limit, children }: { limit: string | null; children: React.ReactNode }) => (
<>
{children}
<span className={'ml-1 text-gray-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
</>
);
function Limit({ limit, children }: { limit: string | null; children: ReactNode }) {
return (
<>
{children}
<span className={'ml-1 text-gray-300 text-[70%] select-none'}>/ {limit || <>&infin;</>}</span>
</>
);
}
const ServerDetailsBlock = ({ className }: { className?: string }) => {
function ServerDetailsBlock({ className }: { className?: string }) {
const [stats, setStats] = useState<Stats>({ memory: 0, cpu: 0, disk: 0, uptime: 0, tx: 0, rx: 0 });
const status = ServerContext.useStoreState((state) => state.status.value);
const connected = ServerContext.useStoreState((state) => state.socket.connected);
const instance = ServerContext.useStoreState((state) => state.socket.instance);
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
const status = ServerContext.useStoreState(state => state.status.value);
const connected = ServerContext.useStoreState(state => state.socket.connected);
const instance = ServerContext.useStoreState(state => state.socket.instance);
const limits = ServerContext.useStoreState(state => state.server.data!.limits);
const textLimits = useMemo(
() => ({
@ -53,11 +57,11 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
memory: limits?.memory ? bytesToString(mbToBytes(limits.memory)) : null,
disk: limits?.disk ? bytesToString(mbToBytes(limits.disk)) : null,
}),
[limits]
[limits],
);
const allocation = ServerContext.useStoreState((state) => {
const match = state.server.data!.allocations.find((allocation) => allocation.isDefault);
const allocation = ServerContext.useStoreState(state => {
const match = state.server.data!.allocations.find(allocation => allocation.isDefault);
return !match ? 'n/a' : `${match.alias || ip(match.ip)}:${match.port}`;
});
@ -70,7 +74,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
instance.send(SocketRequest.SEND_STATS);
}, [instance, connected]);
useWebsocketEvent(SocketEvent.STATS, (data) => {
useWebsocketEvent(SocketEvent.STATS, data => {
let stats: any = {};
try {
stats = JSON.parse(data);
@ -135,6 +139,6 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
</StatBlock>
</div>
);
};
}
export default ServerDetailsBlock;