mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Bucket Listing Style (#1223)

Browse Source 
* New Bucket Listing Style

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Select Multiple Icon

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2021-11-12 15:02:54 -08:00
committed by GitHub
parent 2b34fbae47
commit ad240d2ec5
14 changed files with 410 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/auth/token.go
View File

@@ -54,7 +54,7 @@ var derivedKey = func() []byte {
return pbkdf2.Key([]byte(token.GetPBKDFPassphrase()), []byte(token.GetPBKDFSalt()), 4096, 32, sha1.New) return pbkdf2.Key([]byte(token.GetPBKDFPassphrase()), []byte(token.GetPBKDFSalt()), 4096, 32, sha1.New)
} }
// IsSessionTokenValid returns true or false depending if the provided session token is valid or not // IsSessionTokenValid returns true or false depending upon the provided session if the token is valid or not
func IsSessionTokenValid(token string) bool { func IsSessionTokenValid(token string) bool {
_, err := SessionTokenAuthenticate(token) _, err := SessionTokenAuthenticate(token)
return err == nil return err == nil

49
portal-ui/src/icons/MultipleBucketsIcon.tsx Normal file
View File

@@ -0,0 +1,49 @@
// 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 <http://www.gnu.org/licenses/>.
import * as React from "react";
import { SvgIcon, SvgIconProps } from "@mui/material";
const MultipleBucketsIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g id="repliaction-icn" transform="translate(0 0)">
<g
id="Grupo_1696"
data-name="Grupo 1696"
transform="translate(3.434)"
>
<path
id="Trazado_6841"
data-name="Trazado 6841"
d="M-502.661-53.081a1.054,1.054,0,0,0-.84-.432h-10.382a1.055,1.055,0,0,0-.84.432,1.272,1.272,0,0,0-.233.983l.178,1.038h7.843a1.894,1.894,0,0,1,1.509.776,2.21,2.21,0,0,1,.342.661h1.366l-.16.932h-1.107c-.005.058-.013.117-.023.175l-.518,3.021v0h1.1l-.16.932h-1.1l-.546,3.189-.005.032-.072.422h1.06a1.124,1.124,0,0,0,1.073-.975l.52-3.036c0-.006,0-.012,0-.018l.7-4.114,0-.012.518-3.024A1.271,1.271,0,0,0-502.661-53.081Z"
transform="translate(514.975 53.513)"
/>
</g>
<path
id="Trazado_6842"
data-name="Trazado 6842"
d="M-609.21,43.432a1.055,1.055,0,0,0-.84-.432h-10.382a1.054,1.054,0,0,0-.84.432,1.271,1.271,0,0,0-.233.983c.256,1.495.8,4.646,1.226,7.16a.035.035,0,0,0,0,.005l.521,3.04a1.124,1.124,0,0,0,1.073.975h6.886a1.124,1.124,0,0,0,1.073-.975l.52-3.036,0-.018.7-4.114s0-.008,0-.012l.518-3.024A1.271,1.271,0,0,0-609.21,43.432Zm-1.924,8.519-8.214.01-.16-.932,8.534-.01Zm.708-4.131-9.629.01-.16-.932,9.949-.01Z"
transform="translate(621.524 -39.595)"
/>
</g>
</svg>
</SvgIcon>
);
};
export default MultipleBucketsIcon;

33
portal-ui/src/icons/SelectMultipleIcon.tsx Normal file
View File

