machines accordion view update

src/components/common/DataLabel.js

@@ -0,0 +1,42 @@
+import React, { useMemo } from "react";
+import PropTypes from "prop-types";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+  panel: {
+    display: "flex"
+  },
+  label: {
+    marginRight: "4px"
+  },
+  data: {
+    fontWeight: theme.typography.fontWeightMedium
+  }
+}));
+
+const DataLabel = ({ label, data }) => {
+  const classes = useStyles();
+  const lbl = useMemo(
+    () => (label.endsWith(":") ? label : `${label}:`),
+    [label]
+  );
+
+  return (
+    <div className={classes.panel}>
+      <Typography variant="body2" className={classes.label}>
+        {lbl}
+      </Typography>
+      <Typography variant="body2" className={classes.data}>
+        {data}
+      </Typography>
+    </div>
+  );
+};
+
+DataLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  data: PropTypes.string
+};
+
+export default DataLabel;

src/components/common/index.js

@@ -0,0 +1,3 @@
+import DataLabel from "./DataLabel";
+
+export { DataLabel };

src/features/machines/components/MachineAccordion.js

@@ -1,13 +1,15 @@
 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 {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Grid
+} from "@material-ui/core";
 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";
 
 const IconLeftAccordionSummary = withStyles({
   expandIcon: {
@@ -15,7 +17,7 @@ const IconLeftAccordionSummary = withStyles({
   }
 })(AccordionSummary);
 
-const MachineAccordion = ({ machine }) => {
+const MachineAccordion = ({ machine, logs }) => {
   return (
     <Accordion>
       <IconLeftAccordionSummary
@@ -25,26 +27,25 @@ const MachineAccordion = ({ machine }) => {
         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"
+        <Grid container>
+          <Grid item xs={12} md={6}>
+            <DataLabel
+              label={"Full machine name"}
+              data={machine.fullMachineName}
             />
+          </Grid>
+        </Grid>
       </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>
+        <MachineLog logs={logs} />
       </AccordionDetails>
     </Accordion>
   );
 };
 
 MachineAccordion.propTypes = {
-  machine: PropTypes.array.isRequired
+  machine: PropTypes.object.isRequired,
+  logs: PropTypes.array.isRequired
 };
 
 export default MachineAccordion;

src/features/machines/components/MachineContainer.js

@@ -150,7 +150,7 @@ const MachineContainer = ({ machine, viewMode }) => {
 
 MachineContainer.propTypes = {
   machine: PropTypes.object.isRequired,
-  viewMode: PropTypes.bool.isRequired
+  viewMode: PropTypes.string.isRequired
 };
 
 export default MachineContainer;

src/features/machines/components/MachineTableRow.js

@@ -31,7 +31,7 @@ const Machine = ({
 }) => {
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
-  const { mask, maskElements } = useSensitiveInfo();
+  const { mask } = useSensitiveInfo();
 
   const topActions = useMemo(
     () => actions.filter(a => a.top === true),
@@ -90,7 +90,7 @@ const Machine = ({
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <MachineLog logs={maskElements(logs)} />
+            <MachineLog logs={logs} />
           </Collapse>
         </TableCell>
       </TableRow>

src/features/machines/components/common/MachineLog.js

@@ -1,13 +1,17 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { Box } from "@material-ui/core";
+import { useSensitiveInfo } from "../../../../hooks";
 import { LazyLog, ScrollFollow } from "react-lazylog";
 
 const MachineLog = ({ logs }) => {
+  const { maskElements } = useSensitiveInfo();
+
   const displayLogs = useMemo(
-    () => (logs.length > 0 ? logs.join("\n") : "..."),
-    [logs]
+    () => (logs.length > 0 ? maskElements(logs).join("\n") : "..."),
+    [logs, maskElements]
   );
+
   return (
     <Box margin={1}>
       <div style={{ height: 200 }}>