Add basic file listing functionality

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

@@ -4,6 +4,7 @@ namespace Pterodactyl\Http\Controllers\Api\Client;
 
 use Webmozart\Assert\Assert;
 use Illuminate\Container\Container;
+use Pterodactyl\Transformers\Daemon\BaseDaemonTransformer;
 use Pterodactyl\Transformers\Api\Client\BaseClientTransformer;
 use Pterodactyl\Http\Controllers\Api\Application\ApplicationApiController;
 
@@ -19,10 +20,15 @@ abstract class ClientApiController extends ApplicationApiController
     {
         /** @var \Pterodactyl\Transformers\Api\Client\BaseClientTransformer $transformer */
         $transformer = Container::getInstance()->make($abstract);
-        Assert::isInstanceOf($transformer, BaseClientTransformer::class);
+        Assert::isInstanceOfAny($transformer, [
+            BaseClientTransformer::class,
+            BaseDaemonTransformer::class,
+        ]);
 
-        $transformer->setKey($this->request->attributes->get('api_key'));
-        $transformer->setUser($this->request->user());
+        if ($transformer instanceof BaseClientTransformer) {
+            $transformer->setKey($this->request->attributes->get('api_key'));
+            $transformer->setUser($this->request->user());
+        }
 
         return $transformer;
     }

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

@@ -7,10 +7,13 @@ use Ramsey\Uuid\Uuid;
 use Illuminate\Http\Response;
 use Pterodactyl\Models\Server;
 use Illuminate\Http\JsonResponse;
+use GuzzleHttp\Exception\TransferException;
+use Pterodactyl\Transformers\Daemon\FileObjectTransformer;
 use Illuminate\Contracts\Cache\Repository as CacheRepository;
 use Illuminate\Contracts\Config\Repository as ConfigRepository;
 use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
 use Pterodactyl\Contracts\Repository\Daemon\FileRepositoryInterface;
+use Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException;
 use Pterodactyl\Http\Requests\Api\Client\Servers\Files\CopyFileRequest;
 use Pterodactyl\Http\Requests\Api\Client\Servers\Files\ListFilesRequest;
 use Pterodactyl\Http\Requests\Api\Client\Servers\Files\DeleteFileRequest;
@@ -57,16 +60,23 @@ class FileController extends ClientApiController
      * Returns a listing of files in a given directory.
      *
      * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Files\ListFilesRequest $request
-     * @return \Illuminate\Http\JsonResponse
+     * @return array
+     *
+     * @throws \Pterodactyl\Exceptions\Http\Connection\DaemonConnectionException
      */
-    public function listDirectory(ListFilesRequest $request): JsonResponse
+    public function listDirectory(ListFilesRequest $request): array
     {
-        return JsonResponse::create([
-            'contents' => $this->fileRepository->setServer($request->getModel(Server::class))->getDirectory(
-                $request->get('directory') ?? '/'
-            ),
-            'editable' => $this->config->get('pterodactyl.files.editable', []),
-        ]);
+        try {
+            $contents = $this->fileRepository
+                ->setServer($request->getModel(Server::class))
+                ->getDirectory($request->get('directory') ?? '/');
+        } catch (TransferException $exception) {
+            throw new DaemonConnectionException($exception, true);
+        }
+
+        return $this->fractal->collection($contents)
+            ->transformWith($this->getTransformer(FileObjectTransformer::class))
+            ->toArray();
     }
 
     /**

app/Transformers/Daemon/BaseDaemonTransformer.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Pterodactyl\Transformers\Daemon;
+
+use League\Fractal\TransformerAbstract;
+
+abstract class BaseDaemonTransformer extends TransformerAbstract
+{
+}

app/Transformers/Daemon/FileObjectTransformer.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace Pterodactyl\Transformers\Daemon;
+
+use Carbon\Carbon;
+use Illuminate\Support\Arr;
+
+class FileObjectTransformer extends BaseDaemonTransformer
+{
+    /**
+     * An array of files we allow editing in the Panel.
+     *
+     * @var array
+     */
+    private $editable = [];
+
+    /**
+     * FileObjectTransformer constructor.
+     */
+    public function __construct()
+    {
+        $this->editable = config('pterodactyl.files.editable', []);
+    }
+
+    /**
+     * Transform a file object response from the daemon into a standardized response.
+     *
+     * @param array $item
+     * @return array
+     */
+    public function transform(array $item)
+    {
+        return [
+            'name' => Arr::get($item, 'name'),
+            'mode' => Arr::get($item, 'mode'),
+            'size' => Arr::get($item, 'size'),
+            'is_file' => Arr::get($item, 'file', true),
+            'is_symlink' => Arr::get($item, 'symlink', false),
+            'is_editable' => in_array(Arr::get($item, 'mime', ''), $this->editable),
+            'mimetype' => Arr::get($item, 'mime'),
+            'created_at' => Carbon::parse(explode(' ', Arr::get($item, 'created', ''))[0] ?? '')->toIso8601String(),
+            'modified_at' => Carbon::parse(explode(' ', Arr::get($item, 'modified', ''))[0] ?? '')->toIso8601String(),
+        ];
+    }
+
+    /**
+     * @return string
+     */
+    public function getResourceName(): string
+    {
+        return 'file_object';
+    }
+}

resources/scripts/api/server/files/loadDirectory.ts

