Add initial support for opening a file in the file manager, still needs more work

This commit is contained in:
Dane Everitt 2019-05-25 16:24:13 -07:00
parent 6606eb1b1b
commit a8462bf109
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
10 changed files with 159 additions and 24 deletions

View file

@ -21,11 +21,10 @@ interface FileRepositoryInterface extends BaseRepositoryInterface
* Return the contents of a given file if it can be edited in the Panel.
*
* @param string $path
* @param int|null $notLargerThan
* @return string
*
* @throws \GuzzleHttp\Exception\TransferException
*/
public function getContent(string $path): string;
public function getContent(string $path, int $notLargerThan = null): string;
/**
* Save new contents to a given file.

View file

@ -8,6 +8,7 @@ use Illuminate\Http\Response;
use Pterodactyl\Models\Server;
use Illuminate\Http\JsonResponse;
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\Http\Requests\Api\Client\Servers\Files\CopyFileRequest;
@ -16,6 +17,7 @@ use Pterodactyl\Http\Requests\Api\Client\Servers\Files\DeleteFileRequest;
use Pterodactyl\Http\Requests\Api\Client\Servers\Files\RenameFileRequest;
use Pterodactyl\Http\Requests\Api\Client\Servers\Files\CreateFolderRequest;
use Pterodactyl\Http\Requests\Api\Client\Servers\Files\DownloadFileRequest;
use Pterodactyl\Http\Requests\Api\Client\Servers\Files\GetFileContentsRequest;
class FileController extends ClientApiController
{
@ -24,6 +26,11 @@ class FileController extends ClientApiController
*/
private $cache;
/**
* @var \Illuminate\Contracts\Config\Repository
*/
private $config;
/**
* @var \Pterodactyl\Contracts\Repository\Daemon\FileRepositoryInterface
*/
@ -32,14 +39,16 @@ class FileController extends ClientApiController
/**
* FileController constructor.
*
* @param \Illuminate\Contracts\Config\Repository $config
* @param \Pterodactyl\Contracts\Repository\Daemon\FileRepositoryInterface $fileRepository
* @param \Illuminate\Contracts\Cache\Repository $cache
*/
public function __construct(FileRepositoryInterface $fileRepository, CacheRepository $cache)
public function __construct(ConfigRepository $config, FileRepositoryInterface $fileRepository, CacheRepository $cache)
{
parent::__construct();
$this->cache = $cache;
$this->config = $config;
$this->fileRepository = $fileRepository;
}
@ -55,9 +64,25 @@ class FileController extends ClientApiController
'contents' => $this->fileRepository->setServer($request->getModel(Server::class))->getDirectory(
$request->get('directory') ?? '/'
),
'editable' => $this->config->get('pterodactyl.files.editable', []),
]);
}
/**
* Return the contents of a specified file for the user.
*
* @param \Pterodactyl\Http\Requests\Api\Client\Servers\Files\GetFileContentsRequest $request
* @return \Illuminate\Http\Response
*/
public function getFileContents(GetFileContentsRequest $request): Response
{
return Response::create(
$this->fileRepository->setServer($request->getModel(Server::class))->getContent(
$request->get('file'), $this->config->get('pterodactyl.files.max_edit_size')
)
);
}
/**
* Creates a new folder on the server.
*

View file

@ -0,0 +1,31 @@
<?php
namespace Pterodactyl\Http\Requests\Api\Client\Servers\Files;
use Pterodactyl\Contracts\Http\ClientPermissionsRequest;
use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
class GetFileContentsRequest extends ClientApiRequest implements ClientPermissionsRequest
{
/**
* Returns the permissions string indicating which permission should be used to
* validate that the authenticated user has permission to perform this action aganist
* the given resource (server).
*
* @return string
*/
public function permission(): string
{
return 'edit-files';
}
/**
* @return array
*/
public function rules(): array
{
return [
'file' => 'required|string',
];
}
}

View file

