mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(volume-browser): add the ability to browse volume content (#2051)
This commit is contained in:
Anthony Lapenna
GitHub
parent
cec878b01d
commit
48179b9e3d
22 changed files with 366 additions and 18 deletions
|
|
@ -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'
|
||||
}
|
||||
});
|
||||
|
|
@ -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>
|
||||
8
app/agent/components/volume-browser/volume-browser.js
Normal file
8
app/agent/components/volume-browser/volume-browser.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
angular.module('portainer.agent').component('volumeBrowser', {
|
||||
templateUrl: 'app/agent/components/volume-browser/volumeBrowser.html',
|
||||
controller: 'VolumeBrowserController',
|
||||
bindings: {
|
||||
volumeId: '<',
|
||||
nodeName: '<'
|
||||
}
|
||||
});
|
||||
5
app/agent/components/volume-browser/volumeBrowser.html
Normal file
5
app/agent/components/volume-browser/volumeBrowser.html
Normal 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>
|
||||
115
app/agent/components/volume-browser/volumeBrowserController.js
Normal file
115
app/agent/components/volume-browser/volumeBrowserController.js
Normal 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');
|
||||
});
|
||||
};
|
||||
|
||||
}]);
|
||||
Loading…
Add table
Add a link
Reference in a new issue