diff --git a/src/web/aws-cloudwatch/StepAuthorize.jsx b/src/web/aws-cloudwatch/StepAuthorize.jsx index 3daeb3d81a79f..3591b2bb24b84 100644 --- a/src/web/aws-cloudwatch/StepAuthorize.jsx +++ b/src/web/aws-cloudwatch/StepAuthorize.jsx @@ -4,10 +4,12 @@ import styled from 'styled-components'; import { FormDataContext } from './context/FormData'; import { ApiContext } from './context/Api'; +import { SidebarContext } from './context/Sidebar'; import ValidatedInput from '../common/ValidatedInput'; import MaskedInput from '../common/MaskedInput'; import FormWrap from '../common/FormWrap'; +import Permissions from '../common/Permissions'; import { renderOptions } from '../common/Options'; import { ApiRoutes } from '../common/Routes'; import useFetch from '../common/hooks/useFetch'; @@ -16,6 +18,7 @@ import formValidation from '../utils/formValidation'; const StepAuthorize = ({ onChange, onSubmit }) => { const { formData } = useContext(FormDataContext); + const { clearSidebar, setSidebar } = useContext(SidebarContext); const { availableRegions, setRegions, setStreams } = useContext(ApiContext); const [formError, setFormError] = useState(null); const [fetchRegionsStatus] = useFetch(ApiRoutes.INTEGRATIONS.AWS.REGIONS, setRegions, 'GET'); @@ -59,6 +62,14 @@ const StepAuthorize = ({ onChange, onSubmit }) => { setStreamsFetch(ApiRoutes.INTEGRATIONS.AWS.KINESIS.STREAMS); }; + useEffect(() => { + setSidebar(); + + return () => { + clearSidebar(); + }; + }, []); + return ( <> { + setOpened(!opened); + }; + + return ( +
+
+ + {opened ? 'Hide' : 'Show'} {title} + {note} + + + +
+ + + {JSON.stringify(policy, null, 2)} + +
+ ); +} + +Policies.propTypes = { + title: PropTypes.string.isRequired, + note: PropTypes.string.isRequired, + policy: PropTypes.object.isRequired, +}; + +export default function Permissions() { + const [permissionsStatus] = useFetch(ApiRoutes.INTEGRATIONS.AWS.PERMISSIONS); + + return ( + AWS Policy Permissions}> +

Please verify that you have granted your AWS IAM user sufficient permissions. You can use the following policies for reference.

+ + {!permissionsStatus.loading && permissionsStatus.data && ( + <> + + + + + )} +
+ ); +} + +const Header = styled.header` + display: flex; + align-items: center; + cursor: pointer; +`; + +const HeaderContent = styled.div` + flex-grow: 1; +`; + +const Icon = styled.span` + transform: rotate(${props => (props.opened ? '90deg' : '0deg')}); + transition: transform 150ms ease-in-out; +`; + +const Policy = styled.pre` + overflow: hidden; + max-height: ${props => (props.opened ? '1000px' : '0')}; + opacity: ${props => (props.opened ? '1' : '0')}; + transition: max-height 150ms ease-in-out, opacity 150ms ease-in-out, margin 150ms ease-in-out, padding 150ms ease-in-out; + margin-bottom: ${props => (props.opened ? '12px' : '0')}; + padding: ${props => (props.opened ? '9.5px' : '0')}; +`; + +const Title = styled.h4` + font-weight: bold; +`; + +const Note = styled.p` + font-style: italic; +`; diff --git a/src/web/common/Routes.js b/src/web/common/Routes.js index 620c3232daef5..987b3ee6b7aed 100644 --- a/src/web/common/Routes.js +++ b/src/web/common/Routes.js @@ -13,6 +13,7 @@ const Routes = { const ApiRoutes = { INTEGRATIONS: { AWS: { + PERMISSIONS: '/plugins/org.graylog.integrations/aws/permissions', REGIONS: '/plugins/org.graylog.integrations/aws/regions', CLOUDWATCH: { GROUPS: '/plugins/org.graylog.integrations/aws/cloudwatch/log_groups', diff --git a/src/web/common/ValidatedInput.jsx b/src/web/common/ValidatedInput.jsx index 0db71690e0b79..97f180a141405 100644 --- a/src/web/common/ValidatedInput.jsx +++ b/src/web/common/ValidatedInput.jsx @@ -40,9 +40,9 @@ const ValidatedInput = ({ help, onChange, id, label, fieldData, type, ...restPro type={type} onChange={handleChange} onBlur={checkValidity} - bsStyle={(error && dirty && 'error') || null} - defaultValue={(type !== 'select' && value) || null} - value={(type === 'select' && value) || null} + bsStyle={(error && dirty && 'error') || undefined} + defaultValue={(type !== 'select' && value) || undefined} + value={(type === 'select' && value) || undefined} label={