feat(host): Add host file browser with upload/download files (#2337)

* feat(agent): add new host page

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

* fix(agent): browse folders in file-datatable

* feat(engine-details): replace engine view with host view

* feat(engine-details): remove old panels

* feat(engine-details): add basic engine-details-panel component

* feat(engine-details): pass details to the different components

* feat(engine-details): replace host-view with host-overview

* feat(engine-details): add commaseperated filter

* feat(engine-details): add host-view container component

* feat(engine-details): add host-details component

* feat(engine-details): build host details object

* feat(engine-details): format engine version

* feat(engine-details): get details for one node

* feat(engine-details): pass is-agent from view

* feat(engine-details): replace old node view with a new component

* feat(engine-details): add swarm-node-details component

* feat(engine-details): remove isSwarm binding

* feat(engine-details): remove node-details and include in parent

* feat(engine-details): add labels-table component

* feat(engine-details): add update node service

* feat(engine-details): add update label functionality

* style(engine-details): remove whitespaces

* feat(engine-details): remove old node page

* feat(engine-details): pass is agent to host details

* feat(host-details): hide missing info

* feat(host-details): update node availability

* style(host-details): remove obsolete event object

* feat(host-details): fix labels not sending

* feat(host-details): remove flags for hiding data

* feat(host-details): create mock call to server for agent host info

* style(host-details): fix spelling mistake in filter's name

* feat(host-details): get info from agent

* feat(host-details): hide engine labels when empty

* feat(node-details): move labels table and save button

* feat(host-info): add different urls for refresh

* feat(host-details): show disk/devices info for agent

* feat(host-view): add loading indicator to devices-panel

* feat(host-details): add loading indicator to disks panel

* feat(agent): fix browse volume

* feat(agent): browse files

* feat(agent): enable rename

* feat(agent): download file

* fix(agent): download file from root

* feat(agent): delete file

* style(agent): remove whitespaces

* fix(agent): fix link on node browser

* feat(agent): basic file uploader

* feat(agent): add basic file upload

* fix(volume-browser): move volume id to query params

* feat(node-browser): moved uploader into browser

* feat(node-browser): add upload spinner

* feat(agent): browse files relative to root

* feat(agent): browse standalone agent

* feat(agent): move browse button from header

* fix(agent): fix url of browser view

* fix(agent): fix breadcrumb on title of host-browser

* feat(agent): fix url on node-browser breadcrumb

* refactor(agent): remove unused controller

* refactor(docker): remove unused filter

* refactor(docker): remove unused controllers

* refactor(docker): remove isAgent binding

app/agent/components/file-uploader/file-uploader-controller.js

@@ -0,0 +1,23 @@
+angular.module('portainer.agent').controller('FileUploaderController', [
+  '$q',
+  function FileUploaderController($q) {
+    var ctrl = this;
+
+    ctrl.state = {
+      uploadInProgress: false
+    };
+
+    ctrl.onFileSelected = onFileSelected;
+
+    function onFileSelected(file) {
+      if (!file) {
+        return;
+      }
+
+      ctrl.state.uploadInProgress = true;
+      $q.when(ctrl.uploadFile(file)).finally(function toggleProgress() {
+        ctrl.state.uploadInProgress = false;
+      });
+    }
+  }
+]);

app/agent/components/file-uploader/file-uploader.html

@@ -0,0 +1,6 @@
+<button 
+  ngf-select="$ctrl.onFileSelected($file)"
+  class="btn ng-scope"
+  button-spinner="$ctrl.state.uploadInProgress">
+  <i style="margin:0" class="fa fa-upload" ng-if="!$ctrl.state.uploadInProgress"></i>
+</button>

app/agent/components/file-uploader/file-uploader.js

@@ -0,0 +1,7 @@
+angular.module('portainer.agent').component('fileUploader', {
+  templateUrl: 'app/agent/components/file-uploader/file-uploader.html',
+  controller: 'FileUploaderController',
+  bindings: {
+    uploadFile: '<onFileSelected'
+  }
+});

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

@@ -1,14 +1,14 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{$ctrl.titleIcon}}" title-text="{{ $ctrl.titleText }}">
+       <file-uploader ng-if="$ctrl.isUploadAllowed" on-file-selected="$ctrl.onFileSelectedForUpload">
+       </file-uploader>
+    </rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
-      </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter"
+          placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
         <table class="table">
@@ -41,23 +41,29 @@
             </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 }}
+                  <i class="fa fa-file space-right" aria-hidden="true"></i>{{
+                  item.Name }}
                 </span>
               </td>
               <td>{{ item.Size | humansize }}</td>
