actions

src/features/machines/components/MachineItem.js

@@ -7,12 +7,7 @@ import {
   Collapse,
   Tooltip
 } from "@material-ui/core";
-import {
+import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
-  KeyboardArrowDown,
-  KeyboardArrowUp,
-  PowerSettingsNew,
-  LastPage
-} 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")}>
+            {actions.map(action => (
-              <span>
+              <Tooltip title={t(action.tooltip)}>
-                <IconButton
+                <span>
-                  id={`machine-item-${machine.machineId}-wake`}
+                  <IconButton
-                  size={"small"}
+                    id={`machine-item-${machine.machineId}-${action.code}`}
-                  disabled={false}
+                    size={"small"}
-                  onClick={handleClick}
+                    disabled={false}
-                >
+                    onClick={action.effect(machine)}
-                  <PowerSettingsNew />
+                  >
-                </IconButton>
+                    <action.icon />
-              </span>
+                  </IconButton>
-            </Tooltip>
+                </span>
-            <Tooltip title={t("General.Actions")}>
+              </Tooltip>
-              <span>
+            ))}
-                <IconButton
-                  id={`machine-item-${machine.machineId}-ping`}
-                  size={"small"}
-                  disabled={false}
-                  onClick={handleClick}
-                >
-                  <LastPage />
-                </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;

src/features/machines/components/MachineLog.js

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

src/features/machines/components/MachinesContainer.js

@@ -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;

src/features/machines/components/MachinesList.js

@@ -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;