From 1ef7347f19e3eda8a64c0a051f37754eeb6ebae7 Mon Sep 17 00:00:00 2001 From: Chaim Lev-Ari Date: Thu, 23 Jul 2020 10:45:23 +0300 Subject: [PATCH] refactor(agent): refactor host-broswer to es6 (#4088) * refactor(host): replace host-browser with es6 class * refactor(host): replace promises with async * refactor(hosts): replace delete promise with async * refactor(host): replace upload file with async * refactor(host): replace template strings * fix(host): replace host root * feat(agent): rename main file --- .../host-browser/host-browser-controller.js | 149 ----------------- .../components/host-browser/host-browser.js | 5 - .../{host-browser.html => hostBrowser.html} | 2 +- .../host-browser/hostBrowserController.js | 158 ++++++++++++++++++ app/agent/components/host-browser/index.js | 7 + 5 files changed, 166 insertions(+), 155 deletions(-) delete mode 100644 app/agent/components/host-browser/host-browser-controller.js delete mode 100644 app/agent/components/host-browser/host-browser.js rename app/agent/components/host-browser/{host-browser.html => hostBrowser.html} (91%) create mode 100644 app/agent/components/host-browser/hostBrowserController.js create mode 100644 app/agent/components/host-browser/index.js diff --git a/app/agent/components/host-browser/host-browser-controller.js b/app/agent/components/host-browser/host-browser-controller.js deleted file mode 100644 index c9c1e5e0f..000000000 --- a/app/agent/components/host-browser/host-browser-controller.js +++ /dev/null @@ -1,149 +0,0 @@ -import _ from 'lodash-es'; - -angular.module('portainer.agent').controller('HostBrowserController', [ - 'HostBrowserService', - 'Notifications', - 'FileSaver', - 'ModalService', - function HostBrowserController(HostBrowserService, Notifications, FileSaver, ModalService) { - var ctrl = this; - var ROOT_PATH = '/host'; - ctrl.state = { - path: ROOT_PATH, - }; - - ctrl.goToParent = goToParent; - ctrl.browse = browse; - ctrl.renameFile = renameFile; - ctrl.downloadFile = downloadFile; - ctrl.deleteFile = confirmDeleteFile; - ctrl.isRoot = isRoot; - ctrl.onFileSelectedForUpload = onFileSelectedForUpload; - ctrl.$onInit = $onInit; - ctrl.getRelativePath = getRelativePath; - - function getRelativePath(path) { - path = path || ctrl.state.path; - var rootPathRegex = new RegExp('^' + ROOT_PATH + '/?'); - var relativePath = path.replace(rootPathRegex, '/'); - return relativePath; - } - - function goToParent() { - getFilesForPath(parentPath(this.state.path)); - } - - function isRoot() { - return ctrl.state.path === ROOT_PATH; - } - - function browse(folder) { - getFilesForPath(buildPath(ctrl.state.path, folder)); - } - - function getFilesForPath(path) { - HostBrowserService.ls(path) - .then(function onFilesLoaded(files) { - ctrl.state.path = path; - ctrl.files = files; - }) - .catch(function onLoadingFailed(err) { - Notifications.error('Failure', err, 'Unable to browse'); - }); - } - - function renameFile(name, newName) { - var filePath = buildPath(ctrl.state.path, name); - var newFilePath = buildPath(ctrl.state.path, newName); - - HostBrowserService.rename(filePath, newFilePath) - .then(function onRenameSuccess() { - Notifications.success('File successfully renamed', getRelativePath(newFilePath)); - return HostBrowserService.ls(ctrl.state.path); - }) - .then(function onFilesLoaded(files) { - ctrl.files = files; - }) - .catch(function notifyOnError(err) { - Notifications.error('Failure', err, 'Unable to rename file'); - }); - } - - function downloadFile(file) { - var filePath = buildPath(ctrl.state.path, file); - HostBrowserService.get(filePath) - .then(function onFileReceived(data) { - var downloadData = new Blob([data.file], { - type: 'text/plain;charset=utf-8', - }); - FileSaver.saveAs(downloadData, file); - }) - .catch(function notifyOnError(err) { - Notifications.error('Failure', err, 'Unable to download file'); - }); - } - - function confirmDeleteFile(name) { - var filePath = buildPath(ctrl.state.path, name); - - ModalService.confirmDeletion('Are you sure that you want to delete ' + getRelativePath(filePath) + ' ?', function onConfirm(confirmed) { - if (!confirmed) { - return; - } - return deleteFile(filePath); - }); - } - - function deleteFile(path) { - HostBrowserService.delete(path) - .then(function onDeleteSuccess() { - Notifications.success('File successfully deleted', getRelativePath(path)); - return HostBrowserService.ls(ctrl.state.path); - }) - .then(function onFilesLoaded(data) { - ctrl.files = data; - }) - .catch(function notifyOnError(err) { - Notifications.error('Failure', err, 'Unable to delete file'); - }); - } - - function $onInit() { - getFilesForPath(ROOT_PATH); - } - - function parentPath(path) { - if (path === ROOT_PATH) { - return ROOT_PATH; - } - - var split = _.split(path, '/'); - return _.join(_.slice(split, 0, split.length - 1), '/'); - } - - function buildPath(parent, file) { - if (parent.lastIndexOf('/') === parent.length - 1) { - return parent + file; - } - return parent + '/' + file; - } - - function onFileSelectedForUpload(file) { - HostBrowserService.upload(ctrl.state.path, file) - .then(function onFileUpload() { - onFileUploaded(); - }) - .catch(function onFileUpload(err) { - Notifications.error('Failure', err, 'Unable to upload file'); - }); - } - - function onFileUploaded() { - refreshList(); - } - - function refreshList() { - getFilesForPath(ctrl.state.path); - } - }, -]); diff --git a/app/agent/components/host-browser/host-browser.js b/app/agent/components/host-browser/host-browser.js deleted file mode 100644 index 9b16b5a01..000000000 --- a/app/agent/components/host-browser/host-browser.js +++ /dev/null @@ -1,5 +0,0 @@ -angular.module('portainer.agent').component('hostBrowser', { - controller: 'HostBrowserController', - templateUrl: './host-browser.html', - bindings: {}, -}); diff --git a/app/agent/components/host-browser/host-browser.html b/app/agent/components/host-browser/hostBrowser.html similarity index 91% rename from app/agent/components/host-browser/host-browser.html rename to app/agent/components/host-browser/hostBrowser.html index b81ecc744..915131118 100644 --- a/app/agent/components/host-browser/host-browser.html +++ b/app/agent/components/host-browser/hostBrowser.html @@ -9,7 +9,7 @@ browse="$ctrl.browse(name)" rename="$ctrl.renameFile(name, newName)" download="$ctrl.downloadFile(name)" - delete="$ctrl.deleteFile(name)" + delete="$ctrl.confirmDeleteFile(name)" is-upload-allowed="true" on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)" > diff --git a/app/agent/components/host-browser/hostBrowserController.js b/app/agent/components/host-browser/hostBrowserController.js new file mode 100644 index 000000000..0f6cd7a34 --- /dev/null +++ b/app/agent/components/host-browser/hostBrowserController.js @@ -0,0 +1,158 @@ +import _ from 'lodash-es'; + +const ROOT_PATH = '/host'; + +export class HostBrowserController { + constructor($async, HostBrowserService, Notifications, FileSaver, ModalService) { + Object.assign(this, { $async, HostBrowserService, Notifications, FileSaver, ModalService }); + + this.state = { + path: ROOT_PATH, + }; + + this.goToParent = this.goToParent.bind(this); + this.browse = this.browse.bind(this); + this.confirmDeleteFile = this.confirmDeleteFile.bind(this); + this.isRoot = this.isRoot.bind(this); + this.getRelativePath = this.getRelativePath.bind(this); + this.getFilesForPath = this.getFilesForPath.bind(this); + this.getFilesForPathAsync = this.getFilesForPathAsync.bind(this); + this.downloadFile = this.downloadFile.bind(this); + this.downloadFileAsync = this.downloadFileAsync.bind(this); + this.renameFile = this.renameFile.bind(this); + this.renameFileAsync = this.renameFileAsync.bind(this); + this.deleteFile = this.deleteFile.bind(this); + this.deleteFileAsync = this.deleteFileAsync.bind(this); + this.onFileSelectedForUpload = this.onFileSelectedForUpload.bind(this); + this.onFileSelectedForUploadAsync = this.onFileSelectedForUploadAsync.bind(this); + } + + getRelativePath(path) { + path = path || this.state.path; + const rootPathRegex = new RegExp(`^${ROOT_PATH}/?`); + const relativePath = path.replace(rootPathRegex, '/'); + return relativePath; + } + + goToParent() { + this.getFilesForPath(this.parentPath(this.state.path)); + } + + isRoot() { + return this.state.path === ROOT_PATH; + } + + browse(folder) { + this.getFilesForPath(this.buildPath(this.state.path, folder)); + } + + getFilesForPath(path) { + return this.$async(this.getFilesForPathAsync, path); + } + async getFilesForPathAsync(path) { + try { + const files = await this.HostBrowserService.ls(path); + this.state.path = path; + this.files = files; + } catch (err) { + this.Notifications.error('Failure', err, 'Unable to browse'); + } + } + + renameFile(name, newName) { + return this.$async(this.renameFileAsync, name, newName); + } + async renameFileAsync(name, newName) { + const filePath = this.buildPath(this.state.path, name); + const newFilePath = this.buildPath(this.state.path, newName); + try { + await this.HostBrowserService.rename(filePath, newFilePath); + this.Notifications.success('File successfully renamed', this.getRelativePath(newFilePath)); + const files = await this.HostBrowserService.ls(this.state.path); + this.files = files; + } catch (err) { + this.Notifications.error('Failure', err, 'Unable to rename file'); + } + } + + downloadFile(fileName) { + return this.$async(this.downloadFileAsync, fileName); + } + async downloadFileAsync(fileName) { + const filePath = this.buildPath(this.state.path, fileName); + try { + const { file } = await this.HostBrowserService.get(filePath); + const downloadData = new Blob([file], { + type: 'text/plain;charset=utf-8', + }); + this.FileSaver.saveAs(downloadData, fileName); + } catch (err) { + this.Notifications.error('Failure', err, 'Unable to download file'); + } + } + + confirmDeleteFile(name) { + const filePath = this.buildPath(this.state.path, name); + + this.ModalService.confirmDeletion(`Are you sure that you want to delete ${this.getRelativePath(filePath)} ?`, (confirmed) => { + if (!confirmed) { + return; + } + return this.deleteFile(filePath); + }); + } + + deleteFile(path) { + this.$async(this.deleteFileAsync, path); + } + async deleteFileAsync(path) { + try { + await this.HostBrowserService.delete(path); + this.Notifications.success('File successfully deleted', this.getRelativePath(path)); + const files = await this.HostBrowserService.ls(this.state.path); + this.files = files; + } catch (err) { + this.Notifications.error('Failure', err, 'Unable to delete file'); + } + } + + $onInit() { + this.getFilesForPath(ROOT_PATH); + } + + parentPath(path) { + if (path === ROOT_PATH) { + return ROOT_PATH; + } + + const split = _.split(path, '/'); + return _.join(_.slice(split, 0, split.length - 1), '/'); + } + + buildPath(parent, file) { + if (parent.lastIndexOf('/') === parent.length - 1) { + return parent + file; + } + return parent + '/' + file; + } + + onFileSelectedForUpload(file) { + return this.$async(this.onFileSelectedForUploadAsync, file); + } + async onFileSelectedForUploadAsync(file) { + try { + await this.HostBrowserService.upload(this.state.path, file); + this.onFileUploaded(); + } catch (err) { + this.Notifications.error('Failure', err, 'Unable to upload file'); + } + } + + onFileUploaded() { + this.refreshList(); + } + + refreshList() { + this.getFilesForPath(this.state.path); + } +} diff --git a/app/agent/components/host-browser/index.js b/app/agent/components/host-browser/index.js new file mode 100644 index 000000000..d38643d6f --- /dev/null +++ b/app/agent/components/host-browser/index.js @@ -0,0 +1,7 @@ +import angular from 'angular'; +import { HostBrowserController } from './hostBrowserController'; + +angular.module('portainer.agent').component('hostBrowser', { + controller: HostBrowserController, + templateUrl: './hostBrowser.html', +});