Merge pull request #59 from navi-infra/INFRA-711
INFRA-711| Deepak Jain| adding serviceEntries list feature
This commit is contained in:
Deepak Jain
43
src/components/common/FormikAutocomplete.tsx
Normal file
43
src/components/common/FormikAutocomplete.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import { Autocomplete } from "@material-ui/lab";
|
||||
import { TextField } from "@material-ui/core";
|
||||
|
||||
interface Form {
|
||||
setFieldValue: Function;
|
||||
setTouched: Function;
|
||||
}
|
||||
|
||||
interface FormikAutocompleteProps {
|
||||
options: string[];
|
||||
name: string;
|
||||
getOptionLabel: (option: string) => string;
|
||||
form: Form;
|
||||
field: { [x: string]: any };
|
||||
textFieldProps: { [x: string]: any };
|
||||
}
|
||||
|
||||
export const FormikAutocomplete = (props: FormikAutocompleteProps) => {
|
||||
const {
|
||||
form: { setTouched, setFieldValue },
|
||||
textFieldProps,
|
||||
field,
|
||||
...remaningField
|
||||
} = props;
|
||||
const { name } = field;
|
||||
return (
|
||||
<Autocomplete
|
||||
{...field}
|
||||
{...remaningField}
|
||||
onChange={(_, value) => setFieldValue(name, value)}
|
||||
onBlur={() => setTouched({ [name]: true })}
|
||||
renderInput={(props) => (
|
||||
<TextField
|
||||
{...props}
|
||||
{...textFieldProps}
|
||||
// helperText={helperText}
|
||||
// error={error}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,116 +1,216 @@
|
||||
import * as React from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import { toMenuItems } from './FormUtil';
|
||||
import * as _m from '../models/Manifest'
|
||||
import { FormikTextField } from '../components/common/FormikTextField';
|
||||
import { useFormikContext } from 'formik';
|
||||
import {Box, makeStyles, TableCell, Typography} from '@material-ui/core';
|
||||
import { FormikTable } from '../components/common/FormikTable';
|
||||
import HealthCheckCard from './HealthCheckCard';
|
||||
import {boxStyleProps, cardStyles} from './Styles';
|
||||
import AutoscalingCard from './AutoscalingCard';
|
||||
import CardLayout from '../components/common/CardLayout';
|
||||
import {FormikCardList} from "../components/common/FormikCardList";
|
||||
import * as React from "react";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import { toMenuItems } from "./FormUtil";
|
||||
import * as _m from "../models/Manifest";
|
||||
import { FormikTextField } from "../components/common/FormikTextField";
|
||||
import { FormikAutocomplete } from "../components/common/FormikAutocomplete";
|
||||
import { useFormikContext, Field } from "formik";
|
||||
import {
|
||||
Box,
|
||||
makeStyles,
|
||||
TableCell,
|
||||
Typography,
|
||||
MenuItem,
|
||||
TextField,
|
||||
} from "@material-ui/core";
|
||||
import { FormikTable } from "../components/common/FormikTable";
|
||||
import HealthCheckCard from "./HealthCheckCard";
|
||||
import { boxStyleProps, cardStyles } from "./Styles";
|
||||
import AutoscalingCard from "./AutoscalingCard";
|
||||
import CardLayout from "../components/common/CardLayout";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { httpClient } from "../helper/api-client";
|
||||
import { Autocomplete } from "@material-ui/lab";
|
||||
|
||||
const useStyles = makeStyles({
|
||||
...cardStyles,
|
||||
root: {
|
||||
minWidth: 275,
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
},
|
||||
card: {
|
||||
marginBottom: 10,
|
||||
width: 300,
|
||||
border: '5px solid #E8E8E8',
|
||||
},
|
||||
twoFieldBigCard: {
|
||||
width: 180
|
||||
},
|
||||
oneFieldBigCard: {
|
||||
width: 405
|
||||
},
|
||||
spacer: {
|
||||
marginTop: 5,
|
||||
marginBottom: 10
|
||||
},
|
||||
gridRow: {
|
||||
width: 1200
|
||||
}
|
||||
...cardStyles,
|
||||
root: {
|
||||
minWidth: 275,
|
||||
},
|
||||
title: {
|
||||
fontSize: 14,
|
||||
},
|
||||
card: {
|
||||
marginBottom: 10,
|
||||
width: 300,
|
||||
border: "5px solid #E8E8E8",
|
||||
},
|
||||
twoFieldBigCard: {
|
||||
width: 180,
|
||||
},
|
||||
oneFieldBigCard: {
|
||||
width: 405,
|
||||
},
|
||||
spacer: {
|
||||
marginTop: 5,
|
||||
marginBottom: 10,
|
||||
},
|
||||
gridRow: {
|
||||
width: 1200,
|
||||
},
|
||||
});
|
||||
|
||||
const ClusterCard = () => {
|
||||
const classes = useStyles();
|
||||
const { values }: { values: any } = useFormikContext()
|
||||
return (
|
||||
<CardLayout heading="Kubernetes Cluster">
|
||||
<FormikTextField className={classes.spacer} select label="Cluster" fullWidth name="deployment.cluster">
|
||||
{toMenuItems(_m.clusters)}
|
||||
</FormikTextField>
|
||||
<FormikTextField className={classes.spacer} select label="Namespace" fullWidth name="deployment.namespace">
|
||||
{toMenuItems(_m.namespaces[values?.environment] || [])}
|
||||
</FormikTextField>
|
||||
</CardLayout>
|
||||
)
|
||||
}
|
||||
const classes = useStyles();
|
||||
const { values }: { values: any } = useFormikContext();
|
||||
return (
|
||||
<CardLayout heading="Kubernetes Cluster">
|
||||
<FormikTextField
|
||||
className={classes.spacer}
|
||||
select
|
||||
label="Cluster"
|
||||
fullWidth
|
||||
name="deployment.cluster"
|
||||
>
|
||||
{toMenuItems(_m.clusters)}
|
||||
</FormikTextField>
|
||||
<FormikTextField
|
||||
className={classes.spacer}
|
||||
select
|
||||
label="Namespace"
|
||||
fullWidth
|
||||
name="deployment.namespace"
|
||||
>
|
||||
{toMenuItems(_m.namespaces[values?.environment] || [])}
|
||||
</FormikTextField>
|
||||
</CardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const InstanceCard = () => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<CardLayout heading="Instance Sizing">
|
||||
<FormikTextField className={classes.spacer} type='number' label="Cpu" fullWidth name="deployment.instance.cpu" />
|
||||
<FormikTextField className={classes.spacer} label="Memory" fullWidth name="deployment.instance.memory" />
|
||||
</CardLayout>
|
||||
)
|
||||
}
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<CardLayout heading="Instance Sizing">
|
||||
<FormikTextField
|
||||
className={classes.spacer}
|
||||
type="number"
|
||||
label="Cpu"
|
||||
fullWidth
|
||||
name="deployment.instance.cpu"
|
||||
/>
|
||||
<FormikTextField
|
||||
className={classes.spacer}
|
||||
label="Memory"
|
||||
fullWidth
|
||||
name="deployment.instance.memory"
|
||||
/>
|
||||
</CardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const ExposedPortsCard = () => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<CardLayout heading="Exposed Ports">
|
||||
<FormikTable name="deployment.exposedPorts" headers={['Name', 'Port']} newItem={_m.newExposedPort}>
|
||||
{(i) => (
|
||||
<>
|
||||
<TableCell><FormikTextField className={classes.twoFieldBigCard} select name={`deployment.exposedPorts.${i}.name`} >{toMenuItems(_m.portTypes)}</FormikTextField></TableCell>
|
||||
<TableCell><FormikTextField className={classes.twoFieldBigCard} type='number' name={`deployment.exposedPorts.${i}.port`} /></TableCell>
|
||||
</>
|
||||
)}
|
||||
</FormikTable>
|
||||
</CardLayout>
|
||||
)
|
||||
}
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<CardLayout heading="Exposed Ports">
|
||||
<FormikTable
|
||||
name="deployment.exposedPorts"
|
||||
headers={["Name", "Port"]}
|
||||
newItem={_m.newExposedPort}
|
||||
>
|
||||
{(i) => (
|
||||
<>
|
||||
<TableCell>
|
||||
<FormikTextField
|
||||
className={classes.twoFieldBigCard}
|
||||
select
|
||||
name={`deployment.exposedPorts.${i}.name`}
|
||||
>
|
||||
{toMenuItems(_m.portTypes)}
|
||||
</FormikTextField>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<FormikTextField
|
||||
className={classes.twoFieldBigCard}
|
||||
type="number"
|
||||
name={`deployment.exposedPorts.${i}.port`}
|
||||
/>
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
</FormikTable>
|
||||
</CardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const OutboundConnectivityCard = () => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<CardLayout heading="Outbound Connectivity">
|
||||
<FormikTable name="deployment.allowEgress" headers={['Service']} newItem={_m.newOutboundConnectivity}>
|
||||
{(i) => <TableCell><FormikTextField className={classes.oneFieldBigCard} name={`deployment.allowEgress.${i}`} /></TableCell>}
|
||||
</FormikTable>
|
||||
</CardLayout>
|
||||
)
|
||||
}
|
||||
const OutboundConnectivityCard = (props) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<CardLayout heading="Outbound Connectivity">
|
||||
<FormikTable
|
||||
name="deployment.allowEgress"
|
||||
headers={["Service"]}
|
||||
newItem={_m.newOutboundConnectivity}
|
||||
>
|
||||
{(i) => (
|
||||
<TableCell>
|
||||
<Field
|
||||
name={`deployment.allowEgress.${i}`}
|
||||
component={FormikAutocomplete}
|
||||
options={props.serviceEntries}
|
||||
freeSolo
|
||||
textFieldProps={{
|
||||
name: `deployment.allowEgress.${i}`,
|
||||
className: "classes.oneFieldBigCarded",
|
||||
}}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
</FormikTable>
|
||||
</CardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const DeploymentBasicTab = () => {
|
||||
const classes = useStyles();
|
||||
const [serviceEntries, setServiceEntries] = useState<Array<string>>([]);
|
||||
const [FetchError, setFetchError] = useState<Object>({});
|
||||
|
||||
return (
|
||||
<Grid container direction="column" justify="flex-start" alignItems="flex-start" >
|
||||
<Grid container direction="row" justify="space-evenly" alignItems="flex-start" className={classes.gridRow}>
|
||||
<Grid item>
|
||||
<ClusterCard />
|
||||
<HealthCheckCard />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<InstanceCard />
|
||||
<ExposedPortsCard />
|
||||
<OutboundConnectivityCard />
|
||||
<AutoscalingCard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
const classes = useStyles();
|
||||
const { values }: { values: any } = useFormikContext();
|
||||
const cluster = values?.deployment?.cluster;
|
||||
|
||||
const getServiceEntries = async (cluster: string): Promise<Response> => {
|
||||
return httpClient(`/api/kube/allowedEndpoint?cluster=${cluster}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getServiceEntries(cluster).then((res) =>
|
||||
res.json().then((resJson) => {
|
||||
if (res.ok) {
|
||||
setServiceEntries(resJson);
|
||||
} else {
|
||||
setFetchError(resJson);
|
||||
}
|
||||
})
|
||||
);
|
||||
}, [cluster]);
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
justify="flex-start"
|
||||
alignItems="flex-start"
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="space-evenly"
|
||||
alignItems="flex-start"
|
||||
className={classes.gridRow}
|
||||
>
|
||||
<Grid item>
|
||||
<ClusterCard />
|
||||
<HealthCheckCard />
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
<Grid item>
|
||||
<InstanceCard />
|
||||
<ExposedPortsCard />
|
||||
<OutboundConnectivityCard serviceEntries={serviceEntries} />
|
||||
<AutoscalingCard />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeploymentBasicTab
|
||||
export default DeploymentBasicTab;
|
||||
|
||||
Reference in New Issue
Block a user