147 lines
3.9 KiB
JavaScript
147 lines
3.9 KiB
JavaScript
import React, { useMemo } from "react";
|
|
import PropTypes from "prop-types";
|
|
import {
|
|
TableCell,
|
|
TableRow,
|
|
IconButton,
|
|
Collapse,
|
|
Tooltip,
|
|
Menu
|
|
} from "@material-ui/core";
|
|
import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import MachineLog from "./MachineLog";
|
|
import WakeComponent from "./WakeComponent";
|
|
|
|
const useRowStyles = makeStyles({
|
|
root: {
|
|
"& > *": {
|
|
borderBottom: "unset"
|
|
}
|
|
}
|
|
});
|
|
|
|
const ActionButton = React.forwardRef((props, _ref) => {
|
|
const { action, machine } = props;
|
|
return (
|
|
<Tooltip
|
|
id={`machine-item-${machine.machineId}-${action.code}-tooltip`}
|
|
title={action.tooltip}
|
|
>
|
|
<span>
|
|
<IconButton
|
|
id={`machine-item-${machine.machineId}-${action.code}`}
|
|
size={"small"}
|
|
onClick={action.system ? action.effect : action.effect(machine)}
|
|
>
|
|
<action.icon />
|
|
</IconButton>
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
});
|
|
|
|
ActionButton.propTypes = {
|
|
machine: PropTypes.shape({
|
|
machineId: PropTypes.number.isRequired
|
|
}).isRequired,
|
|
action: PropTypes.shape({
|
|
code: PropTypes.string.isRequired,
|
|
tooltip: PropTypes.string.isRequired,
|
|
system: PropTypes.bool,
|
|
effect: PropTypes.func.isRequired
|
|
}).isRequired
|
|
};
|
|
|
|
const Machine = ({
|
|
machine,
|
|
actions,
|
|
logs,
|
|
addLog,
|
|
secondaryActionsMenuProps
|
|
}) => {
|
|
const [open, setOpen] = React.useState(false);
|
|
const classes = useRowStyles();
|
|
|
|
const topActions = useMemo(
|
|
() => actions.filter(a => a.top === true),
|
|
[actions]
|
|
);
|
|
|
|
const secondaryActions = useMemo(
|
|
() => actions.filter(a => a.top === false),
|
|
[actions]
|
|
);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<TableRow className={classes.root}>
|
|
<TableCell>
|
|
<IconButton
|
|
aria-label="expand row"
|
|
size="small"
|
|
onClick={() => setOpen(!open)}
|
|
>
|
|
{open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
|
|
</IconButton>
|
|
</TableCell>
|
|
<TableCell component="th" scope="row">
|
|
{machine.fullMachineName}
|
|
</TableCell>
|
|
<TableCell>{machine.machineName}</TableCell>
|
|
<TableCell>{machine.iPv4Address}</TableCell>
|
|
<TableCell>{machine.macAddress}</TableCell>
|
|
<TableCell align="right">
|
|
<WakeComponent machine={machine} addLog={addLog} />
|
|
{topActions.map(action => (
|
|
<ActionButton
|
|
key={`machine-item-${machine.machineId}-${action.code}`}
|
|
action={action}
|
|
machine={machine}
|
|
/>
|
|
))}
|
|
<Menu
|
|
id="secondary-actions-menu"
|
|
anchorEl={secondaryActionsMenuProps.anchor}
|
|
keepMounted
|
|
open={Boolean(secondaryActionsMenuProps.anchor)}
|
|
onClose={secondaryActionsMenuProps.onCloseSecondaryActions}
|
|
>
|
|
{secondaryActions.map(action => (
|
|
<ActionButton
|
|
key={`machine-item-${machine.machineId}-${action.code}`}
|
|
action={action}
|
|
machine={machine}
|
|
/>
|
|
))}
|
|
</Menu>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
|
|
<Collapse in={open} timeout="auto" unmountOnExit>
|
|
<MachineLog logs={logs} />
|
|
</Collapse>
|
|
</TableCell>
|
|
</TableRow>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
Machine.propTypes = {
|
|
machine: PropTypes.shape({
|
|
machineId: PropTypes.number.isRequired,
|
|
machineName: PropTypes.string.isRequired,
|
|
fullMachineName: PropTypes.string.isRequired,
|
|
macAddress: PropTypes.string.isRequired,
|
|
iPv4Address: PropTypes.string,
|
|
description: PropTypes.string
|
|
}).isRequired,
|
|
actions: PropTypes.array.isRequired,
|
|
logs: PropTypes.array.isRequired,
|
|
addLog: PropTypes.func.isRequired,
|
|
secondaryActionsMenuProps: PropTypes.object.isRequired
|
|
};
|
|
|
|
export default Machine;
|