From 42749b8c945205487cd806c5cd1bcaefb15754b4 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Mon, 27 Nov 2023 19:55:28 -0600 Subject: [PATCH] Upgrated operator pages to mds (#1893) - Pod & PVCs details pages migration - Main Component - Certificates component - Login Callback component - Strategy form update - Updated license page Signed-off-by: Benjamin Perez --- .../FormComponents/common/styleLibrary.ts | 132 ----- .../Common/TLSCertificate/TLSCertificate.tsx | 278 +++++----- web-app/src/screens/Console/Console.tsx | 183 +++---- .../src/screens/Console/License/License.tsx | 4 - .../screens/Console/License/LicensePlans.tsx | 510 +++++++++--------- .../TenantDetails/pods/PodDescribe.tsx | 193 ++++--- .../Tenants/TenantDetails/pods/PodDetails.tsx | 142 ++--- .../Tenants/TenantDetails/pods/PodLogs.tsx | 173 +++--- .../TenantDetails/pvcs/PVCDescribe.tsx | 104 ++-- .../TenantDetails/pvcs/TenantVolumes.tsx | 117 ++-- .../src/screens/LoginPage/LoginCallback.tsx | 176 +++--- web-app/src/screens/LoginPage/LoginPage.tsx | 317 +++-------- .../src/screens/LoginPage/StrategyForm.tsx | 101 ++-- 13 files changed, 961 insertions(+), 1469 deletions(-) diff --git a/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index 7a863ffdd8f..fd6cab52a78 100644 --- a/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -16,33 +16,6 @@ // This object contains variables that will be used across form components. -export const containerForHeader = { - container: { - position: "relative" as const, - padding: "20px 35px 0", - "& h6": { - color: "#777777", - fontSize: 30, - }, - "& p": { - "& span:not(*[class*='smallUnit'])": { - fontSize: 16, - }, - }, - }, - sectionTitle: { - margin: 0, - marginBottom: ".8rem", - fontSize: "1.3rem", - }, - boxy: { - border: "#E5E5E5 1px solid", - borderRadius: 2, - padding: 40, - backgroundColor: "#fff", - }, -}; - export const actionsTray = { label: { color: "#07193E", @@ -65,111 +38,6 @@ export const actionsTray = { }, }; -export const searchField = { - searchField: { - flexGrow: 1, - height: 38, - background: "#FFFFFF", - borderRadius: 3, - border: "#EAEDEE 1px solid", - display: "flex", - justifyContent: "center", - padding: "0 16px", - "& label, & label.MuiInputLabel-shrink": { - fontSize: 10, - transform: "translate(5px, 2px)", - transformOrigin: "top left", - }, - "& input": { - fontSize: 12, - fontWeight: 700, - color: "#000", - "&::placeholder": { - color: "#858585", - opacity: 1, - fontWeight: 400, - }, - }, - "&:hover": { - borderColor: "#000", - }, - "& .min-icon": { - width: 16, - height: 16, - }, - "&:focus-within": { - borderColor: "rgba(0, 0, 0, 0.87)", - }, - }, -}; - -export const snackBarCommon = { - snackBar: { - backgroundColor: "#081F44", - fontWeight: 400, - fontFamily: "Inter, sans-serif", - fontSize: 14, - boxShadow: "none" as const, - "&.MuiPaper-root.MuiSnackbarContent-root": { - borderRadius: "0px 0px 5px 5px", - }, - "& div": { - textAlign: "center" as const, - padding: "6px 30px", - width: "100%", - overflowX: "hidden", - textOverflow: "ellipsis", - }, - "&.MuiPaper-root": { - padding: "0px 20px 0px 20px", - }, - }, - errorSnackBar: { - backgroundColor: "#C72C48", - color: "#fff", - }, - snackBarExternal: { - top: -1, - height: 33, - position: "fixed" as const, - minWidth: 348, - whiteSpace: "nowrap" as const, - left: 0, - width: "100%", - justifyContent: "center" as const, - }, - snackDiv: { - top: "17px", - left: "50%", - position: "absolute" as const, - }, - snackBarModal: { - top: 0, - position: "absolute" as const, - minWidth: "348px", - whiteSpace: "nowrap" as const, - height: "33px", - width: "100%", - justifyContent: "center", - left: 0, - }, -}; - -export const spacingUtils: any = { - spacerRight: { - marginRight: ".9rem", - }, - spacerLeft: { - marginLeft: ".9rem", - }, - spacerBottom: { - marginBottom: ".9rem", - }, - spacerTop: { - marginTop: ".9rem", - }, -}; - export const modalStyleUtils: any = { modalButtonBar: { marginTop: 15, diff --git a/web-app/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx b/web-app/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx index 3cf338081bc..bf53c48dde6 100644 --- a/web-app/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx +++ b/web-app/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx @@ -15,111 +15,135 @@ // along with this program. If not, see . import React from "react"; +import { AlertCloseIcon, Box, CertificateIcon, IconButton } from "mds"; import { DateTime, Duration } from "luxon"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; +import styled from "styled-components"; +import get from "lodash/get"; import { ICertificateInfo } from "../../Tenants/types"; import LanguageIcon from "@mui/icons-material/Language"; -import Chip from "@mui/material/Chip"; -import { - Box, - Container, - Divider, - Grid, - List, - ListItem, - ListItemAvatar, - ListItemText, - Typography, -} from "@mui/material"; import EventBusyIcon from "@mui/icons-material/EventBusy"; import AccessTimeIcon from "@mui/icons-material/AccessTime"; -import { CertificateIcon } from "mds"; -const styles = (theme: Theme) => - createStyles({ - certificateIcon: { - float: "left", - paddingTop: "5px !important", - paddingRight: "10px !important", +const CertificateContainer = styled.div(({ theme }) => ({ + position: "relative", + margin: 0, + userSelect: "none", + appearance: "none", + maxWidth: "100%", + fontFamily: "'Inter', sans-serif", + fontSize: 13, + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + gap: 6, + border: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`, + borderRadius: 3, + padding: "5px 10px", + "& .certificateName": { + display: "flex", + alignItems: "center", + gap: 5, + fontWeight: "bold", + color: get(theme, "signalColors.main", "#07193E"), + }, + "& .deleteTagButton": { + backgroundColor: "transparent", + border: 0, + display: "flex", + alignItems: "center", + justifyContent: "center", + padding: 0, + cursor: "pointer", + opacity: 0.6, + "&:hover": { + opacity: 1, }, - certificateInfo: { float: "right" }, - certificateWrapper: { - height: "auto", - margin: 5, - border: "1px solid #E2E2E2", - userSelect: "text", - borderRadius: 4, - "& h6": { - fontWeight: "bold", - }, - "& div": { - padding: 0, - }, + "& svg": { + fill: get(theme, `tag.grey.background`, "#07193E"), + width: 10, + height: 10, + minWidth: 10, + minHeight: 10, + }, + }, + "& .certificateContainer": { + margin: "5px 10px", + }, + "& .certificateExpiry": { + color: get(theme, "secondaryText", "#5B5C5C"), + display: "flex", + alignItems: "center", + flexWrap: "wrap", + marginBottom: 5, + "& .label": { + fontWeight: "bold", }, - certificateExpiry: { - color: "#616161", + }, + "& .certificateDomains": { + color: get(theme, "secondaryText", "#5B5C5C"), + "& .label": { + fontWeight: "bold", + }, + }, + "& .certificatesList": { + border: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`, + borderRadius: 4, + color: get(theme, "secondaryText", "#5B5C5C"), + textTransform: "lowercase", + overflowY: "scroll", + maxHeight: 145, + marginTop: 3, + marginBottom: 5, + padding: 0, + "& li": { + listStyle: "none", + padding: "5px 10px", + margin: 0, display: "flex", alignItems: "center", - flexWrap: "wrap", - marginBottom: 5, - "& .label": { - fontWeight: "bold", + "&:before": { + content: "' '", }, }, - certificateDomains: { - color: "#616161", - "& .label": { - fontWeight: "bold", - }, + }, + "& .certificatesListItem": { + padding: "0px 16px", + borderBottom: `1px solid ${get(theme, "borderColor", "#E2E2E2")}`, + "& div": { + minWidth: 0, }, - certificatesList: { - border: "1px solid #E2E2E2", - borderRadius: 4, - color: "#616161", - textTransform: "lowercase", - overflowY: "scroll", - maxHeight: 145, - marginBottom: 10, + "& svg": { + fontSize: 12, + marginRight: 10, + opacity: 0.5, }, - certificatesListItem: { - padding: "0px 16px", - borderBottom: "1px solid #E2E2E2", - "& div": { - minWidth: 0, - }, - "& svg": { - fontSize: 12, - marginRight: 10, - opacity: 0.5, - }, - "& span": { - fontSize: 12, - }, + "& span": { + fontSize: 12, }, - certificateExpiring: { - color: "orange", - "& .label": { - fontWeight: "bold", - }, + }, + "& .certificateExpiring": { + color: get(theme, "signalColors.warning", "#FFBD62"), + "& .label": { + fontWeight: "bold", }, - certificateExpired: { - color: "red", - "& .label": { - fontWeight: "bold", - }, + }, + "& .certificateExpired": { + color: get(theme, "signalColors.danger", "#C51B3F"), + "& .label": { + fontWeight: "bold", }, - }); + }, + "& .closeIcon": { + transform: "scale(0.8)", + }, +})); interface ITLSCertificate { - classes: any; certificateInfo: ICertificateInfo; onDelete: any; } const TLSCertificate = ({ - classes, certificateInfo, onDelete = () => {}, }: ITLSCertificate) => { @@ -139,10 +163,10 @@ const TLSCertificate = ({ .shiftTo("days") .toHuman({ listStyle: "long", maximumFractionDigits: 0 }); if (daysToExpiry >= 10 && daysToExpiry < 30) { - certificateExpiration = classes.certificateExpiring; + certificateExpiration = "certificateExpiring"; } if (daysToExpiry < 10) { - certificateExpiration = classes.certificateExpired; + certificateExpiration = "certificateExpired"; if (daysToExpiry < 2) { daysToExpiryHuman = durationToExpiry .minus(Duration.fromObject({ minutes: 1 })) @@ -156,56 +180,44 @@ const TLSCertificate = ({ } return ( - - - - - - - {certificateInfo.name} - - - -   - Expiry:  - {expiry.toFormat("yyyy/MM/dd")} - - - -   - Expires in:  - {daysToExpiryHuman} - - -
- - {`${certificates.length} Domain (s):`} - - - {certificates.map((dom, index) => ( - - - - - - - ))} - - - - } - onDelete={onDelete} - /> + + + + + {certificateInfo.name} + + + + +   + Expiry:  + {expiry.toFormat("yyyy/MM/dd")} + + + +   + Expires in:  + {daysToExpiryHuman} + +
+ + {`${certificates.length} Domain (s):`} + +
    + {certificates.map((dom, index) => ( +
  • + + {dom} +
    • + ))} +
