-
+
{
- standaloneData.current = data;
+ standaloneData.current = data
}}
csrfToken={csrfToken}
manifestData={formInitData}
>
-
- );
-};
+ )
+}
-export default withCookies(Notification);
+export default withCookies(Notification)
diff --git a/src/components/manifest/SchemaForm.css b/src/components/manifest/SchemaForm.css
index 15b5fbd..24fddbc 100644
--- a/src/components/manifest/SchemaForm.css
+++ b/src/components/manifest/SchemaForm.css
@@ -8,4 +8,4 @@
}
.MuiInputBase-root {
font-size: 1.1rem !important;
-}
\ No newline at end of file
+}
diff --git a/src/components/manifest/SchemaForm.tsx b/src/components/manifest/SchemaForm.tsx
index 9c25db6..e38366e 100644
--- a/src/components/manifest/SchemaForm.tsx
+++ b/src/components/manifest/SchemaForm.tsx
@@ -6,47 +6,43 @@
*/
-import * as React from "react";
-import { JsonForms } from "@jsonforms/react";
-import {
- materialCells,
- materialRenderers,
-} from "@jsonforms/material-renderers";
-import customAjv from "../../configuration/jsonforms/CustomAjv";
-import _ from "lodash";
-import {
- FoldableGroupTester,
- FoldableGroupRenderer,
-} from "../../renderer/FoldableGroup";
-import { FoldableGroupContextProvider } from "../../renderer/FoldableGroupContext";
-import { ThemeProvider, CircularProgress } from "@material-ui/core";
-import { jsonformThemeOverride } from "../../configuration/jsonforms/Theme";
-import { httpClient } from "../../helper/api-client";
-import "./SchemaForm.css";
+import * as React from 'react'
+import { JsonForms } from '@jsonforms/react'
+import { materialCells, materialRenderers } from '@jsonforms/material-renderers'
+import customAjv from '../../configuration/jsonforms/CustomAjv'
+import _ from 'lodash'
+import { FoldableGroupTester, FoldableGroupRenderer } from '../../renderer/FoldableGroup'
+import { FoldableGroupContextProvider } from '../../renderer/FoldableGroupContext'
+import { ThemeProvider, CircularProgress } from '@material-ui/core'
+import { jsonformThemeOverride } from '../../configuration/jsonforms/Theme'
+import { httpClient } from '../../helper/api-client'
+import './SchemaForm.css'
interface IProps {
- csrfToken?: any;
- name: string;
- onDataChange?: any;
- children?: any;
- updateCompleteSchemaHandler?: any;
- schemaPath?: string;
- uiSchema?: any;
- manifestData?: any;
- additionalOptions?: any;
+ csrfToken?: any
+ name: string
+ onDataChange?: any
+ children?: any
+ updateCompleteSchemaHandler?: any
+ schemaPath?: string
+ uiSchema?: any
+ manifestData?: any
+ additionalOptions?: any
}
function isProperJsonSchema(completeSchema: any) {
- let jsonSchema = completeSchema.jsonSchema;
- const schemaStr = JSON.stringify(jsonSchema);
- let isProperSchema = schemaStr.search("resource:/") === -1;
- return isProperSchema;
+ const jsonSchema = completeSchema.jsonSchema
+ const schemaStr = JSON.stringify(jsonSchema)
+ const isProperSchema = schemaStr.search('resource:/') === -1
+ return isProperSchema
}
function optionsToUrlParams(options: any) {
- if(!options) { return ''}
+ if (!options) {
+ return ''
+ }
return Object.keys(options)
- .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(options[k])}`)
+ .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(options[k])}`)
.join('&')
}
@@ -54,59 +50,54 @@ export default function SchemaForm(props: IProps) {
const [completeSchema, setCompleteSchema] = React.useState({
uiSchema: undefined,
jsonSchema: undefined,
- });
- const [isLoading, setIsLoading] = React.useState(true);
+ })
+ const [isLoading, setIsLoading] = React.useState(true)
React.useEffect(() => {
- console.log(`Getting schema for ${props.name}`);
+ console.log(`Getting schema for ${props.name}`)
httpClient(`/api/schema/${props.name}?${optionsToUrlParams(props.additionalOptions)}`).then((res) => {
res.json().then((resBody) => {
if (props.uiSchema) {
- props.uiSchema.push(JSON.parse(resBody.data.uiSchema));
+ props.uiSchema.push(JSON.parse(resBody.data.uiSchema))
} else {
setCompleteSchema({
uiSchema: JSON.parse(resBody.data.uiSchema),
jsonSchema: undefined,
- });
+ })
}
- const schemaHandler =
- props.updateCompleteSchemaHandler || setCompleteSchema;
+ const schemaHandler = props.updateCompleteSchemaHandler || setCompleteSchema
schemaHandler((prevSchema) => {
_.set(
prevSchema,
- `jsonSchema${props.schemaPath ? props.schemaPath : ""}`,
- JSON.parse(resBody.data.jsonSchema)
- );
- //Creating new object here because if objectId is not changed react doesnt rerenders it
+ `jsonSchema${props.schemaPath ? props.schemaPath : ''}`,
+ JSON.parse(resBody.data.jsonSchema),
+ )
+ // Creating new object here because if objectId is not changed react doesnt rerenders it
const newSchema = {
uiSchema: prevSchema.uiSchema,
jsonSchema: prevSchema.jsonSchema,
- };
- return newSchema;
- });
- setIsLoading(false);
- });
- });
+ }
+ return newSchema
+ })
+ setIsLoading(false)
+ })
+ })
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [])
return !isLoading ? (
{React.Children.map(props.children, (child) => {
return React.cloneElement(child, {
- updateCompleteSchemaHandler:
- props.updateCompleteSchemaHandler || setCompleteSchema,
- schemaPath: `${props.schemaPath || ""}.properties.${
- child.props.name
- }`,
+ updateCompleteSchemaHandler: props.updateCompleteSchemaHandler || setCompleteSchema,
+ schemaPath: `${props.schemaPath || ''}.properties.${child.props.name}`,
uiSchema: (props.uiSchema || completeSchema.uiSchema).elements,
- });
+ })
})}
- {!props.updateCompleteSchemaHandler &&
- isProperJsonSchema(completeSchema) ? (
+ {!props.updateCompleteSchemaHandler && isProperJsonSchema(completeSchema) ? (
{
if (props.onDataChange) {
- props.onDataChange(data, errors);
+ props.onDataChange(data, errors)
}
}}
/>
@@ -134,5 +125,5 @@ export default function SchemaForm(props: IProps) {
) : (
- );
+ )
}
diff --git a/src/components/manifest/ShowDeploymentManifest.tsx b/src/components/manifest/ShowDeploymentManifest.tsx
index 4026085..ed21468 100644
--- a/src/components/manifest/ShowDeploymentManifest.tsx
+++ b/src/components/manifest/ShowDeploymentManifest.tsx
@@ -1,226 +1,220 @@
-import React from "react";
-import { Button, makeStyles, TextField, Snackbar, Paper} from "@material-ui/core";
-import { Autocomplete, Alert } from "@material-ui/lab";
-import { toast } from "react-toastify";
-import MenuAppBar from "../layout/Header";
-import { withCookies } from "react-cookie";
-import _ from "lodash";
-import { Link } from "react-router-dom";
-import { httpClient } from "../../helper/api-client";
-import ConfirmationButton from "../common/ConfirmationButton";
-import PortalMenu from "../layout/PortalMenu";
+import React from 'react'
+import { Button, makeStyles, TextField, Snackbar, Paper } from '@material-ui/core'
+import { Autocomplete, Alert } from '@material-ui/lab'
+import { toast } from 'react-toastify'
+import MenuAppBar from '../layout/Header'
+import { withCookies } from 'react-cookie'
+import _ from 'lodash'
+import { Link } from 'react-router-dom'
+import { httpClient } from '../../helper/api-client'
+import ConfirmationButton from '../common/ConfirmationButton'
+import PortalMenu from '../layout/PortalMenu'
-import * as _m from '../../models/Manifest';
+import * as _m from '../../models/Manifest'
-import CloneManifestForm from "../../coreform/CloneManifestForm";
-import Popup from "../common/Popup";
+import CloneManifestForm from '../../coreform/CloneManifestForm'
+import Popup from '../common/Popup'
const useStyles = makeStyles((theme) => ({
container: {
- padding: '2em'
+ padding: '2em',
},
root: {
- "& > *": {
+ '& > *': {
margin: theme.spacing(1),
},
},
paper: {
- marginRight: theme.spacing(2),
+ marginRight: theme.spacing(2),
},
field: {
- marginTop: 20,
- width: 300
- }
-}));
+ marginTop: 20,
+ width: 300,
+ },
+}))
export const ManifestListActions = (props: any) => {
- const deletePopupMsg = `WARNING! \n\n1. You are about to delete deployment manifest & kubernetes resources.\n2. This does not delete aws resources like rds, docdb, etc. \n3. run resource pipeline with destroy option before proceeding`;
- const { useRef } = React;
- const [popupOpen, setPopupOpen] = React.useState(false);
- const apiResponse = useRef
('')
+ const deletePopupMsg =
+ 'WARNING! \n\n1. You are about to delete deployment manifest & kubernetes resources.\n2. This does not delete aws resources like rds, docdb, etc. \n3. run resource pipeline with destroy option before proceeding'
+ const { useRef } = React
+ const [popupOpen, setPopupOpen] = React.useState(false)
+ const apiResponse = useRef('')
const responseSeverity = useRef('')
- const classes = useStyles();
- const [open, setOpen] = React.useState(false);
+ const classes = useStyles()
+ const [open, setOpen] = React.useState(false)
- const [deletePopupOpen, setDeletePopupOpen] = React.useState(false);
+ const [deletePopupOpen, setDeletePopupOpen] = React.useState(false)
const handleDeleteClick = () => {
- setDeletePopupOpen(true);
- };
+ setDeletePopupOpen(true)
+ }
const handleDeletePopupClose = () => {
- setDeletePopupOpen(false);
- };
+ setDeletePopupOpen(false)
+ }
const handleCloneClick = () => {
- setOpen(true);
- };
+ setOpen(true)
+ }
const handleCloneClose = () => {
- setOpen(false);
- };
- const parseLines = (value) => value.replace(/(\\n)/g, "\n");
+ setOpen(false)
+ }
+ const parseLines = (value) => value.replace(/(\\n)/g, '\n')
return (
<>
+
-
-
-
+
+
+
-
-
+
+
{
- const toastId = toast.info("In Progress ...", {
- autoClose: 50000,
- });
- httpClient(`/api/manifest/${props.manifestId}?deleteManifest=true`, { method: 'DELETE' })
- .then((res) => {
- res.json().then(resJson => {
- if (res.ok) {
- responseSeverity.current = "success"
- apiResponse.current = `Deleted manifest with resources: ${JSON.stringify(resJson)}`
- } else {
- responseSeverity.current = "error"
- apiResponse.current = JSON.stringify(resJson)
- }
- toast.dismiss(toastId)
- setPopupOpen(true)
- })
- })
+ const toastId = toast.info('In Progress ...', {
+ autoClose: 50000,
+ })
+ httpClient(`/api/manifest/${props.manifestId}?deleteManifest=true`, {
+ method: 'DELETE',
+ }).then((res) => {
+ res.json().then((resJson) => {
+ if (res.ok) {
+ responseSeverity.current = 'success'
+ apiResponse.current = `Deleted manifest with resources: ${JSON.stringify(resJson)}`
+ } else {
+ responseSeverity.current = 'error'
+ apiResponse.current = JSON.stringify(resJson)
+ }
+ toast.dismiss(toastId)
+ setPopupOpen(true)
+ })
+ })
}}
- variant="outlined"
+ variant='outlined'
disabled={!_.isNumber(props.manifestId)}
>
Delete
- { setPopupOpen(false) }}>
- { setPopupOpen(false) }} severity={responseSeverity.current}>
+ {
+ setPopupOpen(false)
+ }}
+ >
+ {
+ setPopupOpen(false)
+ }}
+ severity={responseSeverity.current}
+ >
{apiResponse.current}
- );
-};
+ )
+}
const ShowDeploymentManifest = () => {
- const { useState } = React;
- const [manifestNameList, setManifestNameList] = useState([]);
- const [selectedManifestId, setSelectedManifestId] = useState();
- const [isLoading, setIsLoading] = React.useState(false);
+ const { useState } = React
+ const [manifestNameList, setManifestNameList] = useState([])
+ const [selectedManifestId, setSelectedManifestId] = useState()
+ const [isLoading, setIsLoading] = React.useState(false)
function fetchListOfManifests(): Promise {
setIsLoading(true)
- return httpClient(`/api/manifest/list`)
+ return httpClient('/api/manifest/list')
.then((res) => {
console.log(`REDIRECTED: ${res.redirected}`)
console.log(`OK: ${res.ok}`)
- return res.json();
+ return res.json()
})
.then((response) => {
setIsLoading(false)
- return response;
+ return response
})
.catch((error) => {
- console.log(error);
- return [];
- });
+ console.log(error)
+ return []
+ })
}
React.useEffect(() => {
fetchListOfManifests().then((manifestList) => {
- setManifestNameList(manifestList);
- });
- }, []);
+ setManifestNameList(manifestList)
+ })
+ }, [])
- const classes = useStyles();
+ const classes = useStyles()
return (
<>
-
-
+
-
+
- `${option.environment}/${option.name}`
- }
- renderInput={(params) => (
-
- )}
- onChange={(_, value) =>
- value
- ? setSelectedManifestId(value.id)
- : setSelectedManifestId(undefined)
- }
+ getOptionLabel={(option: any) => `${option.environment}/${option.name}`}
+ renderInput={(params) => }
+ onChange={(_, value) => (value ? setSelectedManifestId(value.id) : setSelectedManifestId(undefined))}
/>
-
+
- );
-};
+ )
+}
-export default withCookies(ShowDeploymentManifest);
+export default withCookies(ShowDeploymentManifest)
diff --git a/src/components/manifest/ShowJson.tsx b/src/components/manifest/ShowJson.tsx
index 399d3e3..b584a41 100644
--- a/src/components/manifest/ShowJson.tsx
+++ b/src/components/manifest/ShowJson.tsx
@@ -1,23 +1,23 @@
-import { withCookies } from "react-cookie";
-import * as React from "react";
-import { httpClient } from "../../helper/api-client";
+import { withCookies } from 'react-cookie'
+import * as React from 'react'
+import { httpClient } from '../../helper/api-client'
const ShowJson = (props: any) => {
- const [jsonData, setJsonData] = React.useState({});
+ const [jsonData, setJsonData] = React.useState({})
const getManifestData = async (manifestId: number): Promise
=> {
- console.log(`Fetching manifest id ${manifestId}`);
- return httpClient(`/api/manifest/${manifestId}`).then((res) => res.json());
- };
+ console.log(`Fetching manifest id ${manifestId}`)
+ return httpClient(`/api/manifest/${manifestId}`).then((res) => res.json())
+ }
React.useEffect(() => {
- const manifestIdParam = props?.match?.params?.manifestId;
+ const manifestIdParam = props?.match?.params?.manifestId
getManifestData(manifestIdParam).then((res) => {
- setJsonData(res);
- });
- }, []);
+ setJsonData(res)
+ })
+ }, [])
- return {JSON.stringify(jsonData, null, 2)};
-};
+ return {JSON.stringify(jsonData, null, 2)}
+}
-export default withCookies(ShowJson);
+export default withCookies(ShowJson)
diff --git a/src/configuration/jsonforms/CustomAjv.ts b/src/configuration/jsonforms/CustomAjv.ts
index 15f363a..430a9a1 100644
--- a/src/configuration/jsonforms/CustomAjv.ts
+++ b/src/configuration/jsonforms/CustomAjv.ts
@@ -1,7 +1,7 @@
-import { createAjv } from "@jsonforms/core";
+import { createAjv } from '@jsonforms/core'
const customAjv = (() => {
- console.log("Creating custom ajv for jsonforms")
- return createAjv({useDefaults: true})
+ console.log('Creating custom ajv for jsonforms')
+ return createAjv({ useDefaults: true })
})()
-export default customAjv
\ No newline at end of file
+export default customAjv
diff --git a/src/configuration/jsonforms/Theme.tsx b/src/configuration/jsonforms/Theme.tsx
index f05a346..3cb083e 100644
--- a/src/configuration/jsonforms/Theme.tsx
+++ b/src/configuration/jsonforms/Theme.tsx
@@ -1,7 +1,7 @@
-import { createMuiTheme } from "@material-ui/core";
+import { createMuiTheme } from '@material-ui/core'
export const jsonformThemeOverride = createMuiTheme({
- // typography: {
- // fontSize: 18,
- // },
- });
\ No newline at end of file
+ // typography: {
+ // fontSize: 18,
+ // },
+})
diff --git a/src/coreform/AWSAccessForm.tsx b/src/coreform/AWSAccessForm.tsx
index 707c9df..a7dd82f 100644
--- a/src/coreform/AWSAccessForm.tsx
+++ b/src/coreform/AWSAccessForm.tsx
@@ -1,67 +1,81 @@
-import { Grid, makeStyles, TableCell } from '@material-ui/core';
-import { useFormikContext } from 'formik';
-import * as React from 'react';
-import { FormikTable } from '../components/common/FormikTable';
-import { FormikTextField } from '../components/common/FormikTextField';
-import { FormikCardList } from '../components/common/FormikCardList';
+import { Grid, makeStyles, TableCell } from '@material-ui/core'
+import { useFormikContext } from 'formik'
+import * as React from 'react'
+import { FormikTable } from '../components/common/FormikTable'
+import { FormikTextField } from '../components/common/FormikTextField'
+import { FormikCardList } from '../components/common/FormikCardList'
import * as _m from '../models/Manifest'
-import NotConfigured from './NotConfiguredPanel';
-import GeneratePipelineButton from "../components/common/GeneratePipelineButton";
+import NotConfigured from './NotConfiguredPanel'
+import GeneratePipelineButton from '../components/common/GeneratePipelineButton'
const useStyles = makeStyles({
- root: {
- width: 1200
- },
- field: {
- width: 510,
- marginTop: 10
- },
- smallField: {
- width: 400
- }
-});
+ root: {
+ width: 1200,
+ },
+ field: {
+ width: 510,
+ marginTop: 10,
+ },
+ smallField: {
+ width: 400,
+ },
+})
const PolicyAction = (props: { policy: string }) => {
- const { policy } = props
- const classes = useStyles();
- return (
-
- {(i) => (
- <>
-
-
-
-
- )}
- )
+ const { policy } = props
+ const classes = useStyles()
+ return (
+
+ {(i) => (
+ <>
+
+
+
+
+ )}
+
+ )
}
const AWSAccessForm = () => {
- const { values, setValues }: { values: any, setValues: any } = useFormikContext()
- const classes = useStyles();
- return (<>
- setValues(_m.addAwsAccess(values))}
- removeAction={() => setValues(_m.removeAwsAccess(values))} >
-
-
-
- {(i) => <>
-
-
-
- }
-
-
-
-
- <>{ values.extraResources !== undefined && values.extraResources.aws_access !== undefined?
-
- :''}
-
- )
+ const { values, setValues }: { values: any; setValues: any } = useFormikContext()
+ const classes = useStyles()
+ return (
+ <>
+ setValues(_m.addAwsAccess(values))}
+ removeAction={() => setValues(_m.removeAwsAccess(values))}
+ >
+
+
+ {(i) => (
+ <>
+
+
+
+ )}
+
+
+
+ <>
+ {values.extraResources !== undefined && values.extraResources.aws_access !== undefined ? (
+
+ ) : (
+ ''
+ )}
+
+
+ )
}
export default AWSAccessForm
diff --git a/src/coreform/AdditionalIpWhitelistingForm.tsx b/src/coreform/AdditionalIpWhitelistingForm.tsx
index 5c9e136..d7d3bee 100644
--- a/src/coreform/AdditionalIpWhitelistingForm.tsx
+++ b/src/coreform/AdditionalIpWhitelistingForm.tsx
@@ -1,79 +1,107 @@
-import { makeStyles, TableCell } from '@material-ui/core';
-import * as React from 'react';
-import { FormikTextField } from '../components/common/FormikTextField';
-import { FormikCardList } from '../components/common/FormikCardList';
+import { makeStyles, TableCell } from '@material-ui/core'
+import * as React from 'react'
+import { FormikTextField } from '../components/common/FormikTextField'
+import { FormikCardList } from '../components/common/FormikCardList'
import * as _m from '../models/Manifest'
-import { FormikTable } from '../components/common/FormikTable';
-import { toMenuItems } from './FormUtil';
-import { useFormikContext } from 'formik';
-import NotConfigured from './NotConfiguredPanel';
+import { FormikTable } from '../components/common/FormikTable'
+import { toMenuItems } from './FormUtil'
+import { useFormikContext } from 'formik'
+import NotConfigured from './NotConfiguredPanel'
const useStyles = makeStyles({
- root: {
- width: 1200
- },
- groupField: {
- width: 500
- },
- ruleField: {
- width: 280
- },
- cidrField: {
- width: 180
- }
-});
+ root: {
+ width: 1200,
+ },
+ groupField: {
+ width: 500,
+ },
+ ruleField: {
+ width: 280,
+ },
+ cidrField: {
+ width: 180,
+ },
+})
const IngresCidr = (props: { securityGroupRule: string }) => {
- const classes = useStyles();
- const { securityGroupRule } = props
- return (
-
- {(i) => }
-
- )
+ const classes = useStyles()
+ const { securityGroupRule } = props
+ return (
+
+ {(i) => (
+
+
+
+ )}
+
+ )
}
const SecurityGroupRule = (props: { securityGroup: string }) => {
- const classes = useStyles();
- const { securityGroup } = props
- return (
-
- {(i) => (
- <>
-
-
-
-
- {toMenuItems(['http', 'tcp'])}
-
-
-
- )}
-
- )
+ const classes = useStyles()
+ const { securityGroup } = props
+ return (
+
+ {(i) => (
+ <>
+
+
+
+
+ {toMenuItems(['http', 'tcp'])}
+
+
+
+ )}
+
+ )
}
const AdditionalIpWhitelistingForm = () => {
- const classes = useStyles();
- const { values, setValues }: { values: any, setValues: any } = useFormikContext()
- return (
- setValues(_m.addAdditionalIpWhitelisting(values))}
- removeAction={() => setValues(_m.removeAdditionalIpWhitelisting(values))} >
-
-
- {(i) => (
- <>
-
-
-
- )}
-
-
-
- )
+ const classes = useStyles()
+ const { values, setValues }: { values: any; setValues: any } = useFormikContext()
+ return (
+ setValues(_m.addAdditionalIpWhitelisting(values))}
+ removeAction={() => setValues(_m.removeAdditionalIpWhitelisting(values))}
+ >
+
+
+ {(i) => (
+ <>
+
+
+
+ )}
+
+
+
+ )
}
-export default AdditionalIpWhitelistingForm
\ No newline at end of file
+export default AdditionalIpWhitelistingForm
diff --git a/src/coreform/AlertForm.tsx b/src/coreform/AlertForm.tsx
index d1673a5..7a044e1 100644
--- a/src/coreform/AlertForm.tsx
+++ b/src/coreform/AlertForm.tsx
@@ -1,169 +1,197 @@
-import { AppBar, createStyles, makeStyles, styled, Tab, Tabs, Theme, withStyles } from '@material-ui/core';
+import { AppBar, createStyles, makeStyles, styled, Tab, Tabs, Theme, withStyles } from '@material-ui/core'
import * as React from 'react'
-import { tabA11yProps, TabPanel, toMenuItems } from './FormUtil';
+import { tabA11yProps, TabPanel, toMenuItems } from './FormUtil'
import * as _m from '../models/Manifest'
-import { FormikTextField } from '../components/common/FormikTextField';
-import { FormikCardList } from '../components/common/FormikCardList';
-import NotConfigured from './NotConfiguredPanel';
-import { useField, useFormikContext } from 'formik';
+import { FormikTextField } from '../components/common/FormikTextField'
+import { FormikCardList } from '../components/common/FormikCardList'
+import NotConfigured from './NotConfiguredPanel'
+import { useField, useFormikContext } from 'formik'
const useStyles = makeStyles((theme: Theme) => ({
- root: {
- flexGrow: 1,
- backgroundColor: theme.palette.background.paper,
- },
- alertPanel: {
- width: 1200
- },
-}));
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ },
+ alertPanel: {
+ width: 1200,
+ },
+}))
const alertTypes = {
- 'loadBalancer': ['http4xx', 'http5xx', 'elb4xx', 'elb5xx', 'latency'],
- 'database': ['highActiveConnection', 'connectionAcquireTimeIsHigh', 'maxConnectionPoolReached'],
- 'kafka': ['consumerGroupLag', 'kafkaMessageRate'],
+ loadBalancer: ['http4xx', 'http5xx', 'elb4xx', 'elb5xx', 'latency'],
+ database: ['highActiveConnection', 'connectionAcquireTimeIsHigh', 'maxConnectionPoolReached'],
+ kafka: ['consumerGroupLag', 'kafkaMessageRate'],
}
const severity = ['critical', 'warning']
const FixWidthTextField = styled(FormikTextField)({
- margin: 5,
- width: 300
+ margin: 5,
+ width: 300,
})
interface StyledTabProps {
- label: string;
+ label: string
}
-const commonAlerts = (i, alertType) => (<>
-
- {toMenuItems(alertTypes[alertType])}
+const commonAlerts = (i, alertType) => (
+ <>
+
+ {toMenuItems(alertTypes[alertType])}
-
- {toMenuItems(severity)}
+
+ {toMenuItems(severity)}
-
-
-
+
+
+
)
const LoadBalancerAlert = () => {
- const alertType = 'loadBalancer'
- return (
-
- {(i) => commonAlerts(i, alertType)}
-
- )
+ const alertType = 'loadBalancer'
+ return (
+
+ {(i) => commonAlerts(i, alertType)}
+
+ )
}
const DatabaseAlert = () => {
- const alertType = 'database'
- return (
-
- {(i) => commonAlerts(i, alertType)}
-
- )
+ const alertType = 'database'
+ return (
+
+ {(i) => commonAlerts(i, alertType)}
+
+ )
}
const KafkaAlertGroupField = (props) => {
- const { i } = props
- const [kafkaAlertType] = useField(`deployment.alerts.kafka.${i}.type`)
- if (kafkaAlertType.value === "consumerGroupLag") {
- return
- } else {
- return <>
- }
+ const { i } = props
+ const [kafkaAlertType] = useField(`deployment.alerts.kafka.${i}.type`)
+ if (kafkaAlertType.value === 'consumerGroupLag') {
+ return
+ } else {
+ return <>
+ }
}
const KafkaAlert = () => {
- const alertType = 'kafka'
- return (
-
- {(i) => (<>
- {commonAlerts(i, alertType)}
-
-
- )}
-
- )
+ const alertType = 'kafka'
+ return (
+
+ {(i) => (
+ <>
+ {commonAlerts(i, alertType)}
+
+
+
+ )}
+
+ )
}
const RecordingRules = () => {
- const alertType = 'prometheusRecordingRule'
- const classes = useStyles();
- const { values, setValues }: { values: any, setValues: any } = useFormikContext()
- return (
-
- {(i) => (<>
-
-
-
-
- )}
-
- )
+ const alertType = 'prometheusRecordingRule'
+ const classes = useStyles()
+ const { values, setValues }: { values: any; setValues: any } = useFormikContext()
+ return (
+
+ {(i) => (
+ <>
+
+
+
+
+
+ )}
+
+ )
}
const CustomAlert = () => {
- const alertType = 'custom'
- return (
-
- {(i) => (<>
-
-
-
-
-
-
- {toMenuItems(severity)}
-
- )}
-
- )
+ const alertType = 'custom'
+ return (
+
+ {(i) => (
+ <>
+
+
+
+
+
+
+ {toMenuItems(severity)}
+
+
+ )}
+
+ )
}
const AlertForm = () => {
- const classes = useStyles();
- const { values, setValues }: { values: any, setValues: any } = useFormikContext()
- const [currentTab, setCurrentTab] = React.useState(0);
+ const classes = useStyles()
+ const { values, setValues }: { values: any; setValues: any } = useFormikContext()
+ const [currentTab, setCurrentTab] = React.useState(0)
- const handleTabChange = (event: React.ChangeEvent<{}>, newTab: number) => {
- setCurrentTab(newTab);
- };
- return (
- setValues(_m.addAlerts(values))}
- removeAction={() => setValues(_m.removeAlerts(values))} >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -162,61 +160,72 @@ const BaseForm = (props: BaseFormProps) => {
enableReinitialize
initialValues={initData}
validate={async (value) => {
- try {
- await validateYupSchema(value, manifestValidationSchema, false, value);
- } catch (err) {
- return yupToFormErrors(err); //for rendering validation errors
- }
- return {};
+ try {
+ await validateYupSchema(value, manifestValidationSchema, false, value)
+ } catch (err) {
+ return yupToFormErrors(err) // for rendering validation errors
+ }
+ return {}
}}
validateOnChange={false}
- onSubmit={values => {
- disableSubmitButton(true);
- onSubmit(values, disableSubmitButton);
- }} >
- {
- props => (
-
- )
- }
+ onSubmit={(values) => {
+ disableSubmitButton(true)
+ onSubmit(values, disableSubmitButton)
+ }}
+ >
+ {(props) => (
+
+ )}
-
{
- submitManifest(values)
- }}>
- {props => (
-
- )
- }
-
-
setSubmitResponseStatus("")}
- >
- {JSON.stringify(submitResponse)}
-
-
+
{
+ submitManifest(values)
+ }}
+ >
+ {(props) => (
+
+ )}
+
+
setSubmitResponseStatus('')}
+ >
+ {JSON.stringify(submitResponse)}
+
+