github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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

pull/2089/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/docker/__module.js
View File

@ -184,6 +184,17 @@ angular.module('portainer.docker', ['portainer.app'])
}
};
var imageImport = {
name: 'docker.images.import',
url: '/import',
views: {
'content@': {
templateUrl: 'app/docker/views/images/import/importimage.html',
controller: 'ImportImageController'
}
}
};
var networks = {
name: 'docker.networks',
url: '/networks',
@ -422,6 +433,7 @@ angular.module('portainer.docker', ['portainer.app'])
$stateRegistryProvider.register(images);
$stateRegistryProvider.register(image);
$stateRegistryProvider.register(imageBuild);
$stateRegistryProvider.register(imageImport);
$stateRegistryProvider.register(networks);
$stateRegistryProvider.register(network);
$stateRegistryProvider.register(networkCreation);

13
app/docker/components/datatables/images-datatable/imagesDatatable.html
View File

@ -23,6 +23,17 @@
<button type="button" class="btn btn-sm btn-primary" ui-sref="docker.images.build">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Build a new image
</button>
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary" ng-disabled="$ctrl.exportInProgress" ui-sref="docker.images.import">
<i class="fa fa-upload space-right" aria-hidden="true"></i>Import
</button>
<button type="button" class="btn btn-sm btn-primary" ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)" button-spinner="$ctrl.exportInProgress">
<i class="fa fa-download space-right" aria-hidden="true"></i>
<span ng-hide="$ctrl.exportInProgress">Export</span>
<span ng-show="$ctrl.exportInProgress">Export in progress...</span>
</button>
</div>
</div>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
@ -108,7 +119,7 @@
<span style="margin-left: 10px;" class="label label-warning image-tag" ng-if="::item.ContainerCount === 0">Unused</span>
</td>
<td>
<span class="label label-primary image-tag" ng-repeat="tag in (item | repotags)">{{ tag }}</span>
<span class="label label-primary image-tag" ng-repeat="tag in (item | repotags) track by $index">{{ tag }}</span>
</td>
<td>{{ item.VirtualSize | humansize }}</td>
<td>{{ item.Created | getisodatefromtimestamp }}</td>

4
app/docker/components/datatables/images-datatable/imagesDatatable.js
View File

@ -10,6 +10,8 @@ angular.module('portainer.docker').component('imagesDatatable', {
reverseOrder: '<',
showHostColumn: '<',
removeAction: '<',
forceRemoveAction: '<'
downloadAction: '<',
forceRemoveAction: '<',
exportInProgress: '<'
}
});

9
app/docker/helpers/imageHelper.js
View File

@ -25,6 +25,15 @@ angular.module('portainer.docker')
};
};
helper.getImagesNamesForDownload = function(images) {
var names = images.map(function(image) {
return image.RepoTags[0] !== '<none>:<none>' ? image.RepoTags[0] : image.Id;
});
return {
names: names
};
};
function extractNameAndTag(imageName, registry) {
var imageNameAndTag = imageName.split(':');
var image = imageNameAndTag[0];

6
app/docker/rest/image.js
View File

@ -26,6 +26,12 @@ function ImageFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, HttpR
headers: { 'X-Registry-Auth': HttpRequestHelper.registryAuthenticationHeader },
ignoreLoadingBar: true
},
download: {
method: 'GET', params: {action:'get', names: '@names'},
transformResponse: imageGetResponse,
responseType: 'blob',
ignoreLoadingBar: true
},
remove: {
method: 'DELETE', params: {id: '@id', force: '@force'},
isArray: true, transformResponse: deleteImageHandler

10
app/docker/rest/response/image.js Normal file
View File

@ -0,0 +1,10 @@
// The get action of the Image 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 imageGetResponse(data) {
var response = {};
response.file = data;
return response;
}

12
app/docker/services/imageService.js
View File

@ -1,5 +1,6 @@
angular.module('portainer.docker')
.factory('ImageService', ['$q', 'Image', 'ImageHelper', 'RegistryService', 'HttpRequestHelper', 'ContainerService', function ImageServiceFactory($q, Image, ImageHelper, RegistryService, HttpRequestHelper, ContainerService) {
.factory('ImageService', ['$q', 'Image', 'ImageHelper', 'RegistryService', 'HttpRequestHelper', 'ContainerService', 'FileUploadService',
function ImageServiceFactory($q, Image, ImageHelper, RegistryService, HttpRequestHelper, ContainerService, FileUploadService) {
'use strict';
var service = {};
@ -138,6 +139,15 @@ angular.module('portainer.docker')
return Image.tag({id: id, tag: imageConfig.tag, repo: imageConfig.repo}).$promise;
};
service.downloadImages = function(images) {
var names = ImageHelper.getImagesNamesForDownload(images);
return Image.download(names).$promise;
};
service.uploadImage = function(file) {
return FileUploadService.loadImages(file);
};
service.deleteImage = function(id, forceRemoval) {
var deferred = $q.defer();
Image.remove({id: id, force: forceRemoval}).$promise

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>

13
app/portainer/services/fileUpload.js
View File

@ -10,7 +10,6 @@ angular.module('portainer.app')
service.buildImage = function(names, file, path) {
var endpointID = EndpointProvider.endpointID();
Upload.setDefaults({ ngfMinSize: 10 });
return Upload.http({
url: 'api/endpoints/' + endpointID + '/docker/build',
headers : {
@ -28,6 +27,18 @@ angular.module('portainer.app')
});
};
service.loadImages = function(file) {
var endpointID = EndpointProvider.endpointID();
return Upload.http({
url: 'api/endpoints/' + endpointID + '/docker/images/load',
headers : {
'Content-Type': file.type
},
data: file,
ignoreLoadingBar: true
});
};
service.createSwarmStack = function(stackName, swarmId, file, env, endpointId) {
return Upload.upload({
url: 'api/stacks?method=file&type=1&endpointId=' + endpointId,

14
app/portainer/services/modalService.js
View File

@ -156,6 +156,20 @@ angular.module('portainer.app')
});
};
service.confirmImageExport = function(callback) {
service.confirm({
title: 'Caution',
message: 'The export may take several minutes, do not navigate away whilst the export is in progress.',
buttons: {
confirm: {
label: 'Continue',
className: 'btn-primary'
}
},
callback: callback
});
};
service.confirmServiceForceUpdate = function(message, callback) {
service.customPrompt({
title: 'Are you sure ?',