fix(edge/stacks): show pending envs [EE-5913] (#10051)

api/http/handler/endpoints/filter.go

@@ -208,9 +208,12 @@ func endpointStatusInStackMatchesFilter(edgeStackStatus map[portainer.EndpointID
 	status, ok := edgeStackStatus[envId]
 
 	// consider that if the env has no status in the stack it is in Pending state
-	// workaround because Stack.Status[EnvId].Details.Pending is never set to True in the codebase
-	if !ok && statusFilter == portainer.EdgeStackStatusPending {
-		return true
+	if statusFilter == portainer.EdgeStackStatusPending {
+		return !ok || len(status.Status) == 0
+	}
+
+	if !ok {
+		return false
 	}
 
 	return slices.ContainsFunc(status.Status, func(s portainer.EdgeStackDeploymentStatus) bool {

app/edge/__module.js

@@ -72,6 +72,11 @@ angular
           component: 'editEdgeStackView',
         },
       },
+      params: {
+        status: {
+          dynamic: true,
+        },
+      },
     };
 
     const edgeJobs = {

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx

@@ -4,7 +4,6 @@ import { useMemo, useState } from 'react';
 
 import { EdgeStackStatus, StatusType } from '@/react/edge/edge-stacks/types';
 import { useEnvironmentList } from '@/react/portainer/environments/queries';
-import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 import { useParamState } from '@/react/hooks/useParamState';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 
@@ -92,23 +91,21 @@ export function EnvironmentsDatatable() {
       emptyContentLabel="No environment available."
       disableSelect
       description={
-        isBE && (
-          <div className="w-1/4">
-            <PortainerSelect<StatusType | undefined>
-              isClearable
-              bindToBody
-              value={statusFilter}
-              onChange={(e) => setStatusFilter(e || undefined)}
-              options={[
-                { value: StatusType.Pending, label: 'Pending' },
-                { value: StatusType.Acknowledged, label: 'Acknowledged' },
-                { value: StatusType.ImagesPulled, label: 'Images pre-pulled' },
-                { value: StatusType.Running, label: 'Deployed' },
-                { value: StatusType.Error, label: 'Failed' },
-              ]}
-            />
-          </div>
-        )
+        <div className="w-1/4">
+          <PortainerSelect<StatusType | undefined>
+            isClearable
+            bindToBody
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e ?? undefined)}
+            options={[
+              { value: StatusType.Pending, label: 'Pending' },
+              { value: StatusType.Acknowledged, label: 'Acknowledged' },
+              { value: StatusType.ImagesPulled, label: 'Images pre-pulled' },
+              { value: StatusType.Running, label: 'Deployed' },
+              { value: StatusType.Error, label: 'Failed' },
+            ]}
+          />
+        </div>
       }
     />
   );