Merge pull request #77 from Graylog2/advanced_option_fields

Advanced option fields

package.json

@@ -14,6 +14,10 @@
     "graylog"
   ],
   "author": "Graylog, Inc. <[email protected]>",
+  "dependencies": {
+    "@emotion/core": "^10.0.10",
+    "@emotion/styled": "^10.0.12"
+  },
   "private": true,
   "devDependencies": {
     "eslint-config-graylog": "file:../graylog2-server/graylog2-web-interface/packages/eslint-config-graylog",

src/web/aws-cloudwatch/CloudWatch.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Col, Row } from 'react-bootstrap';
 
-// import UserNotification from 'util/UserNotification';
 import Wizard from 'components/common/Wizard';
 
 import StepAuthorize from './StepAuthorize';
@@ -20,64 +19,28 @@ export default class AWSCloudWatch extends Component {
   constructor(props) {
     super(props);
 
-    this.wizardSteps = [
-      {
-        key: 'authorize',
-        title: 'AWS CloudWatch Authorize',
-        component: (<StepAuthorize onSubmit={this.handleSubmit}
-                                   onChange={this.handleFieldUpdate}
-                                   getValue={this.getFormData} />),
-      },
-      {
-        key: 'kinesis-setup',
-        title: 'AWS CloudWatch Kinesis Setup',
-        component: (<StepKinesis onSubmit={this.handleSubmit}
-                                 onChange={this.handleFieldUpdate}
-                                 getValue={this.getFormData}
-                                 hasStreams />),
-      },
-      {
-        key: 'health-check',
-        title: 'AWS CloudWatch Health Check',
-        component: (<StepHealthCheck onSubmit={this.handleSubmit} />),
-      },
-      {
-        key: 'review',
-        title: 'AWS CloudWatch Review',
-        component: (<StepReview onSubmit={this.handleSubmit} getAllValues={this.getAllFormData} />),
-      },
-    ];
-
     this.state = {
+      visibleAdvancedOptions: false,
       currentStep: 'authorize',
       enabledSteps: ['authorize'],
-      formData: {},
-      wizardSteps: this.wizardWithDisabledSteps(),
+      formData: {
+        /* Default Advanced Values */
+        awsCloudWatchGlobalInput: '',
+        awsCloudWatchAssumeARN: '',
+        awsCloudWatchBatchSize: '10000',
+        awsCloudWatchThrottleEnabled: '',
+        awsCloudWatchThrottleWait: '1000',
+        /* End Default Values */
+        awsCloudWatchName: 'Test',
+        awsCloudWatchDescription: 'Desc',
+        awsCloudWatchAwsKey: 'ABC',
+        awsCloudWatchAwsSecret: '123',
+        awsCloudWatchAwsRegion: 'us-east-2',
+      },
     };
-
-    this.availableSteps = this.wizardSteps.map(step => step.key);
-  }
-
-  wizardWithDisabledSteps = () => {
-    return this.wizardSteps.map(step => (
-      {
-        ...step,
-        disabled: this.isDisabledStep(step.key),
-      }
-    ));
   }
 
-  /* eslint-disable-next-line react/destructuring-assignment */
-  getFormData = value => this.state.formData[value];
-
-  /* eslint-disable-next-line react/destructuring-assignment */
-  getAllFormData = () => this.state.formData;
-
   isDisabledStep = (step) => {
-    if (!this.state) {
-      return true;
-    }
-
     const { enabledSteps } = this.state;
 
     if (!enabledSteps || enabledSteps.length === 0) {
@@ -89,11 +52,12 @@ export default class AWSCloudWatch extends Component {
 
   handleFieldUpdate = ({ target }) => {
     const { formData } = this.state;
+    const value = Object.keys(target).includes('checked') ? target.checked : target.value;
 
     this.setState({
       formData: {
         ...formData,
-        [target.id]: target.value,
+        [target.name || target.id]: value,
       },
     });
   }
@@ -104,16 +68,12 @@ export default class AWSCloudWatch extends Component {
     const { currentStep, enabledSteps } = this.state;
     const nextStep = this.availableSteps.indexOf(currentStep) + 1;
 
-    if (this.wizardSteps[nextStep]) {
-      const { key } = this.wizardSteps[nextStep];
+    if (this.availableSteps[nextStep]) {
+      const key = this.availableSteps[nextStep];
 
       this.setState({
         enabledSteps: [...enabledSteps, key],
         currentStep: key,
-      }, () => {
-        this.setState({
-          wizardSteps: this.wizardWithDisabledSteps(),
-        });
       });
     }
 
@@ -126,8 +86,50 @@ export default class AWSCloudWatch extends Component {
     });
   }
 
+  toggleAdvancedOptions = () => {
+    const { visibleAdvancedOptions } = this.state;
+
+    this.setState({
+      visibleAdvancedOptions: !visibleAdvancedOptions,
+    });
+  }
+
   render() {
-    const { currentStep, wizardSteps } = this.state;
+    const { currentStep, formData, visibleAdvancedOptions } = this.state;
+    const wizardSteps = [
+      {
+        key: 'authorize',
+        title: 'AWS CloudWatch Authorize',
+        component: (<StepAuthorize onSubmit={this.handleSubmit}
+                                   onChange={this.handleFieldUpdate}
+                                   values={formData} />),
+        disabled: this.isDisabledStep('authorize'),
+      },
+      {
+        key: 'kinesis-setup',
+        title: 'AWS CloudWatch Kinesis Setup',
+        component: (<StepKinesis onSubmit={this.handleSubmit}
+                                 onChange={this.handleFieldUpdate}
+                                 values={formData}
+                                 toggleAdvancedOptions={this.toggleAdvancedOptions}
+                                 visibleAdvancedOptions={visibleAdvancedOptions}
+                                 hasStreams />),
+        disabled: this.isDisabledStep('kinesis-setup'),
+      },
+      {
+        key: 'health-check',
+        title: 'AWS CloudWatch Health Check',
+        component: (<StepHealthCheck onSubmit={this.handleSubmit} />),
+        disabled: this.isDisabledStep('health-check'),
+      },
+      {
+        key: 'review',
+        title: 'AWS CloudWatch Review',
+        component: (<StepReview onSubmit={this.handleSubmit} values={formData} />),
+        disabled: this.isDisabledStep('review'),
+      },
+    ];
+    this.availableSteps = wizardSteps.map(step => step.key);
 
     return (
       <Row>

src/web/aws-cloudwatch/FormAdvancedOptions.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { Input } from 'components/bootstrap';
+
+const FormAdvancedOptions = ({ onChange, values, toggle, visible }) => {
+  return (
+    <div>
+      <ToggleAdvancedOptions onClick={toggle} type="button">
+          Advanced Options <i className="fa fa-angle-right fa-sm" />
+      </ToggleAdvancedOptions>
+
+      <AdvancedOptionsContent visible={visible}>
+        <Input id="awsCloudWatchGlobalInput"
+               type="checkbox"
+               value="global-input"
+               defaultChecked={values.awsCloudWatchGlobalInput}
+               onChange={onChange}
+               label="Global Input" />
+
+        <Input id="awsCloudWatchAssumeARN"
+               type="text"
+               value={values.awsCloudWatchAssumeARN}
+               onChange={onChange}
+               label="AWS assume role ARN" />
+
+        <Input id="awsCloudWatchBatchSize"
+               type="number"
+               value={values.awsCloudWatchBatchSize}
+               onChange={onChange}
+               label="Kinesis Record batch size" />
+
+        <Input id="awsCloudWatchThrottleEnabled"
+               type="checkbox"
+               value="throttle-enabled"
+               defaultChecked={values.awsCloudWatchThrottleEnabled}
+               onChange={onChange}
+               label="Enable Throttle" />
+
+        <Input id="awsCloudWatchThrottleWait"
+               type="number"
+               value={values.awsCloudWatchThrottleWait}
+               onChange={onChange}
+               label="Throttled wait milliseconds" />
+      </AdvancedOptionsContent>
+    </div>
+  );
+};
+
+FormAdvancedOptions.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+  toggle: PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+};
+
+const AdvancedOptionsContent = styled.div`
+  display: ${props => (props.visible ? 'block' : 'none')};
+
+`;
+
+const ToggleAdvancedOptions = styled.button`
+  border: 0;
+  color: #16ace3;
+  font-size: 14px;
+
+  :hover {
+    color: #5e123b;
+    text-decoration: underline;
+  }
+`;
+
+export default FormAdvancedOptions;

src/web/aws-cloudwatch/KinesisSetup.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Button, Col, Row } from 'react-bootstrap';
 
 import { Input } from 'components/bootstrap';
+import FormAdvancedOptions from './FormAdvancedOptions';
 
-const KinesisSetup = ({ getValue, onChange, onSubmit }) => {
+const KinesisSetup = ({ values, onChange, onSubmit, toggleAdvancedOptions, visibleAdvancedOptions }) => {
   return (
     <Row>
       <Col md={8}>
@@ -17,12 +18,12 @@ const KinesisSetup = ({ getValue, onChange, onSubmit }) => {
                  label="Kinesis Stream Name"
                  placeholder="Create Stream Name"
                  onChange={onChange}
-                 value={getValue('awsCloudWatchKinesisStream')}
+                 defaultValue={values.awsCloudWatchKinesisStream}
                  required />
 
           <Input id="awsCloudWatchAwsGroupName"
                  type="select"
-                 value={getValue('awsCloudWatchAwsGroupName')}
+                 value={values.awsCloudWatchAwsGroupName}
                  onChange={onChange}
                  label="CloudWatch Group Name"
                  required>
@@ -33,6 +34,11 @@ const KinesisSetup = ({ getValue, onChange, onSubmit }) => {
             <option value="group-name-4">Group Name 4</option>
           </Input>
 
+          <FormAdvancedOptions onChange={onChange}
+                               values={values}
+                               toggle={toggleAdvancedOptions}
+                               visible={visibleAdvancedOptions} />
+
           <Button type="submit">Verify &amp; Format</Button>
         </form>
       </Col>
@@ -43,7 +49,9 @@ const KinesisSetup = ({ getValue, onChange, onSubmit }) => {
 KinesisSetup.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
-  getValue: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+  toggleAdvancedOptions: PropTypes.func.isRequired,
+  visibleAdvancedOptions: PropTypes.bool.isRequired,
 };
 
 export default KinesisSetup;

src/web/aws-cloudwatch/KinesisStreams.jsx

@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Button, Col, Row } from 'react-bootstrap';
 
 import { Input } from 'components/bootstrap';
+import FormAdvancedOptions from './FormAdvancedOptions';
 
-const KinesisStreams = ({ onChange, onSubmit, getValue }) => {
+const KinesisStreams = ({ onChange, onSubmit, values, toggleAdvancedOptions, visibleAdvancedOptions }) => {
   return (
     <Row>
       <Col md={8}>
@@ -14,7 +15,7 @@ const KinesisStreams = ({ onChange, onSubmit, getValue }) => {
 
           <Input id="awsCloudWatchKinesisStream"
                  type="select"
-                 value={getValue('awsCloudWatchKinesisStream')}
+                 value={values.awsCloudWatchKinesisStream}
                  onChange={onChange}
                  label="Choose Stream"
                  required>
@@ -25,6 +26,11 @@ const KinesisStreams = ({ onChange, onSubmit, getValue }) => {
             <option value="stream-name-4">Stream Name 4</option>
           </Input>
 
+          <FormAdvancedOptions onChange={onChange}
+                               values={values}
+                               toggle={toggleAdvancedOptions}
+                               visible={visibleAdvancedOptions} />
+
           <Button type="submit">Verify Stream &amp; Format</Button>
         </form>
       </Col>
@@ -35,7 +41,9 @@ const KinesisStreams = ({ onChange, onSubmit, getValue }) => {
 KinesisStreams.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
-  getValue: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+  toggleAdvancedOptions: PropTypes.func.isRequired,
+  visibleAdvancedOptions: PropTypes.bool.isRequired,
 };
 
 export default KinesisStreams;