Updated Logs Page to use mds components (#3114)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/package.json

@@ -17,7 +17,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.4.3",
-    "mds": "https://github.com/minio/mds.git#v0.11.0",
+    "mds": "https://github.com/minio/mds.git#v0.11.1",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",

portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx

@@ -16,7 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
-import { Box, Button, Grid, PageLayout, Select } from "mds";
+import { Box, Button, Grid, PageLayout, Select, Table, TableBody } from "mds";
 import { useSelector } from "react-redux";
 import { ErrorResponseHandler } from "../../../../common/types";
 import { AppState, useAppDispatch } from "../../../../store";
@@ -29,10 +29,6 @@ import {
 import { setHelpName } from "../../../../systemSlice";
 import SearchBox from "../../Common/SearchBox";
 import api from "../../../../../src/common/api";
-import Paper from "@mui/material/Paper";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableContainer from "@mui/material/TableContainer";
 import LogLine from "./LogLine";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../../HelpMenu";
@@ -304,7 +300,7 @@ const ErrorLogs = () => {
                 borderRadius: 4,
               }}
             >
-              <TableContainer component={Paper}>
+              <Box withBorders customBorderPadding={"0px"} useBackground>
                 <Table aria-label="collapsible table">
                   <TableBody>
                     {filteredMessages.map((m) => {
@@ -313,11 +309,11 @@ const ErrorLogs = () => {
                   </TableBody>
                 </Table>
                 {filteredMessages.length === 0 && (
-                  <div style={{ padding: 20, textAlign: "center" }}>
+                  <Box sx={{ padding: 20, textAlign: "center" }}>
                     No logs to display
-                  </div>
+                  </Box>
                 )}
-              </TableContainer>
+              </Box>
             </Box>
           </Grid>
         </Grid>

portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx

@@ -15,12 +15,15 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { Fragment, useState } from "react";
 import { DateTime } from "luxon";
-import TableRow from "@mui/material/TableRow";
-import TableCell from "@mui/material/TableCell";
-import Collapse from "@mui/material/Collapse";
-import Typography from "@mui/material/Typography";
 import { LogMessage } from "../types";
-import { Box, BoxArrowDown, BoxArrowUp, WarnFilledIcon } from "mds";
+import {
+  Box,
+  BoxArrowDown,
+  BoxArrowUp,
+  TableCell,
+  TableRow,
+  WarnFilledIcon,
+} from "mds";
 
 import getByKey from "lodash/get";
 
@@ -183,16 +186,14 @@ const LogLine = (props: { log: LogMessage }) => {
     <React.Fragment key={logTime.toString()}>
       <TableRow
         sx={{
-          "& > *": { borderBottom: "unset" },
           cursor: "pointer",
           borderLeft: "0",
           borderRight: "0",
         }}
-        style={{ backgroundColor: "#FDFDFD" }}
       >
         <TableCell
           onClick={() => setOpen(!open)}
-          style={{ width: 280, color: "#989898", fontSize: 12 }}
+          sx={{ width: 280, color: "#989898", fontSize: 12 }}
         >
           <Box
             sx={{
@@ -211,7 +212,7 @@ const LogLine = (props: { log: LogMessage }) => {
         </TableCell>
         <TableCell
           onClick={() => setOpen(!open)}
-          style={{ width: 200, color: "#989898", fontSize: 12 }}
+          sx={{ width: 200, color: "#989898", fontSize: 12 }}
         >
           <Box
             sx={{
@@ -224,8 +225,8 @@ const LogLine = (props: { log: LogMessage }) => {
           </Box>
         </TableCell>
         <TableCell onClick={() => setOpen(!open)}>
-          <div
-            style={{
+          <Box
+            sx={{
               display: "table",
               tableLayout: "fixed",
               width: "100%",
@@ -233,8 +234,8 @@ const LogLine = (props: { log: LogMessage }) => {
               paddingRight: 10,
             }}
           >
-            <div
-              style={{
+            <Box
+              sx={{
                 display: "table-cell",
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis",
@@ -242,10 +243,10 @@ const LogLine = (props: { log: LogMessage }) => {
               }}
             >
               {titleLogMessage}
-            </div>
-          </div>
+            </Box>
+          </Box>
         </TableCell>
-        <TableCell onClick={() => setOpen(!open)} style={{ width: 40 }}>
+        <TableCell onClick={() => setOpen(!open)} sx={{ width: 40 }}>
           <Box
             sx={{
               "& .min-icon": {
@@ -266,7 +267,7 @@ const LogLine = (props: { log: LogMessage }) => {
       {open ? (
         <TableRow>
           <TableCell
-            style={{
+            sx={{
               paddingBottom: 0,
               paddingTop: 0,
               width: 200,
@@ -277,28 +278,22 @@ const LogLine = (props: { log: LogMessage }) => {
               fontWeight: "bold",
             }}
           >
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <div style={{ marginTop: 10 }}>Log Details</div>
-            </Collapse>
+            <Box sx={{ marginTop: 10 }}>Log Details</Box>
           </TableCell>
-          <TableCell colSpan={2} style={{ paddingBottom: 0, paddingTop: 0 }}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1 }}>
-                <Typography
-                  style={{
-                    background: "#efefef",
-                    border: "1px solid #dedede",
-                    padding: 4,
-                    fontSize: 14,
-                    color: "#666666",
-                  }}
-                >
-                  {fullMessage}
-                </Typography>
-              </Box>
-            </Collapse>
+          <TableCell sx={{ paddingBottom: 0, paddingTop: 0 }} colSpan={2}>
+            <Box
+              sx={{
+                margin: 1,
+                padding: 4,
+                fontSize: 14,
+              }}
+              withBorders
+              useBackground
+            >
+              {fullMessage}
+            </Box>
           </TableCell>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0, width: 40 }} />
+          <TableCell sx={{ paddingBottom: 0, paddingTop: 0, width: 40 }} />
         </TableRow>
       ) : null}
     </React.Fragment>

portal-ui/yarn.lock

@@ -8412,9 +8412,9 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-"mds@https://github.com/minio/mds.git#v0.11.0":
-  version "0.11.0"
-  resolved "https://github.com/minio/mds.git#f8f53f26977ee21d6de5c11915f34fb12a2a01ab"
+"mds@https://github.com/minio/mds.git#v0.11.1":
+  version "0.11.1"
+  resolved "https://github.com/minio/mds.git#63d4712c8e23aea76f93fec86d332f80ccba8207"
   dependencies:
     "@types/styled-components" "^5.1.28"
     "@uiw/react-textarea-code-editor" "^2.1.9"