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 '-'; }