diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index caad19d..e57ec3a 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -26,6 +26,10 @@ "Settings": "Settings", "About": "About" }, + "ViewModes": { + "Table": "Table", + "List": "List" + }, "Login": { "Username": "Username", "Password": "Password", diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index a70fc4f..625d0f4 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -17,6 +17,10 @@ "Settings": "Setări", "About": "Despre" }, + "ViewModes": { + "Table": "Tabel", + "List": "Lista" + }, "Login": { "Username": "Utilizator", "Password": "Parolă", diff --git a/src/features/machines/components/MachineAccordion.js b/src/features/machines/components/MachineAccordion.js index 0297da1..8c3dd11 100644 --- a/src/features/machines/components/MachineAccordion.js +++ b/src/features/machines/components/MachineAccordion.js @@ -10,6 +10,17 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import withStyles from "@material-ui/core/styles/withStyles"; import MachineLog from "./common/MachineLog"; import { DataLabel } from "../../../components/common"; +import { useTranslation } from "react-i18next"; +import { useSensitiveInfo } from "../../../hooks"; +import ActionsGroup from "./common/ActionsGroup"; +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles(() => ({ + panel: { + justifyContent: "center", + alignItems: "center" + } +})); const IconLeftAccordionSummary = withStyles({ expandIcon: { @@ -17,7 +28,29 @@ const IconLeftAccordionSummary = withStyles({ } })(AccordionSummary); -const MachineAccordion = ({ machine, logs }) => { +const GridCell = ({ label, value }) => { + const { mask } = useSensitiveInfo(); + return ( + + + + ); +}; + +GridCell.propTypes = { + label: PropTypes.string.isRequired, + value: PropTypes.string.isRequired +}; + +const MachineAccordion = ({ + machine, + actions, + logs, + addLog, + secondaryActionsMenuProps +}) => { + const { t } = useTranslation(); + const classes = useStyles(); return ( { id="additional-actions1-header" IconButtonProps={{ edge: "start" }} > - - - + + + + + + + + + + @@ -44,8 +91,18 @@ const MachineAccordion = ({ machine, logs }) => { }; MachineAccordion.propTypes = { - machine: PropTypes.object.isRequired, - logs: PropTypes.array.isRequired + 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, + actions: PropTypes.array.isRequired, + logs: PropTypes.array.isRequired, + addLog: PropTypes.func.isRequired, + secondaryActionsMenuProps: PropTypes.object.isRequired }; export default MachineAccordion; diff --git a/src/features/machines/components/MachineTableRow.js b/src/features/machines/components/MachineTableRow.js index d14772f..ea63f39 100644 --- a/src/features/machines/components/MachineTableRow.js +++ b/src/features/machines/components/MachineTableRow.js @@ -1,18 +1,11 @@ -import React, { useMemo } from "react"; +import React from "react"; import PropTypes from "prop-types"; -import { - TableCell, - TableRow, - IconButton, - Collapse, - Menu -} from "@material-ui/core"; +import { TableCell, TableRow, IconButton, Collapse } from "@material-ui/core"; import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons"; import { makeStyles } from "@material-ui/core/styles"; import MachineLog from "./common/MachineLog"; -import WakeComponent from "./common/WakeComponent"; -import ActionButton from "./common/ActionButton"; import { useSensitiveInfo } from "../../../hooks"; +import ActionsGroup from "./common/ActionsGroup"; const useRowStyles = makeStyles({ root: { @@ -22,7 +15,7 @@ const useRowStyles = makeStyles({ } }); -const Machine = ({ +const MachineTableRow = ({ machine, actions, logs, @@ -33,16 +26,6 @@ const Machine = ({ const classes = useRowStyles(); const { mask } = useSensitiveInfo(); - const topActions = useMemo( - () => actions.filter(a => a.top === true), - [actions] - ); - - const secondaryActions = useMemo( - () => actions.filter(a => a.top === false), - [actions] - ); - return ( @@ -62,29 +45,12 @@ const Machine = ({ {mask(machine.iPv4Address)} {mask(machine.macAddress)} - - {topActions.map(action => ( - - ))} - - {secondaryActions.map(action => ( - - ))} - + @@ -98,7 +64,7 @@ const Machine = ({ ); }; -Machine.propTypes = { +MachineTableRow.propTypes = { machine: PropTypes.shape({ machineId: PropTypes.number.isRequired, machineName: PropTypes.string.isRequired, @@ -113,4 +79,4 @@ Machine.propTypes = { secondaryActionsMenuProps: PropTypes.object.isRequired }; -export default Machine; +export default MachineTableRow; diff --git a/src/features/machines/components/ViewModeSelection.js b/src/features/machines/components/ViewModeSelection.js index 89e7d6c..4dd3800 100644 --- a/src/features/machines/components/ViewModeSelection.js +++ b/src/features/machines/components/ViewModeSelection.js @@ -4,7 +4,9 @@ import TableChartIcon from "@material-ui/icons/TableChart"; import ViewListIcon from "@material-ui/icons/ViewList"; import ToggleButton from "@material-ui/lab/ToggleButton"; import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; +import { Tooltip } from "@material-ui/core"; import { useWindowSize } from "@flare/react-hooks"; +import { useTranslation } from "react-i18next"; export const ViewModes = { TABLE: "table", @@ -12,41 +14,47 @@ export const ViewModes = { }; const ViewModeSelection = ({ callback }) => { - const [viewMode, setViewMode] = useState(ViewModes.TABLE); + const [state, setState] = useState({ + mode: ViewModes.TABLE, + manual: false + }); const { isMobile } = useWindowSize(); + const { t } = useTranslation(); const handleViewModeSelection = useCallback( (event, mode) => { - setViewMode(mode); + setState({ mode, manual: true }); callback && callback(mode); }, [callback] ); - useEffect( - () => - handleViewModeSelection( - null, - isMobile ? ViewModes.ACCORDION : ViewModes.TABLE - ), - [handleViewModeSelection, isMobile] - ); + useEffect(() => { + if (state.manual === true) return; + const mode = isMobile ? ViewModes.ACCORDION : ViewModes.TABLE; + setState({ mode, manual: false }); + callback && callback(mode); + }, [callback, isMobile, state.manual]); return ( - + + + - + + + ); diff --git a/src/features/machines/components/common/ActionButton.js b/src/features/machines/components/common/ActionButton.js index 3df8bca..8b5f6dc 100644 --- a/src/features/machines/components/common/ActionButton.js +++ b/src/features/machines/components/common/ActionButton.js @@ -4,6 +4,13 @@ import { IconButton, Tooltip } from "@material-ui/core"; const ActionButton = React.forwardRef((props, _ref) => { const { action, machine } = props; + const id = `machine-item-${machine.machineId}-${action.code}`; + const handleActionClick = event => { + if (action.system) action.effect(); + else action.effect(machine); + event.stopPropagation(); + }; + return ( { > event.stopPropagation()} + onClick={handleActionClick} > diff --git a/src/features/machines/components/common/ActionsGroup.js b/src/features/machines/components/common/ActionsGroup.js new file mode 100644 index 0000000..6d820fd --- /dev/null +++ b/src/features/machines/components/common/ActionsGroup.js @@ -0,0 +1,66 @@ +import React, { useMemo } from "react"; +import PropTypes from "prop-types"; +import WakeComponent from "./WakeComponent"; +import ActionButton from "./ActionButton"; +import { Menu } from "@material-ui/core"; + +const ActionsGroup = ({ + machine, + actions, + addLog, + secondaryActionsMenuProps +}) => { + const topActions = useMemo( + () => actions.filter(a => a.top === true), + [actions] + ); + + const secondaryActions = useMemo( + () => actions.filter(a => a.top === false), + [actions] + ); + + return ( + <> + + {topActions.map(action => ( + + ))} + + {secondaryActions.map(action => ( + + ))} + + + ); +}; + +ActionsGroup.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, + actions: PropTypes.array.isRequired, + addLog: PropTypes.func.isRequired, + secondaryActionsMenuProps: PropTypes.object.isRequired +}; + +export default ActionsGroup; diff --git a/src/features/machines/components/common/MachineLog.js b/src/features/machines/components/common/MachineLog.js index c8fafcb..4714e0d 100644 --- a/src/features/machines/components/common/MachineLog.js +++ b/src/features/machines/components/common/MachineLog.js @@ -13,7 +13,7 @@ const MachineLog = ({ logs }) => { ); return ( - +
{ useEffect(pingInLoop, [trigger, pingInLoop]); + const handleWakeClick = event => { + wakeMachine(); + event.stopPropagation(); + }; + return ( @@ -87,8 +92,9 @@ const WakeComponent = ({ machine, addLog }) => { id={`machine-${machine.machineId}-wake`} size={"small"} disabled={state.on} - onClick={wakeMachine} + onClick={handleWakeClick} style={state.on ? { color: "#33cc33" } : {}} + onFocus={event => event.stopPropagation()} > diff --git a/src/features/user/profile/components/UserProfileCardContent.js b/src/features/user/profile/components/UserProfileCardContent.js index 75e5142..7c32e60 100644 --- a/src/features/user/profile/components/UserProfileCardContent.js +++ b/src/features/user/profile/components/UserProfileCardContent.js @@ -16,11 +16,16 @@ import { FileCopyOutlined } from "@material-ui/icons"; import EmailIcon from "@material-ui/icons/Email"; import { useToast } from "../../../../hooks"; import { useTranslation } from "react-i18next"; +import { makeStyles } from "@material-ui/core/styles"; +import styles from "../styles"; + +const useStyles = makeStyles(styles); const UserProfileCardContent = ({ userData }) => { const { email, profilePictureUrl } = userData; const { t } = useTranslation(); const { info } = useToast(); + const classes = useStyles(); const handleCopyToClipboard = url => () => { navigator.clipboard.writeText(url); @@ -35,73 +40,66 @@ const UserProfileCardContent = ({ userData }) => { const userName = `${userData.firstName} ${userData.lastName}`; return ( - - - - - - - - +
+ + + + + + + + + + + {userName} + + + } + /> + + + + + + + + {email} + + + } + /> + + {profilePictureUrl && ( - + + + + + - - {userName} + + + {profilePictureUrl} } /> - - - - - - - {email} - - - } - /> - - {profilePictureUrl && ( - - - - - - - - - - - {profilePictureUrl} - - - } - /> - - )} - - + )} + - +
); }; diff --git a/src/features/user/profile/styles.js b/src/features/user/profile/styles.js index e140522..22d2197 100644 --- a/src/features/user/profile/styles.js +++ b/src/features/user/profile/styles.js @@ -1,5 +1,12 @@ const style = theme => { return { + panel: { + display: "flex", + flexDirection: "row", + "@media (max-width: 600px)": { + flexDirection: "column" // change direction for small screens + } + }, profilePicture: { margin: "auto", display: "block",