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

UX Tiers screen (#1258)

Browse Source
This commit is contained in:
Prakash Senthil Vel
2021-11-28 07:13:47 +00:00
committed by GitHub
parent b9873fa471
commit 400892565d
6 changed files with 296 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -112,9 +112,9 @@ const FileSelector = ({
<Grid <Grid
item item
xs={12} xs={12}
className={`${classes.fieldBottom} ${classes.fieldContainer} ${ className={`${classes.fileInputField} ${classes.fieldBottom} ${
error !== "" ? classes.errorInField : "" classes.fieldContainer
}`} } ${error !== "" ? classes.errorInField : ""}`}
> >
{label !== "" && ( {label !== "" && (
<InputLabel <InputLabel

19
portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View File

@@ -1120,6 +1120,25 @@ export const formFieldStyles = {
}, },
}; };
export const fileInputStyles = {
fieldBottom: {
borderBottom: 0,
},
fileReselect: {
border: "1px solid #EAEAEA",
width: "100%",
paddingLeft: 10,
},
textBoxContainer: {
border: "1px solid #EAEAEA",
padding: 5,
"& input": {
width: "100%",
margin: "auto",
},
},
};
export const deleteDialogStyles = { export const deleteDialogStyles = {
root: { root: {
"& .MuiPaper-root": { "& .MuiPaper-root": {

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

@@ -24,6 +24,8 @@ import withStyles from "@mui/styles/withStyles";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { setErrorSnackMessage } from "../../../../actions"; import { setErrorSnackMessage } from "../../../../actions";
import { import {
fileInputStyles,
formFieldStyles,
modalBasic, modalBasic,
settingsCommon, settingsCommon,
} from "../../Common/FormComponents/common/styleLibrary"; } from "../../Common/FormComponents/common/styleLibrary";
@@ -31,7 +33,6 @@ import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api"; import api from "../../../../common/api";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector"; import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
import BackSettingsIcon from "../../../../icons/BackSettingsIcon";
import PageHeader from "../../Common/PageHeader/PageHeader"; import PageHeader from "../../Common/PageHeader/PageHeader";
import { import {
azureServiceName, azureServiceName,
@@ -40,11 +41,14 @@ import {
s3ServiceName, s3ServiceName,
tierTypes, tierTypes,
} from "./utils"; } from "./utils";
import BackLink from "../../../../common/BackLink";
import PageLayout from "../../Common/Layout/PageLayout";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
...modalBasic, ...modalBasic,
...settingsCommon, ...settingsCommon,
...formFieldStyles,
strongText: { strongText: {
fontWeight: 700, fontWeight: 700,
}, },
@@ -72,7 +76,6 @@ const styles = (theme: Theme) =>
alignItems: "center", alignItems: "center",
justifyContent: "start", justifyContent: "start",
marginBottom: 16, marginBottom: 16,
marginRight: 8,
cursor: "pointer", cursor: "pointer",
padding: 0, padding: 0,
overflow: "hidden", overflow: "hidden",
@@ -104,6 +107,11 @@ const styles = (theme: Theme) =>
backTo: { backTo: {
margin: "20px 0px 0", margin: "20px 0px 0",
}, },
formBox: {
border: "1px solid #EAEAEA",
padding: 15,
},
...fileInputStyles,
}); });
interface IAddNotificationEndpointProps { interface IAddNotificationEndpointProps {
@@ -340,22 +348,15 @@ const AddTierConfiguration = ({
setName(e.target.value.toUpperCase()); setName(e.target.value.toUpperCase());
}; };
const backClick = () => {
history.push("/tiers/add");
};
const targetElement = tierTypes.find((item) => item.serviceName === type); const targetElement = tierTypes.find((item) => item.serviceName === type);
return ( return (
<Fragment> <Fragment>
<PageHeader label="Tiers" /> <PageHeader label="Tiers" />
<Grid container className={classes.mainCont}>
<Grid item xs={12} className={classes.backTo}> <BackLink to="/tiers/add" label="Back To Tier Type Selection" />
<button onClick={backClick} className={classes.backButton}>
<BackSettingsIcon /> <PageLayout>
Back To Tier Type Selection
</button>
</Grid>
{type !== "" && ( {type !== "" && (
<Fragment> <Fragment>
<Grid item xs={12}> <Grid item xs={12}>
@@ -383,62 +384,71 @@ const AddTierConfiguration = ({
</Fragment> </Fragment>
)} )}
<Grid item xs={12}> <Grid item xs={12}>
<form noValidate onSubmit={submitForm}> <div className={classes.formBox}>
<Grid item xs={12}> <form noValidate onSubmit={submitForm}>
<Grid container> <Grid item xs={12}>
{type !== "" && ( {type !== "" && (
<Fragment> <Fragment>
<InputBoxWrapper <div className={classes.formFieldRow}>
id="name" <InputBoxWrapper
name="name" id="name"
label="Name" name="name"
placeholder="Enter Name (Eg. REMOTE-TIER)" label="Name"
value={name} placeholder="Enter Name (Eg. REMOTE-TIER)"
onChange={updateTierName} value={name}
error={nameInputError} onChange={updateTierName}
/> error={nameInputError}
<InputBoxWrapper />
id="endpoint" </div>
name="endpoint" <div className={classes.formFieldRow}>
label="Endpoint" <InputBoxWrapper
placeholder="Enter Endpoint" id="endpoint"
value={endpoint} name="endpoint"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { label="Endpoint"
setEndpoint(e.target.value); placeholder="Enter Endpoint"
}} value={endpoint}
/> onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setEndpoint(e.target.value);
}}
/>
</div>
{(type === s3ServiceName || type === minioServiceName) && ( {(type === s3ServiceName || type === minioServiceName) && (
<Fragment> <Fragment>
<InputBoxWrapper <div className={classes.formFieldRow}>
id="accessKey" <InputBoxWrapper
name="accessKey" id="accessKey"
label="Access Key" name="accessKey"
placeholder="Enter Access Key" label="Access Key"
value={accessKey} placeholder="Enter Access Key"
onChange={( value={accessKey}
e: React.ChangeEvent<HTMLInputElement> onChange={(
) => { e: React.ChangeEvent<HTMLInputElement>
setAccessKey(e.target.value); ) => {
}} setAccessKey(e.target.value);
/> }}
<InputBoxWrapper />
id="secretKey" </div>
name="secretKey" <div className={classes.formFieldRow}>
label="Secret Key" <InputBoxWrapper
placeholder="Enter Secret Key" id="secretKey"
value={secretKey} name="secretKey"
onChange={( label="Secret Key"
e: React.ChangeEvent<HTMLInputElement> placeholder="Enter Secret Key"
) => { value={secretKey}
setSecretKey(e.target.value); onChange={(
}} e: React.ChangeEvent<HTMLInputElement>
/> ) => {
setSecretKey(e.target.value);
}}
/>
</div>
</Fragment> </Fragment>
)} )}
{type === gcsServiceName && ( {type === gcsServiceName && (
<Fragment> <div className={classes.formFieldRow}>
<FileSelector <FileSelector
accept=".json" accept=".json"
classes={classes}
id="creds" id="creds"
label="Credentials" label="Credentials"
name="creds" name="creds"
@@ -448,98 +458,110 @@ const AddTierConfiguration = ({
}} }}
value={creds} value={creds}
/> />
</Fragment> </div>
)} )}
{type === azureServiceName && ( {type === azureServiceName && (
<Fragment> <Fragment>
<InputBoxWrapper <div className={classes.formFieldRow}>
id="accountName" <InputBoxWrapper
name="accountName" id="accountName"
label="Account Name" name="accountName"
placeholder="Enter Account Name" label="Account Name"
value={accountName} placeholder="Enter Account Name"
onChange={( value={accountName}
e: React.ChangeEvent<HTMLInputElement> onChange={(
) => { e: React.ChangeEvent<HTMLInputElement>
setAccountName(e.target.value); ) => {
}} setAccountName(e.target.value);
/> }}
<InputBoxWrapper />
id="accountKey" </div>
name="accountKey" <div className={classes.formFieldRow}>
label="Account Key" <InputBoxWrapper
placeholder="Enter Account Key" id="accountKey"
value={accountKey} name="accountKey"
onChange={( label="Account Key"
e: React.ChangeEvent<HTMLInputElement> placeholder="Enter Account Key"
) => { value={accountKey}
setAccountKey(e.target.value); onChange={(
}} e: React.ChangeEvent<HTMLInputElement>
/> ) => {
setAccountKey(e.target.value);
}}
/>
</div>
</Fragment> </Fragment>
)} )}
<InputBoxWrapper <div className={classes.formFieldRow}>
id="bucket" <InputBoxWrapper
name="bucket" id="bucket"
label="Bucket" name="bucket"
placeholder="Enter Bucket" label="Bucket"
value={bucket} placeholder="Enter Bucket"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { value={bucket}
setBucket(e.target.value); onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
}} setBucket(e.target.value);
/> }}
<InputBoxWrapper />
id="prefix" </div>
name="prefix" <div className={classes.formFieldRow}>
label="Prefix" <InputBoxWrapper
placeholder="Enter Prefix" id="prefix"
value={prefix} name="prefix"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { label="Prefix"
setPrefix(e.target.value); placeholder="Enter Prefix"
}} value={prefix}
/> onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
<InputBoxWrapper setPrefix(e.target.value);
id="region" }}
name="region" />
label="Region" </div>
placeholder="Enter Region" <div className={classes.formFieldRow}>
value={region} <InputBoxWrapper
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { id="region"
setRegion(e.target.value); name="region"
}} label="Region"
/> placeholder="Enter Region"
value={region}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setRegion(e.target.value);
}}
/>
</div>
{type === s3ServiceName || {type === s3ServiceName ||
(type === minioServiceName && ( (type === minioServiceName && (
<InputBoxWrapper <div className={classes.formFieldRow}>
id="storageClass" <InputBoxWrapper
name="storageClass" id="storageClass"
label="Storage Class" name="storageClass"
placeholder="Enter Storage Class" label="Storage Class"
value={storageClass} placeholder="Enter Storage Class"
onChange={( value={storageClass}
e: React.ChangeEvent<HTMLInputElement> onChange={(
) => { e: React.ChangeEvent<HTMLInputElement>
setStorageClass(e.target.value); ) => {
}} setStorageClass(e.target.value);
/> }}
/>
</div>
))} ))}
</Fragment> </Fragment>
)} )}
</Grid> </Grid>
</Grid> <Grid item xs={12} className={classes.settingsButtonContainer}>
<Grid item xs={12} className={classes.settingsButtonContainer}> <Button
<Button type="submit"
type="submit" variant="contained"
variant="contained" color="primary"
color="primary" disabled={saving || !isFormValid}
disabled={saving || !isFormValid} >
> Save
Save </Button>
</Button> </Grid>
</Grid> </form>
</form> </div>
</Grid> </Grid>
</Grid> </PageLayout>
</Fragment> </Fragment>
); );
}; };

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

