Skip to content

UX Create New Tenant #1266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 30, 2021
Merged

UX Create New Tenant #1266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15bb4a5
UX Create New Tenant
prakashsvmx Nov 30, 2021
7eec731
Merge branch 'master' into new-tenant-ux
bexsoft Nov 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...al-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export const RadioGroupSelector = ({
)}
</InputLabel>
</Grid>
<Grid item xs>
<Grid item xs className={classes.radioOptionsLayout}>
<RadioGroup
aria-label={id}
id={id}
Expand Down
12 changes: 12 additions & 0 deletions portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -732,6 +732,7 @@ export const wizardCommon = {
},
h3Section: {
marginTop: 0,
margin: 0,
},
descriptionText: {
fontSize: 13,
Expand All @@ -751,6 +752,7 @@ export const wizardCommon = {
},
paperWrapper: {
padding: 12,
border: 0,
},
};

Expand Down Expand Up @@ -874,6 +876,9 @@ export const inputFieldStyles = {
borderColor: "#07193E",
borderWidth: 1,
},
"&.Mui-error + p": {
marginLeft: 3,
},
},
disabled: {
"&.MuiOutlinedInput-root::before": {
Expand Down Expand Up @@ -1202,3 +1207,10 @@ export const advancedFilterToggleStyles: any = {
transform: "rotateZ(90deg)",
},
};

export const createTenantCommon: any = {
fieldGroup: {
border: "1px solid #EAEAEA",
paddingTop: 5,
},
};
38 changes: 36 additions & 2 deletions portal-ui/src/screens/Console/Common/GenericWizard/GenericWizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const styles = (theme: Theme) =>
paddedContentGrid: {
marginTop: 8,
padding: "0 10px",
minHeight: 400,
},
stepsLabel: {
fontSize: 20,
Expand All @@ -89,6 +90,21 @@ const styles = (theme: Theme) =>
width: "100%",
maxHeight: 90,
},
verticalSteps: {
borderRight: "1px solid #EAEAEA",
background: "#FBFAFA",
},
stepsContainer: {
paddingTop: 0,
"& .MuiButtonBase-root.Mui-selected": {
background: "#EAEAEA",
},
},
stepItem: {
"&:hover": {
background: "rgba(247,247,247,0.7)",
},
},
});

