diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 5c1b4c97a..7759aae64 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -17,6 +17,7 @@ // This object contains variables that will be used across form components. import { breakPoints } from "mds"; +import get from "lodash/get"; const inputLabelBase = { fontWeight: 600, @@ -416,16 +417,16 @@ export const typesSelection = { }, }; -export const widgetCommon = { - singleValueContainer: { +export const widgetCommon = (theme: any) => ({ + "& .singleValueContainer": { height: 200, - border: "#eaeaea 1px solid", - backgroundColor: "#fff", - borderRadius: "3px", + border: `${get(theme, "borderColor", "#eaeaea")} 1px solid`, + borderRadius: 2, + backgroundColor: get(theme, "bgColor", "#fff"), padding: 16, }, - titleContainer: { - color: "#404143", + "& .titleContainer": { + color: get(theme, "mutedText", "#87888d"), fontSize: 16, fontWeight: 600, paddingBottom: 14, @@ -433,38 +434,38 @@ export const widgetCommon = { display: "flex" as const, justifyContent: "space-between" as const, }, - contentContainer: { + "& .contentContainer": { justifyContent: "center" as const, alignItems: "center" as const, display: "flex" as const, width: "100%", height: 140, }, - singleLegendContainer: { + "& .singleLegendContainer": { display: "flex", alignItems: "center", padding: "0 10px", maxWidth: "100%", }, - colorContainer: { + "& .colorContainer": { width: 8, height: 8, minWidth: 8, marginRight: 5, }, - legendLabel: { + "& .legendLabel": { fontSize: "80%", - color: "#393939", + color: get(theme, "mutedText", "#87888d"), whiteSpace: "nowrap" as const, overflow: "hidden" as const, textOverflow: "ellipsis" as const, }, - zoomChartCont: { + "& .zoomChartCont": { position: "relative" as const, height: 340, width: "100%", }, -}; +}); export const tooltipCommon = { customTooltip: { @@ -646,44 +647,6 @@ export const inputFieldStyles = { }, }; -const commonStateIcon = { - marginRight: 10, - lineHeight: 1, - display: "inline-flex", - marginTop: 6, -}; - -export const commonDashboardInfocard: any = { - redState: { - color: "#F55B5B", - ...commonStateIcon, - }, - greenState: { - color: "#9FF281", - ...commonStateIcon, - }, - yellowState: { - color: "#F7A25A", - ...commonStateIcon, - }, - greyState: { - color: "grey", - ...commonStateIcon, - }, - healthStatusIcon: { - position: "absolute" as const, - fontSize: 8, - left: 18, - height: 10, - bottom: 2, - marginRight: 10, - "& .min-icon": { - width: 5, - height: 5, - }, - }, -}; - export const tableStyles: any = { tableBlock: { display: "flex", diff --git a/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx b/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx deleted file mode 100644 index b53548924..000000000 --- a/portal-ui/src/screens/Console/Common/TabSelector/TabSelector.tsx +++ /dev/null @@ -1,123 +0,0 @@ -// 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 makeStyles from "@mui/styles/makeStyles"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; -import { ITabOption } from "./types"; - -interface ITabSelector { - selectedTab: number; - onChange: (newValue: number) => void; - tabOptions: ITabOption[]; -} - -const tabSubStyles = makeStyles({ - tabRoot: { - height: "40px", - borderBottom: "1px solid #eaeaea", - }, - root: { - width: "120px", - backgroundColor: "transparent", - paddingTop: 0, - paddingBottom: 0, - fontSize: "14px", - fontWeight: 600, - color: "#07193E", - height: "40px", - }, - selected: { - "&.MuiTab-selected": { - backgroundColor: "#F6F7F7 !important", - }, - "&.MuiTab-wrapper": { - color: "#07193E", - fontWeight: 600, - }, - }, - indicator: { - background: - "transparent linear-gradient(90deg, #072B4E 0%, #081C42 100%) 0% 0% no-repeat padding-box;", - height: 2, - }, - scroller: { - maxWidth: 1185, - position: "relative", - "&::after": { - content: '" "', - backgroundColor: "#EEF1F4", - height: 2, - width: "100%", - display: "block", - }, - }, -}); - -const TabSelector = ({ selectedTab, onChange, tabOptions }: ITabSelector) => { - const subStyles = tabSubStyles(); - - return ( - - , newValue: number) => { - onChange(newValue); - }} - classes={{ - root: subStyles.tabRoot, - indicator: subStyles.indicator, - scroller: subStyles.scroller, - }} - > - {tabOptions.map((option, index) => { - let tabOptions: ITabOption = { - label: option.label, - }; - - if (option.value) { - tabOptions = { ...tabOptions, value: option.value }; - } - - if (option.disabled) { - tabOptions = { ...tabOptions, disabled: option.disabled }; - } - - return ( - - ); - })} - - - ); -}; - -export default TabSelector; diff --git a/portal-ui/src/screens/Console/Common/TabSelector/types.ts b/portal-ui/src/screens/Console/Common/TabSelector/types.ts deleted file mode 100644 index 75fac9f46..000000000 --- a/portal-ui/src/screens/Console/Common/TabSelector/types.ts +++ /dev/null @@ -1,21 +0,0 @@ -// 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 . - -export interface ITabOption { - label: string; - value?: string; - disabled?: boolean; -} diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx index a93d4812b..6353e2d50 100644 --- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx +++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx @@ -15,9 +15,10 @@ // along with this program. If not, see . import React from "react"; -import { Box, Grid } from "@mui/material"; import { ArrowRightIcon, + Box, + breakPoints, BucketsIcon, Button, DiagnosticsMenuIcon, @@ -46,15 +47,14 @@ import { AdminInfoResponse, ServerDrives } from "api/consoleApi"; const BoxItem = ({ children }: { children: any }) => { return ( @@ -124,8 +124,8 @@ const BasicDashboard = ({ usage }: IDashboardProps) => { display: "grid", gridTemplateRows: "1fr", gridTemplateColumns: "1fr", - gap: "27px", - marginBottom: "40px", + gap: 27, + marginBottom: 40, }} > { sx={{ display: "grid", gridTemplateRows: "136px", - gridTemplateColumns: { - sm: "1fr 1fr 1fr", - xs: "1fr", + gridTemplateColumns: "1fr 1fr 1fr", + gap: 20, + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr", }, - gap: { - md: "20px", - xs: "20px", + [`@media (max-width: ${breakPoints.md}px)`]: { + marginBottom: 0, }, }} > @@ -214,12 +214,12 @@ const BasicDashboard = ({ usage }: IDashboardProps) => { { @@ -262,9 +262,9 @@ const BasicDashboard = ({ usage }: IDashboardProps) => { @@ -283,29 +283,32 @@ const BasicDashboard = ({ usage }: IDashboardProps) => { - - - } - label={"Backend type"} - value={usage?.backend?.backendType ?? "Unknown"} - /> - - - } - label={"Standard storage class parity"} - value={usage?.backend?.standardSCParity?.toString() ?? "n/a"} - /> - - - } - label={"Reduced redundancy storage class parity"} - value={usage?.backend?.rrSCParity?.toString() ?? "n/a"} - /> - - + + } + label={"Backend type"} + value={usage?.backend?.backendType ?? "Unknown"} + /> + } + label={"Standard storage class parity"} + value={usage?.backend?.standardSCParity?.toString() ?? "n/a"} + /> + } + label={"Reduced redundancy storage class parity"} + value={usage?.backend?.rrSCParity?.toString() ?? "n/a"} + /> + { theme.colors.link, - }, + paddingTop: 20, + fontSize: 14, }} > . -import { Box, Tooltip } from "@mui/material"; import React from "react"; +import get from "lodash/get"; +import styled from "styled-components"; +import { Box, breakPoints, Tooltip } from "mds"; + +const CounterCardMain = styled.div(({ theme }) => ({ + fontFamily: "Inter,sans-serif", + color: get(theme, "signalColors.main", "#07193E"), + maxWidth: "300px", + display: "flex", + marginLeft: "auto", + marginRight: "auto", + cursor: "default", + position: "relative", + width: "100%", +})); const CounterCard = ({ counterValue, label = "", icon = null, actions = null, - loading = false, }: { counterValue: string | number; label?: any; icon?: any; actions?: any; - loading?: boolean; }) => { return ( - + - + = 5 - ? { - xl: "50px", - lg: "45px", - md: "28px", - sm: "28px", - xs: "20px", - } - : { - xl: "55px", - lg: "50px", - md: "36px", - sm: "35px", - xs: "35px", - }, - fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", - maxWidth: { - md: 187, - xs: 200, + maxWidth: 187, + flexFlow: "row", + fontSize: counterValue.toString().length >= 5 ? 50 : 55, + [`@media (max-width: ${breakPoints.sm}px)`]: { + flexFlow: "column", + maxWidth: 200, + fontSize: counterValue.toString().length >= 5 ? 20 : 35, }, - flexFlow: { - md: "row", - xs: "column", + [`@media (max-width: ${breakPoints.md}px)`]: { + fontSize: counterValue.toString().length >= 5 ? 28 : 35, + }, + [`@media (max-width: ${breakPoints.lg}px)`]: { + fontSize: counterValue.toString().length >= 5 ? 28 : 36, + }, + [`@media (max-width: ${breakPoints.xl}px)`]: { + fontSize: counterValue.toString().length >= 5 ? 45 : 50, }, }} > @@ -137,7 +129,7 @@ const CounterCard = ({ - + ); }; diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.tsx index f8970d4ab..e4f310a26 100644 --- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.tsx +++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/DriveInfoItem.tsx @@ -15,28 +15,14 @@ // along with this program. If not, see . import React from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { - capacityColors, - niceBytes, - niceBytesInt, -} from "../../../../common/utils"; -import { Box } from "@mui/material"; -import { Cell, Pie, PieChart } from "recharts"; -import { CircleIcon } from "mds"; -import { commonDashboardInfocard } from "../../Common/FormComponents/common/styleLibrary"; -import { STATUS_COLORS } from "./Utils"; +import get from "lodash/get"; +import styled from "styled-components"; +import { niceBytes } from "../../../../common/utils"; +import { Box, breakPoints, CircleIcon, SizeChart } from "mds"; import { ServerDrives } from "api/consoleApi"; - -const styles = (theme: Theme) => - createStyles({ - ...commonDashboardInfocard, - }); +import { STATUS_COLORS } from "./Utils"; interface ICardProps { - classes?: any; drive: ServerDrives; } @@ -51,29 +37,45 @@ const driveStatusColor = (health_status: string) => { } }; +const DataContainerMain = styled.div(({ theme }) => ({ + flex: 1, + display: "flex", + alignItems: "center", + paddingLeft: "20px", + marginTop: "10px", + flexFlow: "row", + "& .info-label": { + color: get(theme, "mutedText", "#87888d"), + fontSize: "12px", + textAlign: "center", + }, + "& .info-value": { + fontSize: "18px", + color: get(theme, "signalColors.main", "#07193E"), + display: "flex", + fontWeight: 500, + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + }, + [`@media (max-width: ${breakPoints.sm}px)`]: { + flexFlow: "column", + }, +})); + const DriveInfoItem = ({ drive }: ICardProps) => { const totalSpace = drive.totalSpace || 0; const usedSpace = drive.usedSpace || 0; - const freeSpace = totalSpace - usedSpace; - - const plotValues = [ - { value: freeSpace, color: "#D6D6D6", label: "Free Space" }, - { - value: drive.usedSpace, - color: capacityColors(usedSpace, totalSpace), - label: "Used Space", - }, - ]; return ( { wordBreak: "break-all", marginRight: "8px", fontWeight: 600, - fontSize: { - md: "16px", - xs: "10px", + fontSize: 16, + [`@media (max-width: ${breakPoints.sm}px)`]: { + fontSize: 10, }, }, }} @@ -117,68 +119,15 @@ const DriveInfoItem = ({ drive }: ICardProps) => { {drive.state && } - + -
- - {drive.usedSpace ? niceBytesInt(drive.usedSpace) : "-"} - -
- - - {plotValues.map((entry, index) => ( - - ))} - - -
-
+ { - + ); }; -export default withStyles(styles)(DriveInfoItem); +export default DriveInfoItem; diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.tsx index e2de38b89..6cb19ebf4 100644 --- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.tsx +++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ReportedUsage.tsx @@ -14,10 +14,46 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { Box, Tooltip } from "@mui/material"; import React from "react"; +import get from "lodash/get"; +import styled from "styled-components"; +import { Box, Tooltip } from "mds"; import { Cell, Pie, PieChart } from "recharts"; +const ReportedUsageMain = styled.div(({ theme }) => ({ + maxHeight: "110px", + display: "flex", + alignItems: "center", + justifyContent: "space-between", + fontSize: "19px", + + padding: "10px", + "& .unit-value": { + fontSize: "50px", + color: get(theme, "signalColors.main", "#07193E"), + }, + "& .unit-type": { + fontSize: "18px", + color: get(theme, "mutedText", "#87888d"), + marginTop: "20px", + marginLeft: "5px", + }, + + "& .usage-label": { + display: "flex", + alignItems: "center", + fontSize: "16px", + fontWeight: 600, + marginRight: "20px", + marginTop: "-10px", + "& .min-icon": { + marginLeft: "10px", + height: 16, + width: 16, + }, + }, +})); + const ReportedUsage = ({ usageValue, total, @@ -37,47 +73,13 @@ const ReportedUsage = ({ ]; return ( - +
Reported Usage
- + - + ); }; diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoItem.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoItem.tsx index 1fe6257fc..858631b25 100644 --- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoItem.tsx +++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServerInfoItem.tsx @@ -14,14 +14,10 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { niceDays } from "../../../../common/utils"; -import { Box } from "@mui/material"; -import { CircleIcon } from "mds"; +import styled from "styled-components"; import get from "lodash/get"; -import { commonDashboardInfocard } from "../../Common/FormComponents/common/styleLibrary"; +import { Box, breakPoints, CircleIcon } from "mds"; +import { niceDays } from "../../../../common/utils"; import { getDriveStatusColor, getNetworkStatusColor, @@ -29,84 +25,121 @@ import { } from "./Utils"; import { ServerProperties } from "api/consoleApi"; -const styles = (theme: Theme) => - createStyles({ - ...commonDashboardInfocard, - }); - interface ICardProps { - classes?: any; server: ServerProperties; index: number; } +const ServerStatItemMain = styled.div(({ theme }) => ({ + alignItems: "baseline", + padding: "5px", + display: "flex", + gap: "5px", + "& .StatBox": { + display: "flex", + alignItems: "center", + justifyContent: "center", + flexFlow: "column", + "& .stat-text": { + color: get(theme, "mutedText", "#87888d"), + fontSize: "12px", + }, + "& .stat-value": { + fontSize: "18px", + color: get(theme, "signalColors.main", "#07193E"), + display: "flex", + fontWeight: 500, + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap", + "& .stat-container": { + display: "flex", + alignItems: "center", + justifyContent: "center", + flexFlow: "column", + marginLeft: "5px", + maxWidth: "40px", + "&:first-of-type(svg)": { + fill: get(theme, "mutedText", "#87888d"), + }, + "& .stat-indicator": { + marginRight: "0px", + justifyContent: "center", + alignItems: "center", + textAlign: "center", + "& svg.min-icon": { + width: "10px", + height: "10px", + }, + "&.good": { + "& svg.min-icon": { + fill: get(theme, "signalColors.good", "#4CCB92"), + }, + }, + "&.warn": { + "& svg.min-icon": { + fill: get(theme, "signalColors.warning", "#FFBD62"), + }, + }, + "&.bad": { + "& svg.min-icon": { + fill: get(theme, "signalColors.danger", "#C51B3F"), + }, + }, + }, + }, + }, + }, +})); + +const ServerInfoItemMain = styled.div(({ theme }) => ({ + display: "flex", + alignItems: "flex-start", + flexFlow: "column", + flex: 1, + "& .server-state": { + marginLeft: "8px", + "& .min-icon": { + height: "14px", + width: "14px", + }, + "&.good": { + "& svg.min-icon": { + fill: get(theme, "signalColors.good", "#4CCB92"), + }, + }, + "&.warn": { + "& svg.min-icon": { + fill: get(theme, "signalColors.warning", "#FFBD62"), + }, + }, + "&.bad": { + "& svg.min-icon": { + fill: get(theme, "signalColors.danger", "#C51B3F"), + }, + }, + }, +})); + const ServerStatItem = ({ label = "", value = "", - statusColor = "", + statusColor = "warn", hasStatus = false, }: { label?: string; value?: any; hasStatus?: boolean; - statusColor: string | undefined; + statusColor?: "good" | "warn" | "bad"; }) => { return ( - - + +
{value}{" "} - + {hasStatus ? ( - + ) : ( @@ -116,7 +149,7 @@ const ServerStatItem = ({
{label}
 - + ); }; @@ -135,14 +168,7 @@ const ServerInfoItem = ({ server }: ICardProps) => { ? server.drives.filter((element) => element.state === "ok").length : 0; return ( - + { justifyContent: "space-between", width: "100%", paddingLeft: "20px", - - flexFlow: { - sm: "row", - xs: "column", + flexFlow: "row", + [`@media (max-width: ${breakPoints.md}px)`]: { + flexFlow: "column", }, }} > @@ -174,16 +199,7 @@ const ServerInfoItem = ({ server }: ICardProps) => { {server.endpoint || ""} {server?.state && ( - + )} @@ -195,10 +211,7 @@ const ServerInfoItem = ({ server }: ICardProps) => { alignItems: "center", justifyContent: "center", flex: "1.5", - gap: { - md: "5%", - xs: "5%", - }, + gap: "5%", }} > { hasStatus={true} value={`${activeNetwork}/${networkTotal}`} /> - { } /> - + ); }; -export default withStyles(styles)(ServerInfoItem); +export default ServerInfoItem; diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServersList.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServersList.tsx index d6effaaf3..a1fdfe06d 100644 --- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServersList.tsx +++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/ServersList.tsx @@ -15,14 +15,9 @@ // along with this program. If not, see . import React from "react"; -import ListSubheader from "@mui/material/ListSubheader"; -import List from "@mui/material/List"; -import ListItemButton from "@mui/material/ListItemButton"; -import Collapse from "@mui/material/Collapse"; +import { Accordion, Box, breakPoints } from "mds"; import ServerInfoItem from "./ServerInfoItem"; -import { Box } from "@mui/material"; import DriveInfoItem from "./DriveInfoItem"; -import { MenuCollapsedIcon, MenuExpandedIcon } from "mds"; import { ServerProperties } from "api/consoleApi"; const ServersList = ({ data }: { data: ServerProperties[] }) => { @@ -38,128 +33,63 @@ const ServersList = ({ data }: { data: ServerProperties[] }) => { Servers ({data.length}) - + {data.map((serverInfo, index) => { const key = `${serverInfo.endpoint}-${index}`; const isExpanded = expanded === key; return ( - - { - if (!isExpanded) { - handleClick(key); - } else { - handleClick(""); - } - }} - className={isExpanded ? "expanded" : ""} + { + if (!isExpanded) { + handleClick(key); + } else { + handleClick(""); + } + }} + id={"key"} + title={} + sx={{ marginBottom: 15 }} + > + + Drives ({serverInfo.drives?.length}) + + - - - {isExpanded ? ( - - ) : ( - - )} - - - {isExpanded ? ( - - - Drives ({serverInfo.drives?.length}) - - - - {serverInfo.drives?.map((driveInfo, index) => { - return ( - - ); - })} - - - ) : null} - + {serverInfo.drives?.map((driveInfo, index) => { + return ( + + ); + })} + + ); })} - + ); }; diff --git a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/Utils.tsx b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/Utils.tsx index a24e1a9e6..6c93c54ba 100644 --- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/Utils.tsx +++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/Utils.tsx @@ -17,7 +17,7 @@ export const STATUS_COLORS = { RED: "#C83B51", GREEN: "#4CCB92", - YELLOW: "#E7A219", + YELLOW: "#FFBD62", }; export const getDriveStatusColor = ( @@ -25,24 +25,24 @@ export const getDriveStatusColor = ( totalDrives: number, ) => { if (activeDisks <= totalDrives / 2) { - return STATUS_COLORS.RED; + return "bad"; } if (totalDrives !== 2 && activeDisks === totalDrives / 2 + 1) { - return STATUS_COLORS.YELLOW; + return "warn"; } if (activeDisks === totalDrives) { - return STATUS_COLORS.GREEN; + return "good"; } }; export const serverStatusColor = (health_status: string) => { switch (health_status) { case "offline": - return STATUS_COLORS.RED; + return "bad"; case "online": - return STATUS_COLORS.GREEN; + return "good"; default: - return STATUS_COLORS.YELLOW; + return "warn"; } }; export const getNetworkStatusColor = ( @@ -50,12 +50,12 @@ export const getNetworkStatusColor = ( networkTotal: number, ) => { if (activeNetwork <= networkTotal / 2) { - return STATUS_COLORS.RED; + return "bad"; } if (activeNetwork === networkTotal / 2 + 1) { - return STATUS_COLORS.YELLOW; + return "warn"; } if (activeNetwork === networkTotal) { - return STATUS_COLORS.GREEN; + return "good"; } }; diff --git a/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx b/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx index f9b587562..b0425a579 100644 --- a/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx +++ b/portal-ui/src/screens/Console/Dashboard/CommonCard.tsx @@ -14,13 +14,11 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { Card, CardHeader } from "@mui/material"; -import { Link } from "react-router-dom"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import makeStyles from "@mui/styles/makeStyles"; import React, { Fragment } from "react"; +import styled from "styled-components"; +import get from "lodash/get"; +import { Box } from "mds"; +import { Link } from "react-router-dom"; import { widgetCommon } from "../Common/FormComponents/common/styleLibrary"; export interface ISubInterface { @@ -36,69 +34,48 @@ interface ICommonCard { moreLink?: string; rightComponent?: any; extraMargin?: boolean; - classes: any; } -const styles = (theme: Theme) => - createStyles({ - ...widgetCommon, - cardRoot: { - ...widgetCommon.singleValueContainer, - "&.MuiPaper-root": { - borderRadius: 10, - }, - }, - metricText: { - fontSize: 70, - lineHeight: 1.1, - color: "#07193E", +const CommonCardItem = styled.div(({ theme }) => ({ + ...widgetCommon(theme), + "& .metricText": { + fontSize: 70, + lineHeight: 1.1, + color: get(theme, "signalColors.main", "#07193E"), + fontWeight: "bold", + }, + "& .unitText": { + fontSize: 10, + color: get(theme, "mutedText", "#87888d"), + fontWeight: "normal", + }, + "& .subHeaderContainer": { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + }, + "& .subMessage": { + fontSize: 10, + color: get(theme, "mutedText", "#87888d"), + "&.bold": { fontWeight: "bold", }, - unitText: { - fontSize: 10, - color: "#767676", - fontWeight: "normal", - }, - subHearderContainer: { - display: "flex", - flexDirection: "row", - justifyContent: "space-between", - alignItems: "center", - }, - subMessage: { - fontSize: 10, - color: "#767676", - "&.bold": { - fontWeight: "bold", - }, - }, - headerContainer: { - display: "flex", - justifyContent: "space-between", - }, - viewAll: { - fontSize: 10, - color: "#C83B51", - textTransform: "capitalize", - - "& a, & a:hover, & a:visited, & a:active": { - color: "#C83B51", - }, - }, - extraMargin: { - margin: "10px 20px 10px 0", - }, - }); - -const cardSubStyles = makeStyles({ - root: { backgroundColor: "#fff", padding: 0 }, - title: { - ...widgetCommon.titleContainer, }, - content: { - maxWidth: "100%", + "& .headerContainer": { + display: "flex", + justifyContent: "space-between", }, -}); + "& .viewAll": { + fontSize: 10, + color: get(theme, "signalColors.danger", "#C83B51"), + textTransform: "capitalize", + + "& a, & a:hover, & a:visited, & a:active": { + color: get(theme, "signalColors.danger", "#C83B51"), + }, + }, +})); const CommonCard = ({ title, @@ -108,31 +85,29 @@ const CommonCard = ({ moreLink, rightComponent, extraMargin = false, - classes, }: ICommonCard) => { - const subStyles = cardSubStyles(); const SubHeader = () => { return ( -
-
+
+
- + {metricValue} - {metricUnit} + {metricUnit}
{subMessage && ( -
{subMessage.message} -
+ )}
-
{rightComponent}
+
{rightComponent}
); @@ -141,11 +116,11 @@ const CommonCard = ({ const Header = () => { return ( -
- {title} +
+ {title} {moreLink && ( - + View All @@ -157,29 +132,23 @@ const CommonCard = ({ return ( - {metricValue !== "" && ( - } - subheader={ - - - - } - classes={{ - root: subStyles.root, - title: subStyles.title, - content: subStyles.content, - }} - /> + +
+ + )} - + ); }; -export default withStyles(styles)(CommonCard); +export default CommonCard; diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx index 3673d6bac..045ebd18e 100644 --- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx +++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx @@ -15,32 +15,17 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; -import PrDashboard from "./Prometheus/PrDashboard"; -import Grid from "@mui/material/Grid"; -import { containerForHeader } from "../Common/FormComponents/common/styleLibrary"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; - +import { Grid, ProgressBar } from "mds"; +import { useSelector } from "react-redux"; import { AppState, useAppDispatch } from "../../../store"; import { getUsageAsync } from "./dashboardThunks"; -import { useSelector } from "react-redux"; -import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper"; import { selFeatures } from "../consoleSlice"; -import HelpMenu from "../HelpMenu"; import { setHelpName } from "../../../systemSlice"; -import { ProgressBar } from "mds"; +import PrDashboard from "./Prometheus/PrDashboard"; +import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper"; +import HelpMenu from "../HelpMenu"; -interface IDashboardSimple { - classes: any; -} - -const styles = (theme: Theme) => - createStyles({ - ...containerForHeader, - }); - -const Dashboard = ({ classes }: IDashboardSimple) => { +const Dashboard = () => { const dispatch = useAppDispatch(); const [loading, setLoading] = useState(true); @@ -73,7 +58,7 @@ const Dashboard = ({ classes }: IDashboardSimple) => { )} {loading ? ( - + @@ -84,4 +69,4 @@ const Dashboard = ({ classes }: IDashboardSimple) => { ); }; -export default withStyles(styles)(Dashboard); +export default Dashboard; diff --git a/portal-ui/src/screens/Console/Dashboard/DashboardItemBox.tsx b/portal-ui/src/screens/Console/Dashboard/DashboardItemBox.tsx index 97beaae33..316ceae80 100644 --- a/portal-ui/src/screens/Console/Dashboard/DashboardItemBox.tsx +++ b/portal-ui/src/screens/Console/Dashboard/DashboardItemBox.tsx @@ -15,24 +15,25 @@ // along with this program. If not, see . import React from "react"; -import { Box } from "@mui/material"; +import { Box, breakPoints } from "mds"; const DashboardItemBox = ({ children }: { children: any }) => { return ( diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx index e0c5bf035..033db0ae0 100644 --- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx +++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx @@ -16,21 +16,22 @@ import React, { Fragment, useState } from "react"; import { useSelector } from "react-redux"; -import Grid from "@mui/material/Grid"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { Box } from "@mui/material"; -import { actionsTray } from "../../Common/FormComponents/common/styleLibrary"; +import { + Box, + Button, + Grid, + HelpBox, + PageLayout, + ProgressBar, + PrometheusErrorIcon, + SyncIcon, + TabItemProps, + Tabs, +} from "mds"; import { IDashboardPanel } from "./types"; import { panelsConfiguration } from "./utils"; -import { TabPanel } from "../../../shared/tabs"; - -import TabSelector from "../../Common/TabSelector/TabSelector"; import { componentToUse } from "./widgetUtils"; -import ZoomWidget from "./ZoomWidget"; import { AppState, useAppDispatch } from "../../../../store"; -import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector"; import { DLayoutColumnProps, DLayoutRowProps, @@ -40,33 +41,20 @@ import { summaryPanelsLayout, trafficPanelsLayout, } from "./Widgets/LayoutUtil"; -import MergedWidgetsRenderer from "./Widgets/MergedWidgetsRenderer"; -import BasicDashboard from "../BasicDashboard/BasicDashboard"; -import { - Button, - HelpBox, - PageLayout, - ProgressBar, - PrometheusErrorIcon, - SyncIcon, -} from "mds"; -import { ITabOption } from "../../Common/TabSelector/types"; import { getUsageAsync } from "../dashboardThunks"; import { reloadWidgets } from "../dashboardSlice"; import { selFeatures } from "../../consoleSlice"; import { AdminInfoResponse } from "api/consoleApi"; +import ZoomWidget from "./ZoomWidget"; +import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector"; +import MergedWidgetsRenderer from "./Widgets/MergedWidgetsRenderer"; +import BasicDashboard from "../BasicDashboard/BasicDashboard"; interface IPrDashboard { - classes?: any; apiPrefix?: string; usage: AdminInfoResponse | null; } -const styles = (theme: Theme) => - createStyles({ - ...actionsTray, - }); - const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => { const dispatch = useAppDispatch(); const loadingUsage = useSelector( @@ -90,7 +78,9 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => { const [timeStart, setTimeStart] = useState(null); const [timeEnd, setTimeEnd] = useState(null); const panelInformation = panelsConfiguration; - const [curTab, setCurTab] = useState(0); + const [curTab, setCurTab] = useState( + usage?.advancedMetricsStatus === "not configured" ? "info" : "usage", + ); const getPanelDetails = (id: number) => { return panelInformation.find((panel) => panel.id === id); @@ -168,110 +158,79 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => { return renderPanelItems(resourcesPanelsLayoutAdvanced); }; - let tabs: ITabOption[]; - if (usage?.advancedMetricsStatus !== "not configured") { - tabs = [ - { label: "Usage" }, - { label: "Traffic" }, - { label: "Resources" }, - { label: "Info" }, - ]; - } else { - tabs = [ - { label: "Info" }, - { label: "Usage", disabled: true }, - { label: "Traffic", disabled: true }, - { label: "Resources", disabled: true }, - ]; - } + const prometheusOptionsDisabled = + usage?.advancedMetricsStatus === "not configured"; - return ( - - {zoomOpen && ( - - )} - - - { - setCurTab(newValue); - }} - tabOptions={tabs} - /> - - - - {curTab === - (usage?.advancedMetricsStatus === "not configured" ? 0 : 3) ? ( - + const searchBox = ( + + {curTab === "info" ? ( + + + + Server Information + + + + - { + dispatch(getUsageAsync()); }} - > - Server Information - - - - - -