Skip to content

Commit 0ba5db5

Browse files
dvaldiviadvaldivia
authored
Rework Monitoring and Loggins edit forms (#1399)
Signed-off-by: Daniel Valdivia <[email protected]>
1 parent a154568 commit 0ba5db5

File tree

3 files changed

+332
-282
lines changed

3 files changed

+332
-282
lines changed

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

Lines changed: 164 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
33
import createStyles from "@mui/styles/createStyles";
44
import withStyles from "@mui/styles/withStyles";
55
import { Theme } from "@mui/material/styles";
6-
import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
7-
import { Button } from "@mui/material";
6+
import {
7+
formFieldStyles,
8+
modalBasic,
9+
modalStyleUtils,
10+
} from "../../Common/FormComponents/common/styleLibrary";
11+
import { Button, Grid } from "@mui/material";
812
import api from "../../../../common/api";
913
import { ITenant } from "../ListTenants/types";
1014
import { ErrorResponseHandler } from "../../../../common/types";
@@ -78,6 +82,8 @@ const styles = (theme: Theme) =>
7882
gridGap: 20,
7983
},
8084
...modalBasic,
85+
...modalStyleUtils,
86+
...formFieldStyles,
8187
});
8288

8389
const EditTenantLogsModal = ({
@@ -169,7 +175,7 @@ const EditTenantLogsModal = ({
169175
fieldKey: `diskCapacityGB`,
170176
required: true,
171177
value: newDiskCapacityGB as any as string,
172-
pattern: /^[0-9]?(10)?$/,
178+
pattern: /^[0-9]*$/,
173179
customPatternMessage: "Must be an integer between 0 and 10",
174180
});
175181
tenantLogValidation.push({
@@ -256,139 +262,161 @@ const EditTenantLogsModal = ({
256262
}
257263
}}
258264
>
259-
<h2>Logging API </h2>
260-
<hr className={classes.hrClass} />
261-
<h4>Image</h4>
262-
<InputBoxWrapper
263-
id={`image`}
264-
label={""}
265-
placeholder={"Image"}
266-
name={`image`}
267-
value={newImage}
268-
onChange={(e) => {
269-
setNewImage(e.target.value);
270-
cleanValidation(`image`);
271-
}}
272-
key={`image`}
273-
error={validationErrors[`image`] || ""}
274-
/>
275-
<h4>Disk Capacity (GB)</h4>
276-
<InputBoxWrapper
277-
id={`diskCapacityGB`}
278-
label={""}
279-
placeholder={"Disk Capacity (GB)"}
280-
name={`diskCapacityGB`}
281-
value={newDiskCapacityGB as any as string}
282-
onChange={(e) => {
283-
setNewDiskCapacityGB(e.target.value as any as number);
284-
cleanValidation(`diskCapacityGB`);
285-
}}
286-
key={`diskCapacityGB`}
287-
error={validationErrors[`diskCapacityGB`] || ""}
288-
/>
289-
<h4>Service Account Name</h4>
290-
<InputBoxWrapper
291-
id={`serviceAccountName`}
292-
label={""}
293-
placeholder={"Service Account Name"}
294-
name={`serviceAccountName`}
295-
value={newServiceAccountName}
296-
onChange={(e) => {
297-
setNewServiceAccountName(e.target.value);
298-
cleanValidation(`serviceAccountName`);
299-
}}
300-
key={`serviceAccountName`}
301-
error={validationErrors[`serviceAccountName`] || ""}
302-
/>
303-
<h4>Labels</h4>
304-
<KeyPairEdit
305-
newValues={newLabels}
306-
setNewValues={setNewLabels}
307-
paramName={"Labels"}
308-
error={labelsError}
309-
setError={setLabelsError}
310-
/>
311-
<h4>Annotations</h4>
312-
<KeyPairEdit
313-
newValues={newAnnotations}
314-
setNewValues={setNewAnnotations}
315-
paramName={"Annotations"}
316-
error={annotationsError}
317-
setError={setAnnotationsError}
318-
/>
319-
<h4>Node Selector</h4>
320-
<KeyPairEdit
321-
newValues={newNodeSelector}
322-
setNewValues={setNewNodeSelector}
323-
paramName={"Node Selector"}
324-
error={nodeSelectorError}
325-
setError={setNodeSelectorError}
326-
/>
327-
<h2>Database Configuration </h2>
328-
<hr className={classes.hrClass} />
329-
<h4>Postgres Image</h4>
330-
<InputBoxWrapper
331-
id={`dbImage`}
332-
label={""}
333-
placeholder={"Db Image"}
334-
name={`dbImage`}
335-
value={newDbImage}
336-
onChange={(e) => {
337-
setNewDbImage(e.target.value);
338-
cleanValidation(`dbImage`);
339-
}}
340-
key={`dbImage`}
341-
error={validationErrors[`dbImage`] || ""}
342-
/>
343-
<h4>Service Account</h4>
344-
<InputBoxWrapper
345-
id={`dbServiceAccountName`}
346-
label={""}
347-
placeholder={"Db Service Account Name"}
348-
name={`dbServiceAccountName`}
349-
value={newDbServiceAccountName}
350-
onChange={(e) => {
351-
setNewDbServiceAccountName(e.target.value);
352-
cleanValidation(`dbServiceAccountName`);
353-
}}
354-
key={`dbServiceAccountName`}
355-
error={validationErrors[`dbServiceAccountName`] || ""}
356-
/>
357-
<h4>Labels</h4>
358-
<KeyPairEdit
359-
newValues={newDbLabels}
360-
setNewValues={setNewDbLabels}
361-
paramName={"Db Labels"}
362-
error={dbLabelsError}
363-
setError={setDbLabelsError}
364-
/>
365-
<h4>Annotations</h4>
366-
<KeyPairEdit
367-
newValues={newDbAnnotations}
368-
setNewValues={setNewDbAnnotations}
369-
paramName={"Db Annotations"}
370-
error={dbAnnotationsError}
371-
setError={setDbAnnotationsError}
372-
/>
373-
<h4>Node Selector</h4>
374-
<KeyPairEdit
375-
newValues={newDbNodeSelector}
376-
setNewValues={setNewDbNodeSelector}
377-
paramName={"DbNode Selector"}
378-
error={dbNodeSelectorError}
379-
setError={setDbNodeSelectorError}
380-
/>
381-
<br />
382-
<div className={classes.buttonContainer}>
383-
<Button
384-
type="submit"
385-
variant="contained"
386-
color="primary"
387-
disabled={!checkValid()}
388-
>
389-
Save
390-
</Button>
391-
</div>
265+
<Grid container>
266+
<Grid xs={12} className={classes.modalFormScrollable}>
267+
<Grid item xs={12} className={classes.formFieldRow}>
268+
<h4>Logging API </h4>
269+
</Grid>
270+
<Grid item xs={12} className={classes.formFieldRow}>
271+
<InputBoxWrapper
272+
id={`image`}
273+
label={"Image"}
274+
placeholder={"Image"}
275+
name={`image`}
276+
value={newImage}
277+
onChange={(e) => {
278+
setNewImage(e.target.value);
279+
cleanValidation(`image`);
280+
}}
281+
key={`image`}
282+
error={validationErrors[`image`] || ""}
283+
/>
284+
</Grid>
285+
<Grid item xs={12} className={classes.formFieldRow}>
286+
<InputBoxWrapper
287+
id={`diskCapacityGB`}
288+
label={"Disk Capacity (GB)"}
289+
placeholder={"Disk Capacity (GB)"}
290+
name={`diskCapacityGB`}
291+
value={newDiskCapacityGB as any as string}
292+
onChange={(e) => {
293+
setNewDiskCapacityGB(e.target.value as any as number);
294+
cleanValidation(`diskCapacityGB`);
295+
}}
296+
key={`diskCapacityGB`}
297+
error={validationErrors[`diskCapacityGB`] || ""}
298+
/>
299+
</Grid>
300+
<Grid item xs={12} className={classes.formFieldRow}>
301+
<InputBoxWrapper
302+
id={`serviceAccountName`}
303+
label={"Service Account"}
304+
placeholder={"Service Account Name"}
305+
name={`serviceAccountName`}
306+
value={newServiceAccountName}
307+
onChange={(e) => {
308+
setNewServiceAccountName(e.target.value);
309+
cleanValidation(`serviceAccountName`);
310+
}}
311+
key={`serviceAccountName`}
312+
error={validationErrors[`serviceAccountName`] || ""}
313+
/>
314+
</Grid>
315+
<Grid item xs={12} className={classes.formFieldRow}>
316+
<span className={classes.inputLabel}>Labels</span>
317+
<KeyPairEdit
318+
newValues={newLabels}
319+
setNewValues={setNewLabels}
320+
paramName={"Labels"}
321+
error={labelsError}
322+
setError={setLabelsError}
323+
/>
324+
</Grid>
325+
<Grid item xs={12} className={classes.formFieldRow}>
326+
<span className={classes.inputLabel}>Annotations</span>
327+
<KeyPairEdit
328+
newValues={newAnnotations}
329+
setNewValues={setNewAnnotations}
330+
paramName={"Annotations"}
331+
error={annotationsError}
332+
setError={setAnnotationsError}
333+
/>
334+
</Grid>
335+
<Grid item xs={12} className={classes.formFieldRow}>
336+
<span className={classes.inputLabel}>Node Selector</span>
337+
<KeyPairEdit
338+
newValues={newNodeSelector}
339+
setNewValues={setNewNodeSelector}
340+
paramName={"Node Selector"}
341+
error={nodeSelectorError}
342+
setError={setNodeSelectorError}
343+
/>
344+
</Grid>
345+
<Grid item xs={12} className={classes.formFieldRow}>
346+
<h4>Database Configuration </h4>
347+
</Grid>
348+
<Grid item xs={12} className={classes.formFieldRow}>
349+
<InputBoxWrapper
350+
id={`dbImage`}
351+
label={"Postgres Image"}
352+
placeholder={"Db Image"}
353+
name={`dbImage`}
354+
value={newDbImage}
355+
onChange={(e) => {
356+
setNewDbImage(e.target.value);
357+
cleanValidation(`dbImage`);
358+
}}
359+
key={`dbImage`}
360+
error={validationErrors[`dbImage`] || ""}
361+
/>
362+
</Grid>
363+
<Grid item xs={12} className={classes.formFieldRow}>
364+
<InputBoxWrapper
365+
id={`dbServiceAccountName`}
366+
label={"Service Account"}
367+
placeholder={"Db Service Account Name"}
368+
name={`dbServiceAccountName`}
369+
value={newDbServiceAccountName}
370+
onChange={(e) => {
371+
setNewDbServiceAccountName(e.target.value);
372+
cleanValidation(`dbServiceAccountName`);
373+
}}
374+
key={`dbServiceAccountName`}
375+
error={validationErrors[`dbServiceAccountName`] || ""}
376+
/>
377+
</Grid>
378+
<Grid item xs={12} className={classes.formFieldRow}>
379+
<span className={classes.inputLabel}>Labels</span>
380+
<KeyPairEdit
381+
newValues={newDbLabels}
382+
setNewValues={setNewDbLabels}
383+
paramName={"Db Labels"}
384+
error={dbLabelsError}
385+
setError={setDbLabelsError}
386+
/>
387+
</Grid>
388+
<Grid item xs={12} className={classes.formFieldRow}>
389+
<span className={classes.inputLabel}>Annotations</span>
390+
<KeyPairEdit
391+
newValues={newDbAnnotations}
392+
setNewValues={setNewDbAnnotations}
393+
paramName={"Db Annotations"}
394+
error={dbAnnotationsError}
395+
setError={setDbAnnotationsError}
396+
/>
397+
</Grid>
398+
<Grid item xs={12} className={classes.formFieldRow}>
399+
<span className={classes.inputLabel}>Node Selector</span>
400+
<KeyPairEdit
401+
newValues={newDbNodeSelector}
402+
setNewValues={setNewDbNodeSelector}
403+
paramName={"DbNode Selector"}
404+
error={dbNodeSelectorError}
405+
setError={setDbNodeSelectorError}
406+
/>
407+
</Grid>
408+
</Grid>
409+
<Grid xs={12} className={classes.buttonContainer}>
410+
<Button
411+
type="submit"
412+
variant="contained"
413+
color="primary"
414+
disabled={!checkValid()}
415+
>
416+
Save
417+
</Button>
418+
</Grid>
419+
</Grid>
392420
</form>
393421
</ModalWrapper>
394422
);

0 commit comments

Comments
 (0)