forked from Alex/Pterodactyl-Panel
Add basic file listing functionality
This commit is contained in:
Dane Everitt
parent
ecb5384579
commit
c90fcea519
@ -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;
|
||||
}
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
9
app/Transformers/Daemon/BaseDaemonTransformer.php
Normal file
9
app/Transformers/Daemon/BaseDaemonTransformer.php
Normal file
@ -0,0 +1,9 @@
|
||||
<?php
|
||||
|
||||
namespace Pterodactyl\Transformers\Daemon;
|
||||
|
||||
use League\Fractal\TransformerAbstract;
|
||||
|
||||
abstract class BaseDaemonTransformer extends TransformerAbstract
|
||||
{
|
||||
}
|
||||
53
app/Transformers/Daemon/FileObjectTransformer.php
Normal file
53
app/Transformers/Daemon/FileObjectTransformer.php
Normal file
@ -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';
|
||||
}
|
||||
}
|
||||
33
resources/scripts/api/server/files/loadDirectory.ts
Normal file
33
resources/scripts/api/server/files/loadDirectory.ts
Normal file
@ -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);
|
||||
});
|
||||
};
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
6
resources/scripts/helpers.ts
Normal file
6
resources/scripts/helpers.ts
Normal file
@ -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]}`;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user