@@ -0,0 +1,33 @@
// 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 <http://www.gnu.org/licenses/>.
import * as React from "react";
import { SvgIcon, SvgIconProps } from "@mui/material";
const SelectMultipleIcon = (props: SvgIconProps) => {
return (
<SvgIcon {...props}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path
id="bulk-icon"
d="M16.5,16.5V14.356H14.357V16.5H16.5m-6.429,0V14.356H7.929V16.5h2.143m-6.429,0V14.356H1.5V16.5H3.643M16.5,10.071V7.929H14.357v2.143H16.5m-6.429,0V7.929H7.929v2.143h2.143m-6.429,0V7.929H1.5v2.143H3.643M16.5,3.643V1.5H14.357V3.643H16.5m-6.429,0V1.5H7.929V3.643h2.143m-6.429,0V1.5H1.5V3.643H3.643M17,18H13.857a1,1,0,0,1-1-1V13.857a1,1,0,0,1,1-1H17a1,1,0,0,1,1,1V17A1,1,0,0,1,17,18Zm-6.429,0H7.429a1,1,0,0,1-1-1V13.857a1,1,0,0,1,1-1h3.143a1,1,0,0,1,1,1V17A1,1,0,0,1,10.571,18ZM4.143,18H1a1,1,0,0,1-1-1V13.857a1,1,0,0,1,1-1H4.143a1,1,0,0,1,1,1V17A1,1,0,0,1,4.143,18ZM17,11.571H13.857a1,1,0,0,1-1-1V7.429a1,1,0,0,1,1-1H17a1,1,0,0,1,1,1v3.143A1,1,0,0,1,17,11.571Zm-6.429,0H7.429a1,1,0,0,1-1-1V7.429a1,1,0,0,1,1-1h3.143a1,1,0,0,1,1,1v3.143A1,1,0,0,1,10.571,11.571Zm-6.429,0H1a1,1,0,0,1-1-1V7.429a1,1,0,0,1,1-1H4.143a1,1,0,0,1,1,1v3.143A1,1,0,0,1,4.143,11.571ZM17,5.143H13.857a1,1,0,0,1-1-1V1a1,1,0,0,1,1-1H17a1,1,0,0,1,1,1V4.143A1,1,0,0,1,17,5.143Zm-6.429,0H7.429a1,1,0,0,1-1-1V1a1,1,0,0,1,1-1h3.143a1,1,0,0,1,1,1V4.143A1,1,0,0,1,10.571,5.143Zm-6.429,0H1a1,1,0,0,1-1-1V1A1,1,0,0,1,1,0H4.143a1,1,0,0,1,1,1V4.143A1,1,0,0,1,4.143,5.143Z"
/>
</svg>
</SvgIcon>
);
};
export default SelectMultipleIcon;

1
portal-ui/src/icons/index.ts
View File

@@ -55,6 +55,7 @@ export { default as DocumentationIcon } from "./DocumentationIcon";
export { default as TrashIcon } from "./TrashIcon"; export { default as TrashIcon } from "./TrashIcon";
export { default as DownloadIcon } from "./DownloadIcon"; export { default as DownloadIcon } from "./DownloadIcon";
export { default as AllBucketsIcon } from "./AllBucketsIcon"; export { default as AllBucketsIcon } from "./AllBucketsIcon";
export { default as SelectMultipleIcon } from "./SelectMultipleIcon";
export { default as GroupsIcon } from "./GroupsIcon"; export { default as GroupsIcon } from "./GroupsIcon";
export { default as TenantsIcon } from "./TenantsIcon"; export { default as TenantsIcon } from "./TenantsIcon";
export { default as UploadFile } from "./UploadFile"; export { default as UploadFile } from "./UploadFile";

36
portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
View File

@@ -356,32 +356,30 @@ const BucketDetails = ({
S3_DELETE_BUCKET, S3_DELETE_BUCKET,
S3_FORCE_DELETE_BUCKET, S3_FORCE_DELETE_BUCKET,
]) && ( ]) && (
<Tooltip title={"Delete"}>
<BoxIconButton
color="primary"
aria-label="Delete"
onClick={() => {
setDeleteOpen(true);
}}
size="large"
>
<DeleteIcon />
</BoxIconButton>
</Tooltip>
)}
<Tooltip title={"Refresh"}>
<BoxIconButton <BoxIconButton
tooltip={"Delete"}
color="primary" color="primary"
aria-label="Refresh List" aria-label="Delete"
onClick={() => { onClick={() => {
setBucketDetailsLoad(true); setDeleteOpen(true);
}} }}
size="large" size="large"
variant={"contained"}
> >
<RefreshIcon /> <DeleteIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip> )}
<BoxIconButton
tooltip={"Refresh"}
color="primary"
aria-label="Refresh List"
onClick={() => {
setBucketDetailsLoad(true);
}}
size="large"
variant={"contained"}
>
<RefreshIcon />
</BoxIconButton>
</Fragment> </Fragment>
} }
/> />

