Skip to content

Commit 21a9073

Browse files
dvaldiviadvaldivia
authored
Add HelpBox to DirectCSI. (#1225)
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
1 parent ad240d2 commit 21a9073

File tree

4 files changed

+125
-29
lines changed

4 files changed

+125
-29
lines changed

‎portal-ui/src/screens/Console/Common/BoxButton/BoxButton.tsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2021 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import React, { Fragment } from "react";
18+
import { Theme } from "@mui/material/styles";
19+
import createStyles from "@mui/styles/createStyles";
20+
import withStyles from "@mui/styles/withStyles";
21+
import { Box, Button, ButtonProps, IconButtonProps } from "@mui/material";
22+
import BoxIconButton from "../BoxIconButton/BoxIconButton";
23+
24+
const styles = (theme: Theme) =>
25+
createStyles({
26+
root: {
27+
padding: 8,
28+
marginLeft: 8,
29+
borderWidth: 1,
30+
borderColor: "#696969",
31+
color: "#696969",
32+
borderStyle: "solid",
33+
borderRadius: 3,
34+
"& .MuiSvgIcon-root": {
35+
fontSize: 20,
36+
},
37+
"& .MuiTouchRipple-root span": {
38+
backgroundColor: theme.palette.primary.main,
39+
borderRadius: 3,
40+
opacity: 0.3,
41+
},
42+
"&:disabled": {
43+
color: "#EBEBEB",
44+
borderColor: "#EBEBEB",
45+
},
46+
},
47+
contained: {
48+
borderColor: theme.palette.primary.main,
49+
background: theme.palette.primary.main,
50+
color: "white",
51+
"& .MuiTouchRipple-root span": {
52+
backgroundColor: theme.palette.primary.dark,
53+
borderRadius: 3,
54+
opacity: 0.3,
55+
},
56+
"&:hover": {
57+
backgroundColor: theme.palette.primary.light,
58+
color: "#FFF",
59+
},
60+
},
61+
});
62+
63+
interface IBoxButton extends ButtonProps {
64+
classes: any;
65+
label?: string;
66+
}
67+
68+
const BoxButton = ({ classes, children, label = "", ...rest }: IBoxButton) => {
69+
const altRest = rest as IconButtonProps;
70+
return (
71+
<Fragment>
72+
<Box sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
73+
<Button {...rest} endIcon={children}>
74+
{label}
75+
</Button>
76+
</Box>
77+
<Box sx={{ display: { xs: "block", sm: "block", md: "none" } }}>
78+
<BoxIconButton {...altRest} tooltip={label}>
79+
{children}
80+
</BoxIconButton>
81+
</Box>
82+
</Fragment>
83+
);
84+
};
85+
86+
export default withStyles(styles)(BoxButton);

‎portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import { Button, Grid, InputAdornment, TextField } from "@mui/material";
22+
import { Grid, InputAdornment, TextField } from "@mui/material";
2323
import get from "lodash/get";
2424
import GroupIcon from "@mui/icons-material/Group";
25-
import { AddIcon } from "../../../icons";
25+
import { AddIcon, StorageIcon } from "../../../icons";
2626
import { setErrorSnackMessage } from "../../../actions";
2727
import {
2828
actionsTray,
@@ -44,6 +44,8 @@ import FormatErrorsResult from "./FormatErrorsResult";
4444
import RefreshIcon from "../../../icons/RefreshIcon";
4545
import SearchIcon from "../../../icons/SearchIcon";
4646
import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
47+
import HelpBox from "../../../common/HelpBox";
48+
import BoxButton from "../Common/BoxButton/BoxButton";
4749

4850
interface IDirectCSIMain {
4951
classes: any;
@@ -83,7 +85,7 @@ const styles = (theme: Theme) =>
8385
},
8486
linkItem: {
8587
display: "default",
86-
color: "#072F51",
88+
color: theme.palette.info.main,
8789
textDecoration: "none",
8890
"&:hover": {
8991
textDecoration: "underline",
@@ -246,7 +248,7 @@ const DirectCSIMain = ({
246248
}}
247249
/>
248250
)}
249-
<h1 className={classes.sectionTitle}>Drives</h1>
251+
<h1 className={classes.sectionTitle}>Local Drives</h1>
250252
<Grid item xs={12} className={classes.actionsTray}>
251253
<TextField
252254
placeholder="Search Drives"
@@ -278,42 +280,50 @@ const DirectCSIMain = ({
278280
>
279281
<RefreshIcon />
280282
</BoxIconButton>
281-
<Button
283+
<BoxButton
282284
variant="contained"
283285
color="primary"
284-
endIcon={<GroupIcon />}
285286
disabled={checkedDrives.length <= 0 || notAvailable}
286287
onClick={formatSelectedDrives}
288+
label={"Format Selected Drives"}
287289
>
288-
Format Selected Drives
289-
</Button>
290-
<Button
290+
<GroupIcon />
291+
</BoxButton>
292+
<BoxButton
291293
variant="contained"
292294
color="primary"
293-
endIcon={<AddIcon />}
295+
label={"Format All Drives"}
294296
onClick={formatAllDrives}
295297
disabled={notAvailable}
296298
>
297-
Format All Drives
298-
</Button>
299+
<AddIcon />
300+
</BoxButton>
299301
</Grid>
300302

301303
<Grid item xs={12}>
302304
{notAvailable && !loading ? (
303-
<div className={classes.notAvailableNotice}>
304-
To manage locally attached drives you need to install direct-csi,
305-
for more information
306-
<br />
307-
please follow this
308-
<a
309-
href="https://github.com/minio/direct-csi"
310-
rel="noreferrer"
311-
target="_blank"
312-
className={classes.linkItem}
313-
>
314-
Link
315-
</a>
316-
</div>
305+
<HelpBox
306+
title={"Leverage locally attached drives"}
307+
iconComponent={<StorageIcon />}
308+
help={
309+
<Fragment>
310+
We can automatically provision persistent volumes (PVs) on top
311+
locally attached drives on your Kubernetes nodes by leveraging
312+
Direct-CSI.
313+
<br />
314+
<br />
315+
For more information{" "}
316+
<a
317+
href="https://github.com/minio/direct-csi"
318+
rel="noreferrer"
319+
target="_blank"
320+
className={classes.linkItem}
321+
>
322+
Visit Direct-CSI Documentation
323+
</a>
324+
</Fragment>
325+
}
326+
/>
317327
) : (
318328
<TableWrapper
319329
itemActions={tableActions}

‎portal-ui/src/screens/Console/Storage/Storage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { Fragment, useState, useEffect } from "react";
17+
import React, { Fragment, useEffect, useState } from "react";
1818
import { Theme } from "@mui/material/styles";
1919
import createStyles from "@mui/styles/createStyles";
2020
import withStyles from "@mui/styles/withStyles";
21-
import { Route, Router, Switch, Redirect, Link } from "react-router-dom";
21+
import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
2222
import {
2323
actionsTray,
2424
containerForHeader,

‎portal-ui/src/screens/Console/Storage/StoragePVCs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const StorageVolumes = ({
100100

101101
return (
102102
<Fragment>
103-
<h1 className={classes.sectionTitle}>Volumes</h1>
103+
<h1 className={classes.sectionTitle}>Persistent Volumes Claims</h1>
104104
<Grid item xs={12} className={classes.actionsTray}>
105105
<TextField
106106
placeholder="Search Volumes (PVCs)"

0 commit comments

Comments
 (0)