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

TLS Certificates help box and small bug fixes (#2206)

Browse Source 
- Added TLSHelpBox component
- fix: Use the right `add` icon component in the security tab to be consistent
- fix: Add/Remove additional certificates button for custom certificates
- fix: Add/Remove additional users button for built-in IDP

Signed-off-by: Lenin Alevski <alevsk.8772@gmail.com>
This commit is contained in:
Lenin Alevski
2022-07-28 12:18:28 -07:00
committed by GitHub
parent 231b63f1b0
commit 25f719b0e2
3 changed files with 159 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider/IDPBuiltIn.tsx
View File

@@ -182,30 +182,28 @@ const IDPBuiltIn = () => {
error={validationErrors[`secretkey-${index.toString()}`] || ""}
/>
<div className={classes.buttonTray}>
<Tooltip title="Add User" aria-label="add">
<div className={classes.overlayAction}>
<IconButton
size={"small"}
onClick={() => {
dispatch(addIDPNewKeyPair());
}}
>
<AddIcon />
</IconButton>
</div>
</Tooltip>
<Tooltip title="Remove" aria-label="add">
<div className={classes.overlayAction}>
<IconButton
size={"small"}
onClick={() => {
dispatch(removeIDPKeyPairAtIndex(index));
}}
>
<RemoveIcon />
</IconButton>
</div>
</Tooltip>
<div className={classes.overlayAction}>
<IconButton
size={"small"}
onClick={() => {
dispatch(addIDPNewKeyPair());
}}
disabled={index !== accessKeys.length - 1}
>
<AddIcon />
</IconButton>
</div>
<div className={classes.overlayAction}>
<IconButton
size={"small"}
onClick={() => {
dispatch(removeIDPKeyPairAtIndex(index));
}}
disabled={accessKeys.length <= 1}
>
<RemoveIcon />
</IconButton>
</div>
<Tooltip title="Randomize Credentials" aria-label="add">
<div className={classes.overlayAction}>
<IconButton

16
portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
View File

@@ -30,7 +30,7 @@ import { AppState, useAppDispatch } from "../../../../../store";
import { KeyPair } from "../../ListTenants/utils";
import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
import FileSelector from "../../../Common/FormComponents/FileSelector/FileSelector";
import AddIcon from "../../../../../icons/AddIcon";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "../../../../../icons/RemoveIcon";
import SectionTitle from "../../../Common/SectionTitle";
import {
@@ -43,6 +43,7 @@ import {
isPageValid,
updateAddField,
} from "../createTenantSlice";
import TLSHelpBox from "../../HelpBox/TLSHelpBox";
interface ISecurityProps {
classes: any;
@@ -223,9 +224,14 @@ const Security = ({ classes }: ISecurityProps) => {
</Grid>
{enableCustomCerts && (
<Fragment>
{!enableAutoCert && (
<Grid item xs={12}>
<TLSHelpBox />
</Grid>
)}
<Grid item xs={12} className={classes.minioCertsContainer}>
<SectionTitle>MinIO Certificates</SectionTitle>
{minioCertificates.map((keyPair: KeyPair) => (
{minioCertificates.map((keyPair: KeyPair, index) => (
<Grid
item
xs={12}
@@ -276,6 +282,7 @@ const Security = ({ classes }: ISecurityProps) => {
onClick={() => {
dispatch(addKeyPair());
}}
disabled={index !== minioCertificates.length - 1}
>
<AddIcon />
</IconButton>
@@ -286,6 +293,7 @@ const Security = ({ classes }: ISecurityProps) => {
onClick={() => {
dispatch(deleteKeyPair(keyPair.id));
}}
disabled={minioCertificates.length <= 1}
>
<RemoveIcon />
</IconButton>
@@ -298,7 +306,7 @@ const Security = ({ classes }: ISecurityProps) => {
<Grid item xs={12} className={classes.minioCertsContainer}>
<SectionTitle>MinIO CA Certificates</SectionTitle>
{caCertificates.map((keyPair: KeyPair) => (
{caCertificates.map((keyPair: KeyPair, index) => (
<Grid
item
xs={12}
@@ -332,6 +340,7 @@ const Security = ({ classes }: ISecurityProps) => {
onClick={() => {
dispatch(addCaCertificate());
}}
disabled={index !== caCertificates.length - 1}
>
<AddIcon />
</IconButton>
@@ -342,6 +351,7 @@ const Security = ({ classes }: ISecurityProps) => {
onClick={() => {
dispatch(deleteCaCertificate(keyPair.id));
}}
disabled={caCertificates.length <= 1}
>
<RemoveIcon />
</IconButton>

124
portal-ui/src/screens/Console/Tenants/HelpBox/TLSHelpBox.tsx Normal file
View File

@@ -0,0 +1,124 @@
// This file is part of MinIO Console Server
// Copyright (c) 2022 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 React from "react";
import { useSelector } from "react-redux";
import { Box } from "@mui/material";
import CertificateIcon from "../../../../icons/CertificateIcon";
import { AppState } from "../../../../store";
const FeatureItem = ({
icon,
description,
}: {
icon: any;
description: string;
}) => {
return (
<Box
sx={{
display: "flex",
"& .min-icon": {
marginRight: "10px",
height: "23px",
width: "23px",
marginBottom: "10px",
},
}}
>
{icon}{" "}
<div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
{description}
</div>
</Box>
);
};
const TLSHelpBox = () => {
const namespace = useSelector((state: AppState) => {
return state.createTenant.fields.nameTenant.namespace || "<namespace>";
});
const tenantName = useSelector((state: AppState) => {
return state.createTenant.fields.nameTenant.tenantName || "<tenant-name>";
});
return (
<Box
sx={{
flex: 1,
border: "1px solid #eaeaea",
borderRadius: "2px",
display: "flex",
flexFlow: "column",
padding: "20px",
marginTop: {
xs: "0px",
},
}}
>
<Box
sx={{
display: "flex",
flexFlow: "column",
}}
>
<FeatureItem
icon={<CertificateIcon />}
description={`TLS Certificates Warning`}
/>
<Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
Automatic certificate generation is not enabled.
<br />
<br />
If you wish to continue only with <b>custom certificates</b> make sure
they are valid for the following internode hostnames, i.e.:
<br />
<br />
<div
style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}
>
minio.{namespace}
<br />
minio.{namespace}.svc
<br />
minio.{namespace}.svc.&#x3C;cluster domain&#x3E;
<br />
*.{tenantName}-hl.{namespace}.svc.&#x3C;cluster domain&#x3E;
<br />
*.{namespace}.svc.&#x3C;cluster domain&#x3E;
</div>
<br />
Replace <em>&#x3C;tenant-name&#x3E;</em>,{" "}
<em>&#x3C;namespace&#x3E;</em> and
<em>&#x3C;cluster domain&#x3E;</em> with the actual values for your
MinIO tenant.
<br />
<br />
You can learn more at our{" "}
<a
href="https://docs.min.io/minio/k8s/security/security.html?ref=op#id5"
target="_blank"
rel="noreferrer"
>
documentation
</a>
.
</Box>
</Box>
</Box>
);
};
export default TLSHelpBox;