@@ -20,15 +20,15 @@ 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";
import withStyles from "@mui/styles/withStyles"; import withStyles from "@mui/styles/withStyles";
import { LinearProgress, TextField } from "@mui/material"; import { LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import InputAdornment from "@mui/material/InputAdornment";
import { import {
actionsTray, actionsTray,
containerForHeader, containerForHeader,
searchField, searchField,
settingsCommon, settingsCommon,
tableStyles,
typesSelection, typesSelection,
} from "../../Common/FormComponents/common/styleLibrary"; } from "../../Common/FormComponents/common/styleLibrary";
import { AddIcon, TiersIcon } from "../../../../icons"; import { AddIcon, TiersIcon } from "../../../../icons";
@@ -38,13 +38,19 @@ import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api"; import api from "../../../../common/api";
import TableWrapper from "../../Common/TableWrapper/TableWrapper"; import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import UpdateTierCredentiasModal from "./UpdateTierCredentiasModal";
import RefreshIcon from "../../../../icons/RefreshIcon"; import RefreshIcon from "../../../../icons/RefreshIcon";
import SearchIcon from "../../../../icons/SearchIcon";
import PageHeader from "../../Common/PageHeader/PageHeader"; import PageHeader from "../../Common/PageHeader/PageHeader";
import HelpBox from "../../../../common/HelpBox"; import HelpBox from "../../../../common/HelpBox";
import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton"; import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
import AButton from "../../Common/AButton/AButton"; import AButton from "../../Common/AButton/AButton";
import PageLayout from "../../Common/Layout/PageLayout";
import SearchBox from "../../Common/SearchBox";
import withSuspense from "../../Common/Components/withSuspense";
const UpdateTierCredentialsModal = withSuspense(
React.lazy(() => import("./UpdateTierCredentialsModal"))
);
interface IListTiersConfig { interface IListTiersConfig {
classes: any; classes: any;
@@ -59,25 +65,25 @@ const styles = (theme: Theme) =>
...settingsCommon, ...settingsCommon,
...typesSelection, ...typesSelection,
...containerForHeader(theme.spacing(4)), ...containerForHeader(theme.spacing(4)),
strongText: {
fontWeight: 700,
},
keyName: {
marginLeft: 5,
},
iconText: {
lineHeight: "24px",
},
customConfigurationPage: { customConfigurationPage: {
minHeight: 400, minHeight: 400,
}, },
actionsTray: { actionsTray: {
...actionsTray.actionsTray, ...actionsTray.actionsTray,
}, },
customTitle: { searchField: {
...settingsCommon.customTitle, ...searchField.searchField,
marginTop: 0, marginRight: "auto",
maxWidth: 380,
}, },
rightActionButtons: {
display: "flex",
"& button": {
whiteSpace: "nowrap",
},
},
...tableStyles,
}); });
const ListTiersConfiguration = ({ const ListTiersConfiguration = ({
@@ -183,61 +189,48 @@ const ListTiersConfiguration = ({
return ( return (
<Fragment> <Fragment>
{updateCredentialsOpen && ( {updateCredentialsOpen && (
<UpdateTierCredentiasModal <UpdateTierCredentialsModal
open={updateCredentialsOpen} open={updateCredentialsOpen}
tierData={selectedTier} tierData={selectedTier}
closeModalAndRefresh={closeTierCredentials} closeModalAndRefresh={closeTierCredentials}
/> />
)} )}
<PageHeader label="Tiers" /> <PageHeader label="Tiers" />
<Grid container className={classes.container}> <PageLayout>
<Grid item xs={12} className={classes.actionsTray}> <Grid item xs={12} className={classes.actionsTray}>
<TextField <SearchBox
placeholder="Filter" placeholder="Filter"
className={classes.searchField} onChange={setFilter}
id="search-resource" classes={classes}
label=""
onChange={(event) => {
setFilter(event.target.value);
}}
InputProps={{
disableUnderline: true,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
variant="standard"
/> />
<BoxIconButton
color="primary" <div className={classes.rightActionButtons}>
aria-label="Refresh List" <BoxIconButton
onClick={() => { color="primary"
setIsLoading(true); aria-label="Refresh List"
}} onClick={() => {
size="large" setIsLoading(true);
> }}
<RefreshIcon /> size="large"
</BoxIconButton> >
<Button <RefreshIcon />
variant="contained" </BoxIconButton>
color="primary" <Button
endIcon={<AddIcon />} variant="contained"
onClick={addTier} color="primary"
> endIcon={<AddIcon />}
Add Tier onClick={addTier}
</Button> >
</Grid> Add Tier
<Grid item xs={12}> </Button>
<br /> </div>
</Grid> </Grid>
{isLoading && <LinearProgress />} {isLoading && <LinearProgress />}
{!isLoading && ( {!isLoading && (
<Fragment> <Fragment>
{records.length > 0 && ( {records.length > 0 && (
<Fragment> <Fragment>
<Grid item xs={12}> <Grid item xs={12} className={classes.tableBlock}>
<TableWrapper <TableWrapper
itemActions={[ itemActions={[
{ {
@@ -350,7 +343,7 @@ const ListTiersConfiguration = ({
)} )}
</Fragment> </Fragment>
)} )}
</Grid> </PageLayout>
</Fragment> </Fragment>
); );
}; };

14
portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
View File

@@ -29,6 +29,7 @@ import {
import PageHeader from "../../Common/PageHeader/PageHeader"; import PageHeader from "../../Common/PageHeader/PageHeader";
import { tierTypes } from "./utils"; import { tierTypes } from "./utils";
import BackLink from "../../../../common/BackLink"; import BackLink from "../../../../common/BackLink";
import PageLayout from "../../Common/Layout/PageLayout";
interface ITypeTiersConfig { interface ITypeTiersConfig {
classes: any; classes: any;
@@ -87,14 +88,13 @@ const TierTypeSelector = ({ classes, history }: ITypeTiersConfig) => {
return ( return (
<Fragment> <Fragment>
<PageHeader label="Tier Configuration" /> <PageHeader label="Tier Configuration" />
<Grid container className={classes.mainCont}> <BackLink to="/tiers" label="Return to Configured Tiers" />
<Grid item xs={12}>
<Grid item xs={12} className={classes.mainTitle}> <PageLayout>
<BackLink to="/tiers" label="Return to Configured Tiers" /> <Grid>
</Grid>
<Grid item xs={12}> <Grid item xs={12}>
<Grid item xs={12}> <Grid item xs={12}>
<Grid item xs={12} className={classes.centerElements}> <Grid item xs={12}>
<div className={classes.iconContainer}> <div className={classes.iconContainer}>
{tierTypes.map((tierType, index) => ( {tierTypes.map((tierType, index) => (
<button <button
@@ -122,7 +122,7 @@ const TierTypeSelector = ({ classes, history }: ITypeTiersConfig) => {
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </PageLayout>
</Fragment> </Fragment>
); );
}; };

97
portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentiasModal.tsx → portal-ui/src/screens/Console/Configurations/TiersConfiguration/UpdateTierCredentialsModal.tsx
View File

@@ -22,7 +22,10 @@ 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 { modalBasic } from "../../Common/FormComponents/common/styleLibrary"; import {
formFieldStyles,
modalBasic,
} from "../../Common/FormComponents/common/styleLibrary";
import { setModalErrorSnackMessage } from "../../../../actions"; import { setModalErrorSnackMessage } from "../../../../actions";
import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector"; import FileSelector from "../../Common/FormComponents/FileSelector/FileSelector";
@@ -53,6 +56,7 @@ const styles = (theme: Theme) =>
textAlign: "right", textAlign: "right",
}, },
...modalBasic, ...modalBasic,
...formFieldStyles,
}); });
const UpdateTierCredentialsModal = ({ const UpdateTierCredentialsModal = ({
@@ -143,34 +147,39 @@ const UpdateTierCredentialsModal = ({
}} }}
> >
<Grid container> <Grid container>
<Grid item xs={12} className={classes.formScrollable}> <Grid item xs={12}>
{type === "s3" && ( {type === "s3" && (
<Fragment> <Fragment>
<InputBoxWrapper <div className={classes.formFieldRow}>
id="accessKey" <InputBoxWrapper
name="accessKey" id="accessKey"
label="Access Key" name="accessKey"
placeholder="Enter Access Key" label="Access Key"
value={accessKey} placeholder="Enter Access Key"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { value={accessKey}
setAccessKey(e.target.value); onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
}} setAccessKey(e.target.value);
/> }}
<InputBoxWrapper />
id="secretKey" </div>
name="secretKey" <div className={classes.formFieldRow}>
label="Secret Key" <InputBoxWrapper
placeholder="Enter Secret Key" id="secretKey"
value={secretKey} name="secretKey"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { label="Secret Key"
setSecretKey(e.target.value); placeholder="Enter Secret Key"
}} value={secretKey}
/> onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSecretKey(e.target.value);
}}
/>
</div>
</Fragment> </Fragment>
)} )}
{type === "gcs" && ( {type === "gcs" && (
<Fragment> <Fragment>
<FileSelector <FileSelector
classes={classes}
accept=".json" accept=".json"
id="creds" id="creds"
label="Credentials" label="Credentials"
@@ -185,26 +194,30 @@ const UpdateTierCredentialsModal = ({
)} )}
{type === "azure" && ( {type === "azure" && (
<Fragment> <Fragment>
<InputBoxWrapper <div className={classes.formFieldRow}>
id="accountName" <InputBoxWrapper
name="accountName" id="accountName"
label="Account Name" name="accountName"
placeholder="Enter Account Name" label="Account Name"
value={accountName} placeholder="Enter Account Name"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { value={accountName}
setAccountName(e.target.value); onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
}} setAccountName(e.target.value);
/> }}
<InputBoxWrapper />
id="accountKey" </div>
name="accountKey" <div className={classes.formFieldRow}>
label="Account Key" <InputBoxWrapper
placeholder="Enter Account Key" id="accountKey"
value={accountKey} name="accountKey"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { label="Account Key"
setAccountKey(e.target.value); placeholder="Enter Account Key"
}} value={accountKey}
/> onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setAccountKey(e.target.value);
}}
/>
</div>
</Fragment> </Fragment>
)} )}
</Grid> </Grid>