fix(docker/tls): update tls certs for Docker API env [EE-4286] (#9112)

app/portainer/components/index.js

@@ -8,8 +8,9 @@ import { boxSelectorModule } from './BoxSelector';
 import { beFeatureIndicator } from './BEFeatureIndicator';
 import { InformationPanelAngular } from './InformationPanel';
 import { gitFormModule } from './forms/git-form';
+import { tlsFieldsetModule } from './tls-fieldset';
 
 export default angular
-  .module('portainer.app.components', [boxSelectorModule, widgetModule, gitFormModule, porAccessManagementModule, formComponentsModule])
+  .module('portainer.app.components', [boxSelectorModule, widgetModule, gitFormModule, porAccessManagementModule, formComponentsModule, tlsFieldsetModule])
   .component('informationPanel', InformationPanelAngular)
   .component('beFeatureIndicator', beFeatureIndicator).name;

app/portainer/components/tls-fieldset/index.ts

@@ -0,0 +1,22 @@
+import angular from 'angular';
+
+import {
+  TLSFieldset,
+  tlsConfigValidation,
+} from '@/react/components/TLSFieldset';
+import { withFormValidation } from '@/react-tools/withFormValidation';
+
+export const ngModule = angular.module(
+  'portainer.app.components.tls-fieldset',
+  []
+);
+
+export const tlsFieldsetModule = ngModule.name;
+
+withFormValidation(
+  ngModule,
+  TLSFieldset,
+  'tlsFieldset',
+  [],
+  tlsConfigValidation
+);

app/portainer/views/endpoints/edit/endpoint.html

@@ -72,7 +72,7 @@
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-body>
-        <form class="form-horizontal">
+        <form class="form-horizontal" name="$ctrl.endpointForm">
           <div class="col-sm-12 form-section-title"> Configuration </div>
           <!-- name-input -->
           <div class="form-group">
@@ -124,6 +124,14 @@
           </div>
 
           <!-- !endpoint-public-url-input -->
+
+          <tls-fieldset
+            ng-if="!state.edgeEndpoint && endpoint.Status !== 4 && state.showTLSConfig"
+            values="formValues.tlsConfig"
+            on-change="(onChangeTLSConfigFormValues)"
+            validation-data="{optionalCert: true}"
+          ></tls-fieldset>
+
           <azure-endpoint-config
             ng-if="state.azureEndpoint"
             application-id="endpoint.AzureCredentials.ApplicationID"
@@ -142,12 +150,6 @@
 
           <tag-selector ng-if="endpoint" value="endpoint.TagIds" allow-create="state.allowCreate" on-change="(onChangeTags)"></tag-selector>
 
-          <!-- endpoint-security -->
-          <div ng-if="endpointType === 'remote' && !state.azureEndpoint && !state.kubernetesEndpoint && !state.edgeEndpoint && endpoint.Type !== 6">
-            <div class="col-sm-12 form-section-title"> Security </div>
-            <por-endpoint-security form-data="formValues.SecurityFormData" endpoint="endpoint"></por-endpoint-security>
-          </div>
-          <!-- !endpoint-security -->
           <!-- open-amt info -->
           <div ng-if="state.showAMTInfo">
             <div class="col-sm-12 form-section-title"> Open Active Management Technology </div>
@@ -219,7 +221,7 @@
               <button
                 type="button"
                 class="btn btn-primary btn-sm !ml-0"
-                ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || (endpoint.TLS && ((endpoint.TLSVerify && !formValues.TLSCACert) || (endpoint.TLSClientCert && (!formValues.TLSCert || !formValues.TLSKey))))"
+                ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || !$ctrl.endpointForm.$valid"
                 ng-click="updateEndpoint()"
                 button-spinner="state.actionInProgress"
               >

app/portainer/views/endpoints/edit/endpointController.js

@@ -2,11 +2,10 @@ import _ from 'lodash-es';
 import uuidv4 from 'uuid/v4';
 
 import { PortainerEndpointTypes } from '@/portainer/models/endpoint/models';
-import { EndpointSecurityFormData } from '@/portainer/components/endpointSecurity/porEndpointSecurityModel';
 import EndpointHelper from '@/portainer/helpers/endpointHelper';
 import { getAMTInfo } from 'Portainer/hostmanagement/open-amt/open-amt.service';
 import { confirmDestructive } from '@@/modals/confirm';
-import { isEdgeEnvironment } from '@/react/portainer/environments/utils';
+import { isEdgeEnvironment, isDockerAPIEnvironment } from '@/react/portainer/environments/utils';
 
 import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
 import { confirmDisassociate } from '@/react/portainer/environments/ItemView/ConfirmDisassociateModel';
@@ -33,6 +32,8 @@ function EndpointController(
   $scope.onChangeCheckInInterval = onChangeCheckInInterval;
   $scope.setFieldValue = setFieldValue;
   $scope.onChangeTags = onChangeTags;
+  $scope.onChangeTLSConfigFormValues = onChangeTLSConfigFormValues;
+
   const isBE = process.env.PORTAINER_EDITION === 'BE';
 
   $scope.state = {
@@ -53,6 +54,7 @@ function EndpointController(
     allowSelfSignedCerts: true,
     showAMTInfo: false,
     showNomad: isBE,
+    showTLSConfig: false,
     edgeScriptCommands: {
       linux: _.compact([commandsTabs.k8sLinux, commandsTabs.swarmLinux, commandsTabs.standaloneLinux, isBE && commandsTabs.nomadLinux]),
       win: [commandsTabs.swarmWindows, commandsTabs.standaloneWindow],
@@ -100,7 +102,14 @@ function EndpointController(
   };
 
   $scope.formValues = {
-    SecurityFormData: new EndpointSecurityFormData(),
+    tlsConfig: {
+      tls: false,
+      skipVerify: false,
+      skipClientVerify: false,
+      caCertFile: null,
+      certFile: null,
+      keyFile: null,
+    },
   };
 
   $scope.onDisassociateEndpoint = async function () {
@@ -134,6 +143,15 @@ function EndpointController(
     setFieldValue('TagIds', value);
   }
 
+  function onChangeTLSConfigFormValues(newValues) {
+    return this.$async(async () => {
+      $scope.formValues.tlsConfig = {
+        ...$scope.formValues.tlsConfig,
+        ...newValues,
+      };
+    });
+  }
+
   function setFieldValue(name, value) {
     return $scope.$evalAsync(() => {
       $scope.endpoint = {
@@ -158,11 +176,6 @@ function EndpointController(
 
   $scope.updateEndpoint = async function () {
     var endpoint = $scope.endpoint;
-    var securityData = $scope.formValues.SecurityFormData;
-    var TLS = securityData.TLS;
-    var TLSMode = securityData.TLSMode;
-    var TLSSkipVerify = TLS && (TLSMode === 'tls_client_noca' || TLSMode === 'tls_only');
-    var TLSSkipClientVerify = TLS && (TLSMode === 'tls_ca' || TLSMode === 'tls_only');
 
     if (isEdgeEnvironment(endpoint.Type) && _.difference($scope.initialTagIds, endpoint.TagIds).length > 0) {
       let confirmed = await confirmDestructive({
@@ -182,12 +195,6 @@ function EndpointController(
       Gpus: endpoint.Gpus,
       GroupID: endpoint.GroupId,
       TagIds: endpoint.TagIds,
-      TLS: TLS,
-      TLSSkipVerify: TLSSkipVerify,
-      TLSSkipClientVerify: TLSSkipClientVerify,
-      TLSCACert: TLSSkipVerify || securityData.TLSCACert === endpoint.TLSConfig.TLSCACert ? null : securityData.TLSCACert,
-      TLSCert: TLSSkipClientVerify || securityData.TLSCert === endpoint.TLSConfig.TLSCert ? null : securityData.TLSCert,
-      TLSKey: TLSSkipClientVerify || securityData.TLSKey === endpoint.TLSConfig.TLSKey ? null : securityData.TLSKey,
       AzureApplicationID: endpoint.AzureCredentials.ApplicationID,
       AzureTenantID: endpoint.AzureCredentials.TenantID,
       AzureAuthenticationKey: endpoint.AzureCredentials.AuthenticationKey,
@@ -201,6 +208,18 @@ function EndpointController(
       endpoint.Type !== PortainerEndpointTypes.AgentOnKubernetesEnvironment
     ) {
       payload.URL = 'tcp://' + endpoint.URL;
+
+      if (endpoint.Type === PortainerEndpointTypes.DockerEnvironment) {
+        var tlsConfig = $scope.formValues.tlsConfig;
+        payload.TLS = tlsConfig.tls;
+        payload.TLSSkipVerify = tlsConfig.skipVerify;
+        if (tlsConfig.tls && !tlsConfig.skipVerify) {
+          payload.TLSSkipClientVerify = tlsConfig.skipClientVerify;
+          payload.TLSCACert = tlsConfig.caCertFile;
+          payload.TLSCert = tlsConfig.certFile;
+          payload.TLSKey = tlsConfig.keyFile;
+        }
+      }
     }
 
     if (endpoint.Type === PortainerEndpointTypes.AgentOnKubernetesEnvironment) {
@@ -267,11 +286,25 @@ function EndpointController(
     }
   }
 
+  function configureTLS(endpoint) {
+    $scope.formValues = {
+      tlsConfig: {
+        tls: endpoint.TLSConfig.TLS || false,
+        skipVerify: endpoint.TLSConfig.TLSSkipVerify || false,
+        skipClientVerify: endpoint.TLSConfig.TLSSkipClientVerify || false,
+      },
+    };
+  }
+
   async function initView() {
     return $async(async () => {
       try {
         const [endpoint, groups, settings] = await Promise.all([EndpointService.endpoint($transition$.params().id), GroupService.groups(), SettingsService.settings()]);
 
+        if (isDockerAPIEnvironment(endpoint)) {
+          $scope.state.showTLSConfig = true;
+        }
+
         // Check if the environment is docker standalone, to decide whether to show the GPU insights box
         const isDockerEnvironment = endpoint.Type === PortainerEndpointTypes.DockerEnvironment;
         if (isDockerEnvironment) {
@@ -305,6 +338,8 @@ function EndpointController(
 
         configureState();
 
+        configureTLS(endpoint);
+
         if (EndpointHelper.isDockerEndpoint(endpoint) && $scope.state.edgeAssociated) {
           $scope.state.showAMTInfo = settings && settings.openAMTConfiguration && settings.openAMTConfiguration.enabled;
         }