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

app/agent/components/host-browser/host-browser-controller.js

@@ -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);
-    }
-  },
-]);

app/agent/components/host-browser/host-browser.js

@@ -1,5 +0,0 @@
-angular.module('portainer.agent').component('hostBrowser', {
-  controller: 'HostBrowserController',
-  templateUrl: './host-browser.html',
-  bindings: {},
-});

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)"
 >

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);
+  }
+}

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',
+});