feat(registry) EE-806 add support for AWS ECR (#6165)

* feat(ecr) EE-806 add support for aws ecr

* feat(ecr) EE-806 fix wrong doc for Ecr Region

Co-authored-by: Simon Meng <simon.meng@portainer.io>

app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.html

@@ -0,0 +1,143 @@
+<form class="form-horizontal" name="registryFormEcr" ng-submit="$ctrl.formAction()">
+  <div class="col-sm-12 form-section-title">
+    Important notice
+  </div>
+  <div class="form-group">
+    <span class="col-sm-12 text-muted small">
+      For information on how to generate an Access Key, follow the
+      <a href="https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html#id_users_create_console" target="_blank">AWS guide</a>.
+    </span>
+  </div>
+
+  <div class="col-sm-12 form-section-title">
+    ECR connection details
+  </div>
+
+  <!-- name-input -->
+  <div class="form-group">
+    <label for="registry_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
+    <div class="col-sm-9 col-lg-10">
+      <input type="text" class="form-control" id="registry_name" name="registry_name" ng-model="$ctrl.model.Name" placeholder="my-ecr-registry" required auto-focus />
+    </div>
+  </div>
+  <div class="form-group" ng-show="registryFormEcr.registry_name.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="registryFormEcr.registry_name.$error">
+        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+      </div>
+    </div>
+  </div>
+  <!-- !name-input -->
+
+  <!-- url-input -->
+  <div class="form-group">
+    <label for="registry_url" class="col-sm-3 col-lg-2 control-label text-left">
+      Registry URL
+      <portainer-tooltip position="bottom" message="URL of an Amazon Elastic Container Registry, which contains an account id and region."></portainer-tooltip>
+    </label>
+    <div class="col-sm-9 col-lg-10">
+      <input
+        type="text"
+        class="form-control"
+        id="registry_url"
+        name="registry_url"
+        ng-model="$ctrl.model.URL"
+        placeholder="aws-account-id.dkr.ecr.us-east-1.amazonaws.com/"
+        required
+      />
+    </div>
+  </div>
+  <div class="form-group" ng-show="registryFormEcr.registry_url.$invalid">
+    <div class="col-sm-12 small text-warning">
+      <div ng-messages="registryFormEcr.registry_url.$error">
+        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+      </div>
+    </div>
+  </div>
+  <!-- url-input -->
+
+  <!-- authentication-checkbox -->
+  <div class="form-group">
+    <div class="col-sm-12">
+      <label class="control-label text-left">
+        Authentication
+        <portainer-tooltip position="bottom" message="Enable this option if you need to specify credentials to connect to a private registry."></portainer-tooltip>
+      </label>
+      <label class="switch" style="margin-left: 20px;"> <input type="checkbox" ng-model="$ctrl.model.Authentication" /><i></i> </label>
+    </div>
+  </div>
+  <!-- !authentication-checkbox -->
+
+  <div ng-if="$ctrl.model.Authentication">
+    <!-- aws-access-key -->
+    <div class="form-group">
+      <label for="registry_access_key" class="col-sm-3 col-lg-2 control-label text-left">AWS Access Key</label>
+      <div class="col-sm-9 col-lg-10">
+        <input type="text" class="form-control" id="registry_access_key" name="registry_access_key" ng-model="$ctrl.model.Username" required />
+      </div>
+    </div>
+    <div class="form-group" ng-show="registryFormEcr.registry_access_key.$invalid">
+      <div class="col-sm-12 small text-warning">
+        <div ng-messages="registryFormEcr.registry_access_key.$error">
+          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        </div>
+      </div>
+    </div>
+    <!-- !aws-access-key -->
+
+    <!-- aws-secret-access-key -->
+    <div class="form-group">
+      <label for="registry_secret_access_key" class="col-sm-3 col-lg-2 control-label text-left">AWS Secret Access Key</label>
+      <div class="col-sm-9 col-lg-10">
+        <input type="password" class="form-control" id="registry_secret_access_key" name="registry_secret_access_key" ng-model="$ctrl.model.Password" required />
+      </div>
+    </div>
+    <div class="form-group" ng-show="registryFormEcr.registry_secret_access_key.$invalid">
+      <div class="col-sm-12 small text-warning">
+        <div ng-messages="registryFormEcr.registry_secret_access_key.$error">
+          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        </div>
+      </div>
+    </div>
+    <!-- !aws-secret-access-key -->
+
+    <!-- region -->
+    <div class="form-group">
+      <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
+      <div class="col-sm-9 col-lg-10">
+        <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="$ctrl.model.Ecr.Region" required />
+      </div>
+    </div>
+    <div class="form-group" ng-show="registryFormEcr.registry_region.$invalid">
+      <div class="col-sm-12 small text-warning">
+        <div ng-messages="registryFormEcr.registry_region.$error">
+          <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+        </div>
+      </div>
+    </div>
+    <!-- !region -->
+  </div>
+
+  <!-- actions -->
+  <div class="col-sm-12 form-section-title">
+    Actions
+  </div>
+  <div class="form-group">
+    <div class="col-sm-12">
+      <button
+        type="submit"
+        class="btn btn-primary btn-sm"
+        ng-disabled="$ctrl.actionInProgress || !registryFormEcr.$valid"
+        button-spinner="$ctrl.actionInProgress"
+        analytics-on
+        analytics-category="portainer"
+        analytics-event="portainer-registry-creation"
+        analytics-properties="{ metadata: { type: 'ecr' } }"
+      >
+        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
+        <span ng-show="$ctrl.actionInProgress">In progress...</span>
+      </button>
+    </div>
+  </div>
+  <!-- !actions -->
+</form>

app/portainer/components/forms/registry-form-aws-ecr/registry-form-ecr.js

@@ -0,0 +1,9 @@
+angular.module('portainer.app').component('registryFormEcr', {
+  templateUrl: './registry-form-ecr.html',
+  bindings: {
+    model: '=',
+    formAction: '<',
+    formActionLabel: '@',
+    actionInProgress: '<',
+  },
+});

app/portainer/models/registry.js

@@ -14,6 +14,7 @@ export function RegistryViewModel(data) {
   this.Checked = false;
   this.Gitlab = data.Gitlab;
   this.Quay = data.Quay;
+  this.Ecr = data.Ecr;
 }
 
 export function RegistryManagementConfigurationDefaultModel(registry) {
@@ -25,7 +26,12 @@ export function RegistryManagementConfigurationDefaultModel(registry) {
   this.TLSCertFile = null;
   this.TLSKeyFile = null;
 
-  if (registry.Type === RegistryTypes.QUAY || registry.Type === RegistryTypes.AZURE) {
+  if (registry.Type === RegistryTypes.ECR) {
+    this.Region = registry.Ecr.Region;
+    this.TLSSkipVerify = true;
+  }
+
+  if (registry.Type === RegistryTypes.QUAY || registry.Type === RegistryTypes.AZURE || registry.Type === RegistryTypes.ECR) {
     this.Authentication = true;
     this.Username = registry.Username;
     this.TLS = true;
@@ -63,6 +69,9 @@ export function RegistryCreateRequest(model) {
       ProjectPath: model.Gitlab.ProjectPath,
     };
   }
+  if (model.Type === RegistryTypes.ECR) {
+    this.Ecr = model.Ecr;
+  }
   if (model.Type === RegistryTypes.QUAY) {
     this.Quay = {
       useOrganisation: model.Quay.useOrganisation,

app/portainer/models/registryTypes.js

@@ -6,4 +6,5 @@ export const RegistryTypes = Object.freeze({
   GITLAB: 4,
   PROGET: 5,
   DOCKERHUB: 6,
+  ECR: 7,
 });

app/portainer/views/registries/create/createRegistry.html

@@ -26,6 +26,16 @@
                   <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()">
@@ -103,6 +113,14 @@
             action-in-progress="$ctrl.state.actionInProgress"
           ></registry-form-custom>
 
+          <registry-form-ecr
+            ng-if="$ctrl.model.Type === $ctrl.RegistryTypes.ECR"
+            model="$ctrl.model"
+            form-action="$ctrl.createRegistry"
+            form-action-label="Add registry"
+            action-in-progress="$ctrl.state.actionInProgress"
+          ></registry-form-ecr>
+
           <registry-form-proget
             ng-if="$ctrl.model.Type === $ctrl.RegistryTypes.PROGET"
             model="$ctrl.model"

app/portainer/views/registries/create/createRegistryController.js

@@ -74,6 +74,18 @@ class CreateRegistryController {
     this.model.Authentication = true;
   }
 
+  useDefaultEcrConfiguration() {
+    this.model.Ecr.Region = '';
+  }
+
+  selectEcr() {
+    this.model.Name = '';
+    this.model.URL = '';
+    this.model.Authentication = false;
+    this.model.Ecr = {};
+    this.useDefaultEcrConfiguration();
+  }
+
   retrieveGitlabRegistries() {
     return this.$async(async () => {
       this.state.actionInProgress = true;

app/portainer/views/registries/edit/registry.html

@@ -32,6 +32,7 @@
             </div>
           </div>
           <!-- !registry-url-input -->
+
           <!-- authentication-checkbox -->
           <div class="form-group" ng-if="registry.Type !== RegistryTypes.PROGET">
             <div class="col-sm-12">
@@ -43,11 +44,14 @@
             </div>
           </div>
           <!-- !authentication-checkbox -->
+
           <!-- authentication-credentials -->
           <div ng-if="registry.Authentication">
             <!-- credentials-user -->
             <div class="form-group">
-              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">Username</label>
+              <label for="credentials_username" class="col-sm-3 col-lg-2 control-label text-left">
+                {{ registry.Type === RegistryTypes.ECR ? 'AWS Access Key' : 'Username' }}
+              </label>
               <div class="col-sm-9 col-lg-10">
                 <input type="text" class="form-control" id="credentials_username" ng-model="registry.Username" />
               </div>
@@ -55,7 +59,9 @@
             <!-- !credentials-user -->
             <!-- credentials-password -->
             <div class="form-group">
-              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">Password</label>
+              <label for="credentials_password" class="col-sm-3 col-lg-2 control-label text-left">
+                {{ registry.Type === RegistryTypes.ECR ? 'AWS Secret Access Key' : 'Password' }}
+              </label>
               <div class="col-sm-9 col-lg-10">
                 <input type="password" class="form-control" id="credentials_password" ng-model="formValues.Password" placeholder="*******" />
               </div>
@@ -87,6 +93,24 @@
             </div>
           </div>
 
+          <div ng-if="registry.Type == RegistryTypes.ECR">
+            <!-- region -->
+            <div class="form-group">
+              <label for="registry_region" class="col-sm-3 col-lg-2 control-label text-left">Region</label>
+              <div class="col-sm-9 col-lg-10">
+                <input type="text" class="form-control" id="registry_region" name="registry_region" placeholder="us-west-1" ng-model="registry.Ecr.Region" required />
+              </div>
+            </div>
+            <div class="form-group" ng-show="registryFormEcr.registry_region.$invalid">
+              <div class="col-sm-12 small text-warning">
+                <div ng-messages="registryFormEcr.registry_region.$error">
+                  <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+                </div>
+              </div>
+            </div>
+            <!-- !region -->
+          </div>
+
           <div class="form-group">
             <div class="col-sm-12">
               <button