From 21a9073c5e6c17aae566774698e4846b809ec0b1 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Fri, 12 Nov 2021 16:38:45 -0800 Subject: [PATCH] Add HelpBox to DirectCSI. (#1225) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- .../Console/Common/BoxButton/BoxButton.tsx | 86 +++++++++++++++++++ .../Console/DirectCSI/DirectCSIDrives.tsx | 62 +++++++------ .../src/screens/Console/Storage/Storage.tsx | 4 +- .../screens/Console/Storage/StoragePVCs.tsx | 2 +- 4 files changed, 125 insertions(+), 29 deletions(-) create mode 100644 portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx diff --git a/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx b/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx new file mode 100644 index 000000000..84bfcf768 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx @@ -0,0 +1,86 @@ +// 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 { Theme } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import withStyles from "@mui/styles/withStyles"; +import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material"; +import BoxIconButton from "../BoxIconButton/BoxIconButton"; + +const styles = (theme: Theme) => + createStyles({ + root: { + padding: 8, + marginLeft: 8, + borderWidth: 1, + borderColor: "#696969", + color: "#696969", + borderStyle: "solid", + borderRadius: 3, + "& .MuiSvgIcon-root": { + fontSize: 20, + }, + "& .MuiTouchRipple-root span": { + backgroundColor: theme.palette.primary.main, + borderRadius: 3, + opacity: 0.3, + }, + "&:disabled": { + color: "#EBEBEB", + borderColor: "#EBEBEB", + }, + }, + contained: { + borderColor: theme.palette.primary.main, + background: theme.palette.primary.main, + color: "white", + "& .MuiTouchRipple-root span": { + backgroundColor: theme.palette.primary.dark, + borderRadius: 3, + opacity: 0.3, + }, + "&:hover": { + backgroundColor: theme.palette.primary.light, + color: "#FFF", + }, + }, + }); + +interface IBoxButton extends ButtonProps { + classes: any; + label?: string; +} + +const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => { + const altRest = rest as IconButtonProps; + return ( + + + + + + + {children} + + + + ); +}; + +export default withStyles(styles)(BoxButton); diff --git a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx index f466eb947..5821a9475 100644 --- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx +++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx @@ -19,10 +19,10 @@ import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; -import { Button, Grid, InputAdornment, TextField } from "@mui/material"; +import { Grid, InputAdornment, TextField } from "@mui/material"; import get from "lodash/get"; import GroupIcon from "@mui/icons-material/Group"; -import { AddIcon } from "../../../icons"; +import { AddIcon, StorageIcon } from "../../../icons"; import { setErrorSnackMessage } from "../../../actions"; import { actionsTray, @@ -44,6 +44,8 @@ import FormatErrorsResult from "./FormatErrorsResult"; import RefreshIcon from "../../../icons/RefreshIcon"; import SearchIcon from "../../../icons/SearchIcon"; import BoxIconButton from "../Common/BoxIconButton/BoxIconButton"; +import HelpBox from "../../../common/HelpBox"; +import BoxButton from "../Common/BoxButton/BoxButton"; interface IDirectCSIMain { classes: any; @@ -83,7 +85,7 @@ const styles = (theme: Theme) => }, linkItem: { display: "default", - color: "#072F51", + color: theme.palette.info.main, textDecoration: "none", "&:hover": { textDecoration: "underline", @@ -246,7 +248,7 @@ const DirectCSIMain = ({ }} /> )} -

Drives

+

Local Drives

- - + + {notAvailable && !loading ? ( -
- To manage locally attached drives you need to install direct-csi, - for more information -
- please follow this - - Link - -
+ } + help={ + + We can automatically provision persistent volumes (PVs) on top + locally attached drives on your Kubernetes nodes by leveraging + Direct-CSI. +
+
+ For more information{" "} + + Visit Direct-CSI Documentation + + + } + /> ) : ( . -import React, { Fragment, useState, useEffect } from "react"; +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 { Route, Router, Switch, Redirect, Link } from "react-router-dom"; +import { Link, Redirect, Route, Router, Switch } from "react-router-dom"; import { actionsTray, containerForHeader, diff --git a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx index 4a068686e..5f73a2629 100644 --- a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx +++ b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx @@ -100,7 +100,7 @@ const StorageVolumes = ({ return ( -

Volumes

+

Persistent Volumes Claims