From 1ea555f572b2a5806e5d3c5f54ab766e18524b88 Mon Sep 17 00:00:00 2001
From: Valentin Dewilde <valentin.dewilde@hotmail.be>
Date: Wed, 30 Aug 2023 20:45:27 +0200
Subject: [PATCH] UI: Move pagination to top of active scripts, improve
 filtering (#494)

---
 .../ActiveScripts/ServerAccordionContent.tsx  | 10 ++++----
 src/ui/ActiveScripts/ServerAccordions.tsx     | 25 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/ui/ActiveScripts/ServerAccordionContent.tsx b/src/ui/ActiveScripts/ServerAccordionContent.tsx
index 313ec3402..fc1508dcc 100644
--- a/src/ui/ActiveScripts/ServerAccordionContent.tsx
+++ b/src/ui/ActiveScripts/ServerAccordionContent.tsx
@@ -25,11 +25,6 @@ export function ServerAccordionContent(props: IProps): React.ReactElement {
 
   return (
     <>
-      <List dense disablePadding>
-        {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
-          <WorkerScriptAccordion key={`${ws.pid}`} workerScript={ws} />
-        ))}
-      </List>
       <TablePagination
         rowsPerPageOptions={[10, 15, 20, 100]}
         component="div"
@@ -40,6 +35,11 @@ export function ServerAccordionContent(props: IProps): React.ReactElement {
         onRowsPerPageChange={handleChangeRowsPerPage}
         ActionsComponent={TablePaginationActionsAll}
       />
+      <List dense disablePadding>
+        {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
+          <WorkerScriptAccordion key={`${ws.pid}`} workerScript={ws} />
+        ))}
+      </List>
     </>
   );
 }
diff --git a/src/ui/ActiveScripts/ServerAccordions.tsx b/src/ui/ActiveScripts/ServerAccordions.tsx
index 4d9e669c5..25f030c6d 100644
--- a/src/ui/ActiveScripts/ServerAccordions.tsx
+++ b/src/ui/ActiveScripts/ServerAccordions.tsx
@@ -67,7 +67,12 @@ export function ServerAccordions(props: IProps): React.ReactElement {
       };
       data = serverToScriptMap[server.hostname];
     }
-    if (data !== undefined) data.workerScripts.push(ws);
+    if (data !== undefined) {
+      // Add only scripts that correspond to the filter
+      if (ws.hostname.includes(filter) || ws.name.includes(filter)) {
+        data.workerScripts.push(ws);
+      }
+    }
   }
 
   // Match filter in the scriptname part of the key
@@ -92,15 +97,6 @@ export function ServerAccordions(props: IProps): React.ReactElement {
           spellCheck: false,
         }}
       />
-      <List dense={true}>
-        {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
-          return (
-            data && (
-              <ServerAccordion key={data.server.hostname} server={data.server} workerScripts={data.workerScripts} />
-            )
-          );
-        })}
-      </List>
       <TablePagination
         rowsPerPageOptions={[10, 15, 20, 100]}
         component="div"
@@ -111,6 +107,15 @@ export function ServerAccordions(props: IProps): React.ReactElement {
         onRowsPerPageChange={handleChangeRowsPerPage}
         ActionsComponent={TablePaginationActionsAll}
       />
+      <List dense={true}>
+        {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
+          return (
+            data && (
+              <ServerAccordion key={data.server.hostname} server={data.server} workerScripts={data.workerScripts} />
+            )
+          );
+        })}
+      </List>
     </>
   );
 }