@@ -65,13 +71,14 @@
                 {{ 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>
@@ -87,4 +94,4 @@
       </div>
     </rd-widget-body>
   </rd-widget>
-</div>
+</div>

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

@@ -0,0 +1,22 @@
+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: '&',
+    browse: '&',
+    rename: '&',
+    download: '&',
+    delete: '&',
+    
+    isUploadAllowed: '<',
+    onFileSelectedForUpload: '<'
+  }
+});

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

@@ -0,0 +1,147 @@
+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.html

@@ -0,0 +1,16 @@
+<files-datatable
+  title-text="Host browser - {{$ctrl.getRelativePath()}}" title-icon="fa-file"
+  dataset="$ctrl.files" table-key="host_browser"
+  order-by="Dir"
+  is-root="$ctrl.isRoot()"
+  go-to-parent="$ctrl.goToParent()"
+  browse="$ctrl.browse(name)"
+  rename="$ctrl.renameFile(name, newName)"
+  download="$ctrl.downloadFile(name)"
+  delete="$ctrl.deleteFile(name)"
+
+  is-upload-allowed="true"
+  on-file-selected-for-upload="$ctrl.onFileSelectedForUpload"
+>
+
+</files-datatable>

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

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

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/agent/services/hostBrowserService.js

@@ -0,0 +1,44 @@
+angular.module('portainer.agent').factory('HostBrowserService', [
+  'Browse', 'Upload', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', '$q',
+  function HostBrowserServiceFactory(Browse, Upload, API_ENDPOINT_ENDPOINTS, EndpointProvider, $q) {
+    var service = {};
+
+    service.ls = ls;
+    service.get = get;
+    service.delete = deletePath;
+    service.rename = rename;
+    service.upload = upload;
+
+    function ls(path) {
+      return Browse.ls({ path: path }).$promise;
+    }
+
+    function get(path) {
+      return Browse.get({ path: path }).$promise;
+    }
+
+    function deletePath(path) {
+      return Browse.delete({ path: path }).$promise;
+    }
+
+    function rename(path, newPath) {
+      var payload = {
+        CurrentFilePath: path,
+        NewFilePath: newPath
+      };
+      return Browse.rename({}, payload).$promise;
+    }
+
+    function upload(path, file, onProgress) {
+      var deferred = $q.defer();
+      var url = API_ENDPOINT_ENDPOINTS + '/' + EndpointProvider.endpointID() + '/docker/browse/put';
+      Upload.upload({
+        url: url,  
+        data: { file: file, Path: path }
+      }).then(deferred.resolve, deferred.reject, onProgress);
+      return deferred.promise;
+    }
+
+    return service;
+  }
+]);

app/agent/services/volumeBrowserService.js

@@ -1,27 +1,29 @@
-angular.module('portainer.agent')
-.factory('VolumeBrowserService', ['$q', 'Browse', function VolumeBrowserServiceFactory($q, Browse) {
-  'use strict';
-  var service = {};
+angular.module('portainer.agent').factory('VolumeBrowserService', [
+  '$q', 'Browse',
+  function VolumeBrowserServiceFactory($q, Browse) {
+    'use strict';
+    var service = {};
 
-  service.ls = function(volumeId, path) {
-    return Browse.ls({ volumeID: volumeId, path: path }).$promise;
-  };
-
-  service.get = function(volumeId, path) {
-    return Browse.get({ volumeID: volumeId, path: path }).$promise;
-  };
-
-  service.delete = function(volumeId, path) {
-    return Browse.delete({ volumeID: volumeId, path: path }).$promise;
-  };
-
-  service.rename = function(volumeId, path, newPath) {
-    var payload = {
-      CurrentFilePath: path,
-      NewFilePath: newPath
+    service.ls = function(volumeId, path) {
+      return Browse.ls({ volumeID: volumeId, path: path }).$promise;
     };
-    return Browse.rename({ volumeID: volumeId }, payload).$promise;
-  };
 
-  return service;
-}]);
+    service.get = function(volumeId, path) {
+      return Browse.get({ volumeID: volumeId, path: path }).$promise;
+    };
+
+    service.delete = function(volumeId, path) {
+      return Browse.delete({ volumeID: volumeId, path: path }).$promise;
+    };
+
+    service.rename = function(volumeId, path, newPath) {
+      var payload = {
+        CurrentFilePath: path,
+        NewFilePath: newPath
+      };
+      return Browse.rename({ volumeID: volumeId }, payload).$promise;
+    };
+
+    return service;
+  }
+]);

app/docker/__module.js

@@ -139,6 +139,16 @@ angular.module('portainer.docker', ['portainer.app'])
     }
   };
 
