From f59dd341541900e9788fad71aa358a546ce867dc Mon Sep 17 00:00:00 2001
From: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Date: Wed, 28 Aug 2024 18:28:38 +1200
Subject: [PATCH] fix(swarm/service): list task when filtering service
 [BE-11029] (#12146)

---
 .../ServicesDatatable/ServicesDatatable.tsx   | 40 ++++++++++++-------
 .../ServicesDatatable/columns/ports.tsx       |  1 +
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx b/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
index dfecb90eb..8a756783d 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/ServicesDatatable.tsx
@@ -1,5 +1,6 @@
 import { Shuffle } from 'lucide-react';
 import { Row } from '@tanstack/react-table';
+import { useRef } from 'react';
 
 import { ServiceViewModel } from '@/docker/models/service';
 import { useApiVersion } from '@/react/docker/proxy/queries/useVersion';
@@ -55,6 +56,8 @@ export function ServicesDatatable({
   isStackColumnVisible?: boolean;
   onRefresh?(): void;
 }) {
+  // useRef so that updating the parent filter doesn't cause a re-render
+  const parentFilteredStatusRef = useRef<Map<string, boolean>>(new Map());
   const environmentId = useEnvironmentId();
   const apiVersion = useApiVersion(environmentId);
   const tableState = useTableState(store, tableKey);
@@ -76,7 +79,11 @@ export function ServicesDatatable({
           <td colSpan={Number.MAX_SAFE_INTEGER}>
             <TasksDatatable
               dataset={item.Tasks as Array<DecoratedTask>}
-              search={tableState.search}
+              search={
+                parentFilteredStatusRef.current.get(item.Id)
+                  ? ''
+                  : tableState.search
+              }
             />
           </td>
         </tr>
@@ -111,19 +118,24 @@ export function ServicesDatatable({
       data-cy="services-datatable"
     />
   );
-}
 
-function filter(
-  row: Row<ServiceViewModel>,
-  columnId: string,
-  filterValue: null | { search: string }
-) {
-  return (
-    defaultGlobalFilterFn(row, columnId, filterValue) ||
-    row.original.Tasks.some((task) =>
-      Object.values(task).some(
-        (value) => value && value.toString().includes(filterValue?.search || '')
+  function filter(
+    row: Row<ServiceViewModel>,
+    columnId: string,
+    filterValue: null | { search: string }
+  ) {
+    parentFilteredStatusRef.current = parentFilteredStatusRef.current.set(
+      row.id,
+      defaultGlobalFilterFn(row, columnId, filterValue)
+    );
+    return (
+      parentFilteredStatusRef.current.get(row.id) ||
+      row.original.Tasks.some((task) =>
+        Object.values(task).some(
+          (value) =>
+            value && value.toString().includes(filterValue?.search || '')
+        )
       )
-    )
-  );
+    );
+  }
 }
diff --git a/app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx b/app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx
index 399433572..691b0dffd 100644
--- a/app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx
+++ b/app/react/docker/services/ListView/ServicesDatatable/columns/ports.tsx
@@ -38,6 +38,7 @@ function Cell({
     .filter((port) => port.PublishedPort)
     .map((port) => (
       <PublishedPortLink
+        key={port.PublishedPort}
         hostPort={port.PublishedPort}
         containerPort={port.TargetPort}
         hostURL={environmentQuery.data.PublicURL}