Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-09 07:45:22 +02:00
Code Issues Releases Activity

feat(images): add the ability to export/import Docker images (#935) (#2073)

Browse source
This commit is contained in:
baron_l 2018-07-26 15:09:48 +02:00 • committed by Anthony Lapenna
parent d2702d6d7b
commit 5bca9560c9
16 changed files with 278 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/docker/views/images/build/buildimage.html
View file

@ -143,7 +143,7 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-sm btn-primary" ngf-select ng-model="formValues.UploadFile">Select file</button>
<button class="btn btn-sm btn-primary" ngf-select ngf-min-size="10" ng-model="formValues.UploadFile">Select file</button>
<span style="margin-left: 5px;">
{{ formValues.UploadFile.name }}
<i class="fa fa-times red-icon" ng-if="!formValues.UploadFile" aria-hidden="true"></i>

5
app/docker/views/images/edit/image.html
View file

@ -99,6 +99,11 @@
<td>
{{ image.Id }}
<button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this image</button>
<button class="btn btn-xs btn-primary" ng-click="exportImage(image)" button-spinner="$ctrl.exportInProgress" ng-disabled="state.exportInProgress">
<i class="fa fa-download space-right" aria-hidden="true"></i>
<span ng-hide="state.exportInProgress">Export this image</span>
<span ng-show="state.exportInProgress">Export in progress...</span>
</button>
</td>
</tr>
<tr ng-if="image.Parent">

37
app/docker/views/images/edit/imageController.js
View file

@ -1,11 +1,15 @@
angular.module('portainer.docker')
.controller('ImageController', ['$q', '$scope', '$transition$', '$state', '$timeout', 'ImageService', 'RegistryService', 'Notifications', 'HttpRequestHelper',
function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryService, Notifications, HttpRequestHelper) {
.controller('ImageController', ['$q', '$scope', '$transition$', '$state', '$timeout', 'ImageService', 'RegistryService', 'Notifications', 'HttpRequestHelper', 'ModalService', 'FileSaver', 'Blob',
function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryService, Notifications, HttpRequestHelper, ModalService, FileSaver, Blob) {
$scope.formValues = {
Image: '',
Registry: ''
};
$scope.state = {
exportInProgress: false
};
$scope.sortType = 'Order';
$scope.sortReverse = false;
@ -97,6 +101,35 @@ function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryServ
});
};
function exportImage(image) {
HttpRequestHelper.setPortainerAgentTargetHeader(image.NodeName);
$scope.state.exportInProgress = true;
ImageService.downloadImages([image])
.then(function success(data) {
var downloadData = new Blob([data.file], { type: 'application/x-tar' });
FileSaver.saveAs(downloadData, 'images.tar');
Notifications.success('Image successfully downloaded');
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to download image');
})
.finally(function final() {
$scope.state.exportInProgress = false;
});
}
$scope.exportImage = function (image) {
if (image.RepoTags.length === 0 || _.includes(image.RepoTags, '<none>')) {
Notifications.warning('', 'Cannot download a untagged image');
return;
}
ModalService.confirmImageExport(function (confirmed) {
if(!confirmed) { return; }
exportImage(image);
});
};
function initView() {
HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
var endpointProvider = $scope.applicationState.endpoint.mode.provider;

2
app/docker/views/images/images.html
View file

@ -59,8 +59,10 @@
dataset="images" table-key="images"
order-by="RepoTags"
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
download-action="downloadAction"
remove-action="removeAction"
force-remove-action="confirmRemovalAction"
export-in-progress="state.exportInProgress"
></images-datatable>
</div>
</div>

58
app/docker/views/images/imagesController.js
View file

@ -1,8 +1,9 @@
angular.module('portainer.docker')
.controller('ImagesController', ['$scope', '$state', 'ImageService', 'Notifications', 'ModalService', 'HttpRequestHelper',
function ($scope, $state, ImageService, Notifications, ModalService, HttpRequestHelper) {
.controller('ImagesController', ['$scope', '$state', 'ImageService', 'Notifications', 'ModalService', 'HttpRequestHelper', 'FileSaver', 'Blob',
function ($scope, $state, ImageService, Notifications, ModalService, HttpRequestHelper, FileSaver, Blob) {
$scope.state = {
actionInProgress: false
actionInProgress: false,
exportInProgress: false
};
$scope.formValues = {
@ -39,6 +40,57 @@ function ($scope, $state, ImageService, Notifications, ModalService, HttpRequest
});
};
function isAuthorizedToDownload(selectedItems) {
for (var i = 0; i < selectedItems.length; i++) {
var image = selectedItems[i];
var untagged = _.find(image.RepoTags, function (item) {
return item.indexOf('<none>') > -1;
});
if (untagged) {
Notifications.warning('', 'Cannot download a untagged image');
return false;
}
}
if (_.uniqBy(selectedItems, 'NodeName').length > 1) {
Notifications.warning('', 'Cannot download images from different nodes at the same time');
return false;
}
return true;
}
function exportImages(images) {
HttpRequestHelper.setPortainerAgentTargetHeader(images[0].NodeName);
$scope.state.exportInProgress = true;
ImageService.downloadImages(images)
.then(function success(data) {
var downloadData = new Blob([data.file], { type: 'application/x-tar' });
FileSaver.saveAs(downloadData, 'images.tar');
Notifications.success('Image(s) successfully downloaded');
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to download image(s)');
})
.finally(function final() {
$scope.state.exportInProgress = false;
});
}
$scope.downloadAction = function (selectedItems) {
if (!isAuthorizedToDownload(selectedItems)) {
return;
}
ModalService.confirmImageExport(function (confirmed) {
if(!confirmed) { return; }
exportImages(selectedItems);
});
};
$scope.removeAction = function (selectedItems, force) {
var actionCount = selectedItems.length;
angular.forEach(selectedItems, function (image) {

31
app/docker/views/images/import/importImageController.js Normal file
View file

@ -0,0 +1,31 @@
angular.module('portainer.docker')
.controller('ImportImageController', ['$scope', '$state', 'ImageService', 'Notifications', 'HttpRequestHelper',
function ($scope, $state, ImageService, Notifications, HttpRequestHelper) {
$scope.state = {
actionInProgress: false
};
$scope.formValues = {
UploadFile: null,
NodeName: null
};
$scope.uploadImage = function() {
$scope.state.actionInProgress = true;
var nodeName = $scope.formValues.NodeName;
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
var file = $scope.formValues.UploadFile;
ImageService.uploadImage(file)
.then(function success() {
Notifications.success('Images successfully uploaded');
})
.catch(function error(err) {
Notifications.error('Failure', err.message, 'Unable to upload image');
})
.finally(function final() {
$scope.state.actionInProgress = false;
});
};
}]);

60
app/docker/views/images/import/importimage.html Normal file
View file

@ -0,0 +1,60 @@
<rd-header>
<rd-header-title title-text="Import image"></rd-header-title>
<rd-header-content>
<a ui-sref="docker.images">Images</a> &gt; Import image
</rd-header-content>
</rd-header>
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-body>
<form class="form-horizontal">
<!-- upload -->
<div class="col-sm-12 form-section-title">
Upload
</div>
<div class="form-group">
<span class="col-sm-12 text-muted small">
You can upload a tar archive containing your images.
</span>
</div>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-sm btn-primary" ngf-select ngf-min-size="10" ngf-accept="'application/x-tar'" ng-model="formValues.UploadFile">Select file</button>
<span style="margin-left: 5px;">
{{ formValues.UploadFile.name }}
<i class="fa fa-times red-icon" ng-if="!formValues.UploadFile" aria-hidden="true"></i>
</span>
</div>
</div>
<!-- !upload -->
<div ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<div class="col-sm-12 form-section-title">
Deployment
</div>
<!-- node-selection -->
<node-selector model="formValues.NodeName">
</node-selector>
<!-- !node-selection -->
</div>
<!-- actions -->
<div class="col-sm-12 form-section-title">
Actions
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.UploadFile"
ng-click="uploadImage()" button-spinner="state.actionInProgress">
<span ng-hide="state.actionInProgress">Upload</span>
<span ng-show="state.actionInProgress">Images uploading in progress...</span>
</button>
<span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
</div>
</div>
<!-- !actions -->
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>