feat(volume-browser): add the ability to browse volume content (#2051)

pull/2060/head^2
Anthony Lapenna 2018-07-23 07:01:03 +02:00 committed by GitHub
parent cec878b01d
commit 48179b9e3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 366 additions and 18 deletions

View File

@ -15,6 +15,7 @@ angular.module('portainer', [
'angular-json-tree',
'angular-loading-bar',
'angular-clipboard',
'ngFileSaver',
'luegg.directives',
'portainer.templates',
'portainer.app',

View File

@ -0,0 +1,15 @@
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'
}
});

View File

@ -0,0 +1,90 @@
<div class="datatable">
<rd-widget>
<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>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
<a ng-click="$ctrl.changeOrderBy('Name')">
Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Size')">
Size
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('ModTime')">
Last modification
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ModTime' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ModTime' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr ng-if="$ctrl.volumeBrowser.state.path !== '/'">
<td colspan="4">
<a ng-click="$ctrl.volumeBrowser.up()"><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 />
<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>
</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>
</span>
<span ng-if="!item.edit && !item.Dir">
<i class="fa fa-file space-right" aria-hidden="true"></i>{{ item.Name }}
</span>
</td>
<td>{{ item.Size | humansize }}</td>
<td>
{{ 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">
<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)">
<i class="fa fa-trash" aria-hidden="true"></i> Delete
</btn>
</td>
</tr>
<tr ng-if="!$ctrl.dataset">
<td colspan="5" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="$ctrl.state.filteredDataSet.length === 0">
<td colspan="5" class="text-center text-muted">No files found.</td>
</tr>
</tbody>
</table>
</div>
</rd-widget-body>
</rd-widget>
</div>

View File

@ -0,0 +1,8 @@
angular.module('portainer.agent').component('volumeBrowser', {
templateUrl: 'app/agent/components/volume-browser/volumeBrowser.html',
controller: 'VolumeBrowserController',
bindings: {
volumeId: '<',
nodeName: '<'
}
});

View File

@ -0,0 +1,5 @@
<volume-browser-datatable
title-text="Volume browser" title-icon="fa-file"
dataset="$ctrl.files" table-key="volume_browser"
order-by="Dir"
></volume-browser-datatable>

View File

@ -0,0 +1,115 @@
angular.module('portainer.agent')
.controller('VolumeBrowserController', ['HttpRequestHelper', 'VolumeBrowserService', 'FileSaver', 'Blob', 'ModalService', 'Notifications',
function (HttpRequestHelper, VolumeBrowserService, FileSaver, Blob, ModalService, Notifications) {
var ctrl = this;
this.state = {
path: '/'
};
this.rename = function(file, newName) {
var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
var newFilePath = this.state.path === '/' ? newName : this.state.path + '/' + newName;
VolumeBrowserService.rename(this.volumeId, filePath, newFilePath)
.then(function success() {
Notifications.success('File successfully renamed', newFilePath);
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 rename file');
});
};
this.delete = function(file) {
var filePath = this.state.path === '/' ? file : this.state.path + '/' + file;
ModalService.confirmDeletion(
'Are you sure that you want to delete ' + filePath + ' ?',
function onConfirm(confirmed) {
if(!confirmed) { return; }
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], { type: 'text/plain;charset=utf-8' });
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) {
VolumeBrowserService.ls(ctrl.volumeId, path)
.then(function success(data) {
ctrl.state.path = path;
ctrl.files = data;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to browse volume');
});
}
function parentPath(path) {
if (path.lastIndexOf('/') === 0) {
return '/';
}
var split = _.split(path, '/');
return _.join(_.slice(split, 0, split.length - 1), '/');
}
function buildPath(parent, file) {
if (parent === '/') {
return parent + file;
}
return parent + '/' + file;
}
this.$onInit = function() {
HttpRequestHelper.setPortainerAgentTargetHeader(this.nodeName);
VolumeBrowserService.ls(this.volumeId, this.state.path)
.then(function success(data) {
ctrl.files = data;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to browse volume');
});
};
}]);

View File

@ -5,6 +5,6 @@ angular.module('portainer.agent')
endpointId: EndpointProvider.endpointID
},
{
query: {method: 'GET', isArray: true}
query: { method: 'GET', isArray: true }
});
}]);

