THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

fix(app): registry push-pull features overhaul (#3393)

* feat(registry): registry or direct url selector

* feat(app): push pull container creation

* feat(app): push pull container duplicate

* feat(app): push pull container details recreate

* feat(app): push pull container details commit

* feat(app): push pull images

* feat(app): push pull image tag

* feat(app): push pull image push

* feat(app): push pull image pull

* feat(app): push pull service creation

* feat(app): push pull templates create container

* feat(app): push pull templates create stacks

* feat(app): push pull template edit

* feat(app): push pull service details update

* fix(app): refactor registry selector + registry auto select

* feat(app): remove autocomplete on registry selector

* style(image-registry): reword simple/advanced mode

* Revert "feat(app): remove autocomplete on registry selector"

This reverts commit 97ec2ddd62.

* refactor(registry-selector): reverse registry and image fields

* feat(app): autocomplete on registry selector

* feat(registry-selector): change gitlab registry autocomplete

* feat(registry-selector): autocomplete for dockerhub

* feat(registry-selector): gitlab url based on locked value instead of name

* fix(registry-selector): gitlab registries URL are not modified anymore

* fix(registry-selector): change gitlab image autofill on duplicate

* fix(registry-selector): gitlab registries now only suggest their own images and not all from gitlab

* fix(registry-selector): psuh pull issues with gitlab registries

* fix(registry-selector): dockerhub registry selection on duplicate for dockerhub images

* fix(templates): registry retrieval for template

* feat(images): add autocomplete on image pull panel

* fix(registry-selector): add latest tag when no tag is specified

* fix(registry-selector): latest tag now applied for non gitlab registries
tags/1.23.0^2
xAt0mZ Anthony Lapenna 1 month ago
parent
commit
e19bc8abc7
32 changed files with 519 additions and 343 deletions
  1. +1
    -0
      api/portainer.go
  2. +2
    -2
      app/docker/components/imageRegistry/por-image-registry.js
  3. +45
    -12
      app/docker/components/imageRegistry/porImageRegistry.html
  4. +83
    -25
      app/docker/components/imageRegistry/porImageRegistryController.js
  5. +42
    -50
      app/docker/helpers/imageHelper.js
  6. +16
    -0
      app/docker/models/porImageRegistry.js
  7. +1
    -1
      app/docker/rest/commit.js
  8. +3
    -3
      app/docker/rest/image.js
  9. +34
    -12
      app/docker/services/imageService.js
  10. +9
    -15
      app/docker/views/containers/create/createContainerController.js
  11. +9
    -7
      app/docker/views/containers/create/createcontainer.html
  12. +3
    -4
      app/docker/views/containers/edit/container.html
  13. +23
    -22
      app/docker/views/containers/edit/containerController.js
  14. +3
    -4
      app/docker/views/images/edit/image.html
  15. +14
    -15
      app/docker/views/images/edit/imageController.js
  16. +5
    -11
      app/docker/views/images/images.html
  17. +5
    -6
      app/docker/views/images/imagesController.js
  18. +6
    -7
      app/docker/views/services/create/createServiceController.js
  19. +3
    -4
      app/docker/views/services/create/createservice.html
  20. +32
    -0
      app/docker/views/services/edit/includes/image.html
  21. +5
    -6
      app/docker/views/services/edit/service.html
  22. +29
    -20
      app/docker/views/services/edit/serviceController.js
  23. +1
    -53
      app/portainer/components/forms/template-form/template-form.js
  24. +2
    -3
      app/portainer/components/forms/template-form/templateForm.html
  25. +54
    -0
      app/portainer/components/forms/template-form/templateFormController.js
  26. +0
    -18
      app/portainer/helpers/registryHelper.js
  27. +2
    -1
      app/portainer/models/registry.js
  28. +7
    -7
      app/portainer/models/template.js
  29. +50
    -17
      app/portainer/services/api/registryService.js
  30. +25
    -13
      app/portainer/services/api/templateService.js
  31. +4
    -4
      app/portainer/views/templates/templatesController.js
  32. +1
    -1
      assets/css/app.css

+ 1
- 0
api/portainer.go View File

@@ -196,6 +196,7 @@ type (
GitlabRegistryData struct {
ProjectID int `json:"ProjectId"`
InstanceURL string `json:"InstanceURL"`
ProjectPath string `json:"ProjectPath"`
}

// Registry represents a Docker registry with all the info required


+ 2
- 2
app/docker/components/imageRegistry/por-image-registry.js View File

@@ -2,8 +2,8 @@ angular.module('portainer.docker').component('porImageRegistry', {
templateUrl: './porImageRegistry.html',
controller: 'porImageRegistryController',
bindings: {
'image': '=',
'registry': '=',
'model': '=', // must be of type PorImageRegistryModel
'pullWarning': '<',
'autoComplete': '<',
'labelClass': '@',
'inputClass': '@'


+ 45
- 12
app/docker/components/imageRegistry/porImageRegistry.html View File

@@ -1,21 +1,54 @@
<div class="form-group">
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left">Image</label>
<div ng-class="$ctrl.inputClass">
<input type="text" class="form-control" uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
ng-model="$ctrl.image" name="image_name" placeholder="e.g. myImage:myTag" required>
<!-- use registry -->
<div ng-if="$ctrl.model.UseRegistry">
<div class="form-group">
<label for="image_registry" class="control-label text-left" ng-class="$ctrl.labelClass">
Registry
</label>
<div ng-class="$ctrl.inputClass">
<select ng-options="registry as registry.Name for registry in $ctrl.availableRegistries track by registry.Name" ng-model="$ctrl.model.Registry" id="image_registry"
selected-item-id="ctrl.selectedItemId" class="form-control"></select>
</div>
<label for="image_name" ng-class="$ctrl.labelClass" class="margin-sm-top control-label text-left">Image</label>
<div ng-class="$ctrl.inputClass" class="margin-sm-top">
<div class="input-group">
<span class="input-group-addon" id="registry-name">{{$ctrl.displayedRegistryURL()}}</span>
<input type="text" class="form-control" aria-describedby="registry-name" uib-typeahead="image for image in $ctrl.availableImages | filter:$viewValue | limitTo:5"
ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. myImage:myTag" required>
</div>
</div>
</div>
<label for="image_registry" class="margin-sm-top control-label text-right" ng-class="$ctrl.labelClass">
Registry
</label>
<div ng-class="$ctrl.inputClass" class="margin-sm-top">
<select ng-options="registry as registry.Name for registry in $ctrl.availableRegistries" ng-model="$ctrl.registry" id="image_registry"
class="form-control"></select>
</div>
<!-- ! use registry -->
<!-- don't use registry -->
<div ng-if="!$ctrl.model.UseRegistry">
<div class="form-group">
<label for="image_name" ng-class="$ctrl.labelClass" class="control-label text-left">Image
<portainer-tooltip position="bottom" message="Image and repository should be publicly available."></portainer-tooltip>
</label>
<div ng-class="$ctrl.inputClass">
<input type="text" class="form-control" ng-model="$ctrl.model.Image" name="image_name" placeholder="e.g. registry:port/myImage:myTag" required>
</div>
</div>
</div>
<!-- ! don't use registry -->
<!-- info message -->
<div class="form-group" ng-show="$ctrl.form.image_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.form.image_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required.</p>
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required. <span ng-if="$ctrl.canPull">Tag must be specified otherwise Portainer will pull all tags associated to the image.</span></p>
</div>
</div>
</div>
<!-- ! info message -->
<div class="form-group">
<div class="col-sm-12">
<p>
<a class="small interactive" ng-if="!$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = true;">
<i class="fa fa-database space-right" aria-hidden="true"></i> Simple mode
</a>
<a class="small interactive" ng-if="$ctrl.model.UseRegistry" ng-click="$ctrl.model.UseRegistry = false;">
<i class="fa fa-globe space-right" aria-hidden="true"></i> Advanced mode
</a>
</p>
</div>
</div>

+ 83
- 25
app/docker/components/imageRegistry/porImageRegistryController.js View File

@@ -1,31 +1,89 @@
import angular from 'angular';
import _ from 'lodash-es';
import { DockerHubViewModel } from 'Portainer/models/dockerhub';
import { RegistryTypes } from 'Extensions/registry-management/models/registryTypes';

angular.module('portainer.docker')
.controller('porImageRegistryController', ['$q', 'RegistryService', 'DockerHubService', 'ImageService', 'Notifications',
function ($q, RegistryService, DockerHubService, ImageService, Notifications) {
var ctrl = this;

function initComponent() {
$q.all({
registries: RegistryService.registries(),
dockerhub: DockerHubService.dockerhub(),
availableImages: ctrl.autoComplete ? ImageService.images() : []
})
.then(function success(data) {
var dockerhub = data.dockerhub;
var registries = data.registries;
ctrl.availableImages = ImageService.getUniqueTagListFromImages(data.availableImages);
ctrl.availableRegistries = [dockerhub].concat(registries);
if (!ctrl.registry.Id) {
ctrl.registry = dockerhub;
class porImageRegistryController {
/* @ngInject */
constructor($async, $scope, ImageHelper, RegistryService, DockerHubService, ImageService, Notifications) {
this.$async = $async;
this.$scope = $scope;
this.ImageHelper = ImageHelper;
this.RegistryService = RegistryService;
this.DockerHubService = DockerHubService;
this.ImageService = ImageService;
this.Notifications = Notifications;

this.onInit = this.onInit.bind(this);
this.onRegistryChange = this.onRegistryChange.bind(this);

this.$scope.$watch(() => this.model.Registry, this.onRegistryChange);
}

isKnownRegistry(registry) {
return !(registry instanceof DockerHubViewModel) && registry.URL;
}

getRegistryURL(registry) {
let url = registry.URL;
if (registry.Type === RegistryTypes.GITLAB) {
url = registry.URL + '/' + registry.Gitlab.ProjectPath;
}
return url;
}

prepareAutocomplete() {
let images = [];
const registry = this.model.Registry;
if (this.isKnownRegistry(registry)) {
const url = this.getRegistryURL(registry);
const registryImages = _.filter(this.images, (image) => _.includes(image, url));
images = _.map(registryImages, (image) => _.replace(image, new RegExp(url + '\/?'), ''));
} else {
const registries = _.filter(this.availableRegistries, (reg) => this.isKnownRegistry(reg));
const registryImages = _.flatMap(registries, (registry) => _.filter(this.images, (image) => _.includes(image, registry.URL)));
const imagesWithoutKnown = _.difference(this.images, registryImages);
images = _.filter(imagesWithoutKnown, (image) => !this.ImageHelper.imageContainsURL(image));
}
this.availableImages = images;
}

onRegistryChange() {
this.prepareAutocomplete();
if (this.model.Registry.Type === RegistryTypes.GITLAB && this.model.Image) {
this.model.Image = _.replace(this.model.Image, this.model.Registry.Gitlab.ProjectPath, '');
}
}

displayedRegistryURL() {
return this.getRegistryURL(this.model.Registry) || 'docker.io';
}

async onInit() {
try {
const [registries, dockerhub, images] = await Promise.all([
this.RegistryService.registries(),
this.DockerHubService.dockerhub(),
this.autoComplete ? this.ImageService.images() : []
]);
this.images = this.ImageService.getUniqueTagListFromImages(images);
this.availableRegistries = _.concat(dockerhub, registries);

const id = this.model.Registry.Id;
if (!id) {
this.model.Registry = dockerhub;
} else {
ctrl.registry = _.find(ctrl.availableRegistries, { 'Id': ctrl.registry.Id });
this.model.Registry = _.find(this.availableRegistries, { 'Id': id });
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve registries');
});
} catch (err) {
this.Notifications.error('Failure', err, 'Unable to retrieve registries');
}
}

$onInit() {
return this.$async(this.onInit);
}
}

initComponent();
}]);
export default porImageRegistryController;
angular.module('portainer.docker').controller('porImageRegistryController', porImageRegistryController);

+ 42
- 50
app/docker/helpers/imageHelper.js View File

@@ -1,4 +1,5 @@
import _ from 'lodash-es';
import { RegistryTypes } from 'Extensions/registry-management/models/registryTypes';

angular.module('portainer.docker')
.factory('ImageHelper', [function ImageHelperFactory() {
@@ -7,74 +8,65 @@ angular.module('portainer.docker')
var helper = {};

helper.isValidTag = isValidTag;
helper.createImageConfigForContainer = createImageConfigForContainer;
helper.getImagesNamesForDownload = getImagesNamesForDownload;
helper.removeDigestFromRepository = removeDigestFromRepository;
helper.imageContainsURL = imageContainsURL;

function isValidTag(tag) {
return tag.match(/^(?![\.\-])([a-zA-Z0-9\_\.\-])+$/g);
}

helper.extractImageAndRegistryFromRepository = function(repository) {
var slashCount = _.countBy(repository)['/'];
var registry = null;
var image = repository;
if (slashCount >= 1) {
// assume something/something[/...]
registry = repository.substr(0, repository.indexOf('/'));
// assume valid DNS name or IP (contains at least one '.')
if (_.countBy(registry)['.'] > 0) {
image = repository.substr(repository.indexOf('/') + 1);
} else {
registry = null;
}
}

return {
registry: registry,
image: image
};
};

helper.getImagesNamesForDownload = function(images) {
function getImagesNamesForDownload(images) {
var names = images.map(function(image) {
return image.RepoTags[0] !== '<none>:<none>' ? image.RepoTags[0] : image.Id;
});
return {
names: names
};
};
}

/**
*
* @param {PorImageRegistryModel} registry
*/
function createImageConfigForContainer(registry) {
const data = {
fromImage: ''
};
let fullImageName = '';

function extractNameAndTag(imageName, registry) {
var imageNameAndTag = imageName.split(':');
var image = imageNameAndTag[0];
var tag = imageNameAndTag[1] ? imageNameAndTag[1] : 'latest';
if (registry) {
image = registry + '/' + imageNameAndTag[0];
if (registry.UseRegistry) {
if (registry.Registry.Type === RegistryTypes.GITLAB) {
const slash = _.startsWith(registry.Image, ':') ? '' : '/';
fullImageName = registry.Registry.URL + '/' + registry.Registry.Gitlab.ProjectPath + slash + registry.Image;
} else {
const url = registry.Registry.URL ? registry.Registry.URL + '/' : '';
fullImageName = url + registry.Image;
}
if (!_.includes(registry.Image, ':')) {
fullImageName += ':latest';
}
} else {
fullImageName = registry.Image;
}

return {
image: image,
tag: tag
};
data.fromImage = fullImageName;
return data;
}

helper.createImageConfigForCommit = function(imageName, registry) {
var imageAndTag = extractNameAndTag(imageName, registry);
return {
repo: imageAndTag.image,
tag: imageAndTag.tag
};
};

helper.createImageConfigForContainer = function (imageName, registry) {
var imageAndTag = extractNameAndTag(imageName, registry);
return {
fromImage: imageAndTag.image,
tag: imageAndTag.tag
};
};
function imageContainsURL(image) {
const split = _.split(image, '/');
const url = split[0];
if (split.length > 1) {
return _.includes(url, '.') || _.includes(url, ':');
}
return false;
}

helper.removeDigestFromRepository = function(repository) {
function removeDigestFromRepository(repository) {
return repository.split('@sha')[0];
};
}

return helper;
}]);

+ 16
- 0
app/docker/models/porImageRegistry.js View File

@@ -0,0 +1,16 @@
/**
* This model should be used with por-image-registry component
* And bound to the 'model' attribute
*
* // viewController.js
*
* this.imageModel = new PorImageRegistryModel();
*
* // view.html
* <por-image-registry model="$ctrl.imageModel" ... />
*/
export function PorImageRegistryModel() {
this.UseRegistry = true;
this.Registry = {};
this.Image = '';
}

+ 1
- 1
app/docker/rest/commit.js View File

@@ -5,6 +5,6 @@ angular.module('portainer.docker')
endpointId: EndpointProvider.endpointID
},
{
commitContainer: {method: 'POST', params: {container: '@id', repo: '@repo', tag: '@tag'}, ignoreLoadingBar: true}
commitContainer: {method: 'POST', params: {container: '@id', repo: '@repo'}, ignoreLoadingBar: true}
});
}]);

+ 3
- 3
app/docker/rest/image.js View File

@@ -15,16 +15,16 @@ function ImageFactory($resource, API_ENDPOINT_ENDPOINTS, EndpointProvider, HttpR
search: {method: 'GET', params: {action: 'search'}},
history: {method: 'GET', params: {action: 'history'}, isArray: true},
insert: {method: 'POST', params: {id: '@id', action: 'insert'}},
tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo', tag: '@tag'}, ignoreLoadingBar: true},
tag: {method: 'POST', params: {id: '@id', action: 'tag', force: 0, repo: '@repo'}, ignoreLoadingBar: true},
inspect: {method: 'GET', params: {id: '@id', action: 'json'}},
push: {
method: 'POST', params: {action: 'push', id: '@tag'},
method: 'POST', params: {action: 'push', id: '@imageName'},
isArray: true, transformResponse: jsonObjectsToArrayHandler,
headers: { 'X-Registry-Auth': HttpRequestHelper.registryAuthenticationHeader },
ignoreLoadingBar: true
},
create: {
method: 'POST', params: {action: 'create', fromImage: '@fromImage', tag: '@tag'},
method: 'POST', params: {action: 'create', fromImage: '@fromImage'},
isArray: true, transformResponse: jsonObjectsToArrayHandler,
headers: { 'X-Registry-Auth': HttpRequestHelper.registryAuthenticationHeader },
ignoreLoadingBar: true


+ 34
- 12
app/docker/services/imageService.js View File

@@ -77,12 +77,20 @@ angular.module('portainer.docker')
return deferred.promise;
};

service.pushImage = function(tag, registry) {
service.pushImage = pushImage;
/**
*
* @param {PorImageRegistryModel} registryModel
*/
function pushImage(registryModel) {
var deferred = $q.defer();

var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
var authenticationDetails = registryModel.Registry.Authentication ? RegistryService.encodedCredentials(registryModel.Registry) : '';
HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);
Image.push({tag: tag}).$promise

const imageConfiguration = ImageHelper.createImageConfigForContainer(registryModel);

Image.push({imageName: imageConfiguration.fromImage}).$promise
.then(function success(data) {
if (data[data.length - 1].error) {
deferred.reject({ msg: data[data.length - 1].error });
@@ -94,7 +102,11 @@ angular.module('portainer.docker')
deferred.reject({ msg: 'Unable to push image tag', err: err });
});
return deferred.promise;
};
}

/**
* PULL IMAGE
*/

function pullImageAndIgnoreErrors(imageConfiguration) {
var deferred = $q.defer();
@@ -127,21 +139,31 @@ angular.module('portainer.docker')
return deferred.promise;
}

service.pullImage = function(image, registry, ignoreErrors) {
var imageDetails = ImageHelper.extractImageAndRegistryFromRepository(image);
var imageConfiguration = ImageHelper.createImageConfigForContainer(imageDetails.image, registry.URL);
var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
service.pullImage = pullImage;

/**
*
* @param {PorImageRegistryModel} registry
* @param {bool} ignoreErrors
*/
function pullImage(registry, ignoreErrors) {
var authenticationDetails = registry.Registry.Authentication ? RegistryService.encodedCredentials(registry.Registry) : '';
HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);

var imageConfiguration = ImageHelper.createImageConfigForContainer(registry);

if (ignoreErrors) {
return pullImageAndIgnoreErrors(imageConfiguration);
}
return pullImageAndAcknowledgeErrors(imageConfiguration);
};
}

/**
* ! PULL IMAGE
*/

service.tagImage = function(id, image, registry) {
var imageConfig = ImageHelper.createImageConfigForCommit(image, registry);
return Image.tag({id: id, tag: imageConfig.tag, repo: imageConfig.repo}).$promise;
service.tagImage = function(id, image) {
return Image.tag({id: id, repo: image}).$promise;
};

service.downloadImages = function(images) {


+ 9
- 15
app/docker/views/containers/create/createContainerController.js View File

@@ -2,6 +2,7 @@ import _ from 'lodash-es';
import { ContainerCapabilities, ContainerCapability } from '../../../models/containerCapabilities';
import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
import { ContainerDetailsViewModel } from '../../../models/container';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';


angular.module('portainer.docker')
@@ -27,7 +28,8 @@ function ($q, $scope, $async, $state, $timeout, $transition$, $filter, Container
NodeName: null,
capabilities: [],
LogDriverName: '',
LogDriverOpts: []
LogDriverOpts: [],
RegistryModel: new PorImageRegistryModel()
};

$scope.extraNetworks = {};
@@ -130,11 +132,8 @@ function ($q, $scope, $async, $state, $timeout, $transition$, $filter, Container
$scope.fromContainerMultipleNetworks = false;

function prepareImageConfig(config) {
var image = config.Image;
var registry = $scope.formValues.Registry;
var imageConfig = ImageHelper.createImageConfigForContainer(image, registry.URL);
config.Image = imageConfig.fromImage + ':' + imageConfig.tag;
$scope.imageConfig = imageConfig;
const imageConfig = ImageHelper.createImageConfigForContainer($scope.formValues.RegistryModel);
config.Image = imageConfig.fromImage;
}

function preparePortBindings(config) {
@@ -438,13 +437,9 @@ function ($q, $scope, $async, $state, $timeout, $transition$, $filter, Container
}

function loadFromContainerImageConfig() {
var imageInfo = ImageHelper.extractImageAndRegistryFromRepository($scope.config.Image);
RegistryService.retrieveRegistryFromRepository($scope.config.Image)
.then(function success(data) {
if (data) {
$scope.config.Image = imageInfo.image;
$scope.formValues.Registry = data;
}
RegistryService.retrievePorRegistryModelFromRepository($scope.config.Image)
.then((model) => {
$scope.formValues.RegistryModel = model;
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrive registry');
@@ -569,7 +564,6 @@ function ($q, $scope, $async, $state, $timeout, $transition$, $filter, Container
loadFromContainerSpec();
} else {
$scope.fromContainer = {};
$scope.formValues.Registry = {};
$scope.formValues.capabilities = new ContainerCapabilities();
}
}, function(e) {
@@ -754,7 +748,7 @@ function ($q, $scope, $async, $state, $timeout, $transition$, $filter, Container

function pullImageIfNeeded() {
return $q.when($scope.formValues.alwaysPull &&
ImageService.pullImage($scope.config.Image, $scope.formValues.Registry, true));
ImageService.pullImage($scope.formValues.RegistryModel, true));
}

function createNewContainer() {


+ 9
- 7
app/docker/views/containers/create/createcontainer.html View File

@@ -21,18 +21,18 @@
<div class="col-sm-12 form-section-title">
Image configuration
</div>
<div ng-if="!formValues.Registry && fromContainer">
<div ng-if="!formValues.RegistryModel.Registry && fromContainer">
<i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
<span class="small text-danger" style="margin-left: 5px;">The Docker registry for the <code>{{ config.Image }}</code> image is not registered inside Portainer, you will not be able to create a container. Please register that registry first.</span>
</div>
<div ng-if="formValues.Registry || !fromContainer">
<div ng-if="formValues.RegistryModel.Registry || !fromContainer">
<!-- image-and-registry -->
<por-image-registry
image="config.Image"
registry="formValues.Registry"
ng-if="formValues.Registry"
model="formValues.RegistryModel"
pull-warning="formValues.alwaysPull"
ng-if="formValues.RegistryModel.Registry"
auto-complete="true"
label-class="col-sm-1" input-class="col-sm-11 col-md-5"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<!-- !image-and-registry -->
<!-- always-pull -->
@@ -142,7 +142,9 @@
<!-- !autoremove -->
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !config.Image || (!formValues.Registry && fromContainer)" ng-click="create()" button-spinner="state.actionInProgress">
<button type="button" class="btn btn-primary btn-sm"
ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image || (!formValues.RegistryModel.Registry && fromContainer)"
ng-click="create()" button-spinner="state.actionInProgress">
<span ng-hide="state.actionInProgress">Deploy the container</span>
<span ng-show="state.actionInProgress">Deployment in progress...</span>
</button>


+ 3
- 4
app/docker/views/containers/edit/container.html View File

@@ -155,10 +155,9 @@
<!-- !tag-description -->
<!-- image-and-registry -->
<por-image-registry
image="config.Image"
registry="config.Registry"
model="config.RegistryModel"
auto-complete="true"
label-class="col-sm-1" input-class="col-sm-11 col-md-5"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<!-- !image-and-registry -->
<!-- tag-note -->
@@ -170,7 +169,7 @@
<!-- !tag-note -->
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Image" ng-click="commit()">Create</button>
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.RegistryModel.Image || config.commitInProgress" ng-click="commit()">Create</button>
</div>
</div>
</form>


+ 23
- 22
app/docker/views/containers/edit/containerController.js View File

@@ -1,14 +1,15 @@
import moment from 'moment';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';

angular.module('portainer.docker')
.controller('ContainerController', ['$q', '$scope', '$state','$transition$', '$filter', 'Commit', 'ContainerHelper', 'ContainerService', 'ImageHelper', 'NetworkService', 'Notifications', 'ModalService', 'ResourceControlService', 'RegistryService', 'ImageService', 'HttpRequestHelper', 'Authentication',
function ($q, $scope, $state, $transition$, $filter, Commit, ContainerHelper, ContainerService, ImageHelper, NetworkService, Notifications, ModalService, ResourceControlService, RegistryService, ImageService, HttpRequestHelper, Authentication) {
.controller('ContainerController', ['$q', '$scope', '$state','$transition$', '$filter', '$async', 'Commit', 'ContainerHelper', 'ContainerService', 'ImageHelper', 'NetworkService', 'Notifications', 'ModalService', 'ResourceControlService', 'RegistryService', 'ImageService', 'HttpRequestHelper', 'Authentication',
function ($q, $scope, $state, $transition$, $filter, $async, Commit, ContainerHelper, ContainerService, ImageHelper, NetworkService, Notifications, ModalService, ResourceControlService, RegistryService, ImageService, HttpRequestHelper, Authentication) {
$scope.activityTime = 0;
$scope.portBindings = [];

$scope.config = {
Image: '',
Registry: ''
RegistryModel: new PorImageRegistryModel(),
commitInProgress: false
};

$scope.state = {
@@ -149,20 +150,23 @@ function ($q, $scope, $state, $transition$, $filter, Commit, ContainerHelper, Co
});
};

$scope.commit = function () {
var image = $scope.config.Image;
$scope.config.Image = '';
var registry = $scope.config.Registry;
var imageConfig = ImageHelper.createImageConfigForCommit(image, registry.URL);
Commit.commitContainer({id: $transition$.params().id, tag: imageConfig.tag, repo: imageConfig.repo}, function () {
update();
async function commitContainerAsync() {
$scope.config.commitInProgress = true;
const registryModel = $scope.config.RegistryModel;
const imageConfig = ImageHelper.createImageConfigForContainer(registryModel);
try {
await Commit.commitContainer({id: $transition$.params().id, repo: imageConfig.fromImage}).$promise;
Notifications.success('Image created', $transition$.params().id);
}, function (e) {
update();
Notifications.error('Failure', e, 'Unable to create image');
});
};
$state.reload();
} catch (err) {
Notifications.error('Failure', err, 'Unable to create image');
$scope.config.commitInProgress = false;
}
}

$scope.commit = function () {
return $async(commitContainerAsync);
};

$scope.confirmRemove = function () {
var title = 'You are about to remove a container.';
@@ -225,15 +229,12 @@ function ($q, $scope, $state, $transition$, $filter, Commit, ContainerHelper, Co
if (!pullImage) {
return $q.when();
}
return getRegistry().then(function pullImage(containerRegistery) {
return ImageService.pullImage(container.Config.Image, containerRegistery, true);
return RegistryService.retrievePorRegistryModelFromRepository(container.Config.Image)
.then(function pullImage(registryModel) {
return ImageService.pullImage(registryModel, true);
});
}

function getRegistry() {
return RegistryService.retrieveRegistryFromRepository(container.Config.Image);
}

function setMainNetworkAndCreateContainer() {
var networks = config.NetworkingConfig.EndpointsConfig;
var networksNames = Object.keys(networks);


+ 3
- 4
app/docker/views/images/edit/image.html View File

@@ -64,9 +64,8 @@
<form class="form-horizontal">
<!-- image-and-registry -->
<por-image-registry
image="formValues.Image"
registry="formValues.Registry"
label-class="col-sm-1" input-class="col-sm-11 col-md-5"
model="formValues.RegistryModel"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<!-- !image-and-registry -->
<!-- tag-note -->
@@ -78,7 +77,7 @@
<!-- !tag-note -->
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Image" ng-click="tagImage()">Tag</button>
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.RegistryModel.Image" ng-click="tagImage()">Tag</button>
</div>
</div>
</form>


+ 14
- 15
app/docker/views/images/edit/imageController.js View File

@@ -1,11 +1,11 @@
import _ from 'lodash-es';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';

angular.module('portainer.docker')
.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) {
.controller('ImageController', ['$q', '$scope', '$transition$', '$state', '$timeout', 'ImageService', 'ImageHelper', 'RegistryService', 'Notifications', 'HttpRequestHelper', 'ModalService', 'FileSaver', 'Blob',
function ($q, $scope, $transition$, $state, $timeout, ImageService, ImageHelper, RegistryService, Notifications, HttpRequestHelper, ModalService, FileSaver, Blob) {
$scope.formValues = {
Image: '',
Registry: ''
RegistryModel: new PorImageRegistryModel()
};

$scope.state = {
@@ -27,10 +27,11 @@ function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryServ
};

$scope.tagImage = function() {
var image = $scope.formValues.Image;
var registry = $scope.formValues.Registry;
const registryModel = $scope.formValues.RegistryModel;

ImageService.tagImage($transition$.params().id, image, registry.URL)
const image = ImageHelper.createImageConfigForContainer(registryModel);

ImageService.tagImage($transition$.params().id, image.fromImage)
.then(function success() {
Notifications.success('Image successfully tagged');
$state.go('docker.images.image', {id: $transition$.params().id}, {reload: true});
@@ -42,10 +43,9 @@ function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryServ

$scope.pushTag = function(repository) {
$('#uploadResourceHint').show();
RegistryService.retrieveRegistryFromRepository(repository)
.then(function success(data) {
var registry = data;
return ImageService.pushImage(repository, registry);
RegistryService.retrievePorRegistryModelFromRepository(repository)
.then(function success(registryModel) {
return ImageService.pushImage(registryModel);
})
.then(function success() {
Notifications.success('Image successfully pushed', repository);
@@ -60,10 +60,9 @@ function ($q, $scope, $transition$, $state, $timeout, ImageService, RegistryServ

$scope.pullTag = function(repository) {
$('#downloadResourceHint').show();
RegistryService.retrieveRegistryFromRepository(repository)
.then(function success(data) {
var registry = data;
return ImageService.pullImage(repository, registry, false);
RegistryService.retrievePorRegistryModelFromRepository(repository)
.then(function success(registryModel) {
return ImageService.pullImage(registryModel, false);
})
.then(function success() {
Notifications.success('Image successfully pulled', repository);


+ 5
- 11
app/docker/views/images/images.html View File

@@ -16,18 +16,12 @@
<form class="form-horizontal">
<!-- image-and-registry -->
<por-image-registry
image="formValues.Image"
registry="formValues.Registry"
label-class="col-sm-1" input-class="col-sm-11 col-md-5"
model="formValues.RegistryModel"
auto-complete="true"
pull-warning="true"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<!-- !image-and-registry -->
<!-- tag-note -->
<div class="form-group">
<div class="col-sm-12">
<span class="small text-muted">Note: if you don't specify the tag in the image name, <span class="label label-default">latest</span> will be used.</span>
</div>
</div>
<!-- !tag-note -->
<div ng-if="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
<div class="col-sm-12 form-section-title">
Deployment
@@ -40,7 +34,7 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.Image" ng-click="pullImage()" button-spinner="state.actionInProgress">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image" ng-click="pullImage()" button-spinner="state.actionInProgress">
<span ng-hide="state.actionInProgress">Pull the image</span>
<span ng-show="state.actionInProgress">Download in progress...</span>
</button>


+ 5
- 6
app/docker/views/images/imagesController.js View File

@@ -1,4 +1,5 @@
import _ from 'lodash-es';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';

angular.module('portainer.docker')
.controller('ImagesController', ['$scope', '$state', 'ImageService', 'Notifications', 'ModalService', 'HttpRequestHelper', 'FileSaver', 'Blob', 'EndpointProvider',
@@ -9,22 +10,20 @@ function ($scope, $state, ImageService, Notifications, ModalService, HttpRequest
};

$scope.formValues = {
Image: '',
Registry: '',
RegistryModel: new PorImageRegistryModel(),
NodeName: null
};

$scope.pullImage = function() {
var image = $scope.formValues.Image;
var registry = $scope.formValues.Registry;
const registryModel = $scope.formValues.RegistryModel;

var nodeName = $scope.formValues.NodeName;
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);

$scope.state.actionInProgress = true;
ImageService.pullImage(image, registry, false)
ImageService.pullImage(registryModel, false)
.then(function success() {
Notifications.success('Image successfully pulled', image);
Notifications.success('Image successfully pulled', registryModel.Image);
$state.reload();
})
.catch(function error(err) {


+ 6
- 7
app/docker/views/services/create/createServiceController.js View File

@@ -1,5 +1,6 @@
import _ from 'lodash-es';
import { AccessControlFormData } from '../../../../portainer/components/accessControlForm/porAccessControlFormModel';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';

require('./includes/update-restart.html')
require('./includes/secret.html')
@@ -12,8 +13,7 @@ function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, C

$scope.formValues = {
Name: '',
Image: '',
Registry: {},
RegistryModel: new PorImageRegistryModel(),
Mode: 'replicated',
Replicas: 1,
Command: '',
@@ -160,8 +160,8 @@ function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, C
};

function prepareImageConfig(config, input) {
var imageConfig = ImageHelper.createImageConfigForContainer(input.Image, input.Registry.URL);
config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage + ':' + imageConfig.tag;
var imageConfig = ImageHelper.createImageConfigForContainer(input.RegistryModel);
config.TaskTemplate.ContainerSpec.Image = imageConfig.fromImage;
}

function preparePortsConfig(config, input) {
@@ -427,9 +427,8 @@ function ($q, $scope, $state, $timeout, Service, ServiceHelper, ConfigService, C
}

function createNewService(config, accessControlData) {

var registry = $scope.formValues.Registry;
var authenticationDetails = registry.Authentication ? RegistryService.encodedCredentials(registry) : '';
const registryModel = $scope.formValues.RegistryModel;
var authenticationDetails = registryModel.Registry.Authentication ? RegistryService.encodedCredentials(registryModel.Registry) : '';
HttpRequestHelper.setRegistryAuthenticationHeader(authenticationDetails);

Service.create(config).$promise


+ 3
- 4
app/docker/views/services/create/createservice.html View File

@@ -23,10 +23,9 @@
</div>
<!-- image-and-registry -->
<por-image-registry
image="formValues.Image"
registry="formValues.Registry"
model="formValues.RegistryModel"
auto-complete="true"
label-class="col-sm-1" input-class="col-sm-11 col-md-5"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<!-- !image-and-registry -->
<div class="col-sm-12 form-section-title">
@@ -126,7 +125,7 @@
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.Image" ng-click="create()" button-spinner="state.actionInProgress">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !formValues.RegistryModel.Image" ng-click="create()" button-spinner="state.actionInProgress">
<span ng-hide="state.actionInProgress">Create the service</span>
<span ng-show="state.actionInProgress">Creating service...</span>
</button>


+ 32
- 0
app/docker/views/services/edit/includes/image.html View File

@@ -0,0 +1,32 @@
<div id="service-container-image" authorization="DockerServiceUpdate">
<rd-widget>
<rd-widget-header icon="fa-clone" title-text="Change container image">
</rd-widget-header>
<rd-widget-body ng-if="!isUpdating">
<form class="form-horizontal">
<por-image-registry
model="formValues.RegistryModel"
auto-complete="true"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
</form>
</rd-widget-body>
<rd-widget-body ng-if="isUpdating">
<p>Image modification is disabled while service is updating.</p>
</rd-widget-body>
<rd-widget-footer authorization="DockerServiceUpdate">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="!hasChanges(service, ['Image'])" ng-click="updateService(service)">Apply changes</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="cancelChanges(service, ['Image'])">Reset changes</a></li>
<li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
</ul>
</div>
</div>
</rd-widget-footer>
</rd-widget>
</div>

+ 5
- 6
app/docker/views/services/edit/service.html View File

@@ -66,10 +66,7 @@
</tr>
<tr>
<td>Image</td>
<td>
<input type="text" class="form-control" uib-typeahead="image for image in availableImages | filter:$viewValue | limitTo:5"
ng-model="service.Image" ng-change="updateServiceAttribute(service, 'Image')" id="image_name" disable-authorization="DockerServiceUpdate">
</td>
<td>{{ service.Image }}</td>
</tr>
<tr ng-if="applicationState.endpoint.type !== 4">
<td colspan="{{webhookURL ? '1' : '2'}}">
@@ -118,12 +115,12 @@
</p>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary" ng-disabled="!hasChanges(service, ['Mode', 'Replicas', 'Image', 'Name', 'Webhooks'])" ng-click="updateService(service)">Apply changes</button>
<button type="button" class="btn btn-primary" ng-disabled="!hasChanges(service, ['Mode', 'Replicas', 'Name', 'Webhooks'])" ng-click="updateService(service)">Apply changes</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a ng-click="cancelChanges(service, ['Mode', 'Replicas', 'Image', 'Name'])">Reset changes</a></li>
<li><a ng-click="cancelChanges(service, ['Mode', 'Replicas', 'Name'])">Reset changes</a></li>
<li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
</ul>
</div>
@@ -138,6 +135,7 @@
<rd-widget-body classes="no-padding">
<ul class="nav nav-pills nav-stacked">
<li><a href ng-click="goToItem('service-env-variables')">Environment variables</a></li>
<li><a href ng-click="goToItem('service-container-image')">Container image</a></li>
<li><a href ng-click="goToItem('service-container-labels')">Container labels</a></li>
<li><a href ng-click="goToItem('service-mounts')">Mounts</a></li>
<li><a href ng-click="goToItem('service-network-specs')">Network &amp; published ports</a></li>
@@ -171,6 +169,7 @@
<div class="col-lg-12 col-md-12 col-xs-12">
<h3 id="container-specs">Container specification</h3>
<div id="service-container-spec" class="padding-top" ng-include="'app/docker/views/services/edit/includes/container-specs.html'"></div>
<div id="service-container-image" class="padding-top" ng-include="'app/docker/views/services/edit/includes/image.html'"></div>
<div id="service-env-variables" class="padding-top" ng-include="'app/docker/views/services/edit/includes/environmentvariables.html'"></div>
<div id="service-container-labels" class="padding-top" ng-include="'app/docker/views/services/edit/includes/containerlabels.html'"></div>
<div id="service-mounts" class="padding-top" ng-include="'app/docker/views/services/edit/includes/mounts.html'"></div>


+ 29
- 20
app/docker/views/services/edit/serviceController.js View File

@@ -4,6 +4,7 @@ require('./includes/container-specs.html')
require('./includes/containerlabels.html')
require('./includes/environmentvariables.html')
require('./includes/hosts.html')
require('./includes/image.html')
require('./includes/logging.html')
require('./includes/mounts.html')
require('./includes/networks.html')
@@ -16,6 +17,8 @@ require('./includes/servicelabels.html')
require('./includes/tasks.html')
require('./includes/updateconfig.html')

import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';

angular.module('portainer.docker')
.controller('ServiceController', ['$q', '$scope', '$transition$', '$state', '$location', '$timeout', '$anchorScroll', 'ServiceService', 'ConfigService', 'ConfigHelper', 'SecretService', 'ImageService', 'SecretHelper', 'Service', 'ServiceHelper', 'LabelHelper', 'TaskService', 'NodeService', 'ContainerService', 'TaskHelper', 'Notifications', 'ModalService', 'PluginService', 'Authentication', 'SettingsService', 'VolumeService', 'ImageHelper', 'WebhookService', 'EndpointProvider', 'clipboard','WebhookHelper',
function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll, ServiceService, ConfigService, ConfigHelper, SecretService, ImageService, SecretHelper, Service, ServiceHelper, LabelHelper, TaskService, NodeService, ContainerService, TaskHelper, Notifications, ModalService, PluginService, Authentication, SettingsService, VolumeService, ImageHelper, WebhookService, EndpointProvider, clipboard, WebhookHelper) {
@@ -26,6 +29,10 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
rollbackInProgress: false,
};

$scope.formValues = {
RegistryModel: new PorImageRegistryModel()
};

$scope.tasks = [];
$scope.availableImages = [];

@@ -34,20 +41,6 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
var originalService = {};
var previousServiceValues = [];

$scope.renameService = function renameService(service) {
updateServiceAttribute(service, 'Name', service.newServiceName || service.name);
service.EditName = false;
};
$scope.changeServiceImage = function changeServiceImage(service) {
updateServiceAttribute(service, 'Image', service.newServiceImage || service.image);
service.EditImage = false;
};
$scope.scaleService = function scaleService(service) {
var replicas = service.newServiceReplicas === null || isNaN(service.newServiceReplicas) ? service.Replicas : service.newServiceReplicas;
updateServiceAttribute(service, 'Replicas', replicas);
service.EditReplicas = false;
};

$scope.goToItem = function(hash) {
if ($location.hash() !== hash) {
$location.hash(hash);
@@ -259,12 +252,17 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
$scope.cancelChanges = function cancelChanges(service, keys) {
if (keys) { // clean out the keys only from the list of modified keys
keys.forEach(function(key) {
var index = previousServiceValues.indexOf(key);
if (index >= 0) {
previousServiceValues.splice(index, 1);
if (key === 'Image') {
$scope.formValues.RegistryModel.Image = '';
} else {
var index = previousServiceValues.indexOf(key);
if (index >= 0) {
previousServiceValues.splice(index, 1);
}
}
});
} else { // clean out all changes
$scope.formValues.RegistryModel.Image = '';
keys = Object.keys(service);
previousServiceValues = [];
}
@@ -277,7 +275,11 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
$scope.hasChanges = function(service, elements) {
var hasChanges = false;
elements.forEach(function(key) {
hasChanges = hasChanges || (previousServiceValues.indexOf(key) >= 0);
if (key === 'Image') {
hasChanges = hasChanges || $scope.formValues.RegistryModel.Image ? true : false;
} else {
hasChanges = hasChanges || (previousServiceValues.indexOf(key) >= 0);
}
});
return hasChanges;
};
@@ -288,7 +290,14 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
config.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceLabels);
config.TaskTemplate.ContainerSpec.Env = ServiceHelper.translateEnvironmentVariablesToEnv(service.EnvironmentVariables);
config.TaskTemplate.ContainerSpec.Labels = LabelHelper.fromKeyValueToLabelHash(service.ServiceContainerLabels);
config.TaskTemplate.ContainerSpec.Image = service.Image;

if ($scope.hasChanges(service, ["Image"])) {
const image = ImageHelper.createImageConfigForContainer($scope.formValues.RegistryModel);
config.TaskTemplate.ContainerSpec.Image = image.fromImage;
} else {
config.TaskTemplate.ContainerSpec.Image = service.Image;
}

config.TaskTemplate.ContainerSpec.Secrets = service.ServiceSecrets ? service.ServiceSecrets.map(SecretHelper.secretConfig) : [];
config.TaskTemplate.ContainerSpec.Configs = service.ServiceConfigs ? service.ServiceConfigs.map(ConfigHelper.configConfig) : [];
config.TaskTemplate.ContainerSpec.Hosts = service.Hosts ? ServiceHelper.translateHostnameIPToHostsEntries(service.Hosts) : [];
@@ -468,7 +477,7 @@ function ($q, $scope, $transition$, $state, $location, $timeout, $anchorScroll,
function forceUpdateService(service, pullImage) {
var config = ServiceHelper.serviceToConfig(service.Model);
if (pullImage) {
config.TaskTemplate.ContainerSpec.Image = config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
config.TaskTemplate.ContainerSpec.Image = ImageHelper.removeDigestFromRepository(config.TaskTemplate.ContainerSpec.Image);
}

// As explained in https://github.com/docker/swarmkit/issues/2364 ForceUpdate can accept a random


+ 1
- 53
app/portainer/components/forms/template-form/template-form.js View File

@@ -1,58 +1,6 @@
angular.module('portainer.app').component('templateForm', {
templateUrl: './templateForm.html',
controller: function() {
this.state = {
collapseTemplate: false,
collapseContainer: false,
collapseStack: false,
collapseEnv: false
};

this.addPortBinding = function() {
this.model.Ports.push({ containerPort: '', protocol: 'tcp' });
};

this.removePortBinding = function(index) {
this.model.Ports.splice(index, 1);
};

this.addVolume = function () {
this.model.Volumes.push({ container: '', bind: '', readonly: false, type: 'auto' });
};

this.removeVolume = function(index) {
this.model.Volumes.splice(index, 1);
};

this.addLabel = function () {
this.model.Labels.push({ name: '', value: ''});
};

this.removeLabel = function(index) {
this.model.Labels.splice(index, 1);
};

this.addEnvVar = function() {
this.model.Env.push({ type: 1, name: '', label: '', description: '', default: '', preset: true, select: [] });
};

this.removeEnvVar = function(index) {
this.model.Env.splice(index, 1);
};

this.addEnvVarValue = function(env) {
env.select = env.select || [];
env.select.push({ name: '', value: '' });
};

this.removeEnvVarValue = function(env, index) {
env.select.splice(index, 1);
};

this.changeEnvVarType = function(env) {
env.preset = env.type === 1;
};
},
controller: 'TemplateFormController',
bindings: {
model: '=',
categories: '<',


+ 2
- 3
app/portainer/components/forms/template-form/templateForm.html View File

@@ -203,10 +203,9 @@
<!-- container-details -->
<div uib-collapse="$ctrl.state.collapseContainer">
<por-image-registry
image="$ctrl.model.Image"
registry="$ctrl.model.Registry"
model="$ctrl.model.RegistryModel"
auto-complete="true"
label-class="col-sm-2" input-class="col-sm-10 col-md-4"
label-class="col-sm-1" input-class="col-sm-11"
></por-image-registry>
<!-- command -->
<div class="form-group">


+ 54
- 0
app/portainer/components/forms/template-form/templateFormController.js View File

@@ -0,0 +1,54 @@
angular.module('portainer.app')
.controller('TemplateFormController', [function() {
this.state = {
collapseTemplate: false,
collapseContainer: false,
collapseStack: false,
collapseEnv: false
};

this.addPortBinding = function() {
this.model.Ports.push({ containerPort: '', protocol: 'tcp' });
};

this.removePortBinding = function(index) {
this.model.Ports.splice(index, 1);
};

this.addVolume = function () {
this.model.Volumes.push({ container: '', bind: '', readonly: false, type: 'auto' });
};

this.removeVolume = function(index) {
this.model.Volumes.splice(index, 1);
};

this.addLabel = function () {
this.model.Labels.push({ name: '', value: ''});
};

this.removeLabel = function(index) {
this.model.Labels.splice(index, 1);
};

this.addEnvVar = function() {
this.model.Env.push({ type: 1, name: '', label: '', description: '', default: '', preset: true, select: [] });
};

this.removeEnvVar = function(index) {
this.model.Env.splice(index, 1);
};

this.addEnvVarValue = function(env) {
env.select = env.select || [];
env.select.push({ name: '', value: '' });
};

this.removeEnvVarValue = function(env, index) {
env.select.splice(index, 1);
};

this.changeEnvVarType = function(env) {
env.preset = env.type === 1;
};
}]);

+ 0
- 18
app/portainer/helpers/registryHelper.js View File

@@ -1,18 +0,0 @@
angular.module('portainer.app')
.factory('RegistryHelper', [function RegistryHelperFactory() {
'use strict';

var helper = {};

helper.getRegistryByURL = function(registries, url) {
for (var i = 0; i < registries.length; i++) {
if (registries[i].URL === url) {
return registries[i];
}
}

return null;
};

return helper;
}]);

+ 2
- 1
app/portainer/models/registry.js View File

@@ -59,7 +59,8 @@ export function RegistryCreateRequest(model) {
if (model.Type === RegistryTypes.GITLAB) {
this.Gitlab = {
ProjectId: model.Gitlab.ProjectId,
InstanceURL: model.Gitlab.InstanceURL
InstanceURL: model.Gitlab.InstanceURL,
ProjectPath: model.Gitlab.ProjectPath
}
}
}

+ 7
- 7
app/portainer/models/template.js View File

@@ -1,17 +1,17 @@
import _ from 'lodash-es';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';

export function TemplateDefaultModel() {
this.Type = 1;
this.AdministratorOnly = false;
this.Title = '';
this.Image = '';
this.Description = '';
this.Volumes = [];
this.Ports = [];
this.Env = [];
this.Labels = [];
this.RestartPolicy = 'always';
this.Registry = {};
this.RegistryModel = new PorImageRegistryModel();
}

export function TemplateCreateRequest(model) {
@@ -24,8 +24,8 @@ export function TemplateCreateRequest(model) {
this.Categories = model.Categories;
this.Platform = model.Platform;
this.Logo = model.Logo;
this.Image = model.Image;
this.Registry = model.Registry.URL;
this.Image = model.RegistryModel.Image;
this.Registry = model.RegistryModel.Registry.URL;
this.Command = model.Command;
this.Network = model.Network && model.Network.Name;
this.Privileged = model.Privileged;
@@ -66,9 +66,9 @@ export function TemplateViewModel(data) {
this.Logo = data.logo;
this.Repository = data.repository;
this.Hostname = data.hostname;
this.Registry = data.registry ? { URL: data.registry } : {};
this.Image = data.image;
this.Registry = data.registry ? data.registry : '';
this.RegistryModel = new PorImageRegistryModel();
this.RegistryModel.Image = data.image;
this.RegistryModel.Registry.URL = data.registry || '';
this.Command = data.command ? data.command : '';
this.Network = data.network ? data.network : '';
this.Privileged = data.privileged ? data.privileged : false;


+ 50
- 17
app/portainer/services/api/registryService.js View File

@@ -1,8 +1,11 @@
import _ from 'lodash-es';
import { RegistryViewModel, RegistryCreateRequest } from '../../models/registry';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
import { RegistryTypes } from 'Extensions/registry-management/models/registryTypes';

angular.module('portainer.app')
.factory('RegistryService', ['$q', 'Registries', 'DockerHubService', 'RegistryHelper', 'ImageHelper', 'FileUploadService', function RegistryServiceFactory($q, Registries, DockerHubService, RegistryHelper, ImageHelper, FileUploadService) {
.factory('RegistryService', ['$q', '$async', 'Registries', 'DockerHubService', 'ImageHelper', 'FileUploadService',
function RegistryServiceFactory($q, $async, Registries, DockerHubService, ImageHelper, FileUploadService) {
'use strict';
var service = {};

@@ -71,6 +74,7 @@ angular.module('portainer.app')
_.forEach(projects, (p) => {
const m = model;
m.Name = p.PathWithNamespace;
m.Gitlab.ProjectPath = _.toLower(p.PathWithNamespace);
m.Gitlab.ProjectId = p.Id;
m.Password = m.Token;
const payload = new RegistryCreateRequest(m);
@@ -79,23 +83,52 @@ angular.module('portainer.app')
return $q.all(promises);
};

service.retrieveRegistryFromRepository = function(repository) {
var deferred = $q.defer();

var imageDetails = ImageHelper.extractImageAndRegistryFromRepository(repository);
$q.when(imageDetails.registry ? service.registries() : DockerHubService.dockerhub())
.then(function success(data) {
var registry = data;
if (imageDetails.registry) {
registry = RegistryHelper.getRegistryByURL(data, imageDetails.registry);
service.retrievePorRegistryModelFromRepositoryWithRegistries = retrievePorRegistryModelFromRepositoryWithRegistries;

function getURL(reg) {
let url = reg.URL;
if (reg.Type === RegistryTypes.GITLAB) {
url = reg.URL + '/' + reg.Gitlab.ProjectPath;
}
return url;
}

function retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, dockerhub) {
const model = new PorImageRegistryModel();
const registry = _.find(registries, (reg) => _.includes(repository, getURL(reg)));
if (registry) {
const url = getURL(registry);
const lastIndex = repository.lastIndexOf(url) + url.length;
let image = repository.substring(lastIndex);
if (!_.startsWith(image, ':')) {
image = image.substring(1);
}
deferred.resolve(registry);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve the registry associated to the repository', err: err });
});

return deferred.promise;
model.Registry = registry;
model.Image = image;
} else {
if (ImageHelper.imageContainsURL(repository)) {
model.UseRegistry = false;
}
model.Registry = dockerhub;
model.Image = repository;
}
return model;
}

async function retrievePorRegistryModelFromRepositoryAsync(repository) {
try {
let [registries, dockerhub] = await Promise.all([
service.registries(),
DockerHubService.dockerhub()
]);
return retrievePorRegistryModelFromRepositoryWithRegistries(repository, registries, dockerhub);
} catch (err) {
throw { msg: 'Unable to retrieve the registry associated to the repository', err: err }
}
}

service.retrievePorRegistryModelFromRepository = function(repository) {
return $async(retrievePorRegistryModelFromRepositoryAsync, repository)
};

return service;


+ 25
- 13
app/portainer/services/api/templateService.js View File

@@ -5,18 +5,26 @@ import {
} from '../../models/template';

angular.module('portainer.app')
.factory('TemplateService', ['$q', 'Templates', 'TemplateHelper', 'ImageHelper', 'ContainerHelper',
function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, ContainerHelper) {
.factory('TemplateService', ['$q', 'Templates', 'TemplateHelper', 'RegistryService', 'DockerHubService', 'ImageHelper', 'ContainerHelper',
function TemplateServiceFactory($q, Templates, TemplateHelper, RegistryService, DockerHubService, ImageHelper, ContainerHelper) {
'use strict';
var service = {};

service.templates = function() {
var deferred = $q.defer();

Templates.query().$promise
$q.all({
templates: Templates.query().$promise,
registries: RegistryService.registries(),
dockerhub: DockerHubService.dockerhub()
})
.then(function success(data) {
var templates = data.map(function (item) {
return new TemplateViewModel(item);
const templates = data.templates.map(function (item) {
const res = new TemplateViewModel(item);
const registry = RegistryService.retrievePorRegistryModelFromRepositoryWithRegistries(res.RegistryModel.Registry.URL, data.registries, data.dockerhub);
registry.Image = res.RegistryModel.Image;
res.RegistryModel = registry;
return res;
});
deferred.resolve(templates);
})
@@ -29,10 +37,15 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, Cont

service.template = function(id) {
var deferred = $q.defer();
let template;
Templates.get({ id: id }).$promise
.then(function success(data) {
var template = new TemplateViewModel(data);
template = new TemplateViewModel(data);
return RegistryService.retrievePorRegistryModelFromRepository(template.RegistryModel.Registry.URL);
})
.then((registry) => {
registry.Image = template.RegistryModel.Image;
template.RegistryModel = registry;
deferred.resolve(template);
})
.catch(function error(err) {
@@ -58,13 +71,13 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, Cont
};

service.createTemplateConfiguration = function(template, containerName, network) {
var imageConfiguration = ImageHelper.createImageConfigForContainer(template.Image, template.Registry);
var containerConfiguration = service.createContainerConfiguration(template, containerName, network);
containerConfiguration.Image = imageConfiguration.fromImage + ':' + imageConfiguration.tag;
var imageConfiguration = ImageHelper.createImageConfigForContainer(template.RegistryModel);
var containerConfiguration = createContainerConfiguration(template, containerName, network);
containerConfiguration.Image = imageConfiguration.fromImage;
return containerConfiguration;
};

service.createContainerConfiguration = function(template, containerName, network) {
function createContainerConfiguration(template, containerName, network) {
var configuration = TemplateHelper.getDefaultContainerConfiguration();
configuration.HostConfig.NetworkMode = network.Name;
configuration.HostConfig.Privileged = template.Privileged;
@@ -72,7 +85,6 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, Cont
configuration.HostConfig.ExtraHosts = template.Hosts ? template.Hosts : [];
configuration.name = containerName;
configuration.Hostname = template.Hostname;
configuration.Image = template.Image;
configuration.Env = TemplateHelper.EnvToStringArray(template.Env);
configuration.Cmd = ContainerHelper.commandStringToArray(template.Command);
var portConfiguration = TemplateHelper.portArrayToPortConfiguration(template.Ports);
@@ -83,7 +95,7 @@ function TemplateServiceFactory($q, Templates, TemplateHelper, ImageHelper, Cont
configuration.Tty = consoleConfiguration.tty;
configuration.Labels = TemplateHelper.updateContainerConfigurationWithLabels(template.Labels);
return configuration;
};
}

service.updateContainerConfigurationWithVolumes = function(configuration, template, generatedVolumesPile) {
var volumes = template.Volumes;


+ 4
- 4
app/portainer/views/templates/templatesController.js View File

@@ -73,7 +73,7 @@ function ($scope, $q, $state, $transition$, $anchorScroll, ContainerService, Ima
generatedVolumeIds.push(volumeId);
});
TemplateService.updateContainerConfigurationWithVolumes(templateConfiguration, template, data);
return ImageService.pullImage(template.Image, { URL: template.Registry }, true);
return ImageService.pullImage(template.RegistryModel, true);
})
.then(function success() {
return ContainerService.createAndStartContainer(templateConfiguration);
@@ -112,7 +112,7 @@ function ($scope, $q, $state, $transition$, $anchorScroll, ContainerService, Ima
var endpointId = EndpointProvider.endpointID();
StackService.createComposeStackFromGitRepository(stackName, repositoryOptions, template.Env, endpointId)
.then(function success(data) {
const resourceControl = data.Portainer.ResourceControl;
const resourceControl = data.ResourceControl;
return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
})
.then(function success() {
@@ -150,7 +150,7 @@ function ($scope, $q, $state, $transition$, $anchorScroll, ContainerService, Ima
var endpointId = EndpointProvider.endpointID();
StackService.createSwarmStackFromGitRepository(stackName, repositoryOptions, env, endpointId)
.then(function success(data) {
const resourceControl = data.Portainer.ResourceControl;
const resourceControl = data.ResourceControl;
return ResourceControlService.applyResourceControl(userId, accessControlData, resourceControl);
})
.then(function success() {
@@ -158,7 +158,7 @@ function ($scope, $q, $state, $transition$, $anchorScroll, ContainerService, Ima
$state.go('portainer.stacks');
})
.catch(function error(err) {
Notifications.warning('Deployment error', err.err.data.err);
Notifications.warning('Deployment error', err.data.err);
})
.finally(function final() {
$scope.state.actionInProgress = false;


+ 1
- 1
assets/css/app.css View File

@@ -514,7 +514,7 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
}
}

@media(min-width: 768px) and (max-width: 992px) {
@media(min-width: 768px){
.margin-sm-top {
margin-top: 5px;
}


Loading…
Cancel
Save