MachineCollapsedContent component

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)
+https://v4.mui.com/customization/palette/ (Dark theme)
+
+Add in settings:
+- reset cache
+- ping interval
+- notifications
+- test notification mechanism

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",

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",

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

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>

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;

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}