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

2019-08-17 16:03:10 -07:00 · 2019-08-17 16:03:10 -07:00 · fb9c106448
commit fb9c106448
parent 952dff854e
26 changed files with 384 additions and 239 deletions
--- a/app/Http/Controllers/Api/Application/ApplicationApiController.php
+++ b/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();

--- a/app/Http/Controllers/Api/Client/ClientController.php
+++ b/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')
--- a/app/Http/Controllers/Api/Client/Servers/ResourceUtilizationController.php
+++ b/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();
    }
--- a/app/Http/Controllers/Base/IndexController.php
+++ b/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\Daemon\ServerRepositoryInterface $daemonRepository
-     * @param \Pterodactyl\Contracts\Repository\ServerRepositoryInterface        $repository
+     * @param \Pterodactyl\Contracts\Repository\ServerRepositoryInterface $repository
     */
-    public function __construct(
-        DaemonKeyProviderService $keyProviderService,
-        DaemonServerRepositoryInterface $daemonRepository,
-        ServerRepositoryInterface $repository
-    ) {
-        $this->daemonRepository = $daemonRepository;
-        $this->keyProviderService = $keyProviderService;
+    public function __construct(ServerRepositoryInterface $repository)
+    {
        $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()));
-    }
 }
--- a/app/Models/Server.php
+++ b/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;
--- a/app/Providers/RepositoryServiceProvider.php
+++ b/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
--- a/app/Repositories/Wings/WingsServerRepository.php
+++ b/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);
+    }
+}
--- a/app/Transformers/Api/Client/StatsTransformer.php
+++ b/app/Transformers/Api/Client/StatsTransformer.php
@ -2,28 +2,10 @@

 namespace Pterodactyl\Transformers\Api\Client;

-use Pterodactyl\Models\Server;
-use GuzzleHttp\Exception\RequestException;
-use Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException;
-use Pterodactyl\Contracts\Repository\Daemon\ServerRepositoryInterface;
+use Illuminate\Support\Arr;

 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)),
-            'memory' => [
-                'current' => round(object_get($object, 'proc.memory.total', 0) / 1024 / 1024),
-                'limit' => floatval($model->memory),
+            'current_state' => Arr::get($data, 'state', 'stopped'),
+            'is_suspended' => Arr::get($data, 'suspended', false),
+            'resources' => [
+                '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';
-        }
-    }
 }
--- a/resources/scripts/api/getServers.ts
+++ b/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);
+    });
+};
--- a/resources/scripts/api/http.ts
+++ b/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,
+    };
+}
--- a/resources/scripts/api/server/getServer.ts
+++ b/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 },
--- a/resources/scripts/api/server/getServerResourceUsage.ts
+++ b/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);
+    });
+};
--- a/resources/scripts/components/dashboard/DashboardContainer.tsx
+++ b/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 () => (
-    <div className={'my-10'}>
-        <Link to={'/server/e9d6c836'} className={'grey-row-box cursor-pointer'}>
-            <div className={'icon'}>
-                <FontAwesomeIcon icon={faServer}/>
-            </div>
-            <div className={'w-1/2 ml-4'}>
-                <p className={'text-lg'}>Party Parrots</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.100.100:25565
-                    </p>
-                </div>
-                <div className={'flex ml-4'}>
-                    <FontAwesomeIcon icon={faMicrochip} className={'text-neutral-500'}/>
-                    <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>
+export default () => {
+    const [ servers, setServers ] = useState<null | Server[]>(null);
+
+    const loadServers = () => getServers().then(data => setServers(data.items));
+
+    useEffect(() => {
+        loadServers();
+    }, []);
+
+    if (servers === null) {
+        return <Spinner size={'large'} centered={true}/>;
+    }
+
+    return (
+        <div className={'my-10'}>
+            {
+                servers.map(server => (
+                    <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
+                ))
+            }
        </div>
-    </div>
-);
+    );
+};
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/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>
+    );
+};
--- a/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
+++ b/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'}
--- a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
+++ b/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'}
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/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'}>
--- a/resources/scripts/components/elements/Spinner.tsx
+++ b/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('spinner-circle spinner-white', { 'spinner-lg': large })}/>
+        <div className={classNames('flex justify-center', { 'm-20': size === 'large', 'm-6': size !== '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',
+        })}/>
 );
--- a/resources/scripts/components/elements/SpinnerOverlay.tsx
+++ b/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>
 );
--- a/resources/scripts/components/server/Console.tsx
+++ b/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={{
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/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>
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/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
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/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'}>
--- a/resources/scripts/helpers.ts
+++ b/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
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/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>
--- a/routes/api-client.php
+++ b/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');