22
app/agent/rest/browse.js Normal file
View File

@ -0,0 +1,22 @@
angular.module('portainer.agent')
.factory('Browse', ['$resource', 'API_ENDPOINT_ENDPOINTS', 'EndpointProvider', function BrowseFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider) {
'use strict';
return $resource(API_ENDPOINT_ENDPOINTS + '/:endpointId/docker/browse/:id/:action', {
endpointId: EndpointProvider.endpointID
},
{
ls: {
method: 'GET', isArray: true, params: { id: '@id', action: 'ls' }
},
get: {
method: 'GET', params: { id: '@id', action: 'get' },
transformResponse: browseGetResponse
},
delete: {
method: 'DELETE', params: { id: '@id', action: 'delete' }
},
rename: {
method: 'PUT', params: { id: '@id', action: 'rename' }
}
});
}]);

View File

@ -0,0 +1,9 @@
// The get action of the Browse service returns a file.
// ngResource will transform it as an array of chars.
// This functions simply creates a response object and assign
// the data to a field.
function browseGetResponse(data) {
var response = {};
response.file = data;
return response;
}

View File

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

View File

@ -383,6 +383,17 @@ angular.module('portainer.docker', ['portainer.app'])
}
};
var volumeBrowse = {
name: 'docker.volumes.volume.browse',
url: '/browse',
views: {
'content@': {
templateUrl: 'app/docker/views/volumes/browse/browsevolume.html',
controller: 'BrowseVolumeController'
}
}
};
var volumeCreation = {
name: 'docker.volumes.new',
url: '/new',
@ -430,5 +441,6 @@ angular.module('portainer.docker', ['portainer.app'])
$stateRegistryProvider.register(taskLogs);
$stateRegistryProvider.register(volumes);
$stateRegistryProvider.register(volume);
$stateRegistryProvider.register(volumeBrowse);
$stateRegistryProvider.register(volumeCreation);
}]);

View File

@ -103,7 +103,10 @@
<label for="select_{{ $index }}"></label>
</span>
<a ui-sref="docker.volumes.volume({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate:40 }}</a>
<span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="item.dangling">Unused</span>
<a ui-sref="docker.volumes.volume.browse({ id: item.Id, nodeName: item.NodeName })" class="btn btn-xs btn-primary space-left" ng-if="$ctrl.showBrowseAction">
<i class="fa fa-search"></i> browse</a>
</a>
<span style="margin-left: 10px;" class="label label-warning image-tag space-left" ng-if="item.dangling">Unused</span>
</td>
<td>{{ item.StackName ? item.StackName : '-' }}</td>
<td>{{ item.Driver }}</td>

View File

@ -10,6 +10,7 @@ angular.module('portainer.docker').component('volumesDatatable', {
reverseOrder: '<',
showOwnershipColumn: '<',
showHostColumn: '<',
removeAction: '<'
removeAction: '<',
showBrowseAction: '<'
}
});

View File

