fix(edge/stacks): show correct status for env [EE-3374] (#7466)

app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html

@@ -56,8 +56,8 @@
               ng-class="{ active: item.Checked }"
             >
               <td>{{ item.Name }}</td>
-              <td>{{ $ctrl.statusMap[item.Status.Type] || 'Pending' }}</td>
-              <td>{{ item.Status.Error ? item.Status.Error : '-' }}</td>
+              <td>{{ $ctrl.endpointStatusLabel(item.Id) }}</td>
+              <td>{{ $ctrl.endpointStatusError(item.Id) }}</td>
             </tr>
             <tr ng-if="$ctrl.state.loading">
               <td colspan="5" class="text-center text-muted">Loading...</td>

app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatableController.js

@@ -39,6 +39,22 @@ export class EdgeStackEndpointsDatatableController {
     this.onTextFilterChange = onTextFilterChange;
   }
 
+  getEndpointStatus(endpointId) {
+    return this.endpointsStatus[endpointId];
+  }
+
+  endpointStatusLabel(endpointId) {
+    const status = this.getEndpointStatus(endpointId);
+
+    return status ? this.statusMap[status.Type] : 'Pending';
+  }
+
+  endpointStatusError(endpointId) {
+    const status = this.getEndpointStatus(endpointId);
+
+    return status && status.Error ? status.Error : '-';
+  }
+
   $onInit() {
     this.setDefaults();
     this.prepareTableFromDataset();

app/edge/components/edge-stack-endpoints-datatable/index.js

@@ -12,5 +12,7 @@ angular.module('portainer.edge').component('edgeStackEndpointsDatatable', {
     orderBy: '@',
     reverseOrder: '<',
     retrievePage: '<',
+    edgeStackId: '<',
+    endpointsStatus: '<',
   },
 });

app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html

@@ -33,6 +33,8 @@
                 table-key="edgeStackEndpoints"
                 order-by="Name"
                 retrieve-page="$ctrl.getPaginatedEndpoints"
+                edge-stack-id="$ctrl.stack.Id"
+                endpoints-status="$ctrl.stack.Status"
               >
               </edge-stack-endpoints-datatable>
             </div>

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

@@ -99,14 +99,14 @@ export class EditEdgeStackViewController {
 
   async getPaginatedEndpointsAsync(lastId, limit, search) {
     try {
+      if (this.stackEndpointIds.length === 0) {
+        return { endpoints: [], totalCount: 0 };
+      }
+
       const query = { search, endpointIds: this.stackEndpointIds };
       const { value, totalCount } = await getEnvironments({ start: lastId, limit, query });
-      const endpoints = _.map(value, (endpoint) => {
-        const status = this.stack.Status[endpoint.Id];
-        endpoint.Status = status;
-        return endpoint;
-      });
-      return { endpoints, totalCount };
+
+      return { endpoints: value, totalCount };
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to retrieve environment information');
     }

app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx

@@ -3,7 +3,8 @@ import { useSref } from '@uirouter/react';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
-import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
+
+import { useRowContext } from '../RowContext';
 
 export const image: Column<DockerContainer> = {
   Header: 'Image',
@@ -24,11 +25,9 @@ function ImageCell({ value: imageName }: Props) {
   const linkProps = useSref('docker.images.image', { id: imageName });
   const shortImageName = trimSHASum(imageName);
 
-  const environmentQuery = useCurrentEnvironment();
+  const { environment } = useRowContext();
 
-  const environment = environmentQuery.data;
-
-  if (!environment || isOfflineEndpoint(environment)) {
+  if (isOfflineEndpoint(environment)) {
     return <span>{shortImageName}</span>;
   }
 

app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx

@@ -4,11 +4,11 @@ import { useSref } from '@uirouter/react';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 import { isOfflineEndpoint } from '@/portainer/helpers/endpointHelper';
-import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
 
 import { useTableSettings } from '@@/datatables/useZustandTableSettings';
 
 import { TableSettings } from '../types';
+import { useRowContext } from '../RowContext';
 
 export const name: Column<DockerContainer> = {
   Header: 'Name',
@@ -35,16 +35,15 @@ export function NameCell({
 
   const { settings } = useTableSettings<TableSettings>();
   const truncate = settings.truncateContainerName;
-  const environmentQuery = useCurrentEnvironment();
 
-  const environment = environmentQuery.data;
+  const { environment } = useRowContext();
 
   let shortName = name;
   if (truncate > 0) {
     shortName = _.truncate(name, { length: truncate });
   }
 
-  if (!environment || isOfflineEndpoint(environment)) {
+  if (isOfflineEndpoint(environment)) {
     return <span>{shortName}</span>;
   }
 

app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx

@@ -2,7 +2,8 @@ import { Column } from 'react-table';
 import _ from 'lodash';
 
 import type { DockerContainer, Port } from '@/react/docker/containers/types';
-import { useCurrentEnvironment } from '@/portainer/hooks/useCurrentEnvironment';
+
+import { useRowContext } from '../RowContext';
 
 export const ports: Column<DockerContainer> = {
   Header: 'Published Ports',
@@ -20,10 +21,9 @@ interface Props {
 }
 
 function PortsCell({ value: ports }: Props) {
-  const environmentQuery = useCurrentEnvironment();
+  const { environment } = useRowContext();
 
-  const environment = environmentQuery.data;
-  if (!environment || ports.length === 0) {
+  if (ports.length === 0) {
     return '-';
   }