feat: EE-424 Provide a way to re-associate an Edge endpoint to a new Edge agent (#5266)

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

app/portainer/rest/endpoint.js

@@ -16,6 +16,7 @@ angular.module('portainer.app').factory('Endpoints', [
         },
         get: { method: 'GET', params: { id: '@id' } },
         update: { method: 'PUT', params: { id: '@id' } },
+        deassociate: { method: 'DELETE', params: { id: '@id', action: 'association' } },
         updateAccess: { method: 'PUT', params: { id: '@id', action: 'access' } },
         remove: { method: 'DELETE', params: { id: '@id' } },
         snapshots: { method: 'POST', params: { action: 'snapshot' } },

app/portainer/services/api/endpointService.js

@@ -41,6 +41,10 @@ angular.module('portainer.app').factory('EndpointService', [
       return Endpoints.updateAccess({ id: id }, { UserAccessPolicies: userAccessPolicies, TeamAccessPolicies: teamAccessPolicies }).$promise;
     };
 
+    service.deassociateEndpoint = function (endpointID) {
+      return Endpoints.deassociate({ id: endpointID }).$promise;
+    };
+
     service.updateEndpoint = function (id, payload) {
       var deferred = $q.defer();
       FileUploadService.uploadTLSFilesForEndpoint(id, payload.TLSCACert, payload.TLSCert, payload.TLSKey)

app/portainer/services/modalService.js

@@ -152,6 +152,24 @@ angular.module('portainer.app').factory('ModalService', [
       });
     };
 
+    service.confirmDeassociate = function (callback) {
+      const message =
+        '<p>De-associating this Edge endpoint will mark it as non associated and will clear the registered Edge ID.</p>' +
+        '<p>Any agent started with the Edge key associated to this endpoint will be able to re-associate with this endpoint.</p>' +
+        '<p>You can re-use the Edge ID and Edge key that you used to deploy the existing Edge agent to associate a new Edge device to this endpoint.</p>';
+      service.confirm({
+        title: 'About de-associating',
+        message: $sanitize(message),
+        buttons: {
+          confirm: {
+            label: 'De-associate',
+            className: 'btn-primary',
+          },
+        },
+        callback: callback,
+      });
+    };
+
     service.confirmUpdate = function (message, callback) {
       message = $sanitize(message);
       service.confirm({

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

@@ -22,6 +22,11 @@
       <p>
         Edge identifier: <code>{{ endpoint.EdgeID }}</code>
       </p>
+      <p>
+        <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress" ng-click="onDeassociateEndpoint()" button-spinner="state.actionInProgress">
+          <span ng-hide="state.actionInProgress">De-associate</span>
+        </button>
+      </p>
     </span>
   </information-panel>
   <information-panel ng-if="state.edgeEndpoint && !endpoint.EdgeID" title-text="Deploy an agent">

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

@@ -19,7 +19,8 @@ angular
     EndpointProvider,
     Notifications,
     Authentication,
-    SettingsService
+    SettingsService,
+    ModalService
   ) {
     $scope.state = {
       uploadInProgress: false,
@@ -113,6 +114,29 @@ angular
       }
     }
 
+    $scope.onDeassociateEndpoint = async function () {
+      ModalService.confirmDeassociate((confirmed) => {
+        if (confirmed) {
+          deassociateEndpoint();
+        }
+      });
+    };
+
+    async function deassociateEndpoint() {
+      var endpoint = $scope.endpoint;
+
+      try {
+        $scope.state.actionInProgress = true;
+        await EndpointService.deassociateEndpoint(endpoint.Id);
+        Notifications.success('Endpoint de-associated', $scope.endpoint.Name);
+        $state.reload();
+      } catch (err) {
+        Notifications.error('Failure', err, 'Unable to de-associate endpoint');
+      } finally {
+        $scope.state.actionInProgress = false;
+      }
+    }
+
     $scope.updateEndpoint = function () {
       var endpoint = $scope.endpoint;
       var securityData = $scope.formValues.SecurityFormData;