@ -67,11 +67,7 @@ function ContainerServiceFactory($q, Container, ResourceControlService, LogHelpe
var deferred = $q.defer();
Container.create(configuration).$promise
.then(function success(data) {
if (data.message) {
deferred.reject({ msg: data.message });
} else {
deferred.resolve(data);
}
deferred.resolve(data);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to create container', err: err });

View File

@ -0,0 +1,11 @@
angular.module('portainer.docker')
.controller('BrowseVolumeController', ['$scope', '$transition$',
function ($scope, $transition$) {
function initView() {
$scope.volumeId = $transition$.params().id;
$scope.nodeName = $transition$.params().nodeName;
}
initView();
}]);

View File

@ -0,0 +1,15 @@
<rd-header>
<rd-header-title title-text="Volume browser"></rd-header-title>
<rd-header-content>
<a ui-sref="docker.volumes">Volumes</a> &gt; <a ui-sref="docker.volumes.volume({ id: volumeId })">{{ volumeId }}</a> &gt; browse
</rd-header-content>
</rd-header>
<div class="row">
<div class="col-sm-12">
<volume-browser
volume-id="volumeId"
node-name="nodeName"
></volume-browser>
</div>
</div>

View File

@ -10,12 +10,13 @@
<div class="row">
<div class="col-sm-12">
<volumes-datatable
title-text="Volumes" title-icon="fa-cubes"
dataset="volumes" table-key="volumes"
order-by="Id"
remove-action="removeAction"
show-ownership-column="applicationState.application.authentication"
show-host-column="applicationState.endpoint.mode.agentProxy"
title-text="Volumes" title-icon="fa-cubes"
dataset="volumes" table-key="volumes"
order-by="Id"
remove-action="removeAction"
show-ownership-column="applicationState.application.authentication"
show-host-column="applicationState.endpoint.mode.agentProxy"
show-browse-action="applicationState.endpoint.mode.agentProxy"
></volumes-datatable>
</div>
</div>

View File

@ -52,7 +52,7 @@
</tr>
</thead>
<tbody>
<tr dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))" ng-class="{active: item.Checked}">
<tr dir-paginate-start="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))">
<td>
<a ng-click="$ctrl.dashboardAction(item)"><i class="fa fa-sign-in-alt" aria-hidden="true"></i> {{ item.Name }}</a>
</td>
@ -63,7 +63,7 @@
<td>
<span>
<i ng-class="item.Type | endpointtypeicon" aria-hidden="true" style="margin-right: 2px;"></i>
{{ item.Type | endpointtypename }}
{{ item.Type | endpointtypename }}
</span>
</td>
<td>

View File

@ -171,7 +171,7 @@
<containers-datatable
title-text="Containers" title-icon="fa-server"
dataset="containers" table-key="stack-containers"
order-by="Status"
order-by="Status"
show-ownership-column="applicationState.application.authentication"
show-host-column="false"
show-add-action="false"
@ -184,7 +184,7 @@
<services-datatable
title-text="Services" title-icon="fa-list-alt"
dataset="services" table-key="stack-services"
order-by="Name"
order-by="Name"
nodes="nodes"
agent-proxy="applicationState.endpoint.mode.agentProxy"
show-ownership-column="false"

View File

@ -28,6 +28,7 @@
"angular": "~1.5.0",
"angular-clipboard": "^1.6.2",
"angular-cookies": "~1.5.0",
"angular-file-saver": "^1.1.3",
"angular-google-analytics": "github:revolunet/angular-google-analytics#~1.1.9",
"angular-json-tree": "1.0.1",
"angular-jwt": "~0.1.8",

View File

@ -52,3 +52,4 @@ angular:
- 'angular-loading-bar/build/loading-bar.js'
- 'angularjs-scroll-glue/src/scrollglue.js'
- 'angular-clipboard/angular-clipboard.js'
- 'angular-file-saver/dist/angular-file-saver.bundle.js'

View File

@ -99,6 +99,13 @@ angular-cookies@~1.5.0:
version "1.5.11"
resolved "https://registry.yarnpkg.com/angular-cookies/-/angular-cookies-1.5.11.tgz#88558de7c5044dcc3abeb79614d7ef8107ba49c0"
angular-file-saver@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/angular-file-saver/-/angular-file-saver-1.1.3.tgz#dcaec0695214f226a4caafc8c16d21a9a61f7d1b"
dependencies:
blob-tmp "^1.0.0"
file-saver "^1.3.3"
"angular-google-analytics@github:revolunet/angular-google-analytics#~1.1.9":
version "1.1.8"
resolved "https://codeload.github.com/revolunet/angular-google-analytics/tar.gz/92768a525870bc066dcf85fbe9d9f115358a6d91"
@ -343,6 +350,10 @@ beeper@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
blob-tmp@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/blob-tmp/-/blob-tmp-1.0.0.tgz#de82491e222ff1354c77a93ee8e4ea2c89544273"
body-parser@~1.13.3:
version "1.13.3"
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.13.3.tgz#c08cf330c3358e151016a05746f13f029c97fa97"
@ -1384,6 +1395,10 @@ file-entry-cache@^2.0.0:
flat-cache "^1.2.1"
object-assign "^4.0.1"
file-saver@^1.3.3:
version "1.3.8"
resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
file-sync-cmp@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/file-sync-cmp/-/file-sync-cmp-0.1.1.tgz#a5e7a8ffbfa493b43b923bbd4ca89a53b63b612b"