From 6ad7abf3d1b2c5d3efb2982c2ba11a0f630a7f02 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Wed, 22 Mar 2023 18:20:14 +0200
Subject: [PATCH] machines accordion view update

---
 src/components/common/DataLabel.js            | 42 +++++++++++++++++++
 src/components/common/index.js                |  3 ++
 .../machines/components/MachineAccordion.js   | 39 ++++++++---------
 .../machines/components/MachineContainer.js   |  2 +-
 .../machines/components/MachineTableRow.js    |  4 +-
 .../machines/components/common/MachineLog.js  |  8 +++-
 6 files changed, 74 insertions(+), 24 deletions(-)
 create mode 100644 src/components/common/DataLabel.js
 create mode 100644 src/components/common/index.js

diff --git a/src/components/common/DataLabel.js b/src/components/common/DataLabel.js
new file mode 100644
index 0000000..7c58946
--- /dev/null
+++ b/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;
diff --git a/src/components/common/index.js b/src/components/common/index.js
new file mode 100644
index 0000000..4db22d3
--- /dev/null
+++ b/src/components/common/index.js
@@ -0,0 +1,3 @@
+import DataLabel from "./DataLabel";
+
+export { DataLabel };
diff --git a/src/features/machines/components/MachineAccordion.js b/src/features/machines/components/MachineAccordion.js
index e001ff2..0297da1 100644
--- a/src/features/machines/components/MachineAccordion.js
+++ b/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;
diff --git a/src/features/machines/components/MachineContainer.js b/src/features/machines/components/MachineContainer.js
index e472b9c..c647b73 100644
--- a/src/features/machines/components/MachineContainer.js
+++ b/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;
diff --git a/src/features/machines/components/MachineTableRow.js b/src/features/machines/components/MachineTableRow.js
index c742e30..d14772f 100644
--- a/src/features/machines/components/MachineTableRow.js
+++ b/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>
diff --git a/src/features/machines/components/common/MachineLog.js b/src/features/machines/components/common/MachineLog.js
index 5d7ddf1..c8fafcb 100644
--- a/src/features/machines/components/common/MachineLog.js
+++ b/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 }}>