logs

src/features/machines/components/Machine.js

@@ -20,7 +20,7 @@ const useRowStyles = makeStyles({
   }
 });
 
-const MachineItem = ({ machine, actions }) => {
+const Machine = ({ machine, actions, logs }) => {
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
   const { t } = useTranslation();
@@ -67,7 +67,7 @@ const MachineItem = ({ machine, actions }) => {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <MachineLog />
+            <MachineLog logs={logs} />
           </Collapse>
         </TableCell>
       </TableRow>
@@ -75,7 +75,7 @@ const MachineItem = ({ machine, actions }) => {
   );
 };
 
-MachineItem.propTypes = {
+Machine.propTypes = {
   machine: PropTypes.shape({
     machineId: PropTypes.number.isRequired,
     machineName: PropTypes.string.isRequired,
@@ -84,7 +84,8 @@ MachineItem.propTypes = {
     iPv4Address: PropTypes.string,
     description: PropTypes.string
   }).isRequired,
-  actions: PropTypes.array.isRequired
+  actions: PropTypes.array.isRequired,
+  logs: PropTypes.array.isRequired
 };
 
-export default MachineItem;
+export default Machine;

src/features/machines/components/MachineContainer.js

@@ -1,15 +1,21 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import MachineItem from "./MachineItem";
+import Machine from "./Machine";
 import * as api from "../api";
 import { useToast } from "../../../hooks";
 import { PowerSettingsNew, LastPage } from "@material-ui/icons";
 
 const MachineContainer = ({ machine }) => {
+  const [logs, setLogs] = useState([]);
   const { success, error } = useToast();
 
+  const addLog = text => {
+    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 {
@@ -21,6 +27,7 @@ const MachineContainer = ({ machine }) => {
     const result = await api.pingMachine(
       machine.iPv4Address || machine.machineName
     );
+    addLog(`Success: ${result.success}. Status: ${result.status}`);
     if (result.success) {
       success(result.status);
     } else {
@@ -43,7 +50,7 @@ const MachineContainer = ({ machine }) => {
     }
   ];
 
-  return <MachineItem machine={machine} actions={actions} />;
+  return <Machine machine={machine} actions={actions} logs={logs} />;
 };
 
 MachineContainer.propTypes = {

src/features/machines/components/MachineLog.js

@@ -1,22 +1,13 @@
-import React, { useState } from "react";
+import React, { useMemo } from "react";
-import { Box, Button } from "@material-ui/core";
+import PropTypes from "prop-types";
+import { Box } from "@material-ui/core";
 import { LazyLog, ScrollFollow } from "react-lazylog";
 
-const MachineLog = () => {
+const MachineLog = ({ logs }) => {
-  const [logs, setLogs] = useState(["Welcome..."]);
+  const displayLogs = useMemo(
-  const addLog = text => {
+    () => (logs.length > 0 ? logs.join("\n") : "..."),
-    setLogs(prev => [...prev, text]);
+    [logs]
-  };
-
-  const randomLog = () => {
-    addLog(
-      "Text messaging, or texting, is the act of composing and sending electronic messages"
   );
-    addLog(
-      "The term originally referred to messages sent using the Short Message Service (SMS). "
-    );
-  };
-
   return (
     <Box margin={1}>
       <div style={{ height: 200 }}>
@@ -24,9 +15,9 @@ const MachineLog = () => {
           startFollowing={true}
           render={({ follow, onScroll }) => (
             <LazyLog
-              extraLines={1}
+              extraLines={0}
               enableSearch
-              text={logs.join("\n")}
+              text={displayLogs}
               caseInsensitive
               follow={follow}
               onScroll={onScroll}
@@ -34,11 +25,12 @@ const MachineLog = () => {
           )}
         />
       </div>
-      <Button variant="contained" color="primary" onClick={randomLog}>
-        Add
-      </Button>
     </Box>
   );
 };
 
+MachineLog.propTypes = {
+  logs: PropTypes.array.isRequired
+};
+
 export default MachineLog;