fix(edge-stack): URI too large error for edge stacks with a large amount of environments [EE-5583] (#9085)

* refactor(edge-stacks): filter endpoints by edgeStack

* feat(api/endpoints): edge stack filter support filtering on status in stack

* refactor(endpoints): use separate query params and not JSON query param when querying for an edge stack

* feat(api/endpoints): handle stack filter on dynamic groups + unique list with multiple groups sharing environments

* fix(app/endpoints): edge stack related query params type definition

* fix(api/endpoints): rebase conflicts on imports

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackViewController.js

@@ -1,4 +1,3 @@
-import _ from 'lodash-es';
 import { getEnvironments } from '@/react/portainer/environments/environment.service';
 import { confirmWebEditorDiscard } from '@@/modals/confirm';
 import { EnvironmentType } from '@/react/portainer/environments/types';
@@ -30,7 +29,6 @@ export class EditEdgeStackViewController {
     this.deployStack = this.deployStack.bind(this);
     this.deployStackAsync = this.deployStackAsync.bind(this);
     this.getPaginatedEndpoints = this.getPaginatedEndpoints.bind(this);
-    this.getPaginatedEndpointsAsync = this.getPaginatedEndpointsAsync.bind(this);
     this.onEditorChange = this.onEditorChange.bind(this);
     this.isEditorDirty = this.isEditorDirty.bind(this);
   }
@@ -44,7 +42,6 @@ export class EditEdgeStackViewController {
 
         this.edgeGroups = edgeGroups;
         this.stack = model;
-        this.stackEndpointIds = this.filterStackEndpoints(model.EdgeGroups, edgeGroups);
         this.originalFileContent = file;
         this.formValues = {
           content: file,
@@ -88,15 +85,6 @@ export class EditEdgeStackViewController {
     return !this.state.isStackDeployed && this.formValues.content.replace(/(\r\n|\n|\r)/gm, '') !== this.originalFileContent.replace(/(\r\n|\n|\r)/gm, '');
   }
 
-  filterStackEndpoints(groupIds, groups) {
-    return _.flatten(
-      _.map(groupIds, (Id) => {
-        const group = _.find(groups, { Id });
-        return group.Endpoints;
-      })
-    );
-  }
-
   deployStack(values) {
     return this.deployStackAsync(values);
   }
@@ -123,22 +111,19 @@ export class EditEdgeStackViewController {
     }
   }
 
-  getPaginatedEndpoints(...args) {
-    return this.$async(this.getPaginatedEndpointsAsync, ...args);
-  }
+  getPaginatedEndpoints(lastId, limit, search) {
+    return this.$async(async () => {
+      try {
+        const query = {
+          search,
+          edgeStackId: this.stack.Id,
+        };
+        const { value, totalCount } = await getEnvironments({ start: lastId, limit, query });
 
-  async getPaginatedEndpointsAsync(lastId, limit, search) {
-    try {
-      if (this.stackEndpointIds.length === 0) {
-        return { endpoints: [], totalCount: 0 };
+        return { endpoints: value, totalCount };
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
       }
-
-      const query = { search, endpointIds: this.stackEndpointIds };
-      const { value, totalCount } = await getEnvironments({ start: lastId, limit, query });
-
-      return { endpoints: value, totalCount };
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
-    }
+    });
   }
 }

app/react/edge/edge-stacks/types.ts

@@ -17,7 +17,7 @@ interface EdgeStackStatusDetails {
   ImagesPulled: boolean;
 }
 
-interface EdgeStackStatus {
+export interface EdgeStackStatus {
   Details: EdgeStackStatusDetails;
   Error: string;
   EndpointID: EnvironmentId;

app/react/portainer/environments/environment.service/index.ts

@@ -3,6 +3,7 @@ import { type EnvironmentGroupId } from '@/react/portainer/environments/environm
 import { type TagId } from '@/portainer/tags/types';
 import { UserId } from '@/portainer/users/types';
 import { TeamId } from '@/react/portainer/users/teams/types';
+import { EdgeStack, EdgeStackStatus } from '@/react/edge/edge-stacks/types';
 
 import type {
   Environment,
@@ -14,7 +15,16 @@ import type {
 
 import { buildUrl } from './utils';
 
-export interface EnvironmentsQueryParams {
+export type EdgeStackEnvironmentsQueryParams =
+  | {
+      edgeStackId?: EdgeStack['Id'];
+    }
+  | {
+      edgeStackId: EdgeStack['Id'];
+      edgeStackStatus?: keyof EdgeStackStatus['Details'];
+    };
+
+export interface BaseEnvironmentsQueryParams {
   search?: string;
   types?: EnvironmentType[] | readonly EnvironmentType[];
   tagIds?: TagId[];
@@ -32,6 +42,9 @@ export interface EnvironmentsQueryParams {
   edgeCheckInPassedSeconds?: number;
 }
 
+export type EnvironmentsQueryParams = BaseEnvironmentsQueryParams &
+  EdgeStackEnvironmentsQueryParams;
+
 export interface GetEnvironmentsOptions {
   start?: number;
   limit?: number;

app/react/portainer/environments/queries/useEnvironmentList.ts

@@ -12,12 +12,12 @@ import { queryKeys } from './query-keys';
 
 export const ENVIRONMENTS_POLLING_INTERVAL = 30000; // in ms
 
-export interface Query extends EnvironmentsQueryParams {
+export type Query = EnvironmentsQueryParams & {
   page?: number;
   pageLimit?: number;
   sort?: string;
   order?: 'asc' | 'desc';
-}
+};
 
 type GetEndpointsResponse = Awaited<ReturnType<typeof getEnvironments>>;