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,25 +43,24 @@ const Machine = ({ machine, actions, logs }) => {
         <TableCell>{machine.iPv4Address}</TableCell>
         <TableCell>{machine.macAddress}</TableCell>
         <TableCell align="right">
-          <>
-            {actions.map(action => (
-              <Tooltip
-                title={action.tooltip}
-                key={`machine-item-${machine.machineId}-${action.code}-tooltip`}
-              >
-                <span>
-                  <IconButton
-                    id={`machine-item-${machine.machineId}-${action.code}`}
-                    size={"small"}
-                    disabled={false}
-                    onClick={action.effect(machine)}
-                  >
-                    <action.icon />
-                  </IconButton>
-                </span>
-              </Tooltip>
-            ))}
-          </>
+          <WakeComponent machine={machine} addLog={addLog} />
+          {actions.map(action => (
+            <Tooltip
+              title={action.tooltip}
+              key={`machine-item-${machine.machineId}-${action.code}-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>
       <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,35 +15,22 @@ 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 result = await api.pingMachine(
-      machine.iPv4Address || machine.machineName
-    );
-    addLog(`Success: ${result.success}. Status: ${result.status}`);
-    if (result.success) {
-      success(result.status);
-    } else {
-      error(result.status);
-    }
-  };
+  const pingMachine = useCallback(
+    machine => async () => {
+      const result = await api.pingMachine(
+        machine.iPv4Address || machine.machineName
+      );
+      addLog(`Success: ${result.success}. Status: ${result.status}`);
+      if (result.success) {
+        success(result.status);
+      } 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";