From bb8460a11864a769495ff8b7a6024530cb423667 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Thu, 26 Aug 2021 12:22:46 -0700
Subject: [PATCH] Created ServerInfoCard element (#984)
---
.../BasicDashboard/BasicDashboard.tsx | 80 ++++++------
.../BasicDashboard/ServerInfoCard.tsx | 121 ++++++++++++++++++
2 files changed, 163 insertions(+), 38 deletions(-)
create mode 100644 portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoCard.tsx
diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
index f7b1420a1..64ac4ab17 100644
--- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
+++ b/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}
-
-
-
-
-
-
- {" "}
- Servers
-
-
-
-
+
+
+
+
+
+ Servers
+
+
+
+ {serverArray.map((server) => {
+ return(
+
+ )
+ })}
+
+
+
+
+
diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoCard.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoCard.tsx
new file mode 100644
index 000000000..7c465c840
--- /dev/null
+++ b/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 .
+
+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(
+
+
+
+
+
+ {" "}
+ {server.endpoint}
+
+
+ Status: {server.state}
+
+
+ Uptime: {niceDays(server.uptime)}
+
+
+ Version: {server.version}
+
+
+
+
+
+ )
+ }
\ No newline at end of file