const GenericWizard = ({
Expand Down Expand Up @@ -143,14 +159,24 @@ const GenericWizard = ({
const stepsList = () => {
return (
<Fragment>
<List component="nav" dense={true}>
<List
component="nav"
dense={true}
classes={{
root: classes.stepsContainer,
}}
>
{wizardSteps.map((step, index) => {
return (
<ListItem
button
disableRipple
onClick={() => pageChange(index)}
key={`wizard-${index.toString()}`}
selected={currentStep === index}
classes={{
root: classes.stepItem,
}}
>
<ListItemText primary={step.label} />
</ListItem>
Expand Down Expand Up @@ -194,7 +220,15 @@ const GenericWizard = ({
</Fragment>
) : (
<Fragment>
<Grid item xs={12} sm={2} md={2} lg={2} xl={2}>
<Grid
item
xs={12}
sm={2}
md={2}
lg={2}
xl={2}
className={classes.verticalSteps}
>
{stepsList()}
</Grid>
</Fragment>
Expand Down
6 changes: 4 additions & 2 deletions portal-ui/src/screens/Console/Common/GenericWizard/WizardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,14 @@ const styles = (theme: Theme) =>
wizardStepContainer: {
display: "flex",
flexDirection: "column",
flex: 1,
},
wizardComponent: {
overflowY: "auto",
marginBottom: 10,
height: "calc(100vh - 100px - 80px)",
maxWidth: 840,
minHeight: 400,
flex: 1,
width: "100%",
},
wizardModal: {
Expand All @@ -53,9 +55,9 @@ const styles = (theme: Theme) =>
},
},
buttonInnerContainer: {
maxWidth: 840,
width: "100%",
textAlign: "right" as const,
marginRight: 15,
},
});

Expand Down
12 changes: 9 additions & 3 deletions portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ import Affinity from "./Steps/Affinity";
import PageHeader from "../../Common/PageHeader/PageHeader";
import history from "../../../../history";
import Images from "./Steps/Images";
import PageLayout from "../../Common/Layout/PageLayout";
import BackLink from "../../../../common/BackLink";

interface IAddTenantProps {
setErrorSnackMessage: typeof setErrorSnackMessage;
Expand All @@ -69,6 +71,9 @@ const styles = (theme: Theme) =>
buttonContainer: {
textAlign: "right",
},
pageBox: {
border: "1px solid #EAEAEA",
},
...modalBasic,
...wizardCommon,
...settingsCommon,
Expand Down Expand Up @@ -728,16 +733,17 @@ const AddTenant = ({
/>
)}
<PageHeader label={"Create New Tenant"} />
<Grid container>
<BackLink to={"/tenants"} label={"Return to Tenant List"} />
<PageLayout>
{addSending && (
<Grid item xs={12}>
<LinearProgress />
</Grid>
)}
<Grid item xs={12}>
<Grid item xs={12} className={classes.pageBox}>
<GenericWizard wizardSteps={filteredWizardSteps} />
</Grid>
</Grid>
</PageLayout>
</Fragment>
);
};
Expand Down
110 changes: 87 additions & 23 deletions portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,62 @@ const styles = (theme: Theme) =>
textAlign: "right",
},
overlayAction: {
lineHeight: "50px",
float: "left",
marginLeft: 10,
"& svg": {
maxWidth: 15,
maxHeight: 15,
},
"& button": {
background: "#EAEAEA",
},
},
radioOptionsLayout: {
"& div": {
display: "flex",
flexFlow: "column",
},
},
affinityConfigField: {
display: "flex",
},

affinityFieldLabel: {
display: "flex",
flexFlow: "column",
flex: 1,
},
radioField: {
display: "flex",
alignItems: "flex-start",
marginTop: 10,
"& div:first-child": {
display: "flex",
flexFlow: "column",
alignItems: "baseline",
textAlign: "left !important",
},
},
affinityLabelKey: {
"& div:first-child": {
marginBottom: 0,
},
},
affinityLabelValue: {
marginLeft: 10,
"& div:first-child": {
marginBottom: 0,
},
},
rowActions: {
display: "flex",
alignItems: "center",
},
fieldContainer: {
marginBottom: 0,
},
affinityRow: {
marginBottom: 10,
display: "flex",
},
...modalBasic,
...wizardCommon,
Expand Down Expand Up @@ -196,22 +246,32 @@ const Affinity = ({
Configure how pods will be assigned to nodes
</span>
</div>
<Grid item xs={12}>
<RadioGroupSelector
currentSelection={podAffinity}
id="affinity-options"
name="affinity-options"
label="Type"
onChange={(e) => {
updateField("podAffinity", e.target.value);
}}
selectorOptions={[
{ label: "None", value: "none" },
{ label: "Default (Pod Anti-Affinnity)", value: "default" },
{ label: "Node Selector", value: "nodeSelector" },
]}
/>
MinIO supports multiple configurations for Pod Affinity
<Grid xs={12} className={classes.affinityConfigField}>
<Grid item className={classes.affinityFieldLabel}>
<div className={classes.label}>Type</div>
<div
className={`${classes.descriptionText} ${classes.affinityHelpText}`}
>
MinIO supports multiple configurations for Pod Affinity
</div>
<Grid item className={classes.radioField}>
<RadioGroupSelector
classes={classes}
currentSelection={podAffinity}
id="affinity-options"
name="affinity-options"
label={" "}
onChange={(e) => {
updateField("podAffinity", e.target.value);
}}
selectorOptions={[
{ label: "None", value: "none" },
{ label: "Default (Pod Anti-Affinnity)", value: "default" },
{ label: "Node Selector", value: "nodeSelector" },
]}
/>
</Grid>
</Grid>
</Grid>
{podAffinity === "nodeSelector" && (
<Fragment>
Expand All @@ -238,8 +298,8 @@ const Affinity = ({
{keyValuePairs &&
keyValuePairs.map((kvp, i) => {
return (
<React.Fragment>
<Grid item xs={5}>
<Grid item xs={12} className={classes.affinityRow}>
<Grid item xs={5} className={classes.affinityLabelKey}>
{keyOptions.length > 0 && (
<SelectWrapper
onChange={(e: SelectChangeEvent<string>) => {
Expand All @@ -258,6 +318,7 @@ const Affinity = ({
label={""}
value={kvp.key}
options={keyOptions}
classes={classes.fieldContainer}
/>
)}
{keyOptions.length === 0 && (
Expand All @@ -276,10 +337,11 @@ const Affinity = ({
}}
index={i}
placeholder={"Key"}
classes={classes.fieldContainer}
/>
)}
</Grid>
<Grid item xs={5}>
<Grid item xs={5} className={classes.affinityLabelValue}>
{keyOptions.length > 0 && (
<SelectWrapper
onChange={(e: SelectChangeEvent<string>) => {
Expand All @@ -301,6 +363,7 @@ const Affinity = ({
})
: []
}
classes={classes.fieldContainer}
/>
)}
{keyOptions.length === 0 && (
Expand All @@ -319,10 +382,11 @@ const Affinity = ({
}}
index={i}
placeholder={"value"}
classes={classes.fieldContainer}
/>
)}
</Grid>
<Grid item xs={2}>
<Grid item xs={2} className={classes.rowActions}>
<div className={classes.overlayAction}>
<IconButton
size={"small"}
Expand Down Expand Up @@ -359,7 +423,7 @@ const Affinity = ({
</div>
)}
</Grid>
</React.Fragment>
</Grid>
);
})}
</Grid>
Expand Down
Loading