wake component

src/features/machines/components/Machine.js

@@ -10,6 +10,7 @@ import {
 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: {
@@ -19,7 +20,7 @@ const useRowStyles = makeStyles({
   }
 });
 
-const Machine = ({ machine, actions, logs }) => {
+const Machine = ({ machine, actions, logs, addLog }) => {
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
 
@@ -42,7 +43,7 @@ const Machine = ({ machine, actions, logs }) => {
         <TableCell>{machine.iPv4Address}</TableCell>
         <TableCell>{machine.macAddress}</TableCell>
         <TableCell align="right">
-          <>
+          <WakeComponent machine={machine} addLog={addLog} />
           {actions.map(action => (
             <Tooltip
               title={action.tooltip}
@@ -60,7 +61,6 @@ const Machine = ({ machine, actions, logs }) => {
               </span>
             </Tooltip>
           ))}
-          </>
         </TableCell>
       </TableRow>
       <TableRow>
@@ -84,7 +84,8 @@ Machine.propTypes = {
     description: PropTypes.string
   }).isRequired,
   actions: PropTypes.array.isRequired,
-  logs: PropTypes.array.isRequired
+  logs: PropTypes.array.isRequired,
+  addLog: PropTypes.func.isRequired
 };
 
 export default Machine;

src/features/machines/components/MachineContainer.js

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import Machine from "./Machine";
 import * as api from "../api";
 import { useToast } from "../../../hooks";
-import { PowerSettingsNew, LastPage } from "@material-ui/icons";
+import { LastPage } from "@material-ui/icons";
 import { useTranslation } from "react-i18next";
 
 const MachineContainer = ({ machine }) => {
@@ -15,17 +15,8 @@ const MachineContainer = ({ machine }) => {
     setLogs(prev => [...prev, text]);
   };
 
-  const wakeMachine = machine => async () => {
-    const result = await api.wakeMachine(machine.macAddress);
-    addLog(`Success: ${result.success}. Status: ${result.status}`);
-    if (result.success) {
-      success(result.status);
-    } else {
-      error(result.status);
-    }
-  };
-
-  const pingMachine = machine => async () => {
+  const pingMachine = useCallback(
+    machine => async () => {
       const result = await api.pingMachine(
         machine.iPv4Address || machine.machineName
       );
@@ -35,15 +26,11 @@ const MachineContainer = ({ machine }) => {
       } else {
         error(result.status);
       }
-  };
+    },
+    [error, success]
+  );
 
   const actions = [
-    {
-      code: "wake",
-      effect: wakeMachine,
-      icon: PowerSettingsNew,
-      tooltip: t("Machine.Actions.Wake")
-    },
     {
       code: "ping",
       effect: pingMachine,
@@ -52,7 +39,9 @@ const MachineContainer = ({ machine }) => {
     }
   ];
 
-  return <Machine machine={machine} actions={actions} logs={logs} />;
+  return (
+    <Machine machine={machine} actions={actions} logs={logs} addLog={addLog} />
+  );
 };
 
 MachineContainer.propTypes = {

src/features/machines/components/WakeComponent.js

@@ -0,0 +1,48 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { IconButton, Tooltip } from "@material-ui/core";
+import { PowerSettingsNew } from "@material-ui/icons";
+import { useTranslation } from "react-i18next";
+import { useToast } from "../../../hooks";
+import * as api from "../api";
+
+const WakeComponent = ({ machine, addLog }) => {
+  const { t } = useTranslation();
+  const { success, error } = useToast();
+
+  const wakeMachine = machine => async () => {
+    const result = await api.wakeMachine(machine.macAddress);
+    addLog(`Success: ${result.success}. Status: ${result.status}`);
+    if (result.success) {
+      success(result.status);
+    } else {
+      error(result.status);
+    }
+  };
+
+  const handleClick = () => {
+    alert("AAA");
+  };
+
+  return (
+    <Tooltip title={t("Machine.Actions.Wake")}>
+      <span>
+        <IconButton
+          id={`machine-${machine.machineId}-wake`}
+          size={"small"}
+          disabled={false}
+          onClick={handleClick}
+        >
+          <PowerSettingsNew />
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+};
+
+WakeComponent.propTypes = {
+  machine: PropTypes.object.isRequired,
+  addLog: PropTypes.func.isRequired
+};
+
+export default WakeComponent;

src/features/network/components/NetworkContainer.js

@@ -1,6 +1,6 @@
 import React from "react";
 import MachinesContainer from "../../machines/components/MachinesContainer";
-import NotesContainer from "../../notes/components/NotesContainer";
+//import NotesContainer from "../../notes/components/NotesContainer";
 import { makeStyles } from "@material-ui/core/styles";
 import styles from "../styles";