+  var hostBrowser = {
+    name: 'docker.host.browser',
+    url: '/browser',
+    views: {
+      'content@': {
+        component: 'hostBrowserView'
+      }
+    }
+  };
+
   var events = {
     name: 'docker.events',
     url: '/events',
@@ -243,6 +253,16 @@ angular.module('portainer.docker', ['portainer.app'])
     }
   };
 
+  var nodeBrowser = {
+    name: 'docker.nodes.node.browse',
+    url: '/browse',
+    views: {
+      'content@': {
+        component: 'nodeBrowserView'
+      }
+    }
+  };
+
   var secrets = {
     name: 'docker.secrets',
     url: '/secrets',
@@ -414,6 +434,8 @@ angular.module('portainer.docker', ['portainer.app'])
     }
   };
 
+  
+
   $stateRegistryProvider.register(configs);
   $stateRegistryProvider.register(config);
   $stateRegistryProvider.register(configCreation);
@@ -427,6 +449,7 @@ angular.module('portainer.docker', ['portainer.app'])
   $stateRegistryProvider.register(docker);
   $stateRegistryProvider.register(dashboard);
   $stateRegistryProvider.register(host);
+  $stateRegistryProvider.register(hostBrowser);
   $stateRegistryProvider.register(events);
   $stateRegistryProvider.register(images);
   $stateRegistryProvider.register(image);
@@ -437,6 +460,7 @@ angular.module('portainer.docker', ['portainer.app'])
   $stateRegistryProvider.register(networkCreation);
   $stateRegistryProvider.register(nodes);
   $stateRegistryProvider.register(node);
+  $stateRegistryProvider.register(nodeBrowser);
   $stateRegistryProvider.register(secrets);
   $stateRegistryProvider.register(secret);
   $stateRegistryProvider.register(secretCreation);

app/docker/components/dockerSidebarContent/docker-sidebar-content.js

@@ -1,9 +1,9 @@
 angular.module('portainer.docker').component('dockerSidebarContent', {
   templateUrl: 'app/docker/components/dockerSidebarContent/dockerSidebarContent.html',
   bindings: {
-    'endpointApiVersion': '<',
-    'swarmManagement': '<',
-    'standaloneManagement': '<',
-    'adminAccess': '<'
+    endpointApiVersion: '<',
+    swarmManagement: '<',
+    standaloneManagement: '<',
+    adminAccess: '<'
   }
 });

app/docker/components/host-overview/host-overview.html

@@ -1,13 +1,17 @@
 <rd-header>
   <rd-header-title title-text="Host overview">
-    <a data-toggle="tooltip" title="Refresh" ui-sref="{{$ctrl.refreshUrl}}" ui-sref-opts="{reload: true}">
+    <a data-toggle="tooltip" title="Refresh" ui-sref="{{$ctrl.refreshUrl}}"
+      ui-sref-opts="{reload: true}">
       <i class="fa fa-sync" aria-hidden="true"></i>
     </a>
   </rd-header-title>
   <rd-header-content>Docker</rd-header-content>
 </rd-header>
 
-<host-details-panel host="$ctrl.hostDetails" is-agent="$ctrl.isAgent"></host-details-panel>
+<host-details-panel 
+  host="$ctrl.hostDetails" 
+  is-agent="$ctrl.isAgent"
+  browse-url="{{$ctrl.browseUrl}}"></host-details-panel>
 
 <engine-details-panel engine="$ctrl.engineDetails"></engine-details-panel>
 

app/docker/components/host-overview/host-overview.js

@@ -6,7 +6,8 @@ angular.module('portainer.docker').component('hostOverview', {
     devices: '<',
     disks: '<',
     isAgent: '<',
-    refreshUrl: '@'
+    refreshUrl: '@',
+    browseUrl: '@'
   },
   transclude: true
 });

app/docker/components/host-view-panels/host-details-panel/host-details-panel.html

@@ -26,6 +26,17 @@
               <td>Total memory</td>
               <td>{{ $ctrl.host.totalMemory | humansize }}</td>
             </tr>
+            <tr ng-if="$ctrl.isAgent">
+              <td colspan="2">
+                <button 
+                  class="btn btn-primary btn-sm"
+                  title="Browse" 
+                  ui-sref="{{$ctrl.browseUrl}}">
+                  Browse
+                </button>
+              </td>
+            </tr>
+
           </tbody>
         </table>
       </rd-widget-body>

app/docker/components/host-view-panels/host-details-panel/host-details-panel.js

@@ -3,6 +3,7 @@ angular.module('portainer.docker').component('hostDetailsPanel', {
     'app/docker/components/host-view-panels/host-details-panel/host-details-panel.html',
   bindings: {
     host: '<',
-    isAgent: '<'
+    isAgent: '<',
+    browseUrl: '@'
   }
 });

app/docker/views/host/host-browser-view/host-browser-view-controller.js

@@ -0,0 +1,21 @@
+angular
+  .module('portainer.docker')
+  .controller('HostBrowserViewController', [
+    'SystemService', 'HttpRequestHelper',
+    function HostBrowserViewController(SystemService, HttpRequestHelper) {
+      var ctrl = this;
+
+      ctrl.$onInit = $onInit;
+
+      function $onInit() {
+        loadInfo();
+      }
+
+      function loadInfo() {
+        SystemService.info().then(function onInfoLoaded(host) {
+          HttpRequestHelper.setPortainerAgentTargetHeader(host.Name);
+          ctrl.host = host;
+        });
+      }
+    }
+  ]);

app/docker/views/host/host-browser-view/host-browser-view.html

@@ -0,0 +1,14 @@
+<rd-header>
+  <rd-header-title title-text="Host Browser"></rd-header-title>
+  <rd-header-content>
+      Host &gt; <a ui-sref="docker.host">{{ $ctrl.host.Name }}</a> &gt; browse
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <host-browser
+     ng-if="$ctrl.host"
+    ></host-browser>
+  </div>
+</div>

app/docker/views/host/host-browser-view/host-browser-view.js

@@ -0,0 +1,4 @@
+angular.module('portainer.docker').component('hostBrowserView', {
+  templateUrl: 'app/docker/views/host/host-browser-view/host-browser-view.html',
+  controller: 'HostBrowserViewController'
+});

app/docker/views/host/host-view.html

@@ -1,8 +1,10 @@
 <host-overview
   engine-details="$ctrl.engineDetails"
   host-details="$ctrl.hostDetails"
-  refresh-url="docker.host"
   is-agent="$ctrl.state.isAgent"
   disks="$ctrl.disks"
   devices="$ctrl.devices"
+
+  refresh-url="docker.host"
+  browse-url="docker.host.browser"
 ></host-overview>

app/docker/views/nodes/node-browser/node-browser-controller.js

@@ -0,0 +1,20 @@
+angular.module('portainer.docker').controller('NodeBrowserController', [
+  'NodeService', 'HttpRequestHelper', '$stateParams',
+  function NodeBrowserController(NodeService, HttpRequestHelper, $stateParams) {
+    var ctrl = this;
+
+    ctrl.$onInit = $onInit;
+
+    function $onInit() {
+      ctrl.nodeId = $stateParams.id;
+      loadNode();
+    }
+
+    function loadNode() {
+      NodeService.node(ctrl.nodeId).then(function onNodeLoaded(node) {
+        HttpRequestHelper.setPortainerAgentTargetHeader(node.Hostname);
+        ctrl.node = node;
+      });
+    }
+  }
+]);

app/docker/views/nodes/node-browser/node-browser.html

@@ -0,0 +1,14 @@
+<rd-header>
+  <rd-header-title title-text="Node Browser"></rd-header-title>
+  <rd-header-content>
+      <a ui-sref="docker.swarm">Swarm</a> &gt; <a ui-sref="docker.nodes.node({ id: $ctrl.nodeId })">{{ $ctrl.node.Hostname }}</a> &gt; browse
+  </rd-header-content>
+</rd-header>
+
+<div class="row">
+  <div class="col-sm-12">
+    <host-browser
+     ng-if="$ctrl.node"
+    ></host-browser>
+  </div>
+</div>

app/docker/views/nodes/node-browser/node-browser.js

@@ -0,0 +1,4 @@
+angular.module('portainer.docker').component('nodeBrowserView', {
+  templateUrl: 'app/docker/views/nodes/node-browser/node-browser.html',
+  controller: 'NodeBrowserController'
+});

app/docker/views/nodes/node-details/node-details-view.html

@@ -2,9 +2,11 @@
   is-agent="$ctrl.state.isAgent"
   host-details="$ctrl.hostDetails"
   engine-details="$ctrl.engineDetails"
-  refresh-url="docker.nodes.node"
   disks="$ctrl.disks"
   devices="$ctrl.devices"
+
+  refresh-url="docker.nodes.node"
+  browse-url="docker.nodes.node.browse"
 >
   <swarm-node-details-panel
     details="$ctrl.nodeDetails"