master
Tudor Stanciu 2021-04-17 18:45:56 +03:00
parent 385f3522ad
commit 1ed2ff01ee
3 changed files with 29 additions and 29 deletions

View File

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

View File

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

View File

@ -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"; 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 ( return (
<Box margin={1}> <Box margin={1}>
<div style={{ height: 200 }}> <div style={{ height: 200 }}>
@ -24,9 +15,9 @@ const MachineLog = () => {
startFollowing={true} startFollowing={true}
render={({ follow, onScroll }) => ( render={({ follow, onScroll }) => (
<LazyLog <LazyLog
extraLines={1} extraLines={0}
enableSearch enableSearch
text={logs.join("\n")} text={displayLogs}
caseInsensitive caseInsensitive
follow={follow} follow={follow}
onScroll={onScroll} onScroll={onScroll}
@ -34,11 +25,12 @@ const MachineLog = () => {
)} )}
/> />
</div> </div>
<Button variant="contained" color="primary" onClick={randomLog}>
Add
</Button>
</Box> </Box>
); );
}; };
MachineLog.propTypes = {
logs: PropTypes.array.isRequired
};
export default MachineLog; export default MachineLog;