Skip to content

Commit 94e419e

Browse files
dvaldiviadvaldivia
authored
Add Pool Slice and Tenants Slice simplification (#2074)
Add Pool Slice and Tenants Slice simplification Flatten Slice AddPool Thunk Return HMR support for Redux Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
1 parent 6c5f693 commit 94e419e

32 files changed

+483
-494
lines changed

‎portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -63,33 +63,17 @@ const KeyPairView = ({ classes, records, recordName }: IKeyPairView) => {
6363
};
6464

6565
const mapState = (state: AppState) => ({
66-
loadingTenant: state.tenants.tenantDetails.loadingTenant,
67-
selectedTenant: state.tenants.tenantDetails.currentTenant,
68-
tenant: state.tenants.tenantDetails.tenantInfo,
69-
logEnabled: get(state.tenants.tenantDetails.tenantInfo, "logEnabled", false),
70-
monitoringEnabled: get(
71-
state.tenants.tenantDetails.tenantInfo,
72-
"monitoringEnabled",
73-
false
74-
),
75-
encryptionEnabled: get(
76-
state.tenants.tenantDetails.tenantInfo,
77-
"encryptionEnabled",
78-
false
79-
),
80-
minioTLS: get(state.tenants.tenantDetails.tenantInfo, "minioTLS", false),
81-
consoleTLS: get(state.tenants.tenantDetails.tenantInfo, "consoleTLS", false),
82-
consoleEnabled: get(
83-
state.tenants.tenantDetails.tenantInfo,
84-
"consoleEnabled",
85-
false
86-
),
87-
adEnabled: get(state.tenants.tenantDetails.tenantInfo, "idpAdEnabled", false),
88-
oidcEnabled: get(
89-
state.tenants.tenantDetails.tenantInfo,
90-
"idpOidcEnabled",
91-
false
92-
),
66+
loadingTenant: state.tenants.loadingTenant,
67+
selectedTenant: state.tenants.currentTenant,
68+
tenant: state.tenants.tenantInfo,
69+
logEnabled: get(state.tenants.tenantInfo, "logEnabled", false),
70+
monitoringEnabled: get(state.tenants.tenantInfo, "monitoringEnabled", false),
71+
encryptionEnabled: get(state.tenants.tenantInfo, "encryptionEnabled", false),
72+
minioTLS: get(state.tenants.tenantInfo, "minioTLS", false),
73+
consoleTLS: get(state.tenants.tenantInfo, "consoleTLS", false),
74+
consoleEnabled: get(state.tenants.tenantInfo, "consoleEnabled", false),
75+
adEnabled: get(state.tenants.tenantInfo, "idpAdEnabled", false),
76+
oidcEnabled: get(state.tenants.tenantInfo, "idpOidcEnabled", false),
9377
});
9478

9579
const connector = connect(mapState, null);

‎portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const PodsSummary = ({ classes, match, history }: IPodsSummary) => {
5353
const dispatch = useDispatch();
5454

5555
const loadingTenant = useSelector(
56-
(state: AppState) => state.tenants.tenantDetails.loadingTenant
56+
(state: AppState) => state.tenants.loadingTenant
5757
);
5858

5959
const [pods, setPods] = useState<IPodListElement[]>([]);

‎portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx

Lines changed: 15 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,16 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { Fragment, useEffect, useState } from "react";
17+
import React, { Fragment } from "react";
1818
import { Theme } from "@mui/material/styles";
1919
import createStyles from "@mui/styles/createStyles";
20-
import withStyles from "@mui/styles/withStyles";
2120
import {
2221
formFieldStyles,
2322
modalStyleUtils,
2423
} from "../../../../Common/FormComponents/common/styleLibrary";
2524
import Grid from "@mui/material/Grid";
26-
import { generatePoolName, niceBytes } from "../../../../../../common/utils";
25+
import { niceBytes } from "../../../../../../common/utils";
2726
import { LinearProgress } from "@mui/material";
28-
import { IAddPoolRequest } from "../../../ListTenants/types";
2927
import PageHeader from "../../../../Common/PageHeader/PageHeader";
3028
import PageLayout from "../../../../Common/Layout/PageLayout";
3129
import GenericWizard from "../../../../Common/GenericWizard/GenericWizard";
@@ -39,20 +37,12 @@ import { AppState } from "../../../../../../store";
3937
import { useDispatch, useSelector } from "react-redux";
4038
import PoolConfiguration from "./PoolConfiguration";
4139
import PoolPodPlacement from "./PoolPodPlacement";
42-
import { ErrorResponseHandler } from "../../../../../../common/types";
43-
import { getDefaultAffinity, getNodeSelector } from "../../utils";
44-
import api from "../../../../../../common/api";
4540
import BackLink from "../../../../../../common/BackLink";
46-
import { setErrorSnackMessage } from "../../../../../../systemSlice";
47-
import { resetPoolForm, setTenantDetailsLoad } from "../../../tenantsSlice";
41+
import { resetPoolForm } from "./addPoolSlice";
42+
import AddPoolCreateButton from "./AddPoolCreateButton";
43+
import makeStyles from "@mui/styles/makeStyles";
4844

49-
interface IAddPoolProps {
50-
classes: any;
51-
open: boolean;
52-
match: any;
53-
}
54-
55-
const styles = (theme: Theme) =>
45+
const useStyles = makeStyles((theme: Theme) =>
5646
createStyles({
5747
bottomContainer: {
5848
display: "flex",
@@ -77,136 +67,20 @@ const styles = (theme: Theme) =>
7767
},
7868
...formFieldStyles,
7969
...modalStyleUtils,
80-
});
81-
82-
const requiredPages = ["setup", "affinity", "configure"];
70+
})
71+
);
8372