@ -3,7 +3,9 @@
namespace Pterodactyl\Repositories\Wings;
use stdClass;
use Exception;
use Psr\Http\Message\ResponseInterface;
use Pterodactyl\Exceptions\Http\Server\FileSizeTooLargeException;
use Pterodactyl\Contracts\Repository\Daemon\FileRepositoryInterface;
class FileRepository extends BaseWingsRepository implements FileRepositoryInterface
@ -14,28 +16,47 @@ class FileRepository extends BaseWingsRepository implements FileRepositoryInterf
* @param string $path
* @return \stdClass
*
* @throws \Exception
* @throws \GuzzleHttp\Exception\TransferException
*/
public function getFileStat(string $path): stdClass
{
// TODO: Implement getFileStat() method.
throw new Exception('Function not implemented.');
}
/**
* Return the contents of a given file if it can be edited in the Panel.
* Return the contents of a given file.
*
* @param string $path
* @param int|null $notLargerThan the maximum content length in bytes
* @return string
*
* @throws \GuzzleHttp\Exception\TransferException
* @throws \Pterodactyl\Exceptions\Http\Server\FileSizeTooLargeException
*/
public function getContent(string $path): string
public function getContent(string $path, int $notLargerThan = null): string
{
// TODO: Implement getContent() method.
$response = $this->getHttpClient()->get(
sprintf('/api/servers/%s/files/contents', $this->getServer()->uuid),
[
'query' => ['file' => $path],
]
);
$length = (int) $response->getHeader('Content-Length')[0] ?? 0;
if ($notLargerThan && $length > $notLargerThan) {
throw new FileSizeTooLargeException(
trans('server.files.exceptions.max_size')
);
}
return $response->getBody()->__toString();
}
/**
* Save new contents to a given file.
* Save new contents to a given file. This works for both creating and updating
* a file.
*
* @param string $path
* @param string $content
@ -45,7 +66,13 @@ class FileRepository extends BaseWingsRepository implements FileRepositoryInterf
*/
public function putContent(string $path, string $content): ResponseInterface
{
// TODO: Implement putContent() method.
return $this->getHttpClient()->post(
sprintf('/api/servers/%s/files/write', $this->getServer()->uuid),
[
'query' => ['file' => $path],
'body' => $content,
]
);
}
/**
@ -59,9 +86,10 @@ class FileRepository extends BaseWingsRepository implements FileRepositoryInterf
public function getDirectory(string $path): array
{
$response = $this->getHttpClient()->get(
// Reason for the path check is because it is unnecessary on the Daemon but we need
// to respect the interface.
sprintf('/api/servers/%s/files/list/%s', $this->getServer()->uuid, $path === '/' ? '' : $path)
sprintf('/api/servers/%s/files/list-directory', $this->getServer()->uuid),
[
'query' => ['directory' => $path],
]
);
return json_decode($response->getBody(), true);

View file

@ -0,0 +1,11 @@
import http from "@/api/http";
export default (server: string, file: string): Promise<string> => {
return new Promise((resolve, reject) => {
http.get(`/api/client/servers/${server}/files/contents`, {
params: { file }
})
.then(response => resolve(response.data))
.catch(reject);
});
}

View file

@ -74,7 +74,7 @@
},
openNewFileModal: function () {
window.events.$emit('server:files:open-new-file-modal');
window.events.$emit('server:files:open-edit-file-modal');
this.$emit('close');
},

View file

@ -1,7 +1,12 @@
<template>
<div>
<div v-on:contextmenu="showContextMenu">
<div class="row" :class="{ 'cursor-pointer': canEdit(file), 'active-selection': contextMenuVisible }" v-if="!file.directory">
<div
class="row"
:class="{ 'cursor-pointer': canEdit(file), 'active-selection': contextMenuVisible }"
v-if="!file.directory"
v-on:click="openFileEditModal(file)"
>
<div class="flex-none icon">
<Icon name="file-text" v-if="!file.symlink"/>
<Icon name="link2" v-else/>
@ -142,6 +147,12 @@
});
},
openFileEditModal: function (file: DirectoryContentObject) {
if (!file.directory && this.canEdit(file)) {
window.events.$emit('server:files:open-edit-file-modal', file);
}
},
/**
* Determine if a file can be edited on the Panel.
*/