229
portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
View File

@@ -14,42 +14,37 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react"; import React from "react";
import { Link } from "react-router-dom";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
import { import {
ArrowRightIcon, ArrowRightIcon,
BucketsIcon, BucketsIcon,
CalendarIcon,
LockIcon,
ReportedUsageIcon, ReportedUsageIcon,
SettingsIcon, SettingsIcon,
TotalObjectsIcon, TotalObjectsIcon,
} from "../../../../icons"; } from "../../../../icons";
import { Bucket } from "../types"; import { Bucket } from "../types";
import { import { Box, Button, Grid, Typography } from "@mui/material";
Box,
Button,
Card,
CardContent,
CardHeader,
Grid,
Typography,
} from "@mui/material";
import { niceBytes, prettyNumber } from "../../../../common/utils"; import { niceBytes, prettyNumber } from "../../../../common/utils";
import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper"; import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
import { Link } from "react-router-dom";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
root: { root: {
marginBottom: 30, marginBottom: 30,
border: 0, padding: 20,
borderRadius: 10,
color: theme.palette.primary.main, color: theme.palette.primary.main,
boxShadow: "0px 0px 15px #00000029", border: "#E5E5E5 1px solid",
borderRadius: 2,
"& .MuiSvgIcon-root": { "& .MuiSvgIcon-root": {
height: 13, height: 14,
width: 14,
marginRight: 4,
},
"& .MuiTypography-body2": {
fontSize: 14,
}, },
"& .MuiCardHeader-content": { "& .MuiCardHeader-content": {
wordWrap: "break-word", wordWrap: "break-word",
@@ -90,7 +85,7 @@ const styles = (theme: Theme) =>
viewButton: { viewButton: {
width: 111, width: 111,
color: "white", color: "white",
backgroundColor: "#C83B51", marginLeft: 8,
fontSize: 12, fontSize: 12,
fontWeight: "normal", fontWeight: "normal",
boxShadow: "unset", boxShadow: "unset",
@@ -115,18 +110,29 @@ const styles = (theme: Theme) =>
marginBottom: 4, marginBottom: 4,
}, },
metricLabel: { metricLabel: {
fontSize: 16, fontSize: 14,
fontWeight: "bold", fontWeight: "bold",
}, },
metricText: { metricText: {
fontSize: 50, fontSize: 24,
fontWeight: "bold", fontWeight: "bold",
marginBottom: 10,
}, },
unit: { unit: {
fontSize: 12, fontSize: 12,
fontWeight: "normal", fontWeight: "normal",
}, },
bucketName: {
padding: 0,
margin: 0,
fontSize: 22,
},
bucketIcon: {
"& .MuiSvgIcon-root": {
height: 48,
width: 48,
fontSize: 48,
},
},
}); });
interface IBucketListItem { interface IBucketListItem {
@@ -165,105 +171,106 @@ const BucketListItem = ({
}; };
return ( return (
<Card className={classes.root}> <Grid container className={classes.root} spacing={1}>
<CardHeader <Grid item xs={12}>
disableTypography={true} <Grid container justifyContent={"space-between"}>
title={ <Grid item xs={12} sm={8}>
<Typography variant={"body1"}>
{bulkSelect && (
<div
className={classes.checkBoxElement}
onClick={(e) => {
e.stopPropagation();
}}
>
<CheckboxWrapper
checked={selected}
id={`select-${bucket.name}`}
label={""}
name={`select-${bucket.name}`}
onChange={onCheckboxClick}
value={bucket.name}
/>
</div>
)}
<BucketsIcon />
{bucket.name}
</Typography>
}
/>
<CardContent>
<Grid container>
<Grid item xs={12} sm={8} md={10}>
<Grid container> <Grid container>
<Grid item xs={12} md={6}> <Grid item xs={12}>
<Typography variant="body2"> {bulkSelect && (
<CalendarIcon /> Created: <b>{bucket.creation_date}</b> <div
</Typography> className={classes.checkBoxElement}
<Typography variant="body2"> onClick={(e) => {
<LockIcon /> Access: <b> {accessToStr(bucket)}</b> e.stopPropagation();
</Typography> }}
>
<CheckboxWrapper
checked={selected}
id={`select-${bucket.name}`}
label={""}
name={`select-${bucket.name}`}
onChange={onCheckboxClick}
value={bucket.name}
/>
</div>
)}
<h1 className={classes.bucketName}>{bucket.name}</h1>
</Grid> </Grid>
<Grid item xs={6} md={3}> <Grid item xs={12}>
<Typography variant="body1" className={classes.metricLabel}> <Grid container>
<ReportedUsageIcon /> USAGE <Grid item xs={12} sm>
</Typography> <Typography variant="body2">
<div className={classes.metricText}> Created: <b>{bucket.creation_date}</b>
{usageScalar} </Typography>
<span className={classes.unit}>{usageUnit}</span> </Grid>
</div> <Grid item xs={12} sm>
</Grid> <Typography variant="body2">
<Grid item xs={6} md={3}> Access: <b> {accessToStr(bucket)}</b>
<Typography variant="body1" className={classes.metricLabel}> </Typography>
<TotalObjectsIcon /> OBJECTS </Grid>
</Typography> </Grid>
<div className={classes.metricText}>
{bucket.objects ? prettyNumber(bucket.objects) : 0}
</div>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} sm={4} md={2} className={classes.buttonTray}> <Grid item xs={12} sm={4} textAlign={"right"}>
<Grid container> {bucket.manage && (
<Grid item xs={6} sm={12} md={12}> <Link
<Link to={`/buckets/${bucket.name}/admin`}
to={`/buckets/${bucket.name}/browse`} style={{ textDecoration: "none" }}
style={{ textDecoration: "none" }} >
<Button
variant={"outlined"}
endIcon={<SettingsIcon />}
className={classes.manageButton}
> >
<Button Manage
variant="contained" </Button>
endIcon={<ArrowRightIcon />} </Link>
className={classes.viewButton} )}
> <Link
Browse to={`/buckets/${bucket.name}/browse`}
</Button> style={{ textDecoration: "none" }}
</Link> >
<Box display={{ xs: "none", sm: "block" }}> <Button
<div style={{ marginBottom: 10 }} /> variant="contained"
</Box> endIcon={<ArrowRightIcon />}
</Grid> className={classes.viewButton}
{bucket.manage && ( >
<Grid item xs={6} sm={12} md={12}> Browse
<Link </Button>
to={`/buckets/${bucket.name}/admin`} </Link>
style={{ textDecoration: "none" }} <Box display={{ xs: "none", sm: "block" }}>
> <div style={{ marginBottom: 10 }} />
<Button </Box>
variant={"outlined"}
endIcon={<SettingsIcon />}
className={classes.manageButton}
>
Manage
</Button>
</Link>
</Grid>
)}
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</CardContent> </Grid>
</Card> <Grid item xs={12}>
<hr />
</Grid>
<Grid item xs={12}>
<Grid container justifyContent={"flex-start"} spacing={4}>
<Grid item className={classes.bucketIcon}>
<BucketsIcon />
</Grid>
<Grid item textAlign={"left"}>
<ReportedUsageIcon />
<span className={classes.metricLabel}>Usage</span>
<div className={classes.metricText}>
{usageScalar}
<span className={classes.unit}>{usageUnit}</span>
</div>
</Grid>
<Grid item textAlign={"left"}>
<TotalObjectsIcon />
<span className={classes.metricLabel}>Objects</span>
<div className={classes.metricText}>
{bucket.objects ? prettyNumber(bucket.objects) : 0}
</div>
</Grid>
</Grid>
</Grid>
</Grid>
); );
}; };

