diff --git a/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html b/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html
index 673304d60..ec30896d7 100644
--- a/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html
+++ b/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatable.html
@@ -56,8 +56,8 @@
ng-class="{ active: item.Checked }"
>
{{ item.Name }} |
- {{ $ctrl.statusMap[item.Status.Type] || 'Pending' }} |
- {{ item.Status.Error ? item.Status.Error : '-' }} |
+ {{ $ctrl.endpointStatusLabel(item.Id) }} |
+ {{ $ctrl.endpointStatusError(item.Id) }} |
Loading... |
diff --git a/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatableController.js b/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatableController.js
index f71f6d330..2e6de3c97 100644
--- a/app/edge/components/edge-stack-endpoints-datatable/edgeStackEndpointsDatatableController.js
+++ b/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();
diff --git a/app/edge/components/edge-stack-endpoints-datatable/index.js b/app/edge/components/edge-stack-endpoints-datatable/index.js
index a0dbac847..831119f7e 100644
--- a/app/edge/components/edge-stack-endpoints-datatable/index.js
+++ b/app/edge/components/edge-stack-endpoints-datatable/index.js
@@ -12,5 +12,7 @@ angular.module('portainer.edge').component('edgeStackEndpointsDatatable', {
orderBy: '@',
reverseOrder: '<',
retrievePage: '<',
+ edgeStackId: '<',
+ endpointsStatus: '<',
},
});
diff --git a/app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html b/app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html
index e84ad3187..ba5e05ebf 100644
--- a/app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackView.html
+++ b/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"
>
diff --git a/app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackViewController.js b/app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackViewController.js
index 6b37d69d8..0b5bef7da 100644
--- a/app/edge/views/edge-stacks/editEdgeStackView/editEdgeStackViewController.js
+++ b/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');
}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx
index ecb6214d4..8d872e364 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx
+++ b/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 = {
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 {shortImageName};
}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx
index 9afc93faa..6024c154b 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx
+++ b/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 = {
Header: 'Name',
@@ -35,16 +35,15 @@ export function NameCell({
const { settings } = useTableSettings();
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 {shortName};
}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
index 7c1d3f3a6..7cc89a553 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
+++ b/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 = {
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 '-';
}