feat(openamt): Better UI/UX for AMT activation loading [INT-39] (#6290)

app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.js

@@ -9,5 +9,6 @@ angular.module('portainer.app').component('endpointsDatatable', {
     reverseOrder: '<',
     removeAction: '<',
     retrievePage: '<',
+    setLoadingMessage: '<',
   },
 });

app/portainer/components/datatables/endpoints-datatable/endpointsDatatableController.js

@@ -101,6 +101,7 @@ angular.module('portainer.app').controller('EndpointsDatatableController', [
     };
 
     this.associateOpenAMT = function (endpoints) {
+      const setLoadingMessage = this.setLoadingMessage;
       ModalService.confirm({
         title: 'Are you sure?',
         message: 'This operation will associate the selected environments with OpenAMT.',
@@ -114,6 +115,8 @@ angular.module('portainer.app').controller('EndpointsDatatableController', [
           if (!confirmed) {
             return;
           }
+
+          setLoadingMessage('Activating Active Management Technology on selected devices...');
           for (let endpoint of endpoints) {
             try {
               await OpenAMTService.activateDevice(endpoint.Id);

app/portainer/views/endpoints/endpoints.html

@@ -7,7 +7,24 @@
   <rd-header-content>Environment management</rd-header-content>
 </rd-header>
 
-<div class="row">
+<div
+  class="row"
+  style="width: 100%; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;"
+  ng-if="state.loadingMessage"
+>
+  <div class="sk-fold">
+    <div class="sk-fold-cube"></div>
+    <div class="sk-fold-cube"></div>
+    <div class="sk-fold-cube"></div>
+    <div class="sk-fold-cube"></div>
+  </div>
+  <span style="margin-top: 25px;">
+    {{ state.loadingMessage }}
+    <i class="fa fa-cog fa-spin"></i>
+  </span>
+</div>
+
+<div class="row" ng-if="!state.loadingMessage">
   <div class="col-sm-12">
     <endpoints-datatable
       title-text="Environments"
@@ -16,6 +33,7 @@
       order-by="Name"
       remove-action="removeAction"
       retrieve-page="getPaginatedEndpoints"
+      set-loading-message="setLoadingMessage"
     ></endpoints-datatable>
   </div>
 </div>

app/portainer/views/endpoints/endpointsController.js

@@ -4,8 +4,16 @@ import EndpointHelper from 'Portainer/helpers/endpointHelper';
 angular.module('portainer.app').controller('EndpointsController', EndpointsController);
 
 function EndpointsController($q, $scope, $state, $async, EndpointService, GroupService, ModalService, Notifications, EndpointProvider, StateManager) {
-  $scope.removeAction = removeAction;
+  $scope.state = {
+    loadingMessage: '',
+  };
 
+  $scope.setLoadingMessage = setLoadingMessage;
+  function setLoadingMessage(message) {
+    $scope.state.loadingMessage = message;
+  }
+
+  $scope.removeAction = removeAction;
   function removeAction(endpoints) {
     ModalService.confirmDeletion('This action will remove all configurations associated to your environment(s). Continue?', (confirmed) => {
       if (!confirmed) {