+ + + + + + ); }; -export default withStyles(styles)(TLSCertificate); +export default TLSCertificate; diff --git a/web-app/src/screens/Console/Console.tsx b/web-app/src/screens/Console/Console.tsx index 83bb036ba80..3b98cfa7239 100644 --- a/web-app/src/screens/Console/Console.tsx +++ b/web-app/src/screens/Console/Console.tsx @@ -21,18 +21,11 @@ import React, { useLayoutEffect, useState, } from "react"; -import { Theme } from "@mui/material/styles"; -import { MainContainer } from "mds"; +import { MainContainer, ProgressBar, Snackbar } from "mds"; import debounce from "lodash/debounce"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { LinearProgress } from "@mui/material"; -import CssBaseline from "@mui/material/CssBaseline"; -import Snackbar from "@mui/material/Snackbar"; import { Navigate, Route, Routes, useLocation } from "react-router-dom"; import { useSelector } from "react-redux"; import { AppState, useAppDispatch } from "../../store"; -import { snackBarCommon } from "./Common/FormComponents/common/styleLibrary"; import AppMenu from "./Menu/AppMenu"; import MainError from "./Common/MainError/MainError"; import { @@ -68,46 +61,7 @@ const AddPool = React.lazy( () => import("./Tenants/TenantDetails/Pools/AddPool/AddPool"), ); -const styles = (theme: Theme) => - createStyles({ - root: { - display: "flex", - "& .MuiPaper-root.MuiSnackbarContent-root": { - borderRadius: "0px 0px 5px 5px", - boxShadow: "none", - }, - }, - content: { - flexGrow: 1, - height: "100vh", - overflow: "auto", - position: "relative", - }, - warningBar: { - background: theme.palette.primary.main, - color: "white", - heigh: "60px", - widht: "100%", - lineHeight: "60px", - display: "flex", - justifyContent: "center", - alignItems: "center", - "& button": { - marginLeft: 8, - }, - }, - progress: { - height: "3px", - backgroundColor: "#eaeaea", - }, - ...snackBarCommon, - }); - -interface IConsoleProps { - classes: any; -} - -const Console = ({ classes }: IConsoleProps) => { +const Console = () => { const dispatch = useAppDispatch(); const { pathname = "" } = useLocation(); const open = useSelector((state: AppState) => state.system.sidebarOpen); @@ -188,9 +142,7 @@ const Console = ({ classes }: IConsoleProps) => { }, ]; - let routes = operatorConsoleRoutes; - - const allowedRoutes = routes.filter((route: any) => + const allowedRoutes = operatorConsoleRoutes.filter((route: any) => obOnly ? route.path.includes("buckets") : (route.forceDisplay || @@ -231,84 +183,69 @@ const Console = ({ classes }: IConsoleProps) => { return ( : }> {session && session.status === "ok" ? ( -
- - -
- {loadingProgress < 100 && ( - - )} - -
- { - closeSnackBar(); - }} - autoHideDuration={ - snackBarMessage.type === "error" ? 10000 : 5000 - } - message={snackBarMessage.message} - className={classes.snackBarExternal} - ContentProps={{ - className: `${classes.snackBar} ${ - snackBarMessage.type === "error" - ? classes.errorSnackBar - : "" - }`, - }} - /> -
+ + {loadingProgress < 100 && ( + + )} + + - - {allowedRoutes.map((route: any) => ( - }> - - - } - /> - ))} + + {allowedRoutes.map((route: any) => ( }> - + } /> - }> - - - } - /> - - {allowedRoutes.length > 0 ? ( - - ) : ( - - )} - - } - /> - -
-
+ ))} + }> + + + } + /> + }> + + + } + /> + + {allowedRoutes.length > 0 ? ( + + ) : ( + + )} + + } + /> + + ) : ( )} @@ -316,4 +253,4 @@ const Console = ({ classes }: IConsoleProps) => { ); }; -export default withStyles(styles)(Console); +export default Console; diff --git a/web-app/src/screens/Console/License/License.tsx b/web-app/src/screens/Console/License/License.tsx index e57a5329391..b927bd309bf 100644 --- a/web-app/src/screens/Console/License/License.tsx +++ b/web-app/src/screens/Console/License/License.tsx @@ -16,11 +16,9 @@ import React, { Fragment, useCallback, useEffect, useState } from "react"; import { ArrowIcon, Button, PageLayout, ProgressBar, Grid } from "mds"; -import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; import { SubnetInfo } from "./types"; -import { selOpMode } from "../../../systemSlice"; import { getLicenseConsent } from "./utils"; import LicensePlans from "./LicensePlans"; import RegistrationStatusBanner from "../Support/RegistrationStatusBanner"; @@ -34,7 +32,6 @@ const LicenseConsentModal = withSuspense( const License = () => { const navigate = useNavigate(); - const operatorMode = useSelector(selOpMode); const [activateProductModal, setActivateProductModal] = useState(false); @@ -151,7 +148,6 @@ const License = () => { activateProductModal={activateProductModal} closeModalAndFetchLicenseInfo={closeModalAndFetchLicenseInfo} licenseInfo={licenseInfo} - operatorMode={operatorMode} currentPlanID={currentPlanID} setActivateProductModal={setActivateProductModal} /> diff --git a/web-app/src/screens/Console/License/LicensePlans.tsx b/web-app/src/screens/Console/License/LicensePlans.tsx index e405878c434..450b2e7d1c6 100644 --- a/web-app/src/screens/Console/License/LicensePlans.tsx +++ b/web-app/src/screens/Console/License/LicensePlans.tsx @@ -15,6 +15,7 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; +import clsx from "clsx"; import { AGPLV3Logo, Box, @@ -35,17 +36,263 @@ import { PAID_PLANS, STANDARD_PLAN_FEATURES, } from "./utils"; -import clsx from "clsx"; +import styled from "styled-components"; +import get from "lodash/get"; interface IRegisterStatus { activateProductModal: any; closeModalAndFetchLicenseInfo: any; licenseInfo: SubnetInfo | undefined; - operatorMode: boolean; currentPlanID: number; setActivateProductModal: any; } +const PlanListContainer = styled.div(({ theme }) => ({ + display: "grid", + + margin: "0 1.5rem 0 1.5rem", + + gridTemplateColumns: "1fr 1fr 1fr 1fr", + + [`@media (max-width: ${breakPoints.sm}px)`]: { + gridTemplateColumns: "1fr 1fr 1fr", + }, + + "&.paid-plans-only": { + display: "grid", + gridTemplateColumns: "1fr 1fr 1fr", + }, + + "& .features-col": { + flex: 1, + minWidth: "260px", + + "@media (max-width: 600px)": { + display: "none", + }, + }, + + "& .xs-only": { + display: "none", + }, + + "& .button-box": { + display: "flex", + alignItems: "center", + justifyContent: "center", + padding: "5px 0px 25px 0px", + borderLeft: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + }, + "& .plan-header": { + height: "99px", + borderBottom: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + }, + "& .feature-title": { + height: "25px", + paddingLeft: "26px", + fontSize: "14px", + + background: get(theme, "signalColors.disabled", "#E5E5E5"), + color: get(theme, "signalColors.main", "#07193E"), + + "@media (max-width: 600px)": { + "& .feature-title-info .xs-only": { + display: "block", + }, + }, + }, + "& .feature-name": { + minHeight: "60px", + padding: "5px", + borderBottom: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + display: "flex", + alignItems: "center", + paddingLeft: "26px", + fontSize: "14px", + }, + "& .feature-item": { + display: "flex", + flexFlow: "column", + alignItems: "center", + justifyContent: "center", + minHeight: "60px", + padding: "0 15px 0 15px", + borderBottom: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + borderLeft: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + fontSize: "14px", + "& .link-text": { + color: "#2781B0", + cursor: "pointer", + textDecoration: "underline", + }, + + "&.icon-yes": { + width: "15px", + height: "15px", + }, + }, + + "& .feature-item-info": { + flex: 1, + display: "flex", + flexFlow: "column", + alignItems: "center", + justifyContent: "space-around", + textAlign: "center", + + "@media (max-width: 600px)": { + justifyContent: "space-evenly", + width: "100%", + "& .xs-only": { + display: "block", + }, + "& .plan-feature": { + textAlign: "center", + paddingRight: "10px", + }, + }, + }, + + "& .plan-col": { + minWidth: "260px", + flex: 1, + }, + + "& .active-plan-col": { + background: `${get( + theme, + "boxBackground", + "#FDFDFD", + )} 0% 0% no-repeat padding-box`, + boxShadow: " 0px 3px 20px #00000038", + + "& .plan-header": { + backgroundColor: get(theme, "signalColors.info", "#2781B0"), + }, + + "& .feature-title": { + background: get(theme, "signalColors.disabled", "#E5E5E5"), + color: get(theme, "fontColor", "#000"), + }, + }, +})); + +const PlanHeaderContainer = styled.div(({ theme }) => ({ + display: "flex", + alignItems: "flex-start", + justifyContent: "center", + flexFlow: "column", + borderLeft: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + borderBottom: "0px !important", + "& .plan-header": { + display: "flex", + alignItems: "center", + justifyContent: "center", + flexFlow: "column", + }, + + "& .title-block": { + display: "flex", + alignItems: "center", + flexFlow: "column", + width: "100%", + "& .title-main": { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: 1, + }, + "& .iconContainer": { + "& .min-icon": { + minWidth: 140, + width: "100%", + maxHeight: 55, + height: "100%", + }, + }, + }, + + "& .open-source": { + fontSize: "14px", + display: "flex", + marginBottom: "5px", + alignItems: "center", + "& .min-icon": { + marginRight: "8px", + height: "12px", + width: "12px", + }, + }, + + "& .cur-plan-text": { + fontSize: "12px", + textTransform: "uppercase", + }, + + "@media (max-width: 600px)": { + cursor: "pointer", + "& .title-block": { + "& .title": { + fontSize: "14px", + fontWeight: 600, + }, + }, + }, + + "&.active, &.active.xs-active": { + color: "#ffffff", + position: "relative", + + "& .min-icon": { + fill: "#ffffff", + }, + + "&:before": { + content: "' '", + position: "absolute", + width: "100%", + height: "18px", + backgroundColor: get(theme, "signalColors.info", "#2781B0"), + display: "block", + top: -16, + }, + "& .iconContainer": { + "& .min-icon": { + marginTop: "-12px", + }, + }, + }, + "&.active": { + backgroundColor: get(theme, "signalColors.info", "#2781B0"), + color: "#ffffff", + }, + "&.xs-active": { + background: "#eaeaea", + }, +})); + +const ListContainer = styled.div(({ theme }) => ({ + border: `1px solid ${get(theme, "borderColor", "#EAEAEA")}`, + borderTop: "0px", + marginBottom: "45px", + "&::-webkit-scrollbar": { + width: "5px", + height: "5px", + }, + "&::-webkit-scrollbar-track": { + background: "#F0F0F0", + borderRadius: 0, + boxShadow: "inset 0px 0px 0px 0px #F0F0F0", + }, + "&::-webkit-scrollbar-thumb": { + background: "#777474", + borderRadius: 0, + }, + "&::-webkit-scrollbar-thumb:hover": { + background: "#5A6375", + }, +})); + const PlanHeader = ({ isActive, isXsViewActive, @@ -62,7 +309,7 @@ const PlanHeader = ({ }) => { const plan = title.toLowerCase(); return ( - { onClick && onClick(plan); }} - sx={{ - display: "flex", - alignItems: "flex-start", - justifyContent: "center", - flexFlow: "column", - borderLeft: "1px solid #eaeaea", - borderBottom: "0px !important", - "& .plan-header": { - display: "flex", - alignItems: "center", - justifyContent: "center", - flexFlow: "column", - }, - - "& .title-block": { - display: "flex", - alignItems: "center", - flexFlow: "column", - width: "100%", - "& .title-main": { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: 1, - }, - "& .iconContainer": { - "& .min-icon": { - minWidth: 140, - width: "100%", - maxHeight: 55, - height: "100%", - }, - }, - }, - - "& .open-source": { - fontSize: "14px", - display: "flex", - marginBottom: "5px", - alignItems: "center", - "& .min-icon": { - marginRight: "8px", - height: "12px", - width: "12px", - }, - }, - - "& .cur-plan-text": { - fontSize: "12px", - textTransform: "uppercase", - }, - - "@media (max-width: 600px)": { - cursor: "pointer", - "& .title-block": { - "& .title": { - fontSize: "14px", - fontWeight: 600, - }, - }, - }, - - "&.active, &.active.xs-active": { - color: "#ffffff", - position: "relative", - - "& .min-icon": { - fill: "#ffffff", - }, - - "&:before": { - content: "' '", - position: "absolute", - width: "100%", - height: "18px", - backgroundColor: "#2781B0", - display: "block", - top: -16, - }, - "& .iconContainer": { - "& .min-icon": { - marginTop: "-12px", - }, - }, - }, - "&.active": { - background: "#2781B0", - color: "#ffffff", - }, - "&.xs-active": { - background: "#eaeaea", - }, - }} > {children} - + ); }; @@ -204,7 +358,7 @@ const PricingFeatureItem = (props: { ); }; -const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => { +const LicensePlans = ({ licenseInfo }: IRegisterStatus) => { const [isSmallScreen, setIsSmallScreen] = useState( window.innerWidth >= breakPoints.sm, ); @@ -323,10 +477,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => { onClick={(e) => { e.preventDefault(); - window.open( - `${linkToNav}?ref=${operatorMode ? "op" : "con"}`, - "_blank", - ); + window.open(`${linkToNav}?ref=op`, "_blank"); }} label={btnText} /> @@ -348,29 +499,7 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => { const featureList = FEATURE_ITEMS; return ( - + { borderBottom: "8px solid rgb(6 48 83)", }} /> - + {featureList.map((fi) => { const featureTitleRow = fi.featureTitleRow; @@ -736,8 +740,8 @@ const LicensePlans = ({ licenseInfo, operatorMode }: IRegisterStatus) => { )} - - + + ); }; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx index 5a0a247713b..6957b1202fe 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDescribe.tsx @@ -14,19 +14,21 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState } from "react"; -import { Box, breakPoints, ValuePair } from "mds"; -import Grid from "@mui/material/Grid"; -import Chip from "@mui/material/Chip"; -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; -import TableCell from "@mui/material/TableCell"; -import TableHead from "@mui/material/TableHead"; -import TableRow from "@mui/material/TableRow"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; -import TableContainer from "@mui/material/TableContainer"; -import Paper from "@mui/material/Paper"; +import React, { Fragment, useEffect, useState } from "react"; +import { + Box, + breakPoints, + Grid, + SectionTitle, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Tabs, + Tag, + ValuePair, +} from "mds"; import { ErrorResponseHandler } from "../../../../../common/types"; import api from "../../../../../common/api"; import { useSelector } from "react-redux"; @@ -169,15 +171,9 @@ const twoColCssGridLayoutConfig = { const HeaderSection = ({ title }: { title: string }) => { return ( - -

{title}

- + + {title} + ); }; @@ -209,8 +205,9 @@ const PodDescribeAnnotations = ({ {annotations.map((annotation, index) => ( - @@ -228,8 +225,9 @@ const PodDescribeLabels = ({ labels }: IPodDescribeLabelsProps) => { {labels.map((label, index) => ( - @@ -304,33 +302,31 @@ const PodDescribeTable = ({ columnsLabels, }: IPodDescribeTableProps) => { return ( - + - - - - - {columnsLabels.map((label, index) => ( - {label} - ))} - - - - {items.map((item, i) => { - return ( - - {columns.map((column, j) => ( - {item[column]} - ))} - - ); - })} - -
- + + + + {columnsLabels.map((label, index) => ( + {label} + ))} + + + + {items.map((item, i) => { + return ( + + {columns.map((column, j) => ( + {item[column]} + ))} + + ); + })} + +
- + ); }; @@ -398,7 +394,7 @@ const PodDescribe = ({ const [describeInfo, setDescribeInfo] = useState(); const [loading, setLoading] = useState(true); - const [curTab, setCurTab] = useState(0); + const [curTab, setCurTab] = useState("pod-describe-summary"); useEffect(() => { if (propLoading) { @@ -443,50 +439,71 @@ const PodDescribe = ({ return res; }; - const renderTabComponent = (index: number, info: DescribeResponse) => { - switch (index) { - case 0: - return ; - case 1: - return ; - case 2: - return ; - case 3: - return ; - case 4: - return ; - case 5: - return ; - case 6: - return ; - default: - break; - } - }; return ( {describeInfo && ( , newValue: number) => { + currentTabOrPath={curTab} + onTabClick={(newValue) => { setCurTab(newValue); }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - variant="scrollable" - scrollButtons="auto" - > - - - - - - - - - {renderTabComponent(curTab, describeInfo)} + horizontal + options={[ + { + tabConfig: { id: "pod-describe-summary", label: "Summary" }, + content: , + }, + { + tabConfig: { + id: "pod-describe-annotations", + label: "Annotations", + }, + content: ( + + ), + }, + { + tabConfig: { id: "pod-describe-labels", label: "Labels" }, + content: , + }, + { + tabConfig: { + id: "pod-describe-conditions", + label: "Conditions", + }, + content: ( + + ), + }, + { + tabConfig: { + id: "pod-describe-tolerations", + label: "Tolerations", + }, + content: ( + + ), + }, + { + tabConfig: { id: "pod-describe-volumes", label: "Volumes" }, + content: , + }, + { + tabConfig: { + id: "pod-describe-containers", + label: "Containers", + }, + content: ( + + ), + }, + ]} + /> )} diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx index aa4ea09f6bd..618734427b1 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx @@ -15,45 +15,19 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; -import { Theme } from "@mui/material/styles"; +import { SectionTitle, Tabs } from "mds"; import { Link, useParams } from "react-router-dom"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary"; -import Grid from "@mui/material/Grid"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; import PodLogs from "./PodLogs"; import PodEvents from "./PodEvents"; import PodDescribe from "./PodDescribe"; -interface IPodDetailsProps { - classes: any; -} - -const styles = (theme: Theme) => - createStyles({ - breadcrumLink: { - textDecoration: "none", - color: "black", - }, - ...containerForHeader, - }); - -const PodDetails = ({ classes }: IPodDetailsProps) => { +const PodDetails = () => { const { tenantNamespace, tenantName, podName } = useParams(); - const [curTab, setCurTab] = useState(0); + const [curTab, setCurTab] = useState("events-tab"); const [loading, setLoading] = useState(true); - function a11yProps(index: any) { - return { - id: `simple-tab-${index}`, - "aria-controls": `simple-tabpanel-${index}`, - }; - } - useEffect(() => { if (loading) { setLoading(false); @@ -62,64 +36,60 @@ const PodDetails = ({ classes }: IPodDetailsProps) => { return ( - -

- - Pods - {" "} - > {podName} -

- - - - , newValue: number) => { - setCurTab(newValue); - }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - variant="scrollable" - scrollButtons="auto" - > - - - - - - {curTab === 0 && ( - - )} - {curTab === 1 && ( - - )} - {curTab === 2 && ( - - )} - + + + Pods + {" "} + > {podName} + + + ), + }, + { + tabConfig: { id: "describe-tab", label: "Describe" }, + content: ( + + ), + }, + { + tabConfig: { id: "logs-tab", label: "Logs" }, + content: ( + + ), + }, + ]} + currentTabOrPath={curTab} + onTabClick={(tab) => { + setCurTab(tab); + }} + horizontal + /> ); }; -export default withStyles(styles)(PodDetails); +export default PodDetails; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx index c29f8ec8c72..7dd1d7dc381 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx @@ -14,76 +14,43 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState } from "react"; +import React, { Fragment, useEffect, useState } from "react"; +import { Box, Grid } from "mds"; import { useSelector } from "react-redux"; -import { Theme } from "@mui/material/styles"; import { AutoSizer, CellMeasurer, CellMeasurerCache, List, } from "react-virtualized"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { TextField } from "@mui/material"; -import Grid from "@mui/material/Grid"; -import Paper from "@mui/material/Paper"; -import InputAdornment from "@mui/material/InputAdornment"; -import api from "../../../../../common/api"; -import { SearchIcon } from "mds"; -import { - actionsTray, - containerForHeader, - searchField, -} from "../../../Common/FormComponents/common/styleLibrary"; +import styled from "styled-components"; +import get from "lodash/get"; import { ErrorResponseHandler } from "../../../../../common/types"; import { AppState, useAppDispatch } from "../../../../../store"; import { setErrorSnackMessage } from "../../../../../systemSlice"; +import SearchBox from "../../../Common/SearchBox"; +import api from "../../../../../common/api"; interface IPodLogsProps { - classes: any; tenant: string; namespace: string; podName: string; propLoading: boolean; } -const styles = (theme: Theme) => - createStyles({ - logList: { - background: "#fff", - minHeight: 400, - height: "calc(100vh - 304px)", - overflow: "auto", - fontSize: 13, - padding: "25px 45px 0", - border: "1px solid #EAEDEE", - borderRadius: 4, - }, - - ...searchField, - actionsTray: { - ...actionsTray.actionsTray, - padding: "15px 0 0", +const LogsItem = styled.div(({ theme }) => ({ + "& .highlighted": { + "& span": { + backgroundColor: get(theme, "signalColors.warning", "#FFBD62"), }, - logerror_tab: { - color: "#A52A2A", - paddingLeft: 25, - }, - ansidefault: { - color: "#000", - lineHeight: "16px", - }, - highlight: { - "& span": { - backgroundColor: "#082F5238", - }, - }, - ...containerForHeader, - }); + }, + "& .ansidefault": { + color: get(theme, "fontColor", "#000"), + lineHeight: "16px", + }, +})); const PodLogs = ({ - classes, tenant, namespace, podName, @@ -138,22 +105,22 @@ const PodLogs = ({ // if starts with multiple spaces add padding if (substr.startsWith(" ")) { return ( -
- {substr} -
+ {substr} + ); } else { // for all remaining set default class return ( -
- {substr} -
+ {substr} + ); } }; @@ -198,54 +165,62 @@ const PodLogs = ({ } return ( - - - + + { - setHighlight(val.target.value); - }} - InputProps={{ - disableUnderline: true, - startAdornment: ( - - - - ), + onChange={(value) => { + setHighlight(value); }} - variant="standard" /> -
- - - -
- {logLines.length >= 1 && ( - // @ts-ignore - - {({ width, height }) => ( - // @ts-ignore - cache.rowHeight(item)} - overscanRowCount={15} - rowCount={logLines.length} - rowRenderer={cellRenderer} - width={width} - height={height} - /> - )} - - )} -
- + + {logLines.length >= 1 && ( + // @ts-ignore + + {({ width, height }) => ( + // @ts-ignore + cache.rowHeight(item)} + overscanRowCount={15} + rowCount={logLines.length} + rowRenderer={cellRenderer} + width={width} + height={height} + /> + )} + + )} + - + ); }; -export default withStyles(styles)(PodLogs); +export default PodLogs; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx index f2e5ea1c9c9..79ee4f0e3a6 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx @@ -15,24 +15,10 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; -import { connect } from "react-redux"; -import { Box, breakPoints, ValuePair } from "mds"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { - actionsTray, - searchField, -} from "../../../Common/FormComponents/common/styleLibrary"; -import Grid from "@mui/material/Grid"; -import Chip from "@mui/material/Chip"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; - +import { Box, breakPoints, Tabs, Tag, ValuePair } from "mds"; import { setErrorSnackMessage } from "../../../../../systemSlice"; import { ErrorResponseHandler } from "../../../../../common/types"; -import api from "../../../../../common/api"; -import { AppState, useAppDispatch } from "../../../../../store"; +import { useAppDispatch } from "../../../../../store"; import { DescribeResponse, IPVCDescribeAnnotationsProps, @@ -40,13 +26,7 @@ import { IPVCDescribeProps, IPVCDescribeSummaryProps, } from "./pvcTypes"; - -const styles = (theme: Theme) => - createStyles({ - ...actionsTray, - - ...searchField, - }); +import api from "../../../../../common/api"; const twoColCssGridLayoutConfig = { display: "grid", @@ -113,8 +93,9 @@ const PVCDescribeAnnotations = ({ {annotations.map((annotation, index) => ( - @@ -132,8 +113,9 @@ const PVCDescribeLabels = ({ labels }: IPVCDescribeLabelsProps) => { {labels.map((label, index) => ( - @@ -152,7 +134,7 @@ const PVCDescribe = ({ }: IPVCDescribeProps) => { const [describeInfo, setDescribeInfo] = useState(); const [loading, setLoading] = useState(true); - const [curTab, setCurTab] = useState(0); + const [curTab, setCurTab] = useState("pvc-describe-summary"); const dispatch = useAppDispatch(); useEffect(() => { @@ -179,48 +161,40 @@ const PVCDescribe = ({ } }, [loading, pvcName, namespace, tenant, dispatch]); - const renderTabComponent = (index: number, info: DescribeResponse) => { - switch (index) { - case 0: - return ; - case 1: - return ; - case 2: - return ; - default: - break; - } - }; return ( {describeInfo && ( - - , newValue: number) => { - setCurTab(newValue); - }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - variant="scrollable" - scrollButtons="auto" - > - - - - - {renderTabComponent(curTab, describeInfo)} - + { + setCurTab(newValue); + }} + options={[ + { + tabConfig: { id: "pvc-describe-summary", label: "Summary" }, + content: , + }, + { + tabConfig: { + id: "pvc-describe-annotations", + label: "Annotations", + }, + content: ( + + ), + }, + { + tabConfig: { id: "pvc-describe-labels", label: "Labels" }, + content: , + }, + ]} + horizontal + /> )} ); }; -const mapState = (state: AppState) => ({ - loadingTenant: state.tenants.loadingTenant, -}); -const connector = connect(mapState, { - setErrorSnackMessage, -}); -export default withStyles(styles)(connector(PVCDescribe)); +export default PVCDescribe; diff --git a/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx b/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx index 3f3aa51804c..13800806c91 100644 --- a/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx +++ b/web-app/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx @@ -15,43 +15,22 @@ // along with this program. If not, see . import React, { Fragment, useEffect, useState } from "react"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import withStyles from "@mui/styles/withStyles"; -import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary"; -import Grid from "@mui/material/Grid"; -import Tabs from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; +import { Tabs, SectionTitle } from "mds"; import { Link, useParams } from "react-router-dom"; - -import api from "../../../../../common/api"; +import { setErrorSnackMessage } from "../../../../../systemSlice"; +import { useAppDispatch } from "../../../../../store"; import { IEvent } from "../../ListTenants/types"; import { niceDays } from "../../../../../common/utils"; import { ErrorResponseHandler } from "../../../../../common/types"; import EventsList from "../events/EventsList"; import PVCDescribe from "./PVCDescribe"; +import api from "../../../../../common/api"; -import { setErrorSnackMessage } from "../../../../../systemSlice"; -import { useAppDispatch } from "../../../../../store"; - -interface IPVCDetailsProps { - classes: any; -} - -const styles = (theme: Theme) => - createStyles({ - breadcrumLink: { - textDecoration: "none", - color: "black", - }, - ...containerForHeader, - }); - -const TenantVolumes = ({ classes }: IPVCDetailsProps) => { +const TenantVolumes = () => { const dispatch = useAppDispatch(); const { tenantName, PVCName, tenantNamespace } = useParams(); - const [curTab, setCurTab] = useState(0); + const [curTab, setCurTab] = useState("events-tab"); const [loading, setLoading] = useState(true); const [events, setEvents] = useState([]); @@ -80,51 +59,47 @@ const TenantVolumes = ({ classes }: IPVCDetailsProps) => { return ( - -

- - PVCs - {" "} - > {PVCName} -

- - - - , newValue: number) => { - setCurTab(newValue); - }} - indicatorColor="primary" - textColor="primary" - aria-label="cluster-tabs" - variant="scrollable" - scrollButtons="auto" - > - - - - - {curTab === 0 && ( - -

Events

- - - )} - {curTab === 1 && ( - - )} - + + + PVCs + {" "} + > {PVCName} + + + + Events + + + + ), + }, + { + tabConfig: { id: "describe-tab", label: "Describe" }, + content: ( + + ), + }, + ]} + currentTabOrPath={curTab} + onTabClick={(tab) => { + setCurTab(tab); + }} + horizontal + /> ); }; -export default withStyles(styles)(TenantVolumes); +export default TenantVolumes; diff --git a/web-app/src/screens/LoginPage/LoginCallback.tsx b/web-app/src/screens/LoginPage/LoginCallback.tsx index 3b1e1511876..ec69ec4f753 100644 --- a/web-app/src/screens/LoginPage/LoginCallback.tsx +++ b/web-app/src/screens/LoginPage/LoginCallback.tsx @@ -14,97 +14,51 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState } from "react"; // eslint-disable-line @typescript-eslint/no-unused-vars +import React, { Fragment, useEffect, useState } from "react"; +import { Box, Button, LoginWrapper, WarnIcon } from "mds"; +import styled from "styled-components"; +import get from "lodash/get"; import { useNavigate } from "react-router-dom"; import api from "../../common/api"; -import withStyles from "@mui/styles/withStyles"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; import { baseUrl } from "../../history"; -import { Paper } from "@mui/material"; -import Grid from "@mui/material/Grid"; -import Typography from "@mui/material/Typography"; -import { Button } from "mds"; -import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; +import { getLogoVar } from "../../config"; -const styles = (theme: Theme) => - createStyles({ - paper: { - borderRadius: 8, - display: "flex", - flexDirection: "column", - alignItems: "center", - width: 800, - height: 424, - margin: "auto", - position: "absolute", - top: "50%", - left: "50%", - marginLeft: -400, - marginTop: -212, - "&.MuiPaper-root": { - borderRadius: 8, - }, +const CallBackContainer = styled.div(({ theme }) => ({ + "& .errorDescription": { + fontStyle: "italic", + transition: "all .2s ease-in-out", + padding: "0 15px", + marginTop: 5, + overflow: "auto", + }, + "& .errorLabel": { + color: get(theme, "fontColor", "#000"), + fontSize: 18, + fontWeight: "bold", + marginLeft: 5, + }, + "& .simpleError": { + marginTop: 5, + padding: "2px 5px", + fontSize: 16, + color: get(theme, "fontColor", "#000"), + }, + "& .messageIcon": { + color: get(theme, "signalColors.danger", "#C72C48"), + display: "flex", + "& svg": { + width: 32, + height: 32, }, - mainContainer: { - position: "relative", - height: 424, - }, - theOcean: { - borderTopLeftRadius: 8, - borderBottomLeftRadius: 8, - background: - "transparent linear-gradient(to bottom, #073052 0%,#05122b 100%); 0% 0% no-repeat padding-box;", - }, - oceanBg: { - backgroundImage: "url(/images/BG_Illustration.svg)", - backgroundRepeat: "no-repeat", - backgroundPosition: "bottom left", - height: "100%", - width: 324, - }, - theLogin: { - padding: "40px 45px 20px 45px", - }, - extraDetailsContainer: { - fontStyle: "italic", - color: "#9C9C9C", - transition: "all .2s ease-in-out", - padding: "0 5px", - marginTop: 5, - overflow: "auto", - }, - errorLabel: { - color: "#000", - fontSize: 18, - fontWeight: 500, - marginLeft: 5, - }, - simpleError: { - marginTop: 5, - padding: "2px 5px", - fontSize: 16, - color: "#000", - }, - messageIcon: { - color: "#C72C48", - display: "flex", - "& svg": { - width: 32, - height: 32, - }, - }, - errorTitle: { - display: "flex", - alignItems: "center", - }, - }); + }, + "& .errorTitle": { + display: "flex", + alignItems: "center", + borderBottom: 15, + }, +})); -interface ILoginCallBackProps { - classes: any; -} - -const LoginCallback = ({ classes }: ILoginCallBackProps) => { +const LoginCallback = () => { const navigate = useNavigate(); const [error, setError] = useState(""); @@ -151,28 +105,19 @@ const LoginCallback = ({ classes }: ILoginCallBackProps) => { } }, [loading, navigate]); return error !== "" || errorDescription !== "" ? ( - - - - -
- - -
- - + + +
+ + - Error from IDP + Error from IDP
-
{error}
- - {errorDescription} - +
{error}
+ {errorDescription} - - - - + + } + promoHeader={Multi-Cloud Object Store} + promoInfo={ + + MinIO's high-performance, Kubernetes-native object store is licensed + under GNU AGPL v3 and is available on every cloud - public, private + and edge. For more information on the terms of the license or to + learn more about commercial licensing options visit the{" "} + pricing page. + + } + backgroundAnimation={false} + /> + ) : null; }; -export default withStyles(styles)(LoginCallback); +export default LoginCallback; diff --git a/web-app/src/screens/LoginPage/LoginPage.tsx b/web-app/src/screens/LoginPage/LoginPage.tsx index 99f62673972..fc833eced9c 100644 --- a/web-app/src/screens/LoginPage/LoginPage.tsx +++ b/web-app/src/screens/LoginPage/LoginPage.tsx @@ -15,8 +15,8 @@ // along with this program. If not, see . import React, { Fragment, useEffect } from "react"; +import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; -import { LinearProgress, MenuItem, Select } from "@mui/material"; import { Button, InputBox, @@ -25,225 +25,23 @@ import { LoginWrapper, LogoutIcon, RefreshIcon, + Grid, + ProgressBar, + Select, + Box, } from "mds"; -import { Theme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import makeStyles from "@mui/styles/makeStyles"; -import Grid from "@mui/material/Grid"; import { loginStrategyType, redirectRule } from "./types"; -import MainError from "../Console/Common/MainError/MainError"; -import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary"; -import clsx from "clsx"; import { AppState, useAppDispatch } from "../../store"; -import { useSelector } from "react-redux"; import { doLoginAsync, getFetchConfigurationAsync, getVersionAsync, } from "./loginThunks"; import { resetForm, setJwt } from "./loginSlice"; -import StrategyForm from "./StrategyForm"; import { redirectRules } from "../../utils/sortFunctions"; import { getLogoVar } from "../../config"; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: "100%", - overflow: "auto", - }, - form: { - width: "100%", // Fix IE 11 issue. - }, - submit: { - margin: "30px 0px 8px", - height: 40, - width: "100%", - boxShadow: "none", - padding: "16px 30px", - }, - loginSsoText: { - fontWeight: "700", - marginBottom: "15px", - }, - ssoSelect: { - width: "100%", - fontSize: "13px", - fontWeight: "700", - color: "grey", - }, - ssoMenuItem: { - fontSize: "15px", - fontWeight: "700", - color: theme.palette.primary.light, - "&.MuiMenuItem-divider:last-of-type": { - borderBottom: "none", - }, - "&.Mui-focusVisible": { - backgroundColor: theme.palette.grey["100"], - }, - }, - ssoLoginIcon: { - height: "13px", - marginRight: "25px", - }, - ssoSubmit: { - marginTop: "15px", - "&:first-of-type": { - marginTop: 0, - }, - }, - separator: { - marginLeft: 4, - marginRight: 4, - }, - linkHolder: { - marginTop: 20, - font: "normal normal normal 14px/16px Inter", - }, - miniLinks: { - margin: "auto", - textAlign: "center", - color: "#B2DEF5", - "& a": { - color: "#B2DEF5", - textDecoration: "none", - }, - "& .min-icon": { - width: 10, - color: "#B2DEF5", - }, - }, - miniLogo: { - marginTop: 8, - "& .min-icon": { - height: 12, - paddingTop: 2, - marginRight: 2, - }, - }, - loginPage: { - height: "100%", - margin: "auto", - }, - buttonRetry: { - display: "flex", - justifyContent: "center", - }, - loginContainer: { - flexDirection: "column", - maxWidth: 400, - margin: "auto", - "& .right-items": { - backgroundColor: "white", - padding: 40, - }, - "& .consoleTextBanner": { - fontWeight: 300, - fontSize: "calc(3vw + 3vh + 1.5vmin)", - lineHeight: 1.15, - color: theme.palette.primary.main, - flex: 1, - height: "100%", - display: "flex", - justifyContent: "flex-start", - margin: "auto", - - "& .logoLine": { - display: "flex", - alignItems: "center", - fontSize: 18, - }, - "& .left-items": { - marginTop: 100, - background: - "transparent linear-gradient(180deg, #FBFAFA 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box", - padding: 40, - }, - "& .left-logo": { - "& .min-icon": { - color: theme.palette.primary.main, - width: 108, - }, - marginBottom: 10, - }, - "& .text-line1": { - font: " 100 44px 'Inter'", - }, - "& .text-line2": { - fontSize: 80, - fontWeight: 100, - textTransform: "uppercase", - }, - "& .text-line3": { - fontSize: 14, - fontWeight: "bold", - }, - "& .logo-console": { - display: "flex", - alignItems: "center", - - "@media (max-width: 900px)": { - marginTop: 20, - flexFlow: "column", - - "& svg": { - width: "50%", - }, - }, - }, - }, - }, - "@media (max-width: 900px)": { - loginContainer: { - display: "flex", - flexFlow: "column", - - "& .consoleTextBanner": { - margin: 0, - flex: 2, - - "& .left-items": { - alignItems: "center", - textAlign: "center", - }, - - "& .logoLine": { - justifyContent: "center", - }, - }, - }, - }, - loginStrategyMessage: { - textAlign: "center", - }, - loadingLoginStrategy: { - textAlign: "center", - width: 40, - height: 40, - }, - submitContainer: { - textAlign: "right", - marginTop: 30, - }, - linearPredef: { - height: 10, - }, - retryButton: { - alignSelf: "flex-end", - }, - iconLogo: { - "& .min-icon": { - width: "100%", - }, - }, - ...spacingUtils, - }), -); +import MainError from "../Console/Common/MainError/MainError"; +import StrategyForm from "./StrategyForm"; export interface LoginStrategyRoutes { [key: string]: string; @@ -273,7 +71,6 @@ export const getTargetPath = () => { const Login = () => { const dispatch = useAppDispatch(); const navigate = useNavigate(); - const classes = useStyles(); const jwt = useSelector((state: AppState) => state.login.jwt); const loginStrategy = useSelector( @@ -338,39 +135,32 @@ const Login = () => { loginStrategy.redirectRules && loginStrategy.redirectRules.length > 1 ) { + const rules = redirectItems.map((r) => ({ + icon: , + value: r.redirect, + label: r.displayName, + })); + loginComponent = ( -
Login with SSO:
+
Login with SSO:
+ value={""} + /> ); } else if (redirectItems.length === 1) { loginComponent = ( -
+
)} -
+ ); } @@ -485,7 +306,7 @@ const Login = () => { Documentation - | + | { > Github - | + | { > Support - | + | . -import Grid from "@mui/material/Grid"; import React, { Fragment } from "react"; import { Button, @@ -22,52 +21,17 @@ import { LockFilledIcon, PasswordKeyIcon, UserFilledIcon, + ProgressBar, + Box, + Grid, } from "mds"; +import { useSelector } from "react-redux"; import { setAccessKey, setSecretKey, setSTS, setUseSTS } from "./loginSlice"; -import { Box, LinearProgress } from "@mui/material"; import { AppState, useAppDispatch } from "../../store"; -import { useSelector } from "react-redux"; -import makeStyles from "@mui/styles/makeStyles"; -import { Theme, useTheme } from "@mui/material/styles"; -import createStyles from "@mui/styles/createStyles"; -import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary"; import { doLoginAsync } from "./loginThunks"; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: "100%", - overflow: "auto", - }, - form: { - width: "100%", // Fix IE 11 issue. - }, - submit: { - margin: "30px 0px 8px", - height: 40, - width: "100%", - boxShadow: "none", - padding: "16px 30px", - }, - submitContainer: { - textAlign: "right", - marginTop: 30, - }, - linearPredef: { - height: 10, - }, - ...spacingUtils, - }), -); - const StrategyForm = () => { const dispatch = useAppDispatch(); - const classes = useStyles(); - const theme = useTheme(); const accessKey = useSelector((state: AppState) => state.login.accessKey); const secretKey = useSelector((state: AppState) => state.login.secretKey); @@ -84,14 +48,41 @@ const StrategyForm = () => { }; return ( - -
- - + + + + ) => dispatch(setAccessKey(e.target.value)) @@ -103,10 +94,9 @@ const StrategyForm = () => { startIcon={} /> - + ) => dispatch(setSecretKey(e.target.value)) @@ -121,11 +111,10 @@ const StrategyForm = () => { /> {useSTS && ( - + ) => dispatch(setSTS(e.target.value)) @@ -140,13 +129,13 @@ const StrategyForm = () => { )} - +