machines view modes update

src/features/machines/components/MachineAccordion.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Typography from "@material-ui/core/Typography";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import withStyles from "@material-ui/core/styles/withStyles";
+
+const IconLeftAccordionSummary = withStyles({
+  expandIcon: {
+    order: -1
+  }
+})(AccordionSummary);
+
+const MachineAccordion = ({ machine }) => {
+  return (
+    <Accordion>
+      <IconLeftAccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-label="Expand"
+        aria-controls="additional-actions1-content"
+        id="additional-actions1-header"
+        IconButtonProps={{ edge: "start" }}
+      >
+        <FormControlLabel
+          aria-label="Acknowledge"
+          onClick={event => event.stopPropagation()}
+          onFocus={event => event.stopPropagation()}
+          control={<Checkbox />}
+          label="I acknowledge that I should stop the click event propagation"
+        />
+      </IconLeftAccordionSummary>
+      <AccordionDetails>
+        <Typography color="textSecondary">
+          The click event of the nested action will propagate up and expand the
+          accordion unless you explicitly stop it.
+        </Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+MachineAccordion.propTypes = {
+  machine: PropTypes.array.isRequired
+};
+
+export default MachineAccordion;

src/features/machines/components/MachineContainer.js

@@ -1,6 +1,8 @@
 import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
-import Machine from "./Machine";
+import MachineTableRow from "./MachineTableRow";
+import MachineAccordion from "./MachineAccordion";
+import { ViewModes } from "./ViewModeSelection";
 import { useToast } from "../../../hooks";
 import {
   LastPage,
@@ -12,7 +14,7 @@ import {
 import { useTranslation } from "react-i18next";
 import useApi from "../../../api";
 
-const MachineContainer = ({ machine }) => {
+const MachineContainer = ({ machine, viewMode }) => {
   const [logs, setLogs] = useState([]);
   const [secondaryActionsAnchor, setSecondaryActionsAnchor] =
     React.useState(null);
@@ -123,18 +125,32 @@ const MachineContainer = ({ machine }) => {
   ];
 
   return (
-    <Machine
+    <>
+      {viewMode === ViewModes.TABLE && (
+        <MachineTableRow
           machine={machine}
           actions={actions}
           logs={logs}
           addLog={addLog}
           secondaryActionsMenuProps={secondaryActionsMenuProps}
         />
+      )}
+      {viewMode === ViewModes.ACCORDION && (
+        <MachineAccordion
+          machine={machine}
+          actions={actions}
+          logs={logs}
+          addLog={addLog}
+          secondaryActionsMenuProps={secondaryActionsMenuProps}
+        />
+      )}
+    </>
   );
 };
 
 MachineContainer.propTypes = {
-  machine: PropTypes.object.isRequired
+  machine: PropTypes.object.isRequired,
+  viewMode: PropTypes.bool.isRequired
 };
 
 export default MachineContainer;

src/features/machines/components/MachinesAccordionList.js

@@ -1,63 +0,0 @@
-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 Checkbox from "@material-ui/core/Checkbox";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Typography from "@material-ui/core/Typography";
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import withStyles from "@material-ui/core/styles/withStyles";
-
-const IconLeftAccordionSummary = withStyles({
-  expandIcon: {
-    order: -1
-  }
-})(AccordionSummary);
-
-const useStyles = makeStyles({
-  root: {
-    width: "100%"
-  }
-});
-
-const MachinesAccordionList = ({ machines }) => {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      {machines.map(machine => (
-        <Accordion key={`machine-${machine.machineId}`}>
-          <IconLeftAccordionSummary
-            expandIcon={<ExpandMoreIcon />}
-            aria-label="Expand"
-            aria-controls="additional-actions1-content"
-            id="additional-actions1-header"
-            IconButtonProps={{ edge: "start" }}
-          >
-            <FormControlLabel
-              aria-label="Acknowledge"
-              onClick={event => event.stopPropagation()}
-              onFocus={event => event.stopPropagation()}
-              control={<Checkbox />}
-              label="I acknowledge that I should stop the click event propagation"
-            />
-          </IconLeftAccordionSummary>
-          <AccordionDetails>
-            <Typography color="textSecondary">
-              The click event of the nested action will propagate up and expand
-              the accordion unless you explicitly stop it.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-      ))}
-    </div>
-  );
-};
-
-MachinesAccordionList.propTypes = {
-  machines: PropTypes.array.isRequired
-};
-
-export default MachinesAccordionList;

src/features/machines/components/MachinesContainer.js

@@ -4,8 +4,7 @@ import {
   NetworkDispatchContext
 } from "../../network/state/contexts";
 import useApi from "../../../api";
-import MachinesTableList from "./MachinesTableList";
+import MachinesListComponent from "./MachinesListComponent";
-import MachinesAccordionList from "./MachinesAccordionList";
 import PageTitle from "../../../components/common/PageTitle";
 import { useTranslation } from "react-i18next";
 import ViewModeSelection, { ViewModes } from "./ViewModeSelection";
@@ -40,12 +39,10 @@ const MachinesContainer = () => {
         text={t("Menu.Machines")}
         toolBar={<ViewModeSelection callback={setViewMode} />}
       />
-      {viewMode === ViewModes.TABLE && (
+      <MachinesListComponent
-        <MachinesTableList dense={true} machines={state.network.machines} />
+        machines={state.network.machines}
-      )}
+        viewMode={viewMode}
-      {viewMode === ViewModes.ACCORDION && (
+      />
-        <MachinesAccordionList machines={state.network.machines} />
-      )}
     </>
   );
 };

src/features/machines/components/MachinesListComponent.js

@@ -0,0 +1,80 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow
+} from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import MachineContainer from "./MachineContainer";
+import { useTranslation } from "react-i18next";
+import { ViewModes } from "./ViewModeSelection";
+
+const MachinesList = ({ machines, viewMode }) => {
+  return (
+    <>
+      {machines.map(machine => (
+        <MachineContainer
+          key={`machine-${machine.machineId}`}
+          machine={machine}
+          viewMode={viewMode}
+        />
+      ))}
+    </>
+  );
+};
+
+MachinesList.propTypes = {
+  machines: PropTypes.array.isRequired,
+  viewMode: PropTypes.string.isRequired
+};
+
+const MachinesTableList = ({ machines, viewMode }) => {
+  const { t } = useTranslation();
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="collapsible table" size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell />
+            <TableCell>{t("Machine.FullName")}</TableCell>
+            <TableCell>{t("Machine.Name")}</TableCell>
+            <TableCell>{t("Machine.IP")}</TableCell>
+            <TableCell>{t("Machine.MAC")}</TableCell>
+            <TableCell align="right" />
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <MachinesList machines={machines} viewMode={viewMode} />
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+MachinesTableList.propTypes = {
+  machines: PropTypes.array.isRequired,
+  viewMode: PropTypes.string.isRequired
+};
+
+const MachinesListComponent = ({ machines, viewMode }) => {
+  return (
+    <>
+      {viewMode === ViewModes.TABLE ? (
+        <MachinesTableList machines={machines} viewMode={viewMode} />
+      ) : (
+        <MachinesList machines={machines} viewMode={viewMode} />
+      )}
+    </>
+  );
+};
+
+MachinesListComponent.propTypes = {
+  machines: PropTypes.array.isRequired,
+  viewMode: PropTypes.string.isRequired
+};
+
+export default MachinesListComponent;

src/features/machines/components/MachinesTableList.js

@@ -1,48 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow
-} from "@material-ui/core";
-import Paper from "@material-ui/core/Paper";
-import MachineContainer from "./MachineContainer";
-import { useTranslation } from "react-i18next";
-
-const MachinesTableList = ({ dense, machines }) => {
-  const { t } = useTranslation();
-  return (
-    <TableContainer component={Paper}>
-      <Table aria-label="collapsible table" size={dense ? "small" : "medium"}>
-        <TableHead>
-          <TableRow>
-            <TableCell />
-            <TableCell>{t("Machine.FullName")}</TableCell>
-            <TableCell>{t("Machine.Name")}</TableCell>
-            <TableCell>{t("Machine.IP")}</TableCell>
-            <TableCell>{t("Machine.MAC")}</TableCell>
-            <TableCell align="right" />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {machines.map(machine => (
-            <MachineContainer
-              key={`machine-${machine.machineId}`}
-              machine={machine}
-            />
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
-};
-
-MachinesTableList.propTypes = {
-  dense: PropTypes.bool.isRequired,
-  machines: PropTypes.array.isRequired
-};
-
-export default MachinesTableList;