Created ServerInfoCard element

portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx

@@ -24,9 +24,9 @@ import { Usage } from "../types";
 import { niceBytes, niceDays } from "../../../../common/utils";
 import DnsIcon from "@material-ui/icons/Dns";
 import EgressIcon from "../../../../icons/EgressIcon";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import ReportedUsageIcon from "../../../../icons/ReportedUsageIcon";
 import { BucketsIcon } from "../../../../icons";
+import {ServerInfoCard} from "./ServerInfoCard"
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -47,12 +47,32 @@ const styles = (theme: Theme) =>
       "& svg": {
         maxHeight: 18,
       },
+    },
+     infoHeight: {
+      height: 180,
+      minWidth: 247,
+      marginRight: 20,
+      padding: "25px 28px",
+      "& svg": {
+        maxHeight: 18,
+      },
     },
     consumptionValue: {
       color: "#000000",
       fontSize: "60px",
       fontWeight: "bold",
     },
+    endpoint: {
+      color: "#000000",
+      fontSize: "20px",
+      fontWeight: "bold",
+    },
+     infoValue: {
+      fontWeight: 500,
+      color: "#777777",
+      fontSize: 14,
+      marginTop: 9,
+    },
     icon: {
       marginRight: 10,
       color: "#777777",
@@ -95,6 +115,7 @@ interface IDashboardProps {
 
 const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
   const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
+
 
   const prettyUsage = (usage: string | undefined) => {
     if (usage === undefined) {
@@ -123,25 +144,7 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
     return usage.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   };
 
-  const serverColumns = [
-    {
-      label: "Endpoint",
-      elementKey: "endpoint",
-    },
-    {
-      label: "Status",
-      elementKey: "state",
-    },
-    {
-      label: "Uptime",
-      elementKey: "uptime",
-    },
-    {
-      label: "Version",
-      elementKey: "version",
-    },
-  ];
-
+
   const makeServerArray = (usage: Usage | null) => {
     if (usage != null) {
       usage.servers.forEach((s) => (s.uptime = niceDays(s.uptime)));
@@ -213,24 +216,25 @@ const BasicDashboard = ({ classes, usage }: IDashboardProps) => {
                 {usage ? prettyNumber(usage.objects) : 0}
               </Typography>
             </Paper>
-            <Grid container direction="row" alignItems="center">
-              <Grid item className={classes.icon}>
-                <DnsIcon />
-              </Grid>
-              <Grid item>
-                <Typography className={classes.elementTitle}>
-                  {" "}
-                  Servers
-                </Typography>
-              </Grid>
-              <TableWrapper
-                columns={serverColumns}
-                isLoading={false}
-                records={serverArray}
-                entityName="Servers"
-                idField="endpoint"
-              />
-            </Grid>
+            <Paper className={classes.paper}>
+             <Grid item className={classes.notationContainer}>
+             <Grid item className={classes.icon}>
+                  <DnsIcon />
+                  <Typography className={classes.elementTitle}>
+                    Servers
+                  </Typography>
+                </Grid>
+                 <Grid item className={classes.notationContainer}>
+          {serverArray.map((server) => {
+            return(
+              <ServerInfoCard server={server} classes={classes}/>
+            )
+          })}
+
+</Grid>
+
+    </Grid>
+    </Paper>
           </Grid>
         </Grid>
       </Grid>

portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoCard.tsx

@@ -0,0 +1,121 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import clsx from "clsx";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
+import { Usage, ServerInfo } from "../types";
+import { niceBytes, niceDays } from "../../../../common/utils";
+import DnsIcon from "@material-ui/icons/Dns";
+import EgressIcon from "../../../../icons/EgressIcon";
+import ReportedUsageIcon from "../../../../icons/ReportedUsageIcon";
+import { BucketsIcon } from "../../../../icons";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    paper: {
+      padding: theme.spacing(2),
+      display: "flex",
+      overflow: "auto",
+      flexDirection: "column",
+      border: "#eaedee 1px solid",
+      borderRadius: 5,
+      boxShadow: "none",
+    },
+    fixedHeight: {
+      height: 165,
+      minWidth: 247,
+      marginRight: 20,
+      padding: "25px 28px",
+      "& svg": {
+        maxHeight: 18,
+      },
+    },
+     infoHeight: {
+      height: 180,
+      minWidth: 247,
+      marginRight: 20,
+      padding: "25px 28px",
+      "& svg": {
+        maxHeight: 18,
+      },
+    },
+    consumptionValue: {
+      color: "#000000",
+      fontSize: "60px",
+      fontWeight: "bold",
+    },
+    endpoint: {
+      color: "#000000",
+      fontSize: "20px",
+      fontWeight: "bold",
+    },
+     infoValue: {
+      fontWeight: 500,
+      color: "#777777",
+      fontSize: 14,
+      marginTop: 9,
+    },
+    icon: {
+      marginRight: 10,
+      color: "#777777",
+    },
+    notationContainer: {
+      display: "flex",
+      flexWrap: "wrap",
+    },
+
+    elementTitle: {
+      fontWeight: 500,
+      color: "#777777",
+      fontSize: 14,
+      marginTop: -9,
+    },
+  });
+
+  interface ICardProps {
+  classes: any;
+  server: ServerInfo;
+}
+
+  export const ServerInfoCard = ({classes, server}: ICardProps) => {
+    return(
+      <Paper className={classes.infoPaper}>
+              <Grid container direction="row" alignItems="center">
+
+                <Grid item>
+                  <Typography className={classes.endpoint}>
+                    {" "}
+                     {server.endpoint}
+                  </Typography>
+                  <Typography className={classes.infoValue}>
+                    Status:  {server.state}
+                  </Typography>
+                  <Typography className={classes.infoValue}>
+                    Uptime:  {niceDays(server.uptime)}
+                  </Typography>
+                  <Typography className={classes.infoValue}>
+                    Version:  {server.version}
+                  </Typography>
+                </Grid>
+              </Grid>
+
+            </Paper>
+    )
+  }