actions
parent
c1caa61862
commit
964ceb9372
|
@ -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;
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue