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

feat(ui): portainer registry boxselector icon ce EE-3848 (#7419) 

* add icon to registry boxselector
pull/6738/head
Richard Wei 2022-08-10 12:21:17 +12:00 committed by GitHub
parent 83a17de1c0
commit 34e2178752
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
app/portainer/views/registries/create/createRegistry.html
View File

@ -10,78 +10,7 @@
<div class="form-group"></div>
<div class="form-group" style="margin-bottom: 0">
<div class="boxselector_wrapper">
<div>
<input type="radio" id="registry_dockerhub" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.DOCKERHUB" />
<label for="registry_dockerhub" ng-click="$ctrl.selectDockerHub()">
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
DockerHub
</div>
<p>DockerHub authenticated account</p>
</label>
</div>
<div>
<input type="radio" id="registry_aws_ecr" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.ECR" />
<label for="registry_aws_ecr" ng-click="$ctrl.selectEcr()">
<div class="boxselector_header">
<i class="fab fa-aws" aria-hidden="true" style="margin-right: 2px"></i>
AWS ECR
</div>
<p>Amazon elastic container registry</p>
</label>
</div>
<div>
<input type="radio" id="registry_quay" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.QUAY" />
<label for="registry_quay" ng-click="$ctrl.selectQuayRegistry()">
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
Quay.io
</div>
<p>Quay container registry</p>
</label>
</div>
<div>
<input type="radio" id="registry_proget" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.PROGET" />
<label for="registry_proget" ng-click="$ctrl.selectProGetRegistry()">
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
ProGet
</div>
<p>ProGet container registry</p>
</label>
</div>
<div>
<input type="radio" id="registry_azure" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.AZURE" />
<label for="registry_azure" ng-click="$ctrl.selectAzureRegistry()">
<div class="boxselector_header">
<i class="fab fa-microsoft" aria-hidden="true" style="margin-right: 2px"></i>
Azure
</div>
<p>Azure container registry</p>
</label>
</div>
<div>
<input type="radio" id="registry_gitlab" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.GITLAB" />
<label for="registry_gitlab" ng-click="$ctrl.selectGitlabRegistry()">
<div class="boxselector_header">
<i class="fab fa-gitlab" aria-hidden="true" style="margin-right: 2px"></i>
Gitlab
</div>
<p>Gitlab container registry</p>
</label>
</div>
<div>
<input type="radio" id="registry_custom" ng-model="$ctrl.model.Type" ng-value="$ctrl.RegistryTypes.CUSTOM" />
<label for="registry_custom" ng-click="$ctrl.selectCustomRegistry()">
<div class="boxselector_header vertical-center">
<pr-icon icon="'database'" feather="true"></pr-icon>
Custom registry
</div>
<p>Define your own registry</p>
</label>
</div>
</div>
<box-selector radio-name="'registry'" value="$ctrl.state.registryValue" options="$ctrl.state.availableRegistry" on-change="($ctrl.setRegistry)"></box-selector>
</div>
<registry-form-quay

49
app/portainer/views/registries/create/createRegistryController.js
View File

@ -1,6 +1,7 @@
import _ from 'lodash';
import { RegistryTypes } from 'Portainer/models/registryTypes';
import { RegistryCreateFormValues } from 'Portainer/models/registry';
import { options } from './options';
class CreateRegistryController {
/* @ngInject */
@ -26,6 +27,16 @@ class CreateRegistryController {
this.nameIsUsed = this.nameIsUsed.bind(this);
this.retrieveGitlabRegistries = this.retrieveGitlabRegistries.bind(this);
this.createGitlabRegistries = this.createGitlabRegistries.bind(this);
this.selectDockerHub = this.selectDockerHub.bind(this);
this.selectEcr = this.selectEcr.bind(this);
this.selectQuayRegistry = this.selectQuayRegistry.bind(this);
this.selectProGetRegistry = this.selectProGetRegistry.bind(this);
this.selectAzureRegistry = this.selectAzureRegistry.bind(this);
this.selectGitlabRegistry = this.selectGitlabRegistry.bind(this);
this.selectCustomRegistry = this.selectCustomRegistry.bind(this);
this.setRegistry = this.setRegistry.bind(this);
}
useDefaultQuayConfiguration() {
@ -39,6 +50,7 @@ class CreateRegistryController {
this.model.Authentication = true;
this.model.Quay = {};
this.useDefaultQuayConfiguration();
this.model.Type = RegistryTypes.QUAY;
}
useDefaultGitlabConfiguration() {
@ -51,12 +63,14 @@ class CreateRegistryController {
this.model.Authentication = true;
this.model.Gitlab = {};
this.useDefaultGitlabConfiguration();
this.model.Type = RegistryTypes.GITLAB;
}
selectAzureRegistry() {
this.model.Name = '';
this.model.URL = '';
this.model.Authentication = true;
this.model.Type = RegistryTypes.AZURE;
}
selectProGetRegistry() {
@ -64,18 +78,21 @@ class CreateRegistryController {
this.model.URL = '';
this.model.BaseURL = '';
this.model.Authentication = true;
this.model.Type = RegistryTypes.PROGET;
}
selectCustomRegistry() {
this.model.Name = '';
this.model.URL = '';
this.model.Authentication = false;
this.model.Type = RegistryTypes.CUSTOM;
}
selectDockerHub() {
this.model.Name = '';
this.model.URL = 'docker.io';
this.model.Authentication = true;
this.model.Type = RegistryTypes.DOCKERHUB;
}
useDefaultEcrConfiguration() {
@ -88,6 +105,7 @@ class CreateRegistryController {
this.model.Authentication = false;
this.model.Ecr = {};
this.useDefaultEcrConfiguration();
this.model.Type = RegistryTypes.ECR;
}
retrieveGitlabRegistries() {
@ -146,11 +164,42 @@ class CreateRegistryController {
});
}
setRegistry(registry) {
this.state.registryValue = registry;
switch (registry) {
case '6':
this.selectDockerHub();
break;
case '7':
this.selectEcr();
break;
case '1':
this.selectQuayRegistry();
break;
case '5':
this.selectProGetRegistry();
break;
case '2':
this.selectAzureRegistry();
break;
case '4':
this.selectGitlabRegistry();
break;
case '3':
this.selectCustomRegistry();
break;
}
}
$onInit() {
return this.$async(async () => {
this.model = new RegistryCreateFormValues();
this.model.Type = RegistryTypes.DOCKERHUB;
this.selectDockerHub();
this.state.availableRegistry = options;
// Default registryValue is DockerHub, which is 6
this.state.registryValue = '6';
const from = this.$transition$.from();
const params = this.$transition$.params('from');

59
app/portainer/views/registries/create/options.tsx Normal file
View File

@ -0,0 +1,59 @@
import Docker from '@/assets/ico/vendor/docker.svg?c';
import Ecr from '@/assets/ico/vendor/ecr.svg?c';
import Quay from '@/assets/ico/vendor/quay.svg?c';
import Proget from '@/assets/ico/vendor/proget.svg?c';
import Azure from '@/assets/ico/vendor/azure.svg?c';
import Gitlab from '@/assets/ico/vendor/gitlab.svg?c';
import Custom from '@/assets/ico/custom.svg?c';
export const options = [
{
id: 'registry_dockerhub',
icon: Docker,
label: 'DockerHub',
description: 'DockerHub authenticated account',
value: '6',
},
{
id: 'registry_aws_ecr',
icon: Ecr,
label: 'AWS ECR',
description: 'Amazon elastic container registry',
value: '7',
},
{
id: 'registry_quay',
icon: Quay,
label: 'Quay.io',
description: 'Quay container registry',
value: '1',
},
{
id: 'registry_proget',
icon: Proget,
label: 'ProGet',
description: 'ProGet container registry',
value: '5',
},
{
id: 'registry_azure',
icon: Azure,
label: 'Azure',
description: 'Azure container registry',
value: '2',
},
{
id: 'registry_gitlab',
icon: Gitlab,
label: 'Gitlab',
description: 'Gitlab container registry',
value: '4',
},
{
id: 'registry_custom',
icon: Custom,
label: 'Custom registry',
description: 'Define your own registry',
value: '3',
},
];