@@ -0,0 +1,33 @@
+import http from '@/api/http';
+
+export interface FileObject {
+    name: string;
+    mode: string;
+    size: number;
+    isFile: boolean;
+    isSymlink: boolean;
+    isEditable: boolean;
+    mimetype: string;
+    createdAt: Date;
+    modifiedAt: Date;
+}
+
+export default (uuid: string, directory?: string): Promise<FileObject[]> => {
+    return new Promise((resolve, reject) => {
+        http.get(`/api/client/servers/${uuid}/files/list`, {
+            params: { directory },
+        })
+            .then(response => resolve((response.data.data || []).map((item: any): FileObject => ({
+                name: item.attributes.name,
+                mode: item.attributes.mode,
+                size: Number(item.attributes.size),
+                isFile: item.attributes.is_file,
+                isSymlink: item.attributes.is_symlink,
+                isEditable: item.attributes.is_editable,
+                mimetype: item.attributes.mimetype,
+                createdAt: new Date(item.attributes.created_at),
+                modifiedAt: new Date(item.attributes.modified_at),
+            }))))
+            .catch(reject);
+    });
+};

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

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from 'react';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { ServerContext } from '@/state/server';
+import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import { httpErrorToHuman } from '@/api/http';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
+import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
+import format from 'date-fns/format';
+import differenceInHours from 'date-fns/difference_in_hours';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { bytesToHuman } from '@/helpers';
+import { CSSTransition } from 'react-transition-group';
+import { Link } from 'react-router-dom';
+import Spinner from '@/components/elements/Spinner';
+
+export default () => {
+    const [ loading, setLoading ] = useState(true);
+    const [ files, setFiles ] = useState<FileObject[]>([]);
+    const server = ServerContext.useStoreState(state => state.server.data!);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const currentDirectory = window.location.hash.replace(/^#(\/)+/, '/');
+
+    const load = () => {
+        setLoading(true);
+        clearFlashes();
+        loadDirectory(server.uuid, currentDirectory)
+            .then(files => {
+                setFiles(files);
+                setLoading(false);
+            })
+            .catch(error => {
+                if (error.response && error.response.status === 404) {
+                    window.location.hash = '#/';
+                    return;
+                }
+
+                console.error(error.message, { error });
+                addError({ message: httpErrorToHuman(error), key: 'files' });
+            });
+    };
+
+    const breadcrumbs = (): { name: string; path?: string }[] => currentDirectory.split('/')
+        .filter(directory => !!directory)
+        .map((directory, index, dirs) => {
+            if (index === dirs.length - 1) {
+                return { name: directory };
+            }
+
+            return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
+        });
+
+    useEffect(() => {
+        load();
+    }, [ window.location.hash ]);
+
+    return (
+        <div className={'my-10 mb-6'}>
+            <FlashMessageRender byKey={'files'}/>
+            <React.Fragment>
+                <div className={'flex items-center text-sm mb-4 text-neutral-500'}>
+                    /<span className={'px-1 text-neutral-300'}>home</span>/
+                    <Link to={'#'} className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}>
+                        container
+                    </Link>/
+                    {
+                        breadcrumbs().map((crumb, index) => (
+                            crumb.path ?
+                                <React.Fragment key={index}>
+                                    <Link
+                                        to={`#${crumb.path}`}
+                                        className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
+                                    >
+                                        {crumb.name}
+                                    </Link>/
+                                </React.Fragment>
+                                :
+                                <span key={index} className={'px-1 text-neutral-300'}>{crumb.name}</span>
+                        ))
+                    }
+                </div>
+                {
+                    loading ?
+                        <Spinner large={true} centered={true}/>
+                        :
+                        !files.length ?
+                            <p className={'text-sm text-neutral-600 text-center'}>
+                                This directory seems to be empty.
+                            </p>
+                            :
+                            <CSSTransition classNames={'fade'} timeout={250} appear={true} in={true}>
+                                <div>
+                                    {
+                                        files.map(file => (
+                                            <a
+                                                key={file.name}
+                                                href={`#${currentDirectory}/${file.name}`}
+                                                className={`
+                                                        flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
+                                                        border border-transparent hover:text-neutral-100 hover:border-neutral-600
+                                                        cursor-pointer items-center no-underline
+                                                    `}
+                                            >
+                                                <div className={'flex-none text-neutral-500 mr-4 text-lg'}>
+                                                    {file.isFile ?
+                                                        <FontAwesomeIcon icon={faFileAlt}/>
+                                                        :
+                                                        <FontAwesomeIcon icon={faFolder}/>
+                                                    }
+                                                </div>
+                                                <div className={'flex-1'}>
+                                                    {file.name}
+                                                </div>
+                                                {file.isFile &&
+                                                <div className={'w-1/6 text-right mr-4'}>
+                                                    {bytesToHuman(file.size)}
+                                                </div>
+                                                }
+                                                <div
+                                                    className={'w-1/5 text-right'}
+                                                    title={file.modifiedAt.toString()}
+                                                >
+                                                    {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
+                                                        format(file.modifiedAt, 'MMM Do, YYYY h:mma')
+                                                        :
+                                                        distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
+                                                    }
+                                                </div>
+                                            </a>
+                                        ))
+                                    }
+                                </div>
+                            </CSSTransition>
+                }
+            </React.Fragment>
+        </div>
+    );
+};

resources/scripts/helpers.ts

@@ -0,0 +1,6 @@
+export function bytesToHuman (bytes: number): string {
+    const i = Math.floor(Math.log(bytes) / Math.log(1000));
+
+    // @ts-ignore
+    return `${(bytes / Math.pow(1000, i)).toFixed(2) * 1} ${['Bytes', 'kB', 'MB', 'GB', 'TB'][i]}`;
+}