machines view modes update

master
Tudor Stanciu 2023-03-21 19:32:35 +02:00
parent 94f2138bc7
commit 7115649f12
7 changed files with 161 additions and 129 deletions

View File

@ -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;

View File

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

View File

@ -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;

View File

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

View File

@ -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;

View File

@ -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;