4
portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
View File

@@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License // You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
import React, { useState, useEffect, Fragment } from "react"; import React, { Fragment, useEffect, useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
@@ -29,7 +29,7 @@ import {
wizardCommon, wizardCommon,
} from "../../Common/FormComponents/common/styleLibrary"; } from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions"; import { setModalErrorSnackMessage } from "../../../../actions";
import { BulkReplicationResponse, BulkReplicationItem } from "../types"; import { BulkReplicationItem, BulkReplicationResponse } from "../types";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper"; import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList"; import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";

25
portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
View File

@@ -21,9 +21,8 @@ import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
import { Button, LinearProgress } from "@mui/material"; import { Button, LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import FileCopyIcon from "@mui/icons-material/FileCopy";
import { Bucket, BucketList, HasPermissionResponse } from "../types"; import { Bucket, BucketList, HasPermissionResponse } from "../types";
import { AddIcon, BucketsIcon, WatchIcon } from "../../../../icons"; import { AddIcon, BucketsIcon } from "../../../../icons";
import { AppState } from "../../../../store"; import { AppState } from "../../../../store";
import { setErrorSnackMessage } from "../../../../actions"; import { setErrorSnackMessage } from "../../../../actions";
import { import {
@@ -44,6 +43,8 @@ import SearchIcon from "../../../../icons/SearchIcon";
import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton"; import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
import RefreshIcon from "../../../../icons/RefreshIcon"; import RefreshIcon from "../../../../icons/RefreshIcon";
import AButton from "../../Common/AButton/AButton"; import AButton from "../../Common/AButton/AButton";
import MultipleBucketsIcon from "../../../../icons/MultipleBucketsIcon";
import SelectMultipleIcon from "../../../../icons/SelectMultipleIcon";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
@@ -306,32 +307,32 @@ const ListBuckets = ({
/> />
</Grid> </Grid>
<Grid item xs={12} sm={"auto"}> <Grid item xs={12} sm={"auto"}>
<Button <BoxIconButton
variant={bulkSelect ? "contained" : "outlined"} variant={bulkSelect ? "contained" : "outlined"}
tooltip={"Select Multiple"}
onClick={() => { onClick={() => {
setBulkSelect(!bulkSelect); setBulkSelect(!bulkSelect);
}} }}
endIcon={<WatchIcon />}
size={"small"} size={"small"}
className={classes.bulkSelect} className={classes.bulkSelect}
> >
Bulk Select <SelectMultipleIcon />
</Button> </BoxIconButton>
<BoxIconButton
<Button
variant="outlined" variant="outlined"
endIcon={<FileCopyIcon />} tooltip={"Set Replication"}
onClick={() => { onClick={() => {
setReplicationModalOpen(true); setReplicationModalOpen(true);
}} }}
disabled={selectedBuckets.length === 0} disabled={selectedBuckets.length === 0}
size={"small"} size={"small"}
> >
Set Replication <MultipleBucketsIcon />
</Button> </BoxIconButton>
<BoxIconButton <BoxIconButton
color="primary" color="primary"
aria-label="Refresh List" aria-label="Refresh"
tooltip={"Refresh"}
onClick={() => { onClick={() => {
setLoading(true); setLoading(true);
}} }}

112
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
View File

@@ -45,7 +45,7 @@ import {
objectBrowserCommon, objectBrowserCommon,
searchField, searchField,
} from "../../../../Common/FormComponents/common/styleLibrary"; } from "../../../../Common/FormComponents/common/styleLibrary";
import { Badge, Button, Tooltip, Typography } from "@mui/material"; import { Badge, Button, Typography } from "@mui/material";
import * as reactMoment from "react-moment"; import * as reactMoment from "react-moment";
import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs"; import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
import { import {
@@ -1087,35 +1087,32 @@ const ListObjects = ({
<Fragment> <Fragment>
{displayPutObject && ( {displayPutObject && (
<Fragment> <Fragment>
<Tooltip title={"Choose or create a new path"}> <BoxIconButton
<BoxIconButton tooltip={"Choose or create a new path"}
color="primary" color="primary"
aria-label="Add a new folder" aria-label="Add a new folder"
onClick={() => { onClick={() => {
setCreateFolderOpen(true); setCreateFolderOpen(true);
}} }}
disabled={rewindEnabled} disabled={rewindEnabled}
size="large" size="large"
> >
<AddFolderIcon /> <AddFolderIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip> <BoxIconButton
tooltip={"Upload file"}
<Tooltip title={"Upload file"}> color="primary"
<BoxIconButton aria-label="Refresh List"
color="primary" onClick={() => {
aria-label="Refresh List" if (fileUpload && fileUpload.current) {
onClick={() => { fileUpload.current.click();
if (fileUpload && fileUpload.current) { }
fileUpload.current.click(); }}
} disabled={rewindEnabled}
}} size="large"
disabled={rewindEnabled} >
size="large" <UploadIcon />
> </BoxIconButton>
<UploadIcon />
</BoxIconButton>
</Tooltip>
<input <input
type="file" type="file"
multiple={true} multiple={true}
@@ -1126,42 +1123,39 @@ const ListObjects = ({
/> />
</Fragment> </Fragment>
)} )}
<Badge
<Tooltip title={"Rewind"}> badgeContent=" "
<Badge color="secondary"
badgeContent=" " variant="dot"
color="secondary" invisible={!rewindEnabled}
variant="dot" className={classes.badgeOverlap}
invisible={!rewindEnabled} >
className={classes.badgeOverlap}
>
<BoxIconButton
color="primary"
aria-label="Rewind"
onClick={() => {
setRewindSelect(true);
}}
disabled={!isVersioned}
size="large"
>
<HistoryIcon />
</BoxIconButton>
</Badge>
</Tooltip>
<Tooltip title={"Refresh list"}>
<BoxIconButton <BoxIconButton
tooltip={"Rewind"}
color="primary" color="primary"
aria-label="Refresh List" aria-label="Rewind"
onClick={() => { onClick={() => {
setLoading(true); setRewindSelect(true);
}} }}
disabled={rewindEnabled} disabled={!isVersioned}
size="large" size="large"
variant={"contained"}
> >
<RefreshIcon /> <HistoryIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip> </Badge>
<BoxIconButton
tooltip={"Refresh list"}
color="primary"
aria-label="Refresh List"
onClick={() => {
setLoading(true);
}}
disabled={rewindEnabled}
size="large"
variant={"contained"}
>
<RefreshIcon />
</BoxIconButton>
</Fragment> </Fragment>
} }
/> />

77
portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
View File

@@ -30,7 +30,6 @@ import {
TableBody, TableBody,
TableCell, TableCell,
TableRow, TableRow,
Tooltip,
} from "@mui/material"; } from "@mui/material";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Chip from "@mui/material/Chip"; import Chip from "@mui/material/Chip";
@@ -646,19 +645,18 @@ const ObjectDetails = ({
} }
actions={ actions={
<Fragment> <Fragment>
<Tooltip title="Share"> <BoxIconButton
<BoxIconButton tooltip={"Share"}
color="primary" color="primary"
aria-label="share" aria-label="share"
onClick={() => { onClick={() => {
shareObject(); shareObject();
}} }}
disabled={actualInfo.is_delete_marker} disabled={actualInfo.is_delete_marker}
size="large" size="large"
> >
<ShareIcon /> <ShareIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip>
{downloadingFiles.includes( {downloadingFiles.includes(
`${bucketName}/${actualInfo.name}` `${bucketName}/${actualInfo.name}`
@@ -671,35 +669,32 @@ const ObjectDetails = ({
/> />
</div> </div>
) : ( ) : (
<Tooltip title="Download"> <BoxIconButton
<BoxIconButton tooltip={"Download"}
color="primary" color="primary"
aria-label="download" aria-label="download"
onClick={() => { onClick={() => {
downloadObject(actualInfo); downloadObject(actualInfo);
}} }}
disabled={actualInfo.is_delete_marker} disabled={actualInfo.is_delete_marker}
size="large" size="large"
> >
<DownloadIcon /> <DownloadIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip>
)} )}
{displayDeleteObject && ( {displayDeleteObject && (
<Tooltip title="Delete Object"> <BoxIconButton
<BoxIconButton tooltip={"Delete Object"}
color="primary" color="primary"
aria-label="delete" aria-label="delete"
onClick={() => { onClick={() => {
setDeleteOpen(true); setDeleteOpen(true);
}} }}
disabled={actualInfo.is_delete_marker} disabled={actualInfo.is_delete_marker}
size="large" size="large"
> >
<DeleteIcon /> <DeleteIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip>
)} )}
</Fragment> </Fragment>
} }

16
portal-ui/src/screens/Console/Common/BoxIconButton/BoxIconButton.tsx
View File

@@ -18,7 +18,7 @@ import React from "react";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
import { IconButton, IconButtonProps } from "@mui/material"; import { IconButton, IconButtonProps, Tooltip } from "@mui/material";
import clsx from "clsx"; import clsx from "clsx";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
@@ -64,15 +64,17 @@ interface IBoxIconButton extends IconButtonProps {
classes: any; classes: any;
children: any; children: any;
variant?: "outlined" | "contained"; variant?: "outlined" | "contained";
tooltip?: string;
} }
const BoxIconButton = ({ const BoxIconButton = ({
classes, classes,
children, children,
variant = "outlined", variant = "outlined",
tooltip,
...rest ...rest
}: IBoxIconButton) => { }: IBoxIconButton) => {
return ( const button = (
<IconButton <IconButton
{...rest} {...rest}
className={clsx(classes.root, { className={clsx(classes.root, {
@@ -82,6 +84,16 @@ const BoxIconButton = ({
{children} {children}
</IconButton> </IconButton>
); );
if (tooltip && tooltip !== "") {
return (
<Tooltip title={tooltip}>
<span>{button}</span>
</Tooltip>
);
}
return button;
}; };
export default withStyles(styles)(BoxIconButton); export default withStyles(styles)(BoxIconButton);

47
portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
View File

@@ -27,7 +27,7 @@ import {
} from "../Common/FormComponents/common/styleLibrary"; } from "../Common/FormComponents/common/styleLibrary";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import { Button, LinearProgress, Tooltip } from "@mui/material"; import { Button, LinearProgress } from "@mui/material";
import TableWrapper from "../Common/TableWrapper/TableWrapper"; import TableWrapper from "../Common/TableWrapper/TableWrapper";
import api from "../../../common/api"; import api from "../../../common/api";
import PageHeader from "../Common/PageHeader/PageHeader"; import PageHeader from "../Common/PageHeader/PageHeader";
@@ -373,30 +373,27 @@ const PolicyDetails = ({
subTitle={<Fragment>IAM Policy</Fragment>} subTitle={<Fragment>IAM Policy</Fragment>}
actions={ actions={
<Fragment> <Fragment>
<Tooltip title="Delete Policy"> <BoxIconButton
<BoxIconButton tooltip={"Delete Policy"}
color="primary" color="primary"
aria-label="Delete Policy" aria-label="Delete Policy"
onClick={deletePolicy} onClick={deletePolicy}
> >
<TrashIcon /> <TrashIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip> <BoxIconButton
tooltip={"Refresh"}
<Tooltip title={"Refresh"}> color="primary"
<BoxIconButton aria-label="Refresh List"
color="primary" onClick={() => {
aria-label="Refresh List" setLoadingUsers(true);
onClick={() => { setLoadingGroups(true);
setLoadingUsers(true); setLoadingPolicy(true);
setLoadingGroups(true); }}
setLoadingPolicy(true); size="large"
}} >
size="large" <RefreshIcon />
> </BoxIconButton>
<RefreshIcon />
</BoxIconButton>
</Tooltip>
</Fragment> </Fragment>
} }
/> />

68
portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
View File

@@ -20,7 +20,6 @@ import { Link, Redirect, Route, Router, Switch } from "react-router-dom";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
import { Tooltip } from "@mui/material";
import get from "lodash/get"; import get from "lodash/get";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import { setErrorSnackMessage, setSnackBarMessage } from "../../../../actions"; import { setErrorSnackMessage, setSnackBarMessage } from "../../../../actions";
@@ -325,41 +324,38 @@ const TenantDetails = ({
} }
actions={ actions={
<div> <div>
<Tooltip title={"Delete"}> <BoxIconButton
<BoxIconButton tooltip={"Delete"}
color="primary" color="primary"
aria-label="Delete" aria-label="Delete"
onClick={() => { onClick={() => {
confirmDeleteTenant(); confirmDeleteTenant();
}} }}
size="large" size="large"
> >
<DeleteIcon /> <DeleteIcon />
</BoxIconButton> </BoxIconButton>
</Tooltip> <BoxIconButton
<Tooltip title={"Edit YAML"}> tooltip={"Edit YAML"}
<BoxIconButton color="primary"
color="primary" aria-label="Edit YAML"
aria-label="Edit YAML" onClick={() => {
onClick={() => { editYaml();
editYaml(); }}
}} size="large"
size="large" >
> <EditIcon />
<EditIcon /> </BoxIconButton>
</BoxIconButton> <BoxIconButton
</Tooltip> tooltip={"Refresh"}
<Tooltip title={"Refresh"}> color="primary"
<BoxIconButton aria-label="Refresh List"
color="primary" onClick={() => {
aria-label="Refresh List" setTenantDetailsLoad(true);
onClick={() => { }}
setTenantDetailsLoad(true); >
}} <RefreshIcon />
> </BoxIconButton>
<RefreshIcon />
</BoxIconButton>
</Tooltip>
</div> </div>
} }
/> />

41
portal-ui/src/screens/Console/Users/UserDetails.tsx
View File

@@ -21,7 +21,7 @@ import { Link } from "react-router-dom";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles"; import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
import { Button, Grid, Tooltip } from "@mui/material"; import { Button, Grid } from "@mui/material";
import { import {
AddIcon, AddIcon,
DeleteIcon, DeleteIcon,
@@ -319,27 +319,24 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
}} }}
switchOnly switchOnly
/> />
<BoxIconButton
<Tooltip title="Delete User"> tooltip={"Delete User"}
<BoxIconButton color="primary"
color="primary" aria-label="Delete User"
aria-label="Delete User" onClick={deleteUser}
onClick={deleteUser} size="large"
size="large" >
> <DeleteIcon />
<DeleteIcon /> </BoxIconButton>
</BoxIconButton> <BoxIconButton
</Tooltip> tooltip={"Change Password"}
<Tooltip title="Change Password"> color="primary"
<BoxIconButton aria-label="Change Password"
color="primary" onClick={changeUserPassword}
aria-label="Change Password" size="large"
onClick={changeUserPassword} >
size="large" <LockIcon />
> </BoxIconButton>
<LockIcon />
</BoxIconButton>
</Tooltip>
</Fragment> </Fragment>
} }
/> />