From 4dff02b87f54b8466cc11cc84727e28677303a5a Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Tue, 18 Apr 2023 02:22:42 +0300
Subject: [PATCH] MachineCollapsedContent component

---
 private/Notes.txt                             |  8 ++-
 public/locales/en/translations.json           |  1 +
 public/locales/ro/translations.json           |  1 +
 .../machines/components/MachineAccordion.js   |  8 ++-
 .../machines/components/MachineTableRow.js    |  8 ++-
 .../common/MachineCollapsedContent.js         | 56 +++++++++++++++++++
 .../machines/components/common/MachineLog.js  |  2 +-
 7 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/features/machines/components/common/MachineCollapsedContent.js

diff --git a/private/Notes.txt b/private/Notes.txt
index d291f00..fef1e3e 100644
--- a/private/Notes.txt
+++ b/private/Notes.txt
@@ -3,4 +3,10 @@ https://v4.mui.com/getting-started/installation/
 https://v4.mui.com/components/material-icons/
 
 Theming:
-https://v4.mui.com/customization/palette/ (Dark theme)
\ No newline at end of file
+https://v4.mui.com/customization/palette/ (Dark theme)
+
+Add in settings:
+- reset cache
+- ping interval
+- notifications
+- test notification mechanism
\ No newline at end of file
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 344789b..1d75782 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -67,6 +67,7 @@
     "Name": "Machine name",
     "IP": "IP",
     "MAC": "MAC address",
+    "Description": "Description",
     "PoweredOn": "Powered on",
     "Actions": {
       "Wake": "Wake",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 5c42e97..1825983 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -58,6 +58,7 @@
     "Name": "Nume masina",
     "IP": "IP",
     "MAC": "Adresa MAC",
+    "Description": "Descriere",
     "PoweredOn": "Pornit",
     "Actions": {
       "Wake": "Pornește",
diff --git a/src/features/machines/components/MachineAccordion.js b/src/features/machines/components/MachineAccordion.js
index f5d0965..42ede53 100644
--- a/src/features/machines/components/MachineAccordion.js
+++ b/src/features/machines/components/MachineAccordion.js
@@ -8,7 +8,7 @@ import {
 } 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 MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { DataLabel } from "../../../components/common";
 import { useTranslation } from "react-i18next";
 import { useSensitiveInfo } from "../../../hooks";
@@ -87,7 +87,11 @@ const MachineAccordion = ({ machine, actions, logs, addLog }) => {
         </Grid>
       </IconLeftAccordionSummary>
       <AccordionDetails>
-        <MachineLog logs={logs} />
+        <MachineCollapsedContent
+          description={machine.description}
+          logs={logs}
+          style={{ width: "100%" }}
+        />
       </AccordionDetails>
     </Accordion>
   );
diff --git a/src/features/machines/components/MachineTableRow.js b/src/features/machines/components/MachineTableRow.js
index 2794bee..3338cfe 100644
--- a/src/features/machines/components/MachineTableRow.js
+++ b/src/features/machines/components/MachineTableRow.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 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 MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { useSensitiveInfo } from "../../../hooks";
 import ActionsGroup from "./common/ActionsGroup";
 
@@ -45,7 +45,11 @@ const MachineTableRow = ({ machine, actions, logs, addLog }) => {
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
           <Collapse in={open} timeout="auto" unmountOnExit>
-            <MachineLog logs={logs} />
+            <MachineCollapsedContent
+              description={machine.description}
+              logs={logs}
+              style={{ paddingBottom: "10px" }}
+            />
           </Collapse>
         </TableCell>
       </TableRow>
diff --git a/src/features/machines/components/common/MachineCollapsedContent.js b/src/features/machines/components/common/MachineCollapsedContent.js
new file mode 100644
index 0000000..7fc4d1c
--- /dev/null
+++ b/src/features/machines/components/common/MachineCollapsedContent.js
@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import MachineLog from "./MachineLog";
+import Typography from "@material-ui/core/Typography";
+import { useSensitiveInfo } from "../../../../hooks";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(_theme => ({
+  panel: {
+    display: "flex"
+  },
+  label: {
+    marginRight: "4px"
+  }
+}));
+
+const MachineDescription = ({ description }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.panel}>
+      <Typography
+        variant="body2"
+        className={classes.label}
+        color="textSecondary"
+      >
+        {"Description:"}
+      </Typography>
+      <Typography variant="body2" color="textSecondary">
+        {description}
+      </Typography>
+    </div>
+  );
+};
+
+MachineDescription.propTypes = {
+  description: PropTypes.string
+};
+
+const MachineCollapsedContent = ({ description, logs, style }) => {
+  const { mask } = useSensitiveInfo();
+  return (
+    <div style={style}>
+      <MachineLog logs={logs} />
+      {description && <MachineDescription description={mask(description)} />}
+    </div>
+  );
+};
+
+MachineCollapsedContent.propTypes = {
+  logs: PropTypes.array.isRequired,
+  description: PropTypes.string,
+  style: PropTypes.object
+};
+
+export default MachineCollapsedContent;
diff --git a/src/features/machines/components/common/MachineLog.js b/src/features/machines/components/common/MachineLog.js
index 4714e0d..53ad613 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 (
-    <Box width="100%">
+    <Box>
       <div style={{ height: 200 }}>
         <ScrollFollow
           startFollowing={true}