diff --git a/src/features/network/components/MachineItem.js b/src/features/network/components/MachineItem.js
new file mode 100644
index 0000000..1f6e94b
--- /dev/null
+++ b/src/features/network/components/MachineItem.js
@@ -0,0 +1,63 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TableCell, TableRow, IconButton } from "@material-ui/core";
+import Collapse from "@material-ui/core/Collapse";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+import { makeStyles } from "@material-ui/core/styles";
+import MachineLog from "./MachineLog";
+
+const useRowStyles = makeStyles({
+ root: {
+ "& > *": {
+ borderBottom: "unset"
+ }
+ }
+});
+
+const MachineItem = ({ machine }) => {
+ const [open, setOpen] = React.useState(false);
+ const classes = useRowStyles();
+
+ return (
+
+
+
+ setOpen(!open)}
+ >
+ {open ? : }
+
+
+
+ {machine.fullMachineName}
+
+ {machine.machineName}
+ {machine.iPv4Address}
+ {"buttons"}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+MachineItem.propTypes = {
+ machine: PropTypes.shape({
+ machineId: PropTypes.number.isRequired,
+ machineName: PropTypes.string.isRequired,
+ fullMachineName: PropTypes.string.isRequired,
+ macAddress: PropTypes.string.isRequired,
+ iPv4Address: PropTypes.string,
+ description: PropTypes.string
+ }).isRequired
+};
+
+export default MachineItem;
diff --git a/src/features/network/components/MachineLog.js b/src/features/network/components/MachineLog.js
new file mode 100644
index 0000000..6303931
--- /dev/null
+++ b/src/features/network/components/MachineLog.js
@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Typography
+} from "@material-ui/core";
+import Box from "@material-ui/core/Box";
+
+const MachineLog = () => {
+ const history = [
+ { date: "2020-01-05", customerId: "11091700", amount: 3 },
+ { date: "2020-01-02", customerId: "Anonymous", amount: 1 }
+ ];
+ return (
+
+
+ History
+
+
+
+
+ Date
+ Customer
+ Amount
+ Total price ($)
+
+
+
+ {history.map(historyRow => (
+
+
+ {historyRow.date}
+
+ {historyRow.customerId}
+ {historyRow.amount}
+
+ {Math.round(historyRow.amount * 5 * 100) / 100}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default MachineLog;
diff --git a/src/features/network/components/MachinesList.js b/src/features/network/components/MachinesList.js
index fb54574..c4af8a2 100644
--- a/src/features/network/components/MachinesList.js
+++ b/src/features/network/components/MachinesList.js
@@ -1,46 +1,44 @@
import React from "react";
import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-import Accordion from "@material-ui/core/Accordion";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import Typography from "@material-ui/core/Typography";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-
-const useStyles = makeStyles(theme => ({
- heading: {
- fontSize: theme.typography.pxToRem(15),
- fontWeight: theme.typography.fontWeightRegular
- }
-}));
-
-const MachinesList = ({ machines }) => {
- const classes = useStyles();
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow
+} from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import MachineItem from "./MachineItem";
+const MachinesList = ({ dense, machines }) => {
return (
-
- {machines.map(m => (
-
- }
- id={`machine-${m.machineId}-summary`}
- >
- {m.machineName}
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
- eget.
-
-
-
- ))}
-
+
+
+
+ Full machine name
+ Machine name
+ IP
+ Actions
+
+
+
+ {machines.map(machine => (
+
+ ))}
+
+
+
);
};
MachinesList.propTypes = {
+ dense: PropTypes.bool.isRequired,
machines: PropTypes.array.isRequired
};
diff --git a/src/features/network/components/NetworkComponent.js b/src/features/network/components/NetworkComponent.js
index c7c00c9..dcdbdc1 100644
--- a/src/features/network/components/NetworkComponent.js
+++ b/src/features/network/components/NetworkComponent.js
@@ -12,7 +12,7 @@ const NetworkComponent = ({ network, onPropertyChange }) => {
return (
-
+
{
};
const handleReadMachines = useCallback(async () => {
- alert("rad");
const machines = await readMachines();
- dispatchActions.onNetworkChange("machines", machines);
+ const data = Object.assign(machines, { loaded: true });
+ dispatchActions.onNetworkChange("machines", data);
}, [dispatchActions]);
useEffect(() => {
- handleReadMachines();
- }, [handleReadMachines]);
+ if (!state.network.machines.loaded) {
+ handleReadMachines();
+ }
+ }, [handleReadMachines, state.network.machines.loaded]);
return (
diff --git a/src/state/initialState.js b/src/state/initialState.js
index f0c99f2..2fca86b 100644
--- a/src/state/initialState.js
+++ b/src/state/initialState.js
@@ -15,7 +15,7 @@ export const initialState = {
}
},
network: {
- machines: [],
+ machines: Object.assign([], { loaded: false }),
test: ""
}
};