feat(agent): convert volume-browser to files-datatable

app/agent/components/files-datatable/files-datatable-controller.js

@@ -0,0 +1,5 @@
+angular
+  .module('portainer.agent')
+  .controller('FilesDatatableController', [
+    function FilesDatatableController() {}
+  ]);

app/agent/components/files-datatable/files-datatable.html

@@ -41,20 +41,20 @@
             </tr>
           </thead>
           <tbody>
-            <tr ng-if="$ctrl.volumeBrowser.state.path !== '/'">
+            <tr ng-if="!$ctrl.isRoot">
               <td colspan="4">
-                <a ng-click="$ctrl.volumeBrowser.up()"><i class="fa fa-level-up-alt space-right"></i>Go to parent</a>
+                <a ng-click="$ctrl.goToParent()"><i class="fa fa-level-up-alt space-right"></i>Go to parent</a>
               </td>
             </tr>
             <tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
               <td>
                 <span ng-if="item.edit">
-                  <input class="input-sm" type="text" ng-model="item.newName" on-enter-key="$ctrl.volumeBrowser.rename(item.Name, item.newName); item.edit = false;" auto-focus />
+                  <input class="input-sm" type="text" ng-model="item.newName" on-enter-key="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;" auto-focus />
                   <a class="interactive" ng-click="item.edit = false;"><i class="fa fa-times"></i></a>
-                  <a class="interactive" ng-click="$ctrl.volumeBrowser.rename(item.Name, item.newName); item.edit = false;"><i class="fa fa-check-square"></i></a>
+                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><i class="fa fa-check-square"></i></a>
                 </span>
                 <span ng-if="!item.edit && item.Dir">
-                  <a ng-click="$ctrl.volumeBrowser.browse(item.Name)"><i class="fa fa-folder space-right" aria-hidden="true"></i>{{ item.Name }}</a>
+                  <a ng-click="$ctrl.browse({name: item.Name})"><i class="fa fa-folder space-right" aria-hidden="true"></i>{{ item.Name }}</a>
                 </span>
                 <span ng-if="!item.edit && !item.Dir">
                   <i class="fa fa-file space-right" aria-hidden="true"></i>{{ item.Name }}
@@ -65,13 +65,13 @@
                 {{ item.ModTime | getisodatefromtimestamp }}
               </td>
               <td>
-                <btn class="btn btn-xs btn-primary space-right" ng-click="$ctrl.volumeBrowser.download(item.Name)" ng-if="!item.Dir">
+                <btn class="btn btn-xs btn-primary space-right" ng-click="$ctrl.download({ name: item.Name })" ng-if="!item.Dir">
                   <i class="fa fa-download" aria-hidden="true"></i> Download
                 </btn>
                 <btn class="btn btn-xs btn-primary space-right" ng-click="item.newName = item.Name; item.edit = true">
                   <i class="fa fa-edit" aria-hidden="true"></i> Rename
                 </btn>
-                <btn class="btn btn-xs btn-danger" ng-click="$ctrl.volumeBrowser.delete(item.Name)">
+                <btn class="btn btn-xs btn-danger" ng-click="$ctrl.delete({ name: item.Name })">
                   <i class="fa fa-trash" aria-hidden="true"></i> Delete
                 </btn>
               </td>

app/agent/components/files-datatable/files-datatable.js

@@ -0,0 +1,18 @@
+angular.module('portainer.agent').component('filesDatatable', {
+  templateUrl: 'app/agent/components/files-datatable/files-datatable.html',
+  controller: 'GenericDatatableController',
+  bindings: {
+    titleText: '@',
+    titleIcon: '@',
+    dataset: '<',
+    tableKey: '@',
+    orderBy: '@',
+    reverseOrder: '<',
+
+    isRoot: '<',
+    goToParent: '&',
+    rename: '&',
+    download: '&',
+    delete: '&'
+  }
+});

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

@@ -0,0 +1,34 @@
+angular
+  .module('portainer.agent')
+  .controller('HostBrowserController', [function HostBrowserController() {
+
+    this.isRoot=true
+    this.files = []
+
+    this.goToParent = goToParent;
+    this.browse = browse;
+    this.renameFile = renameFile;
+    this.downloadFile = downloadFile;
+    this.deleteFile = deleteFile;
+
+    function goToParent() {
+
+    }
+
+    function browse(folderName) {
+
+    } 
+
+    function renameFile(name, newName) {
+
+    }
+
+    function downloadFile(name) {
+
+    }
+
+    function deleteFile(name) {
+
+    }
+
+  }]);

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

@@ -0,0 +1,11 @@
+<files-datatable
+  title-text="Host browser" title-icon="fa-file"
+  dataset="$ctrl.files" table-key="host_browser"
+  order-by="Dir"
+  is-root="$ctrl.state.isRoot"
+  go-to-parent="$ctrl.goToParent()"
+  browse="$ctrl.browse(name)"
+  rename="$ctrl.renameFile(name, newName)"
+  download="$ctrl.downloadFile(name)"
+  delete="$ctrl.deleteFile(name)"
+></files-datatable>

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

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

app/agent/components/volume-browser/volume-browser-datatable/volume-browser-datatable.js

@@ -1,15 +0,0 @@
-angular.module('portainer.agent').component('volumeBrowserDatatable', {
-  templateUrl: 'app/agent/components/volume-browser/volume-browser-datatable/volumeBrowserDatatable.html',
-  controller: 'GenericDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<'
-  },
-  require: {
-    volumeBrowser: '^^volumeBrowser'
-  }
-});

app/agent/components/volume-browser/volumeBrowser.html

@@ -1,5 +1,11 @@
-<volume-browser-datatable
+<files-datatable
   title-text="Volume browser" title-icon="fa-file"
   dataset="$ctrl.files" table-key="volume_browser"
   order-by="Dir"
-></volume-browser-datatable>
+  is-root="$ctrl.state.path === '/'"
+  go-to-parent="$ctrl.up()"
+  browse="$ctrl.browse(name)"
+  rename="$ctrl.rename(name, newName)"
+  download="$ctrl.download(name)"
+  delete="$ctrl.delete(name)"
+></files-datatable>

app/docker/views/host/host.html

@@ -14,8 +14,6 @@
 <div class="row">
   <div class="col-sm-12">
     <host-browser
-      volume-id="volumeId"
-      node-name="nodeName"
     ></host-browser>
   </div>
 </div>