84-
const AddPool = ({ classes, open, match }: IAddPoolProps) => {
73+
const AddPool = () => {
8574
const dispatch = useDispatch();
75+
const classes = useStyles();
8676

87-
const tenant = useSelector(
88-
(state: AppState) => state.tenants.tenantDetails.tenantInfo
89-
);
90-
const selectedStorageClass = useSelector(
91-
(state: AppState) => state.tenants.addPool.fields.setup.storageClass
92-
);
93-
const validPages = useSelector(
94-
(state: AppState) => state.tenants.addPool.validPages
95-
);
96-
const numberOfNodes = useSelector(
97-
(state: AppState) => state.tenants.addPool.fields.setup.numberOfNodes
98-
);
99-
const volumeSize = useSelector(
100-
(state: AppState) => state.tenants.addPool.fields.setup.volumeSize
101-
);
102-
const volumesPerServer = useSelector(
103-
(state: AppState) => state.tenants.addPool.fields.setup.volumesPerServer
104-
);
105-
const affinityType = useSelector(
106-
(state: AppState) => state.tenants.addPool.fields.affinity.podAffinity
107-
);
108-
const nodeSelectorLabels = useSelector(
109-
(state: AppState) =>
110-
state.tenants.addPool.fields.affinity.nodeSelectorLabels
111-
);
112-
const withPodAntiAffinity = useSelector(
113-
(state: AppState) =>
114-
state.tenants.addPool.fields.affinity.withPodAntiAffinity
115-
);
116-
const tolerations = useSelector(
117-
(state: AppState) => state.tenants.addPool.fields.tolerations
118-
);
119-
const securityContextEnabled = useSelector(
120-
(state: AppState) =>
121-
state.tenants.addPool.fields.configuration.securityContextEnabled
122-
);
123-
const securityContext = useSelector(
124-
(state: AppState) =>
125-
state.tenants.addPool.fields.configuration.securityContext
126-
);
127-
128-
const [addSending, setAddSending] = useState<boolean>(false);
77+
const tenant = useSelector((state: AppState) => state.tenants.tenantInfo);
78+
const sending = useSelector((state: AppState) => state.addPool.sending);
12979

13080
const poolsURL = `/namespaces/${tenant?.namespace || ""}/tenants/${
13181
tenant?.name || ""
13282
}/pools`;
13383

134-
useEffect(() => {
135-
if (addSending && tenant) {
136-
const poolName = generatePoolName(tenant.pools);
137-
138-
let affinityObject = {};
139-
140-
switch (affinityType) {
141-
case "default":
142-
affinityObject = {
143-
affinity: getDefaultAffinity(tenant.name, poolName),
144-
};
145-
break;
146-
case "nodeSelector":
147-
affinityObject = {
148-
affinity: getNodeSelector(
149-
nodeSelectorLabels,
150-
withPodAntiAffinity,
151-
tenant.name,
152-
poolName
153-
),
154-
};
155-
break;
156-
}
157-
158-
const tolerationValues = tolerations.filter(
159-
(toleration) => toleration.key.trim() !== ""
160-
);
161-
162-
const data: IAddPoolRequest = {
163-
name: poolName,
164-
servers: numberOfNodes,
165-
volumes_per_server: volumesPerServer,
166-
volume_configuration: {
167-
size: volumeSize * 1073741824,
168-
storage_class_name: selectedStorageClass,
169-
labels: null,
170-
},
171-
tolerations: tolerationValues,
172-
securityContext: securityContextEnabled ? securityContext : null,
173-
...affinityObject,
174-
};
175-
176-
api
177-
.invoke(
178-
"POST",
179-
`/api/v1/namespaces/${tenant.namespace}/tenants/${tenant.name}/pools`,
180-
data
181-
)
182-
.then(() => {
183-
setAddSending(false);
184-
dispatch(resetPoolForm());
185-
dispatch(setTenantDetailsLoad(true));
186-
history.push(poolsURL);
187-
})
188-
.catch((err: ErrorResponseHandler) => {
189-
setAddSending(false);
190-
dispatch(setErrorSnackMessage(err));
191-
});
192-
}
193-
}, [
194-
addSending,
195-
poolsURL,
196-
affinityType,
197-
nodeSelectorLabels,
198-
numberOfNodes,
199-
securityContext,
200-
securityContextEnabled,
201-
selectedStorageClass,
202-
tenant,
203-
tolerations,
204-
volumeSize,
205-
volumesPerServer,
206-
withPodAntiAffinity,
207-
dispatch,
208-
]);
209-
21084
const cancelButton = {
21185
label: "Cancel",
21286
type: "other",
@@ -218,15 +92,7 @@ const AddPool = ({ classes, open, match }: IAddPoolProps) => {
21892
};
21993

22094
const createButton = {
221-
label: "Create",
222-
type: "submit",
223-
enabled:
224-
!addSending &&
225-
selectedStorageClass !== "" &&
226-
requiredPages.every((v) => validPages.includes(v)),
227-
action: () => {
228-
setAddSending(true);
229-
},
95+
componentRender: <AddPoolCreateButton key={"add-pool-crate"} />,
23096
};
23197

23298
const wizardSteps: IWizardElement[] = [
@@ -272,8 +138,7 @@ const AddPool = ({ classes, open, match }: IAddPoolProps) => {
272138
}
273139
/>
274140
</Grid>
275-
276-
{addSending && (
141+
{sending && (
277142
<Grid item xs={12}>
278143
<LinearProgress />
279144
</Grid>
@@ -287,4 +152,4 @@ const AddPool = ({ classes, open, match }: IAddPoolProps) => {
287152
);
288153
};
289154

290-
export default withStyles(styles)(AddPool);
155+
export default AddPool;

‎portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPoolCreateButton.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2022 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import { Button } from "@mui/material";
18+
import React from "react";
19+
import { addPoolAsync } from "./addPoolThunks";
20+
import { useDispatch, useSelector } from "react-redux";
21+
import { AppState } from "../../../../../../store";
22+
23+
const AddPoolCreateButton = () => {
24+
const dispatch = useDispatch();
25+
26+
const selectedStorageClass = useSelector(
27+
(state: AppState) => state.addPool.setup.storageClass
28+
);
29+
const validPages = useSelector((state: AppState) => state.addPool.validPages);
30+
31+
const sending = useSelector((state: AppState) => state.addPool.sending);
32+
const requiredPages = ["setup", "affinity", "configure"];
33+
const enabled =
34+
!sending &&
35+
selectedStorageClass !== "" &&
36+
requiredPages.every((v) => validPages.includes(v));
37+
return (
38+
<Button
39+
id={"wizard-button-Create"}
40+
variant="contained"
41+
color="primary"
42+
size="small"
43+
onClick={() => {
44+
dispatch(addPoolAsync());
45+
}}
46+
disabled={!enabled}
47+
key={`button-AddTenant-Create`}
48+
>
49+
Create
50+
</Button>
51+
);
52+
};
53+
54+
export default AddPoolCreateButton;

‎portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {
3333
} from "../../../../../../utils/validationFunctions";
3434
import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
3535
import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
36-
import { isPoolPageValid, setPoolField } from "../../../tenantsSlice";
36+
import { isPoolPageValid, setPoolField } from "./addPoolSlice";
3737

3838
interface IConfigureProps {
3939
classes: any;
@@ -81,12 +81,10 @@ const PoolConfiguration = ({ classes }: IConfigureProps) => {
8181
const dispatch = useDispatch();
8282

8383
const securityContextEnabled = useSelector(
84-
(state: AppState) =>
85-
state.tenants.addPool.fields.configuration.securityContextEnabled
84+
(state: AppState) => state.addPool.configuration.securityContextEnabled
8685
);
8786
const securityContext = useSelector(
88-
(state: AppState) =>
89-
state.tenants.addPool.fields.configuration.securityContext
87+
(state: AppState) => state.addPool.configuration.securityContext
9088
);
9189

9290
const [validationErrors, setValidationErrors] = useState<any>({});

‎portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ import {
4848
setPoolField,
4949
setPoolKeyValuePairs,
5050
setPoolTolerationInfo,
51-
} from "../../../tenantsSlice";
51+
} from "./addPoolSlice";
5252

5353
interface IAffinityProps {
5454
classes: any;
@@ -119,21 +119,19 @@ const Affinity = ({ classes }: IAffinityProps) => {
119119
const dispatch = useDispatch();
120120

121121
const podAffinity = useSelector(
122-
(state: AppState) => state.tenants.addPool.fields.affinity.podAffinity
122+
(state: AppState) => state.addPool.affinity.podAffinity
123123
);
124124
const nodeSelectorLabels = useSelector(
125-
(state: AppState) =>
126-
state.tenants.addPool.fields.affinity.nodeSelectorLabels
125+
(state: AppState) => state.addPool.affinity.nodeSelectorLabels
127126
);
128127
const withPodAntiAffinity = useSelector(
129-
(state: AppState) =>
130-
state.tenants.addPool.fields.affinity.withPodAntiAffinity
128+
(state: AppState) => state.addPool.affinity.withPodAntiAffinity
131129
);
132130
const keyValuePairs = useSelector(
133-
(state: AppState) => state.tenants.addPool.fields.nodeSelectorPairs
131+
(state: AppState) => state.addPool.nodeSelectorPairs
134132
);
135133
const tolerations = useSelector(
136-
(state: AppState) => state.tenants.addPool.fields.tolerations
134+
(state: AppState) => state.addPool.tolerations
137135
);
138136

139137
const [validationErrors, setValidationErrors] = useState<any>({});

0 commit comments

Comments
 (0)