Update server listing and associated logic to pull from the panel dynamiacally

app/Http/Controllers/Api/Application/ApplicationApiController.php

@@ -5,6 +5,7 @@ namespace Pterodactyl\Http\Controllers\Api\Application;
 use Illuminate\Http\Request;
 use Webmozart\Assert\Assert;
 use Illuminate\Http\Response;
+use Illuminate\Support\Collection;
 use Illuminate\Container\Container;
 use Pterodactyl\Http\Controllers\Controller;
 use Pterodactyl\Extensions\Spatie\Fractalistic\Fractal;
@@ -30,7 +31,10 @@ abstract class ApplicationApiController extends Controller
         Container::getInstance()->call([$this, 'loadDependencies']);
 
         // Parse all of the includes to use on this request.
-        $includes = collect(explode(',', $this->request->input('include', '')))->map(function ($value) {
+        $input = $this->request->input('include', []);
+        $input = is_array($input) ? $input : explode(',', $input);
+
+        $includes = (new Collection($input))->map(function ($value) {
             return trim($value);
         })->filter()->toArray();
 

app/Http/Controllers/Api/Client/ClientController.php

@@ -52,7 +52,7 @@ class ClientController extends ClientApiController
                 break;
         }
 
-        $servers = $this->repository->
+        $servers = $this->repository
             ->setSearchTerm($request->input('query'))
             ->filterUserAccessServers(
                 $request->user(), $filter, config('pterodactyl.paginate.frontend.servers')

app/Http/Controllers/Api/Client/Servers/ResourceUtilizationController.php

@@ -3,21 +3,45 @@
 namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
 
 use Pterodactyl\Models\Server;
+use Pterodactyl\Repositories\Wings\WingsServerRepository;
 use Pterodactyl\Transformers\Api\Client\StatsTransformer;
 use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
 use Pterodactyl\Http\Requests\Api\Client\Servers\GetServerRequest;
 
 class ResourceUtilizationController extends ClientApiController
 {
+    /**
+     * @var \Pterodactyl\Repositories\Wings\WingsServerRepository
+     */
+    private $repository;
+
+    /**
+     * ResourceUtilizationController constructor.
+     *
+     * @param \Pterodactyl\Repositories\Wings\WingsServerRepository $repository
+     */
+    public function __construct(WingsServerRepository $repository)
+    {
+        parent::__construct();
+
+        $this->repository = $repository;
+    }
+
     /**
      * Return the current resource utilization for a server.
      *
      * @param \Pterodactyl\Http\Requests\Api\Client\Servers\GetServerRequest $request
      * @return array
+     *
+     * @throws \Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException
      */
-    public function index(GetServerRequest $request): array
+    public function __invoke(GetServerRequest $request): array
     {
-        return $this->fractal->item($request->getModel(Server::class))
+        $stats = $this->repository
+            ->setServer($request->getModel(Server::class))
+            ->getDetails();
+
+        return $this->fractal->item($stats)
             ->transformWith($this->getTransformer(StatsTransformer::class))
             ->toArray();
     }

app/Http/Controllers/Base/IndexController.php

@@ -4,27 +4,11 @@ namespace Pterodactyl\Http\Controllers\Base;
 
 use Illuminate\Http\Request;
 use Pterodactyl\Models\User;
-use Illuminate\Http\Response;
-use GuzzleHttp\Exception\ConnectException;
-use GuzzleHttp\Exception\RequestException;
 use Pterodactyl\Http\Controllers\Controller;
-use Symfony\Component\HttpKernel\Exception\HttpException;
-use Pterodactyl\Services\DaemonKeys\DaemonKeyProviderService;
 use Pterodactyl\Contracts\Repository\ServerRepositoryInterface;
-use Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface as DaemonServerRepositoryInterface;
 
 class IndexController extends Controller
 {
-    /**
-     * @var \Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface
-     */
-    protected $daemonRepository;
-
-    /**
-     * @var \Pterodactyl\Services\DaemonKeys\DaemonKeyProviderService
-     */
-    protected $keyProviderService;
-
     /**
      * @var \Pterodactyl\Contracts\Repository\ServerRepositoryInterface
      */
@@ -33,17 +17,10 @@ class IndexController extends Controller
     /**
      * IndexController constructor.
      *
-     * @param \Pterodactyl\Services\DaemonKeys\DaemonKeyProviderService          $keyProviderService
+     * @param \Pterodactyl\Contracts\Repository\ServerRepositoryInterface $repository
-     * @param \Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface $daemonRepository
-     * @param \Pterodactyl\Contracts\Repository\ServerRepositoryInterface        $repository
      */
-    public function __construct(
+    public function __construct(ServerRepositoryInterface $repository)
-        DaemonKeyProviderService $keyProviderService,
+    {
-        DaemonServerRepositoryInterface $daemonRepository,
-        ServerRepositoryInterface $repository
-    ) {
-        $this->daemonRepository = $daemonRepository;
-        $this->keyProviderService = $keyProviderService;
         $this->repository = $repository;
     }
 
@@ -61,34 +38,4 @@ class IndexController extends Controller
 
         return view('templates/base.core', ['servers' => $servers]);
     }
-
-    /**
-     * Returns status of the server in a JSON response used for populating active status list.
-     *
-     * @param \Illuminate\Http\Request $request
-     * @param string                   $uuid
-     * @return \Illuminate\Http\JsonResponse
-     * @throws \Exception
-     */
-    public function status(Request $request, $uuid)
-    {
-        $server = $this->repository->findFirstWhere([['uuidShort', '=', $uuid]]);
-        $token = $this->keyProviderService->handle($server, $request->user());
-
-        if (! $server->installed) {
-            return response()->json(['status' => 20]);
-        } elseif ($server->suspended) {
-            return response()->json(['status' => 30]);
-        }
-
-        try {
-            $response = $this->daemonRepository->setServer($server)->setToken($token)->details();
-        } catch (ConnectException $exception) {
-            throw new HttpException(Response::HTTP_GATEWAY_TIMEOUT, $exception->getMessage());
-        } catch (RequestException $exception) {
-            throw new HttpException(500, $exception->getMessage());
-        }
-
-        return response()->json(json_decode($response->getBody()));
-    }
 }

app/Models/Server.php

@@ -11,6 +11,50 @@ use Znck\Eloquent\Traits\BelongsToThrough;
 use Sofa\Eloquence\Contracts\CleansAttributes;
 use Sofa\Eloquence\Contracts\Validable as ValidableContract;
 
+/**
+ * @property int $id
+ * @property string|null $external_id
+ * @property string $uuid
+ * @property string $uuidShort
+ * @property int $node_id
+ * @property string $name
+ * @property string $description
+ * @property bool $skip_scripts
+ * @property bool $suspended
+ * @property int $owner_id
+ * @property int $memory
+ * @property int $swap
+ * @property int $disk
+ * @property int $io
+ * @property int $cpu
+ * @property bool $oom_disabled
+ * @property int $allocation_id
+ * @property int $nest_id
+ * @property int $egg_id
+ * @property int|null $pack_id
+ * @property string $startup
+ * @property string $image
+ * @property int $installed
+ * @property int $allocation_limit
+ * @property int $database_limit
+ * @property \Carbon\Carbon $created_at
+ * @property \Carbon\Carbon $updated_at
+ *
+ * @property \Pterodactyl\Models\User $user
+ * @property \Pterodactyl\Models\User[]|\Illuminate\Support\Collection $subusers
+ * @property \Pterodactyl\Models\Allocation $allocation
+ * @property \Pterodactyl\Models\Allocation[]|\Illuminate\Support\Collection $allocations
+ * @property \Pterodactyl\Models\Pack|null $pack
+ * @property \Pterodactyl\Models\Node $node
+ * @property \Pterodactyl\Models\Nest $nest
+ * @property \Pterodactyl\Models\Egg $egg
+ * @property \Pterodactyl\Models\EggVariable[]|\Illuminate\Support\Collection $variables
+ * @property \Pterodactyl\Models\Schedule[]|\Illuminate\Support\Collection $schedule
+ * @property \Pterodactyl\Models\Database[]|\Illuminate\Support\Collection $databases
+ * @property \Pterodactyl\Models\Location $location
+ * @property \Pterodactyl\Models\DaemonKey $key
+ * @property \Pterodactyl\Models\DaemonKey[]|\Illuminate\Support\Collection $keys
+ */
 class Server extends Model implements CleansAttributes, ValidableContract
 {
     use BelongsToThrough, Eloquence, Notifiable, Validable;

app/Providers/RepositoryServiceProvider.php

@@ -51,7 +51,7 @@ use Pterodactyl\Contracts\Repository\DatabaseHostRepositoryInterface;
 use Pterodactyl\Contracts\Repository\Daemon\CommandRepositoryInterface;
 use Pterodactyl\Contracts\Repository\ServerVariableRepositoryInterface;
 use Pterodactyl\Contracts\Repository\Daemon\ConfigurationRepositoryInterface;
-use Pterodactyl\Repositories\Daemon\ServerRepository as DaemonServerRepository;
+use Pterodactyl\Repositories\Wings\WingsServerRepository as DaemonServerRepository;
 use Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface as DaemonServerRepositoryInterface;
 
 class RepositoryServiceProvider extends ServiceProvider

app/Repositories/Wings/WingsServerRepository.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Pterodactyl\Repositories\Wings;
+
+use GuzzleHttp\Exception\TransferException;
+use Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException;
+
+class WingsServerRepository extends BaseWingsRepository
+{
+    /**
+     * Returns details about a server from the Daemon instance.
+     *
+     * @return array
+     * @throws \Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException
+     */
+    public function getDetails(): array
+    {
+        try {
+            $response = $this->getHttpClient()->get(
+                sprintf('/api/servers/%s', $this->getServer()->uuid)
+            );
+        } catch (TransferException $exception) {
+            throw new DaemonConnectionException($exception);
+        }
+
+        return json_decode($response->getBody()->__toString(), true);
+    }
+}

app/Transformers/Api/Client/StatsTransformer.php

@@ -2,28 +2,10 @@
 
 namespace Pterodactyl\Transformers\Api\Client;
 
-use Pterodactyl\Models\Server;
+use Illuminate\Support\Arr;
-use GuzzleHttp\Exception\RequestException;
-use Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException;
-use Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface;
 
 class StatsTransformer extends BaseClientTransformer
 {
-    /**
-     * @var \Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface
-     */
-    private $repository;
-
-    /**
-     * Perform dependency injection.
-     *
-     * @param \Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface $repository
-     */
-    public function handle(ServerRepositoryInterface $repository)
-    {
-        $this->repository = $repository;
-    }
-
     /**
      * @return string
      */
@@ -36,60 +18,21 @@ class StatsTransformer extends BaseClientTransformer
      * Transform stats from the daemon into a result set that can be used in
      * the client API.
      *
-     * @param \Pterodactyl\Models\Server $model
+     * @param array $data
      * @return array
-     *
-     * @throws \Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException
      */
-    public function transform(Server $model)
+    public function transform(array $data)
     {
-        try {
-            $stats = $this->repository->setServer($model)->details();
-        } catch (RequestException $exception) {
-            throw new DaemonConnectionException($exception);
-        }
-
-        $object = json_decode($stats->getBody()->getContents());
-
         return [
-            'state' => $this->transformState(object_get($object, 'status', 0)),
+            'current_state' => Arr::get($data, 'state', 'stopped'),
-            'memory' => [
+            'is_suspended' => Arr::get($data, 'suspended', false),
-                'current' => round(object_get($object, 'proc.memory.total', 0) / 1024 / 1024),
+            'resources' => [
-                'limit' => floatval($model->memory),
+                'memory_bytes' => Arr::get($data, 'resources.memory_bytes', 0),
+                'cpu_absolute' => Arr::get($data, 'resources.cpu_absolute', 0),
+                'disk_bytes' => Arr::get($data, 'resources.disk_bytes', 0),
+                'network_rx_bytes' => Arr::get($data, 'resources.network.rx_bytes', 0),
+                'network_tx_bytes' => Arr::get($data, 'resources.network.tx_bytes', 0),
             ],
-            'cpu' => [
-                'current' => object_get($object, 'proc.cpu.total', 0),
-                'cores' => object_get($object, 'proc.cpu.cores', []),
-                'limit' => floatval($model->cpu),
-            ],
-            'disk' => [
-                'current' => round(object_get($object, 'proc.disk.used', 0)),
-                'limit' => floatval($model->disk),
-                'io' => $model->io,
-            ],
-            'installed' => $model->installed === 1,
-            'suspended' => (bool) $model->suspended,
         ];
     }
-
-    /**
-     * Transform the state returned by the daemon into a human readable string.
-     *
-     * @param int $state
-     * @return string
-     */
-    private function transformState(int $state): string
-    {
-        switch ($state) {
-            case 1:
-                return 'on';
-            case 2:
-                return 'starting';
-            case 3:
-                return 'stopping';
-            case 0:
-            default:
-                return 'off';
-        }
-    }
 }

resources/scripts/api/getServers.ts

@@ -0,0 +1,13 @@
+import { rawDataToServerObject, Server } from '@/api/server/getServer';
+import http, { getPaginationSet, PaginatedResult } from '@/api/http';
+
+export default (): Promise<PaginatedResult<Server>> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client`, { params: { include: [ 'allocation' ] } })
+            .then(({ data }) => resolve({
+                items: (data.data || []).map((datum: any) => rawDataToServerObject(datum.attributes)),
+                pagination: getPaginationSet(data.meta.pagination),
+            }))
+            .catch(reject);
+    });
+};

resources/scripts/api/http.ts

@@ -1,9 +1,5 @@
 import axios, { AxiosInstance } from 'axios';
 
-// This token is set in the bootstrap.js file at the beginning of the request
-// and is carried through from there.
-// const token: string = '';
-
 const http: AxiosInstance = axios.create({
     headers: {
         'X-Requested-With': 'XMLHttpRequest',
@@ -41,3 +37,26 @@ export function httpErrorToHuman (error: any): string {
 
     return error.message;
 }
+
+export interface PaginatedResult<T> {
+    items: T[];
+    pagination: PaginationDataSet;
+}
+
+interface PaginationDataSet {
+    total: number;
+    count: number;
+    perPage: number;
+    currentPage: number;
+    totalPages: number;
+}
+
+export function getPaginationSet (data: any): PaginationDataSet {
+    return {
+        total: data.total,
+        count: data.count,
+        perPage: data.per_page,
+        currentPage: data.current_page,
+        totalPages: data.total_pages,
+    };
+}

resources/scripts/api/server/getServer.ts

@@ -4,6 +4,7 @@ export interface Allocation {
     ip: string;
     alias: string | null;
     port: number;
+    default: boolean;
 }
 
 export interface Server {
@@ -36,6 +37,7 @@ export const rawDataToServerObject = (data: any): Server => ({
         ip: data.allocation.ip,
         alias: null,
         port: data.allocation.port,
+        default: true,
     }],
     limits: { ...data.limits },
     featureLimits: { ...data.feature_limits },

resources/scripts/api/server/getServerResourceUsage.ts

@@ -0,0 +1,29 @@
+import http from '@/api/http';
+
+export type ServerPowerState = 'offline' | 'starting' | 'running' | 'stopping';
+
+export interface ServerStats {
+    status: ServerPowerState;
+    isSuspended: boolean;
+    memoryUsageInBytes: number;
+    cpuUsagePercent: number;
+    diskUsageInBytes: number;
+    networkRxInBytes: number;
+    networkTxInBytes: number;
+}
+
+export default (server: string): Promise<ServerStats> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${server}/resources`)
+            .then(({ data: { attributes } }) => resolve({
+                status: attributes.current_state,
+                isSuspended: attributes.is_suspended,
+                memoryUsageInBytes: attributes.resources.memory_bytes,
+                cpuUsagePercent: attributes.resources.cpu_absolute,
+                diskUsageInBytes: attributes.resources.disk_bytes,
+                networkRxInBytes: attributes.resources.network_rx_bytes,
+                networkTxInBytes: attributes.resources.network_tx_bytes,
+            }))
+            .catch(reject);
+    });
+};

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -1,97 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
 import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
 import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
 import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
 import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
-import { Link } from 'react-router-dom';
+import { Server } from '@/api/server/getServer';
+import getServers from '@/api/getServers';
+import ServerRow from '@/components/dashboard/ServerRow';
+import Spinner from '@/components/elements/Spinner';
 
-export default () => (
+export default () => {
-    <div className={'my-10'}>
+    const [ servers, setServers ] = useState<null | Server[]>(null);
-        <Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
+
-            <div className={'icon'}>
+    const loadServers = () => getServers().then(data => setServers(data.items));
-                <FontAwesomeIcon icon={faServer}/>
+
-            </div>
+    useEffect(() => {
-            <div className={'w-1/2 ml-4'}>
+        loadServers();
-                <p className={'text-lg'}>Party Parrots</p>
+    }, []);
-            </div>
+
-            <div className={'flex flex-1 items-baseline justify-around'}>
+    if (servers === null) {
-                <div className={'flex ml-4'}>
+        return <Spinner size={'large'} centered={true}/>;
-                    <FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
+    }
-                    <p className={'text-sm text-neutral-400 ml-2'}>
+
-                        192.168.100.100:25565
+    return (
-                    </p>
+        <div className={'my-10'}>
-                </div>
+            {
-                <div className={'flex ml-4'}>
+                servers.map(server => (
-                    <FontAwesomeIcon icon={faMicrochip} className={'text-neutral-500'}/>
+                    <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
-                    <p className={'text-sm text-neutral-400 ml-2'}>
+                ))
-                        34.6%
+            }
-                    </p>
-                </div>
-                <div className={'ml-4'}>
-                    <div className={'flex'}>
-                        <FontAwesomeIcon icon={faMemory} className={'text-neutral-500'}/>
-                        <p className={'text-sm text-neutral-400 ml-2'}>
-                            2094 MB
-                        </p>
-                    </div>
-                    <p className={'text-xs text-neutral-600 text-center mt-1'}>of 4096 MB</p>
-                </div>
-                <div className={'ml-4'}>
-                    <div className={'flex'}>
-                        <FontAwesomeIcon icon={faHdd} className={'text-neutral-500'}/>
-                        <p className={'text-sm text-neutral-400 ml-2'}>
-                            278 MB
-                        </p>
-                    </div>
-                    <p className={'text-xs text-neutral-600 text-center mt-1'}>of 16 GB</p>
-                </div>
-            </div>
-        </Link>
-        <div className={'grey-row-box cursor-pointer mt-2'}>
-            <div className={'icon'}>
-                <FontAwesomeIcon icon={faServer}/>
-            </div>
-            <div className={'w-1/2 ml-4'}>
-                <p className={'text-lg'}>My Factions Server</p>
-                <p className={'text-neutral-400 text-xs mt-1'}>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
-                    et dolore magna aliqua.
-                </p>
-            </div>
-            <div className={'flex flex-1 items-baseline justify-around'}>
-                <div className={'flex ml-4'}>
-                    <FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
-                    <p className={'text-sm text-neutral-400 ml-2'}>
-                        192.168.202.10:34556
-                    </p>
-                </div>
-                <div className={'flex ml-4'}>
-                    <FontAwesomeIcon icon={faMicrochip} className={'text-red-400'}/>
-                    <p className={'text-sm text-white ml-2'}>
-                        98.2 %
-                    </p>
-                </div>
-                <div className={'ml-4'}>
-                    <div className={'flex'}>
-                        <FontAwesomeIcon icon={faMemory} className={'text-neutral-500'}/>
-                        <p className={'text-sm text-neutral-400 ml-2'}>
-                            376 MB
-                        </p>
-                    </div>
-                    <p className={'text-xs text-neutral-600 text-center mt-1'}>of 1024 MB</p>
-                </div>
-                <div className={'ml-4'}>
-                    <div className={'flex'}>
-                        <FontAwesomeIcon icon={faHdd} className={'text-neutral-500'}/>
-                        <p className={'text-sm text-neutral-400 ml-2'}>
-                            187 MB
-                        </p>
-                    </div>
-                    <p className={'text-xs text-neutral-600 text-center mt-1'}>of 32 GB</p>
-                </div>
-            </div>
         </div>
-    </div>
+    );
-);
+};

resources/scripts/components/dashboard/ServerRow.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
+import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
+import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
+import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
+import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
+import { Link } from 'react-router-dom';
+import { Server } from '@/api/server/getServer';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResourceUsage';
+import { bytesToHuman } from '@/helpers';
+import classNames from 'classnames';
+
+// Determines if the current value is in an alarm threshold so we can show it in red rather
+// than the more faded default style.
+const isAlarmState = (current: number, limit: number): boolean => {
+    const limitInBytes = limit * 1000 * 1000;
+
+    return current / limitInBytes >= 0.90;
+};
+
+export default ({ server, className }: { server: Server; className: string | undefined }) => {
+    const [ stats, setStats ] = useState<ServerStats | null>(null);
+
+    const getStats = () => getServerResourceUsage(server.uuid).then(data => setStats(data));
+
+    useEffect(() => {
+        let interval: any = null;
+        getStats().then(() => {
+            interval = setInterval(() => getStats(), 20000);
+        });
+
+        return () => {
+            interval && clearInterval(interval);
+        };
+    }, []);
+
+    const alarms = { cpu: false, memory: false, disk: false };
+    if (stats) {
+        alarms.cpu = server.limits.cpu === 0 ? false : (stats.cpuUsagePercent >= (server.limits.cpu * 0.9));
+        alarms.memory = isAlarmState(stats.memoryUsageInBytes, server.limits.memory);
+        alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk);
+    }
+
+    return (
+        <Link to={`/server/${server.id}`} className={`grey-row-box cursor-pointer ${className}`}>
+            <div className={'icon'}>
+                <FontAwesomeIcon icon={faServer}/>
+            </div>
+            <div className={'flex-1 ml-4'}>
+                <p className={'text-lg'}>{server.name}</p>
+            </div>
+            <div className={'w-1/4 overflow-hidden'}>
+                <div className={'flex ml-4'}>
+                    <FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
+                    <p className={'text-sm text-neutral-400 ml-2'}>
+                        {
+                            server.allocations.filter(alloc => alloc.default).map(allocation => (
+                                <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
+                            ))
+                        }
+                    </p>
+                </div>
+            </div>
+            <div className={'w-1/3 flex items-baseline relative'}>
+                {!stats ?
+                    <SpinnerOverlay size={'tiny'} visible={true} backgroundOpacity={0.25}/>
+                    :
+                    <React.Fragment>
+                        <div className={'flex-1 flex ml-4 justify-center'}>
+                            <FontAwesomeIcon
+                                icon={faMicrochip}
+                                className={classNames({
+                                    'text-neutral-500': !alarms.cpu,
+                                    'text-red-400': alarms.cpu,
+                                })}
+                            />
+                            <p
+                                className={classNames('text-sm ml-2', {
+                                    'text-neutral-400': !alarms.cpu,
+                                    'text-white': alarms.cpu,
+                                })}
+                            >
+                                {stats.cpuUsagePercent} %
+                            </p>
+                        </div>
+                        <div className={'flex-1 ml-4'}>
+                            <div className={'flex justify-center'}>
+                                <FontAwesomeIcon
+                                    icon={faMemory}
+                                    className={classNames({
+                                        'text-neutral-500': !alarms.memory,
+                                        'text-red-400': alarms.memory,
+                                    })}
+                                />
+                                <p
+                                    className={classNames('text-sm ml-2', {
+                                        'text-neutral-400': !alarms.memory,
+                                        'text-white': alarms.memory,
+                                    })}
+                                >
+                                    {bytesToHuman(stats.memoryUsageInBytes)}
+                                </p>
+                            </div>
+                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {bytesToHuman(server.limits.memory * 1000 * 1000)}</p>
+                        </div>
+                        <div className={'flex-1 ml-4'}>
+                            <div className={'flex justify-center'}>
+                                <FontAwesomeIcon
+                                    icon={faHdd}
+                                    className={classNames({
+                                        'text-neutral-500': !alarms.disk,
+                                        'text-red-400': alarms.disk,
+                                    })}
+                                />
+                                <p
+                                    className={classNames('text-sm ml-2', {
+                                        'text-neutral-400': !alarms.disk,
+                                        'text-white': alarms.disk,
+                                    })}
+                                >
+                                    {bytesToHuman(stats.diskUsageInBytes)}
+                                </p>
+                            </div>
+                            <p className={'text-xs text-neutral-600 text-center mt-1'}>
+                                of {bytesToHuman(server.limits.disk * 1000 * 1000)}
+                            </p>
+                        </div>
+                    </React.Fragment>
+                }
+            </div>
+        </Link>
+    );
+};

resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx

@@ -53,7 +53,7 @@ export default () => {
             {
                 ({ isSubmitting, isValid }) => (
                     <React.Fragment>
-                        <SpinnerOverlay large={true} visible={isSubmitting}/>
+                        <SpinnerOverlay size={'large'} visible={isSubmitting}/>
                         <Form className={'m-0'}>
                             <Field
                                 id={'current_email'}

resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx

@@ -56,7 +56,7 @@ export default () => {
                 {
                     ({ isSubmitting, isValid }) => (
                         <React.Fragment>
-                            <SpinnerOverlay large={true} visible={isSubmitting}/>
+                            <SpinnerOverlay size={'large'} visible={isSubmitting}/>
                             <Form className={'m-0'}>
                                 <Field
                                     id={'current_password'}

resources/scripts/components/elements/Modal.tsx

@@ -61,7 +61,7 @@ export default (props: Props) => {
                         className={'absolute w-full h-full rounded flex items-center justify-center'}
                         style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
                     >
-                        <Spinner large={false}/>
+                        <Spinner/>
                     </div>
                     }
                     <div className={'modal-content p-6'}>

resources/scripts/components/elements/Spinner.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export default ({ large, centered }: { large?: boolean; centered?: boolean }) => (
+export type SpinnerSize = 'large' | 'normal' | 'tiny';
+
+export default ({ size, centered }: { size?: SpinnerSize; centered?: boolean }) => (
     centered ?
-        <div className={classNames('flex justify-center', { 'm-20': large, 'm-6': !large })}>
+        <div className={classNames('flex justify-center', { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
-            <div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
+            <div className={classNames('spinner-circle spinner-white', {
+                'spinner-lg': size === 'large',
+                'spinner-sm': size === 'tiny',
+            })}/>
         </div>
         :
-        <div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}/>
+        <div className={classNames('spinner-circle spinner-white', {
+            'spinner-lg': size === 'large',
+            'spinner-sm': size === 'tiny',
+        })}/>
 );

resources/scripts/components/elements/SpinnerOverlay.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
-import Spinner from '@/components/elements/Spinner';
+import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
 
-export default ({ large, fixed, visible }: { visible: boolean; fixed?: boolean; large?: boolean }) => (
+interface Props {
+    visible: boolean;
+    fixed?: boolean;
+    size?: SpinnerSize;
+    backgroundOpacity?: number;
+}
+
+export default ({ size, fixed, visible, backgroundOpacity }: Props) => (
     <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
         <div
             className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
                 absolute: !fixed,
                 fixed: fixed,
             })}
-            style={{ background: 'rgba(0, 0, 0, 0.45)' }}
+            style={{ background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
         >
-            <Spinner large={large}/>
+            <Spinner size={size}/>
         </div>
     </CSSTransition>
 );

resources/scripts/components/server/Console.tsx

@@ -91,7 +91,7 @@ class Console extends React.PureComponent<Readonly<Props>> {
     render () {
         return (
             <div className={'text-xs font-mono relative'}>
-                <SpinnerOverlay visible={!this.props.connected} large={true}/>
+                <SpinnerOverlay visible={!this.props.connected} size={'large'}/>
                 <div
                     className={'rounded-t p-2 bg-black overflow-scroll w-full'}
                     style={{

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -38,7 +38,7 @@ export default () => {
         <div className={'my-10 mb-6'}>
             <FlashMessageRender byKey={'databases'}/>
             {loading ?
-                <Spinner large={true} centered={true}/>
+                <Spinner size={'large'} centered={true}/>
                 :
                 <CSSTransition classNames={'fade'} timeout={250}>
                     <React.Fragment>

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -109,7 +109,7 @@ export default ({ uuid }: { uuid: string }) => {
                         setMenuVisible(false);
                     }}
                 />
-                <SpinnerOverlay visible={showSpinner} fixed={true} large={true}/>
+                <SpinnerOverlay visible={showSpinner} fixed={true} size={'large'}/>
             </div>
             <CSSTransition timeout={250} in={menuVisible} unmountOnExit={true} classNames={'fade'}>
                 <div

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -70,7 +70,7 @@ export default () => {
                 </div>
                 {
                     loading ?
-                        <Spinner large={true} centered={true}/>
+                        <Spinner size={'large'} centered={true}/>
                         :
                         !files.length ?
                             <p className={'text-sm text-neutral-600 text-center'}>

resources/scripts/helpers.ts

@@ -1,4 +1,8 @@
 export function bytesToHuman (bytes: number): string {
+    if (bytes === 0) {
+        return '0 kB';
+    }
+
     const i = Math.floor(Math.log(bytes) / Math.log(1000));
 
     // @ts-ignore

resources/scripts/routers/ServerRouter.tsx

@@ -43,7 +43,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                     <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
                         {!server ?
                             <div className={'flex justify-center m-20'}>
-                                <Spinner large={true}/>
+                                <Spinner size={'large'}/>
                             </div>
                             :
                             <React.Fragment>

routes/api-client.php

@@ -29,7 +29,7 @@ Route::group(['prefix' => '/account'], function () {
 */
 Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServerAccess::class]], function () {
     Route::get('/', 'Servers\ServerController@index')->name('api.client.servers.view');
-    Route::get('/utilization', 'Servers\ResourceUtilizationController@index')
+    Route::get('/resources', 'Servers\ResourceUtilizationController')
         ->name('api.client.servers.resources');
 
     Route::post('/command', 'Servers\CommandController@index')->name('api.client.servers.command');