Added tree-like hierarchy to active scripts

This commit is contained in:
Olivier Gagnon 2021-09-18 00:31:14 -04:00
parent d1cb5b313a
commit 6f20b0bc30
4 changed files with 16 additions and 10 deletions

@ -10,6 +10,7 @@ import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText"; import ListItemText from "@mui/material/ListItemText";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Collapse from "@mui/material/Collapse"; import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore"; import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess"; import ExpandLess from "@mui/icons-material/ExpandLess";
@ -43,14 +44,16 @@ export function ServerAccordion(props: IProps): React.ReactElement {
const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`; const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`;
return ( return (
<> <Box component={Paper}>
<ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}> <ListItemButton onClick={() => setOpen((old) => !old)}>
<ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{headerTxt}</Typography>} /> <ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{headerTxt}</Typography>} />
{open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />} {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
</ListItemButton> </ListItemButton>
<Collapse in={open} timeout={0} unmountOnExit> <Box mx={2}>
<ServerAccordionContent workerScripts={props.workerScripts} /> <Collapse in={open} timeout={0} unmountOnExit>
</Collapse> <ServerAccordionContent workerScripts={props.workerScripts} />
</> </Collapse>
</Box>
</Box>
); );
} }

@ -27,7 +27,7 @@ export function ServerAccordionContent(props: IProps): React.ReactElement {
return ( return (
<> <>
<List> <List dense disablePadding>
{props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => ( {props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
<WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} /> <WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />
))} ))}

@ -9,6 +9,7 @@ import { ServerAccordion } from "./ServerAccordion";
import TextField from "@mui/material/TextField"; import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import List from "@mui/material/List"; import List from "@mui/material/List";
import TablePagination from "@mui/material/TablePagination"; import TablePagination from "@mui/material/TablePagination";
import { WorkerScript } from "../../Netscript/WorkerScript"; import { WorkerScript } from "../../Netscript/WorkerScript";
@ -103,7 +104,7 @@ export function ServerAccordions(props: IProps): React.ReactElement {
spellCheck: false, spellCheck: false,
}} }}
/> />
<List> <List dense={true}>
{filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => { {filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
return ( return (
data && ( data && (

@ -59,11 +59,13 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
return ( return (
<> <>
<ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}> <ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
<ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{props.workerScript.name}</Typography>} /> <ListItemText
primary={<Typography style={{ whiteSpace: "pre-wrap" }}> {props.workerScript.name}</Typography>}
/>
{open ? <ExpandLess /> : <ExpandMore />} {open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton> </ListItemButton>
<Collapse in={open} timeout={0} unmountOnExit> <Collapse in={open} timeout={0} unmountOnExit>
<Box m={3}> <Box mx={4}>
<pre>Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}</pre> <pre>Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}</pre>
<pre>Args: {arrayToString(props.workerScript.args)}</pre> <pre>Args: {arrayToString(props.workerScript.args)}</pre>
<pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre> <pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>