View file

@ -29,11 +29,17 @@
import Vue from 'vue';
import Icon from "@/components/core/Icon.vue";
import MessageBox from "@/components/MessageBox.vue";
import {ApplicationState} from '@/store/types';
import {ApplicationState, FileManagerState} from '@/store/types';
import {mapState} from "vuex";
import * as Ace from 'brace';
import { join } from 'path';
import {DirectoryContentObject} from "@/api/server/types";
import getFileContents from '@/api/server/files/getFileContents';
interface Data {
file?: DirectoryContentObject,
serverUuid?: string,
fm?: FileManagerState,
error: string | null,
editor: Ace.Editor | null,
isVisible: boolean,
@ -77,17 +83,20 @@
computed: mapState({
fm: (state: ApplicationState) => state.server.fm,
serverUuid: (state: ApplicationState) => state.server.server.uuid,
}),
mounted: function () {
window.events.$on('server:files:open-new-file-modal', () => {
window.events.$on('server:files:open-edit-file-modal', (file?: DirectoryContentObject) => {
this.file = file;
this.isVisible = true;
this.$nextTick(() => {
this.editor = Ace.edit('editor');
this.loadDependencies()
.then(() => this.loadLanguages())
.then(() => this.configureEditor());
.then(() => this.configureEditor())
.then(() => this.loadFileContent())
});
});
},
@ -97,6 +106,18 @@
},
loadFileContent: function () {
if (!this.file || !this.editor || this.file.directory) {
return;
}
getFileContents(this.serverUuid!, join(this.fm!.currentDirectory, this.file.name))
.then(contents => {
this.editor!.$blockScrolling = Infinity;
this.editor!.setValue(contents, 1);
});
},
updateFileLanguage: function (e: MouseEvent) {
if (!this.editor) {
return;
@ -154,6 +175,14 @@
<style>
#editor {
@apply .h-full .relative;
& > .ace_gutter > .ace_layer, & > .ace_scroller {
@apply .py-1;
}
& .ace_gutter-active-line {
@apply .mt-1;
}
}
.ace_editor {

View file

@ -52,7 +52,7 @@
</div>
</div>
<CreateFolderModal v-on:created="directoryCreated"/>
<NewFileModal/>
<EditFileModal/>
</div>
</template>
@ -65,7 +65,7 @@
import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue';
import DeleteFileModal from '../components/filemanager/modals/DeleteFileModal.vue';
import {DirectoryContentObject} from "@/api/server/types";
import NewFileModal from "@/components/server/components/filemanager/modals/NewFileModal.vue";
import EditFileModal from "@/components/server/components/filemanager/modals/EditFileModal.vue";
type DataStructure = {
loading: boolean,
@ -78,7 +78,7 @@
export default Vue.extend({
name: 'FileManager',
components: {CreateFolderModal, DeleteFileModal, FileRow, NewFileModal},
components: {CreateFolderModal, DeleteFileModal, FileRow, EditFileModal},
computed: {
/**
@ -181,7 +181,7 @@
},
openNewFileModal: function () {
window.events.$emit('server:files:open-new-file-modal');
window.events.$emit('server:files:open-edit-file-modal');
},
fileRowDeleted: function (file: DirectoryContentObject, directory: boolean) {

View file

@ -43,6 +43,7 @@ Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServ
Route::group(['prefix' => '/files'], function () {
Route::get('/list', 'Servers\FileController@listDirectory')->name('api.client.servers.files.list');
Route::get('/contents', 'Servers\FileController@getFileContents')->name('api.client.servers.files.contents');
Route::put('/rename', 'Servers\FileController@renameFile')->name('api.client.servers.files.rename');
Route::post('/copy', 'Servers\FileController@copyFile')->name('api.client.servers.files.copy');
Route::post('/delete', 'Servers\FileController@delete')->name('api.client.servers.files.delete');