mirror of
https://github.com/portainer/portainer.git
synced 2025-07-23 15:29:42 +02:00
refactor(agent): refactor volume browser to es6 (#4086)
* refactor(agent): replace root with index * refactor(agent): use simple export * refactor(agent): replace function with class * refactor(agent): replace promise with async
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
7eb8d5449a
commit
a473d738be
3 changed files with 139 additions and 120 deletions
|
|
@ -1,6 +1,10 @@
|
||||||
|
import angular from 'angular';
|
||||||
|
|
||||||
|
import { VolumeBrowserController } from './volumeBrowserController';
|
||||||
|
|
||||||
angular.module('portainer.agent').component('volumeBrowser', {
|
angular.module('portainer.agent').component('volumeBrowser', {
|
||||||
templateUrl: './volumeBrowser.html',
|
templateUrl: './volumeBrowser.html',
|
||||||
controller: 'VolumeBrowserController',
|
controller: VolumeBrowserController,
|
||||||
bindings: {
|
bindings: {
|
||||||
volumeId: '<',
|
volumeId: '<',
|
||||||
nodeName: '<',
|
nodeName: '<',
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
browse="$ctrl.browse(name)"
|
browse="$ctrl.browse(name)"
|
||||||
rename="$ctrl.rename(name, newName)"
|
rename="$ctrl.rename(name, newName)"
|
||||||
download="$ctrl.download(name)"
|
download="$ctrl.download(name)"
|
||||||
delete="$ctrl.delete(name)"
|
delete="$ctrl.confirmDelete(name)"
|
||||||
is-upload-allowed="$ctrl.isUploadEnabled"
|
is-upload-allowed="$ctrl.isUploadEnabled"
|
||||||
on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)"
|
on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)"
|
||||||
></files-datatable>
|
></files-datatable>
|
||||||
|
|
|
||||||
|
|
@ -1,137 +1,152 @@
|
||||||
import _ from 'lodash-es';
|
import _ from 'lodash-es';
|
||||||
|
|
||||||
angular.module('portainer.agent').controller('VolumeBrowserController', [
|
export class VolumeBrowserController {
|
||||||
'HttpRequestHelper',
|
constructor($async, HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService, Notifications) {
|
||||||
'VolumeBrowserService',
|
Object.assign(this, { $async, HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService, Notifications });
|
||||||
'FileSaver',
|
|
||||||
'Blob',
|
|
||||||
'ModalService',
|
|
||||||
'Notifications',
|
|
||||||
function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService, Notifications) {
|
|
||||||
var ctrl = this;
|
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
path: '/',
|
path: '/',
|
||||||
};
|
};
|
||||||
|
|
||||||
this.rename = function (file, newName) {
|
this.rename = this.rename.bind(this);
|
||||||
var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
|
this.renameAsync = this.renameAsync.bind(this);
|
||||||
var newFilePath = this.state.path === '/' ? newName : this.state.path + '/' + newName;
|
this.confirmDelete = this.confirmDelete.bind(this);
|
||||||
|
this.download = this.download.bind(this);
|
||||||
|
this.downloadAsync = this.downloadAsync.bind(this);
|
||||||
|
this.up = this.up.bind(this);
|
||||||
|
this.browse = this.browse.bind(this);
|
||||||
|
this.deleteFile = this.deleteFile.bind(this);
|
||||||
|
this.deleteFileAsync = this.deleteFileAsync.bind(this);
|
||||||
|
this.getFilesForPath = this.getFilesForPath.bind(this);
|
||||||
|
this.getFilesForPathAsync = this.getFilesForPathAsync.bind(this);
|
||||||
|
this.onFileSelectedForUpload = this.onFileSelectedForUpload.bind(this);
|
||||||
|
this.onFileSelectedForUploadAsync = this.onFileSelectedForUploadAsync.bind(this);
|
||||||
|
this.parentPath = this.parentPath.bind(this);
|
||||||
|
this.buildPath = this.buildPath.bind(this);
|
||||||
|
this.$onInit = this.$onInit.bind(this);
|
||||||
|
this.onFileUploaded = this.onFileUploaded.bind(this);
|
||||||
|
this.refreshList = this.refreshList.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
VolumeBrowserService.rename(this.volumeId, filePath, newFilePath)
|
rename(file, newName) {
|
||||||
.then(function success() {
|
return this.$async(this.renameAsync, file, newName);
|
||||||
Notifications.success('File successfully renamed', newFilePath);
|
}
|
||||||
return VolumeBrowserService.ls(ctrl.volumeId, ctrl.state.path);
|
async renameAsync(file, newName) {
|
||||||
})
|
const filePath = this.state.path === '/' ? file : `${this.state.path}/${file}`;
|
||||||
.then(function success(data) {
|
const newFilePath = this.state.path === '/' ? newName : `${this.state.path}/${newName}`;
|
||||||
ctrl.files = data;
|
|
||||||
})
|
|
||||||
.catch(function error(err) {
|
|
||||||
Notifications.error('Failure', err, 'Unable to rename file');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.delete = function (file) {
|
try {
|
||||||
var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
|
await this.VolumeBrowserService.rename(this.volumeId, filePath, newFilePath);
|
||||||
|
this.Notifications.success('File successfully renamed', newFilePath);
|
||||||
ModalService.confirmDeletion('Are you sure that you want to delete ' + filePath + ' ?', function onConfirm(confirmed) {
|
this.files = await this.VolumeBrowserService.ls(this.volumeId, this.state.path);
|
||||||
if (!confirmed) {
|
} catch (err) {
|
||||||
return;
|
this.Notifications.error('Failure', err, 'Unable to rename file');
|
||||||
}
|
|
||||||
deleteFile(filePath);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.download = function (file) {
|
|
||||||
var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
|
|
||||||
VolumeBrowserService.get(this.volumeId, filePath)
|
|
||||||
.then(function success(data) {
|
|
||||||
var downloadData = new Blob([data.file]);
|
|
||||||
FileSaver.saveAs(downloadData, file);
|
|
||||||
})
|
|
||||||
.catch(function error(err) {
|
|
||||||
Notifications.error('Failure', err, 'Unable to download file');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.up = function () {
|
|
||||||
var parentFolder = parentPath(this.state.path);
|
|
||||||
browse(parentFolder);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.browse = function (folder) {
|
|
||||||
var path = buildPath(this.state.path, folder);
|
|
||||||
browse(path);
|
|
||||||
};
|
|
||||||
|
|
||||||
function deleteFile(file) {
|
|
||||||
VolumeBrowserService.delete(ctrl.volumeId, file)
|
|
||||||
.then(function success() {
|
|
||||||
Notifications.success('File successfully deleted', file);
|
|
||||||
return VolumeBrowserService.ls(ctrl.volumeId, ctrl.state.path);
|
|
||||||
})
|
|
||||||
.then(function success(data) {
|
|
||||||
ctrl.files = data;
|
|
||||||
})
|
|
||||||
.catch(function error(err) {
|
|
||||||
Notifications.error('Failure', err, 'Unable to delete file');
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function browse(path) {
|
confirmDelete(file) {
|
||||||
VolumeBrowserService.ls(ctrl.volumeId, path)
|
const filePath = this.state.path === '/' ? file : `${this.state.path}/${file}`;
|
||||||
.then(function success(data) {
|
|
||||||
ctrl.state.path = path;
|
|
||||||
ctrl.files = data;
|
|
||||||
})
|
|
||||||
.catch(function error(err) {
|
|
||||||
Notifications.error('Failure', err, 'Unable to browse volume');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.onFileSelectedForUpload = function onFileSelectedForUpload(file) {
|
this.ModalService.confirmDeletion(`Are you sure that you want to delete ${filePath} ?`, (confirmed) => {
|
||||||
VolumeBrowserService.upload(ctrl.state.path, file, ctrl.volumeId)
|
if (!confirmed) {
|
||||||
.then(function onFileUpload() {
|
return;
|
||||||
onFileUploaded();
|
|
||||||
})
|
|
||||||
.catch(function onFileUpload(err) {
|
|
||||||
Notifications.error('Failure', err, 'Unable to upload file');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function parentPath(path) {
|
|
||||||
if (path.lastIndexOf('/') === 0) {
|
|
||||||
return '/';
|
|
||||||
}
|
}
|
||||||
|
this.deleteFile(filePath);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
var split = _.split(path, '/');
|
download(file) {
|
||||||
return _.join(_.slice(split, 0, split.length - 1), '/');
|
return this.$async(this.downloadAsync, file);
|
||||||
|
}
|
||||||
|
async downloadAsync(file) {
|
||||||
|
const filePath = this.state.path === '/' ? file : `${this.state.path}/${file}`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await this.VolumeBrowserService.get(this.volumeId, filePath);
|
||||||
|
const downloadData = new Blob([data.file]);
|
||||||
|
this.FileSaver.saveAs(downloadData, file);
|
||||||
|
} catch (err) {
|
||||||
|
this.Notifications.error('Failure', err, 'Unable to download file');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
up() {
|
||||||
|
const parentFolder = this.parentPath(this.state.path);
|
||||||
|
this.getFilesForPath(parentFolder);
|
||||||
|
}
|
||||||
|
|
||||||
|
browse(folder) {
|
||||||
|
const path = this.buildPath(this.state.path, folder);
|
||||||
|
this.getFilesForPath(path);
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteFile(file) {
|
||||||
|
return this.$async(this.deleteFileAsync, file);
|
||||||
|
}
|
||||||
|
async deleteFileAsync(file) {
|
||||||
|
try {
|
||||||
|
await this.VolumeBrowserService.delete(this.volumeId, file);
|
||||||
|
this.Notifications.success('File successfully deleted', file);
|
||||||
|
this.files = await this.VolumeBrowserService.ls(this.volumeId, this.state.path);
|
||||||
|
} catch (err) {
|
||||||
|
this.Notifications.error('Failure', err, 'Unable to delete file');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getFilesForPath(path) {
|
||||||
|
return this.$async(this.getFilesForPathAsync, path);
|
||||||
|
}
|
||||||
|
async getFilesForPathAsync(path) {
|
||||||
|
try {
|
||||||
|
const files = await this.VolumeBrowserService.ls(this.volumeId, path);
|
||||||
|
this.state.path = path;
|
||||||
|
this.files = files;
|
||||||
|
} catch (err) {
|
||||||
|
this.Notifications.error('Failure', err, 'Unable to browse volume');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onFileSelectedForUpload(file) {
|
||||||
|
return this.$async(this.onFileSelectedForUploadAsync, file);
|
||||||
|
}
|
||||||
|
async onFileSelectedForUploadAsync(file) {
|
||||||
|
try {
|
||||||
|
await this.VolumeBrowserService.upload(this.state.path, file, this.volumeId);
|
||||||
|
this.onFileUploaded();
|
||||||
|
} catch (err) {
|
||||||
|
this.Notifications.error('Failure', err, 'Unable to upload file');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
parentPath(path) {
|
||||||
|
if (path.lastIndexOf('/') === 0) {
|
||||||
|
return '/';
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildPath(parent, file) {
|
const split = _.split(path, '/');
|
||||||
if (parent === '/') {
|
return _.join(_.slice(split, 0, split.length - 1), '/');
|
||||||
return parent + file;
|
}
|
||||||
}
|
|
||||||
return parent + '/' + file;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$onInit = function () {
|
buildPath(parent, file) {
|
||||||
HttpRequestHelper.setPortainerAgentTargetHeader(this.nodeName);
|
if (parent === '/') {
|
||||||
VolumeBrowserService.ls(this.volumeId, this.state.path)
|
return parent + file;
|
||||||
.then(function success(data) {
|
|
||||||
ctrl.files = data;
|
|
||||||
})
|
|
||||||
.catch(function error(err) {
|
|
||||||
Notifications.error('Failure', err, 'Unable to browse volume');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
function onFileUploaded() {
|
|
||||||
refreshList();
|
|
||||||
}
|
}
|
||||||
|
return `${parent}/${file}`;
|
||||||
|
}
|
||||||
|
|
||||||
function refreshList() {
|
onFileUploaded() {
|
||||||
browse(ctrl.state.path);
|
this.refreshList();
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshList() {
|
||||||
|
this.getFilesForPath(this.state.path);
|
||||||
|
}
|
||||||
|
|
||||||
|
async $onInit() {
|
||||||
|
this.HttpRequestHelper.setPortainerAgentTargetHeader(this.nodeName);
|
||||||
|
try {
|
||||||
|
this.files = await this.VolumeBrowserService.ls(this.volumeId, this.state.path);
|
||||||
|
} catch (err) {
|
||||||
|
this.Notifications.error('Failure', err, 'Unable to browse volume');
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
]);
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue