master
Tudor Stanciu 2021-04-17 03:05:52 +03:00
parent c1caa61862
commit 964ceb9372
4 changed files with 46 additions and 44 deletions

View File

@ -7,12 +7,7 @@ import {
Collapse,
Tooltip
} from "@material-ui/core";
import {
KeyboardArrowDown,
KeyboardArrowUp,
PowerSettingsNew,
LastPage
} from "@material-ui/icons";
import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles";
import MachineLog from "./MachineLog";
import { useTranslation } from "react-i18next";
@ -25,15 +20,11 @@ const useRowStyles = makeStyles({
}
});
const MachineItem = ({ machine }) => {
const MachineItem = ({ machine, actions }) => {
const [open, setOpen] = React.useState(false);
const classes = useRowStyles();
const { t } = useTranslation();
const handleClick = event => {
alert("asdasd");
};
return (
<React.Fragment>
<TableRow className={classes.root}>
@ -53,30 +44,20 @@ const MachineItem = ({ machine }) => {
<TableCell>{machine.iPv4Address}</TableCell>
<TableCell align="right">
<>
<Tooltip title={t("General.Actions")}>
<span>
<IconButton
id={`machine-item-${machine.machineId}-wake`}
size={"small"}
disabled={false}
onClick={handleClick}
>
<PowerSettingsNew />
</IconButton>
</span>
</Tooltip>
<Tooltip title={t("General.Actions")}>
<span>
<IconButton
id={`machine-item-${machine.machineId}-ping`}
size={"small"}
disabled={false}
onClick={handleClick}
>
<LastPage />
</IconButton>
</span>
</Tooltip>
{actions.map(action => (
<Tooltip title={t(action.tooltip)}>
<span>
<IconButton
id={`machine-item-${machine.machineId}-${action.code}`}
size={"small"}
disabled={false}
onClick={action.effect(machine)}
>
<action.icon />
</IconButton>
</span>
</Tooltip>
))}
</>
</TableCell>
</TableRow>
@ -99,7 +80,8 @@ MachineItem.propTypes = {
macAddress: PropTypes.string.isRequired,
iPv4Address: PropTypes.string,
description: PropTypes.string
}).isRequired
}).isRequired,
actions: PropTypes.array.isRequired
};
export default MachineItem;

View File

@ -1,5 +1,4 @@
import React from "react";
import PropTypes from "prop-types";
import {
Table,
TableBody,

View File

@ -5,28 +5,47 @@ import {
} from "../../../state/ApplicationContexts";
import { readMachines } from "../api";
import MachinesList from "./MachinesList";
import { PowerSettingsNew, LastPage } from "@material-ui/icons";
const MachinesContainer = () => {
const state = useContext(ApplicationStateContext);
const dispatchActions = useContext(ApplicationDispatchContext);
const handleChange = prop => event => {
dispatchActions.onNetworkChange(prop, event.target.value);
};
const handleReadMachines = useCallback(async () => {
const machines = await readMachines();
const data = Object.assign(machines, { loaded: true });
dispatchActions.onNetworkChange("machines", data);
}, [dispatchActions]);
const onClick = machine => () => alert(machine);
const actions = [
{
code: "wake",
effect: onClick,
icon: PowerSettingsNew,
tooltip: "Wake"
},
{
code: "ping",
effect: onClick,
icon: LastPage,
tooltip: "Ping"
}
];
useEffect(() => {
if (!state.network.machines.loaded) {
handleReadMachines();
}
}, [handleReadMachines, state.network.machines.loaded]);
return <MachinesList dense={true} machines={state.network.machines} />;
return (
<MachinesList
dense={true}
machines={state.network.machines}
actions={actions}
/>
);
};
export default MachinesContainer;

View File

@ -11,7 +11,7 @@ import {
import Paper from "@material-ui/core/Paper";
import MachineItem from "./MachineItem";
const MachinesList = ({ dense, machines }) => {
const MachinesList = ({ dense, machines, actions }) => {
return (
<TableContainer component={Paper}>
<Table aria-label="collapsible table" size={dense ? "small" : "medium"}>
@ -29,6 +29,7 @@ const MachinesList = ({ dense, machines }) => {
<MachineItem
key={`machine-${machine.machineId}`}
machine={machine}
actions={actions}
/>
))}
</TableBody>
@ -39,7 +40,8 @@ const MachinesList = ({ dense, machines }) => {
MachinesList.propTypes = {
dense: PropTypes.bool.isRequired,
machines: PropTypes.array.isRequired
machines: PropTypes.array.isRequired,
actions: PropTypes.array.isRequired
};
export default MachinesList;