feat(environments): create async edge [EE-4480] (#8527)

app/portainer/__module.js

@@ -148,6 +148,7 @@ angular
           'sidebar@': {},
         },
       };
+
       const logout = {
         name: 'portainer.logout',
         url: '/logout',
@@ -200,6 +201,16 @@ angular
         },
       };
 
+      const edgeAutoCreateScript = {
+        name: 'portainer.endpoints.edgeAutoCreateScript',
+        url: '/aeec',
+        views: {
+          'content@': {
+            component: 'edgeAutoCreateScriptView',
+          },
+        },
+      };
+
       var addFDOProfile = {
         name: 'portainer.endpoints.profile',
         url: '/profile',
@@ -424,6 +435,7 @@ angular
       $stateRegistryProvider.register(endpoint);
       $stateRegistryProvider.register(endpointAccess);
       $stateRegistryProvider.register(endpointKVM);
+      $stateRegistryProvider.register(edgeAutoCreateScript);
       $stateRegistryProvider.register(deviceImport);
       $stateRegistryProvider.register(addFDOProfile);
       $stateRegistryProvider.register(editFDOProfile);

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

@@ -33,7 +33,21 @@
             <pr-icon icon="'trash-2'" class-name="'icon-white'"></pr-icon>
             <span>Remove</span>
           </button>
-          <button type="button" class="btn btn-sm btn-primary h-fit" ng-click="$ctrl.setReferrer()" ui-sref="portainer.wizard.endpoints" data-cy="endpoint-addEndpointButton">
+
+          <import-fdo-device-button></import-fdo-device-button>
+
+          <button ng-if="$ctrl.isBE" type="button" class="btn btn-sm btn-secondary vertical-center" ui-sref="portainer.endpoints.edgeAutoCreateScript">
+            <pr-icon icon="'plus'"></pr-icon>
+            <span>Generate AEEC script</span>
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-sm btn-primary vertical-center"
+            ng-click="$ctrl.setReferrer()"
+            ui-sref="portainer.wizard.endpoints"
+            data-cy="endpoint-addEndpointButton"
+          >
             <pr-icon icon="'plus'" class-name="'icon-white'"></pr-icon>
             <span>Add environment</span>
           </button>

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

@@ -1,4 +1,5 @@
 import _ from 'lodash-es';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 angular.module('portainer.app').controller('EndpointsDatatableController', [
   '$scope',
@@ -8,6 +9,8 @@ angular.module('portainer.app').controller('EndpointsDatatableController', [
   function ($scope, $controller, DatatableService, PaginationService) {
     angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
 
+    this.isBE = isBE;
+
     this.state = Object.assign(this.state, {
       orderBy: this.orderBy,
       loading: true,

app/portainer/models/settings.js

@@ -85,5 +85,4 @@ export function EdgeSettingsViewModel(data = {}) {
   this.PingInterval = data.PingInterval;
   this.SnapshotInterval = data.SnapshotInterval;
   this.CommandInterval = data.CommandInterval;
-  this.AsyncMode = data.AsyncMode;
 }

app/portainer/react/components/enviroments-list-view-components.ts

@@ -0,0 +1,13 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { ImportFdoDeviceButton } from '@/react/portainer/environments/ListView/ImportFdoDeviceButton';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { withReactQuery } from '@/react-tools/withReactQuery';
+
+export const envListModule = angular
+  .module('portainer.app.react.components.environments.list-view', [])
+  .component(
+    'importFdoDeviceButton',
+    r2a(withUIRouter(withReactQuery(ImportFdoDeviceButton)), [])
+  ).name;

app/portainer/react/components/index.ts

@@ -32,6 +32,7 @@ import { customTemplatesModule } from './custom-templates';
 import { gitFormModule } from './git-form';
 import { settingsModule } from './settings';
 import { accessControlModule } from './access-control';
+import { envListModule } from './enviroments-list-view-components';
 
 export const componentsModule = angular
   .module('portainer.app.react.components', [
@@ -39,6 +40,7 @@ export const componentsModule = angular
     gitFormModule,
     settingsModule,
     accessControlModule,
+    envListModule,
   ])
   .component(
     'tagSelector',

app/portainer/react/views/index.ts

@@ -8,6 +8,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
 import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenView';
 import { EdgeComputeSettingsView } from '@/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView';
 import { withI18nSuspense } from '@/react-tools/withI18nSuspense';
+import { EdgeAutoCreateScriptView } from '@/react/portainer/environments/EdgeAutoCreateScriptView';
 
 import { wizardModule } from './wizard';
 import { teamsModule } from './teams';
@@ -23,6 +24,13 @@ export const viewsModule = angular
     'homeView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(HomeView))), [])
   )
+  .component(
+    'edgeAutoCreateScriptView',
+    r2a(
+      withUIRouter(withReactQuery(withCurrentUser(EdgeAutoCreateScriptView))),
+      []
+    )
+  )
   .component(
     'createAccessToken',
     r2a(withI18nSuspense(withUIRouter(CreateAccessToken)), [

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

@@ -50,7 +50,7 @@
             edge-info="{ key: endpoint.EdgeKey, id: endpoint.EdgeID }"
             commands="state.edgeScriptCommands"
             is-nomad-token-visible="state.showNomad"
-            hide-async-mode="!endpoint.IsEdgeDevice"
+            async-mode="endpoint.Edge.AsyncMode"
           ></edge-script-form>
 
           <edge-key-display edge-key="endpoint.EdgeKey"> </edge-key-display>