UI: Move pagination to top of active scripts, improve filtering (#494)

This commit is contained in:
Valentin Dewilde 2023-08-30 20:45:27 +02:00 committed by GitHub
parent bc7482b0a2
commit 1ea555f572
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 15 deletions

@ -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>
</>
);
}

@ -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>
</>
);
}