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

Migrated available mds components in Tiers Page (#3007)

Browse Source 
Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
Alex
2023-08-21 22:30:04 -06:00
committed by GitHub
parent 0c480dd5ec
commit b125121ac8
7 changed files with 312 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
portal-ui/src/screens/Console/Common/DistributedOnly/DistributedOnly.tsx
View File

@@ -15,8 +15,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Box, Grid } from "@mui/material";
import { HelpBox } from "mds";
import { HelpBox, Box, Grid, breakPoints } from "mds";
interface IDistributedOnly {
iconComponent: any;
@@ -25,7 +24,7 @@ interface IDistributedOnly {
const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
return (
<Grid container alignItems={"center"}>
<Grid container>
<Grid item xs={12}>
<HelpBox
title={`${entity} not available`}
@@ -34,21 +33,16 @@ const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
<Box
sx={{
fontSize: "14px",
display: "flex",
border: "none",
flexFlow: {
xs: "column",
md: "row",
},
"& a": {
color: (theme) => theme.colors.link,
textDecoration: "underline",
[`@media (max-width: ${breakPoints.sm}px)`]: {
display: "flex",
flexFlow: "column",
},
}}
>
<div>This feature is not available for a single-disk setup.</div>
<div>
<span>
This feature is not available for a single-disk setup.&nbsp;
</span>
<span>
Please deploy a server in{" "}
<a
href="https://min.io/docs/minio/linux/operations/install-deploy-manage/deploy-minio-multi-node-multi-drive.html?ref=con"
@@ -58,7 +52,7 @@ const DistributedOnly = ({ iconComponent, entity }: IDistributedOnly) => {
Distributed Mode
</a>{" "}
to use this feature.
</div>
</span>
</Box>
}
/>

23
portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
View File

@@ -16,8 +16,7 @@
import React, { useState } from "react";
import get from "lodash/get";
import { Grid, InputLabel, Tooltip } from "@mui/material";
import IconButton from "@mui/material/IconButton";
import { Grid, InputLabel, Tooltip, IconButton } from "mds";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import CancelIcon from "@mui/icons-material/Cancel";
import { Theme } from "@mui/material/styles";
@@ -96,16 +95,16 @@ const FileSelector = ({
<Grid
item
xs={12}
className={`${classes.fileInputField} ${classes.fieldBottom} ${
classes.fieldContainer
} ${error !== "" ? classes.errorInField : ""}`}
className={`inputItem ${classes.fileInputField} ${
classes.fieldBottom
} ${classes.fieldContainer} ${
error !== "" ? classes.errorInField : ""
}`}
>
{label !== "" && (
<InputLabel
htmlFor={id}
className={`${error !== "" ? classes.fieldLabelError : ""} ${
classes.inputLabel
}`}
className={`${error !== "" ? classes.fieldLabelError : ""}`}
>
<span>
{label}
@@ -113,7 +112,7 @@ const FileSelector = ({
</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<Tooltip tooltip={tooltip} placement="top">
<div className={classes.tooltip}>
<HelpIcon />
</div>
@@ -144,12 +143,9 @@ const FileSelector = ({
<IconButton
color="primary"
aria-label="upload picture"
component="span"
onClick={() => {
setShowSelector(false);
}}
disableRipple={false}
disableFocusRipple={false}
size="small"
>
<CancelIcon />
@@ -164,12 +160,9 @@ const FileSelector = ({
<IconButton
color="primary"
aria-label="upload picture"
component="span"
onClick={() => {
setShowSelector(true);
}}
disableRipple={false}
disableFocusRipple={false}
size="small"
>
<AttachFileIcon />

79
portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
View File

@@ -18,19 +18,25 @@ import React, { Fragment, useCallback, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import get from "lodash/get";
import Grid from "@mui/material/Grid";
import { Theme } from "@mui/material/styles";
import { BackLink, Button, PageLayout } from "mds";
import {
BackLink,
breakPoints,
Button,
Grid,
PageLayout,
InputBox,
SectionTitle,
} from "mds";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box } from "@mui/material";
import {
fileInputStyles,
formFieldStyles,
modalBasic,
modalStyleUtils,
settingsCommon,
} from "../../Common/FormComponents/common/styleLibrary";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
import {
azureServiceName,
@@ -348,53 +354,28 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
>
<form noValidate onSubmit={submitForm}>
{type !== "" && targetElement ? (
<Grid
item
xs={12}
key={`icon-${targetElement.targetTitle}`}
sx={{
display: "flex",
alignItems: "center",
justifyContent: "start",
marginBottom: "20px",
}}
>
{targetElement.logo ? (
<Box
sx={{
"& .min-icon": {
height: "60px",
width: "60px",
},
}}
>
{targetElement.logo}
</Box>
) : null}
<div className={classes.lambdaNotifTitle}>
<b>
{titleSelection ? titleSelection : ""} - Add Tier
Configuration
</b>
</div>
</Grid>
<SectionTitle icon={targetElement.logo} sx={{ marginBottom: 20 }}>
{titleSelection ? titleSelection : ""} - Add Tier Configuration
</SectionTitle>
) : null}
<Grid
item
xs={12}
sx={{
display: "grid",
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
gridAutoFlow: { xs: "dense", sm: "row" },
gridRowGap: 25,
gridTemplateColumns: "1fr 1fr",
gridAutoFlow: "row",
gridRowGap: 20,
gridColumnGap: 50,
[`@media (max-width: ${breakPoints.sm}px)`]: {
gridTemplateColumns: "1fr",
gridAutoFlow: "dense",
},
}}
>
{type !== "" && (
<Fragment>
<InputBoxWrapper
<InputBox
id="name"
name="name"
label="Name"
@@ -404,7 +385,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
error={nameInputError}
required
/>
<InputBoxWrapper
<InputBox
id="endpoint"
name="endpoint"
label="Endpoint"
@@ -417,7 +398,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
/>
{(type === s3ServiceName || type === minioServiceName) && (
<Fragment>
<InputBoxWrapper
<InputBox
id="accessKey"
name="accessKey"
label="Access Key"
@@ -428,7 +409,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
}}
required
/>
<InputBoxWrapper
<InputBox
id="secretKey"
name="secretKey"
label="Secret Key"
@@ -462,7 +443,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
)}
{type === azureServiceName && (
<Fragment>
<InputBoxWrapper
<InputBox
id="accountName"
name="accountName"
label="Account Name"
@@ -473,7 +454,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
}}
required
/>
<InputBoxWrapper
<InputBox
id="accountKey"
name="accountKey"
label="Account Key"
@@ -486,7 +467,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
/>
</Fragment>
)}
<InputBoxWrapper
<InputBox
id="bucket"
name="bucket"
label="Bucket"
@@ -497,7 +478,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
}}
required
/>
<InputBoxWrapper
<InputBox
id="prefix"
name="prefix"
label="Prefix"
@@ -519,7 +500,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
type={type as "azure" | "s3" | "minio" | "gcs"}
/>
{type === s3ServiceName && (
<InputBoxWrapper
<InputBox
id="storageClass"
name="storageClass"
label="Storage Class"
@@ -533,7 +514,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
</Fragment>
)}
</Grid>
<Grid item xs={12} className={classes.settingsButtonContainer}>
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"save-tier-configuration"}
type="submit"

322
portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
View File

@@ -17,37 +17,27 @@
import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import { useSelector } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { Box, LinearProgress } from "@mui/material";
import { useNavigate } from "react-router-dom";
import {
ActionLink,
AddIcon,
Box,
Button,
DataTable,
Grid,
HelpBox,
PageLayout,
ProgressBar,
RefreshIcon,
TierOfflineIcon,
TierOnlineIcon,
TiersIcon,
TiersNotAvailableIcon,
} from "mds";
import Grid from "@mui/material/Grid";
import {
actionsTray,
containerForHeader,
searchField,
settingsCommon,
tableStyles,
typesSelection,
} from "../../Common/FormComponents/common/styleLibrary";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import AButton from "../../Common/AButton/AButton";
import SearchBox from "../../Common/SearchBox";
import withSuspense from "../../Common/Components/withSuspense";
import DistributedOnly from "../../Common/DistributedOnly/DistributedOnly";
import { api } from "api";
import { errorToHandler } from "api/errors";
import { Tier } from "api/consoleApi";
import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
import {
CONSOLE_UI_RESOURCE,
IAM_PAGES,
@@ -64,52 +54,19 @@ import {
setErrorSnackMessage,
setHelpName,
} from "../../../../systemSlice";
import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "../../../../store";
import SearchBox from "../../Common/SearchBox";
import withSuspense from "../../Common/Components/withSuspense";
import DistributedOnly from "../../Common/DistributedOnly/DistributedOnly";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
import HelpMenu from "../../HelpMenu";
import { api } from "api";
import { errorToHandler } from "api/errors";
import { Tier } from "api/consoleApi";
const UpdateTierCredentialsModal = withSuspense(
React.lazy(() => import("./UpdateTierCredentialsModal")),
);
interface IListTiersConfig {
classes: any;
}
const styles = (theme: Theme) =>
createStyles({
...actionsTray,
...searchField,
...settingsCommon,
...typesSelection,
...containerForHeader,
customConfigurationPage: {
minHeight: 400,
},
actionsTray: {
...actionsTray.actionsTray,
},
searchField: {
...searchField.searchField,
marginRight: "auto",
maxWidth: 380,
},
rightActionButtons: {
display: "flex",
"& button": {
whiteSpace: "nowrap",
},
},
...tableStyles,
});
const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
const ListTiersConfiguration = () => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
@@ -206,9 +163,8 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
justifyItems: "start",
color: "#4CCB92",
fontSize: "8px",
flexDirection: "column",
}}
flexDirection={"column"}
display={"flex"}
>
<TierOnlineIcon style={{ fill: "#4CCB92", width: 14, height: 14 }} />
ONLINE
@@ -220,12 +176,11 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
container
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
color: "#C83B51",
fontSize: "8px",
}}
flexDirection={"column"}
display={"flex"}
>
<TierOfflineIcon style={{ fill: "#C83B51", width: 14, height: 14 }} />
OFFLINE
@@ -331,15 +286,24 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
/>
) : (
<Fragment>
<Grid item xs={12} className={classes.actionsTray}>
<Grid item xs={12} sx={actionsTray.actionsTray}>
<SearchBox
placeholder="Filter"
onChange={setFilter}
overrideClass={classes.searchField}
value={filter}
sx={{
marginRight: "auto",
maxWidth: 380,
}}
/>
<div className={classes.rightActionButtons}>
<Box
sx={{
display: "flex",
flexWrap: "nowrap",
gap: 5,
}}
>
<Button
id={"refresh-list"}
icon={<RefreshIcon />}
@@ -371,99 +335,97 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
/>
</SecureComponent>
</TooltipWrapper>
</div>
</Box>
</Grid>
{isLoading && <LinearProgress />}
{isLoading && <ProgressBar />}
{!isLoading && (
<Fragment>
{records.length > 0 && (
<Fragment>
<Grid item xs={12} className={classes.tableBlock}>
<Grid item xs={12}>
<SecureComponent
scopes={[IAM_SCOPES.ADMIN_LIST_TIERS]}
resource={CONSOLE_UI_RESOURCE}
errorProps={{ disabled: true }}
>
<Box sx={{ width: "100%" }}>
<TableWrapper
itemActions={[
{
type: "edit",
onClick: (tierData: Tier) => {
setSelectedTier(tierData);
setUpdateCredentialsOpen(true);
},
<DataTable
itemActions={[
{
type: "edit",
onClick: (tierData: Tier) => {
setSelectedTier(tierData);
setUpdateCredentialsOpen(true);
},
]}
columns={[
{
label: "Tier Name",
elementKey: "type",
renderFunction: renderTierName,
renderFullObject: true,
},
{
label: "Status",
elementKey: "status",
renderFunction: renderTierStatus,
width: 50,
},
{
label: "Type",
elementKey: "type",
renderFunction: renderTierType,
width: 50,
},
{
label: "Endpoint",
elementKey: "type",
renderFunction: renderTierEndpoint,
renderFullObject: true,
},
{
label: "Bucket",
elementKey: "type",
renderFunction: renderTierBucket,
renderFullObject: true,
},
{
label: "Prefix",
elementKey: "type",
renderFunction: renderTierPrefix,
renderFullObject: true,
},
{
label: "Region",
elementKey: "type",
renderFunction: renderTierRegion,
renderFullObject: true,
},
{
label: "Usage",
elementKey: "type",
renderFunction: renderTierUsage,
renderFullObject: true,
},
{
label: "Objects",
elementKey: "type",
renderFunction: renderTierObjects,
renderFullObject: true,
},
{
label: "Versions",
elementKey: "type",
renderFunction: renderTierVersions,
renderFullObject: true,
},
]}
isLoading={isLoading}
records={filteredRecords}
entityName="Tiers"
idField="service_name"
customPaperHeight={classes.customConfigurationPage}
/>
</Box>
},
]}
columns={[
{
label: "Tier Name",
elementKey: "type",
renderFunction: renderTierName,
renderFullObject: true,
},
{
label: "Status",
elementKey: "status",
renderFunction: renderTierStatus,
width: 50,
},
{
label: "Type",
elementKey: "type",
renderFunction: renderTierType,
width: 50,
},
{
label: "Endpoint",
elementKey: "type",
renderFunction: renderTierEndpoint,
renderFullObject: true,
},
{
label: "Bucket",
elementKey: "type",
renderFunction: renderTierBucket,
renderFullObject: true,
},
{
label: "Prefix",
elementKey: "type",
renderFunction: renderTierPrefix,
renderFullObject: true,
},
{
label: "Region",
elementKey: "type",
renderFunction: renderTierRegion,
renderFullObject: true,
},
{
label: "Usage",
elementKey: "type",
renderFunction: renderTierUsage,
renderFullObject: true,
},
{
label: "Objects",
elementKey: "type",
renderFunction: renderTierObjects,
renderFullObject: true,
},
{
label: "Versions",
elementKey: "type",
renderFunction: renderTierVersions,
renderFullObject: true,
},
]}
isLoading={isLoading}
records={filteredRecords}
entityName="Tiers"
idField="service_name"
customPaperHeight={"400px"}
/>
</SecureComponent>
</Grid>
<Grid
@@ -502,40 +464,36 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
</Fragment>
)}
{records.length === 0 && (
<Grid
container
justifyContent={"center"}
alignContent={"center"}
alignItems={"center"}
>
<Grid item xs={8}>
<HelpBox
title={"Tiers"}
iconComponent={<TiersIcon />}
help={
<Fragment>
Tiers are used by the MinIO Object Lifecycle
Management which allows creating rules for time or
date based automatic transition or expiry of
objects. For object transition, MinIO automatically
moves the object to a configured remote storage
tier.
<br />
<br />
{hasSetTier ? (
<div>
To get started,{" "}
<AButton onClick={addTier}>Create Tier</AButton>
.
</div>
) : (
""
)}
</Fragment>
}
/>
</Grid>
</Grid>
<HelpBox
title={"Tiers"}
iconComponent={<TiersIcon />}
help={
<Fragment>
Tiers are used by the MinIO Object Lifecycle Management
which allows creating rules for time or date based
automatic transition or expiry of objects. For object
transition, MinIO automatically moves the object to a
configured remote storage tier.
<br />
<br />
{hasSetTier ? (
<div>
To get started,{" "}
<ActionLink
isLoading={false}
label={""}
onClick={addTier}
>
Create Tier
</ActionLink>
.
</div>
) : (
""
)}
</Fragment>
}
/>
)}
</Fragment>
)}
@@ -546,4 +504,4 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
);
};
export default withStyles(styles)(ListTiersConfiguration);
export default ListTiersConfiguration;

15
portal-ui/src/screens/Console/Configurations/TiersConfiguration/RegionSelectWrapper.tsx
View File

@@ -13,8 +13,9 @@
//
// 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 { Grid, IconButton, InputLabel, Tooltip } from "@mui/material";
import { Grid, IconButton, InputLabel, Tooltip } from "mds";
import { InputProps as StandardInputProps } from "@mui/material/Input";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
@@ -127,19 +128,14 @@ const RegionSelectWrapper = ({
)}
>
{label !== "" && (
<InputLabel
htmlFor={id}
className={
noLabelMinWidth ? classes.noMinWidthLabel : classes.inputLabel
}
>
<InputLabel htmlFor={id} noMinWidth={noLabelMinWidth}>
<span>
{label}
{required ? "*" : ""}
</span>
{tooltip !== "" && (
<div className={classes.tooltipContainer}>
<Tooltip title={tooltip} placement="top-start">
<Tooltip tooltip={tooltip} placement="top">
<div className={classes.tooltip}>
<HelpIcon />
</div>
@@ -171,9 +167,6 @@ const RegionSelectWrapper = ({
}
id={overlayId}
size={"small"}
disableFocusRipple={false}
disableRipple={false}
disableTouchRipple={false}
>
{overlayIcon}
</IconButton>

81
portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx
View File

@@ -15,9 +15,39 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import React from "react";
import { Box, Grid } from "@mui/material";
import styled from "styled-components";
import get from "lodash/get";
import { Button } from "mds";
const TierButtonBase = styled.button(({ theme }) => ({
background: get(theme, "boxBackground", "#FFF"),
border: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
borderRadius: 5,
height: 80,
display: "flex",
alignItems: "center",
justifyContent: "start",
marginBottom: 16,
marginRight: 8,
cursor: "pointer",
overflow: "hidden",
"&:hover": {
backgroundColor: get(theme, "buttons.regular.hover.background", "#ebebeb"),
},
"& .imageContainer": {
width: 80,
"& .min-icon": {
maxWidth: 46,
maxHeight: 46,
},
},
"& .tierNotifTitle": {
color: get(theme, "buttons.callAction.enabled.background", "#07193E"),
fontSize: 16,
fontFamily: "Inter,sans-serif",
paddingLeft: 18,
fontWeight: "bold",
},
}));
type TierTypeCardProps = {
onClick: (name: string) => void;
@@ -25,54 +55,15 @@ type TierTypeCardProps = {
name: string;
};
const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => {
const styles = {
tierTypeCard: {
height: "80px",
width: "auto",
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
padding: 5,
border: "1px solid #E5E5E5",
borderRadius: 2,
cursor: "pointer",
overflow: "hidden",
"&:hover": { background: "#ebebeb" },
},
tierTypeTitle: {
fontWeight: 600,
fontSize: 14,
justifyContent: "center",
},
};
return (
<Button
id={name}
<TierButtonBase
onClick={() => {
onClick(name);
}}
style={styles.tierTypeCard}
>
<Grid container alignItems={"center"}>
{icon ? (
<Grid item padding={1} xs={4}>
<Box
sx={{
"& .min-icon": {
height: "30px",
width: "30px",
},
}}
>
{icon}
</Box>
</Grid>
) : null}
<Grid item xs={8} style={styles.tierTypeTitle} paddingLeft={1}>
{name}
</Grid>
</Grid>
</Button>
<span className={"imageContainer"}>{icon}</span>
<span className={"tierNotifTitle"}>{name}</span>
</TierButtonBase>
);
};

200
portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
View File

@@ -16,47 +16,25 @@
import React, { Fragment, useEffect, useState } from "react";
import get from "lodash/get";
import { Button, LockIcon } from "mds";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import {
formFieldStyles,
modalBasic,
} from "../../Common/FormComponents/common/styleLibrary";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
import { setModalErrorSnackMessage } from "../../../../systemSlice";
import { useAppDispatch } from "../../../../store";
import { Button, FormLayout, Grid, InputBox, LockIcon, ProgressBar } from "mds";
import { Tier } from "api/consoleApi";
import { api } from "api";
import { errorToHandler } from "api/errors";
import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../systemSlice";
import { useAppDispatch } from "../../../../store";
import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
interface ITierCredentialsModal {
open: boolean;
closeModalAndRefresh: (refresh: boolean) => any;
classes: any;
tierData: Tier;
}
const styles = (theme: Theme) =>
createStyles({
buttonContainer: {
display: "flex",
justifyContent: "flex-end",
},
...modalBasic,
...formFieldStyles,
});
const UpdateTierCredentialsModal = ({
open,
closeModalAndRefresh,
classes,
tierData,
}: ITierCredentialsModal) => {
const dispatch = useAppDispatch();
@@ -142,98 +120,88 @@ const UpdateTierCredentialsModal = ({
addRecord();
}}
>
<Grid container>
<Grid item xs={12}>
{(type === "s3" || type === "minio") && (
<Fragment>
<div className={classes.formFieldRow}>
<InputBoxWrapper
id="accessKey"
name="accessKey"
label="Access Key"
placeholder="Enter Access Key"
value={accountName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountName(e.target.value);
}}
/>
</div>
<div className={classes.formFieldRow}>
<InputBoxWrapper
id="secretKey"
name="secretKey"
label="Secret Key"
placeholder="Enter Secret Key"
value={accountKey}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountKey(e.target.value);
}}
/>
</div>
</Fragment>
)}
{type === "gcs" && (
<Fragment>
<FileSelector
accept=".json"
id="creds"
label="Credentials"
name="creds"
onChange={(encodedValue, fileName) => {
setEncodedCreds(encodedValue);
setCreds(fileName);
}}
value={creds}
/>
</Fragment>
)}
{type === "azure" && (
<Fragment>
<div className={classes.formFieldRow}>
<InputBoxWrapper
id="accountName"
name="accountName"
label="Account Name"
placeholder="Enter Account Name"
value={accountName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountName(e.target.value);
}}
/>
</div>
<div className={classes.formFieldRow}>
<InputBoxWrapper
id="accountKey"
name="accountKey"
label="Account Key"
placeholder="Enter Account Key"
value={accountKey}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountKey(e.target.value);
}}
/>
</div>
</Fragment>
)}
</Grid>
<Grid item xs={12} className={classes.buttonContainer}>
<Button
id={"save-credentials"}
type="submit"
variant="callAction"
disabled={savingTiers || !isFormValid}
label={"Save"}
/>
</Grid>
{savingTiers && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
<FormLayout withBorders={false} containerPadding={false}>
{(type === "s3" || type === "minio") && (
<Fragment>
<InputBox
id="accessKey"
name="accessKey"
label="Access Key"
placeholder="Enter Access Key"
value={accountName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountName(e.target.value);
}}
/>
<InputBox
id="secretKey"
name="secretKey"
label="Secret Key"
placeholder="Enter Secret Key"
value={accountKey}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountKey(e.target.value);
}}
/>
</Fragment>
)}
{type === "gcs" && (
<Fragment>
<FileSelector
accept=".json"
id="creds"
label="Credentials"
name="creds"
onChange={(encodedValue, fileName) => {
setEncodedCreds(encodedValue);
setCreds(fileName);
}}
value={creds}
/>
</Fragment>
)}
{type === "azure" && (
<Fragment>
<InputBox
id="accountName"
name="accountName"
label="Account Name"
placeholder="Enter Account Name"
value={accountName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountName(e.target.value);
}}
/>
<InputBox
id="accountKey"
name="accountKey"
label="Account Key"
placeholder="Enter Account Key"
value={accountKey}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountKey(e.target.value);
}}
/>
</Fragment>
)}
</FormLayout>
{savingTiers && (
<Grid item xs={12}>
<ProgressBar />
</Grid>
)}
<Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
<Button
id={"save-credentials"}
type="submit"
variant="callAction"
disabled={savingTiers || !isFormValid}
label={"Save"}
/>
</Grid>
</form>
</ModalWrapper>
);
};
export default withStyles(styles)(UpdateTierCredentialsModal);
export default UpdateTierCredentialsModal;