render()

in public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js [256:340]
80 lines of code
5 McCabe index (conditional complexity)

  render() {
    const { initialValues, plugins } = this.state;
    const { edit, httpClient, monitorToEdit, notifications, isDarkMode } = this.props;

    return (
      <div style={{ padding: '25px 50px' }}>
        <Formik initialValues={initialValues} onSubmit={this.onSubmit} validateOnChange={false}>
          {({ values, errors, handleSubmit, isSubmitting, isValid, touched }) => (
            <Fragment>
              <EuiTitle size="l">
                <h1>{edit ? 'Edit' : 'Create'} monitor</h1>
              </EuiTitle>
              <EuiSpacer />

              <MonitorDetails
                values={values}
                errors={errors}
                httpClient={httpClient}
                monitorToEdit={monitorToEdit}
                plugins={plugins}
                isAd={values.searchType === SEARCH_TYPE.AD}
                detectorId={this.props.detectorId}
              />
              <EuiSpacer />

              {values.searchType !== SEARCH_TYPE.AD && (
                <div>
                  <DefineMonitor
                    values={values}
                    errors={errors}
                    touched={touched}
                    httpClient={httpClient}
                    detectorId={this.props.detectorId}
                    notifications={notifications}
                    isDarkMode={isDarkMode}
                  />
                  <EuiSpacer />
                </div>
              )}

              <FieldArray name={'triggerDefinitions'} validateOnChange={true}>
                {(triggerArrayHelpers) => (
                  <ConfigureTriggers
                    edit={edit}
                    triggerArrayHelpers={triggerArrayHelpers}
                    monitor={formikToMonitor(values)}
                    monitorValues={values}
                    setFlyout={this.props.setFlyout}
                    triggers={_.get(formikToMonitor(values), 'triggers', [])}
                    triggerValues={values}
                    isDarkMode={this.props.isDarkMode}
                    httpClient={httpClient}
                    notifications={notifications}
                  />
                )}
              </FieldArray>

              <EuiSpacer />
              <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                <EuiFlexItem grow={false}>
                  <EuiButtonEmpty onClick={this.onCancel}>Cancel</EuiButtonEmpty>
                </EuiFlexItem>
                <EuiFlexItem grow={false}>
                  <EuiButton fill onClick={handleSubmit} isLoading={isSubmitting}>
                    {edit ? 'Update' : 'Create'}
                  </EuiButton>
                </EuiFlexItem>
              </EuiFlexGroup>
              <SubmitErrorHandler
                errors={errors}
                isSubmitting={isSubmitting}
                isValid={isValid}
                onSubmitError={() =>
                  notifications.toasts.addDanger({
                    title: `Failed to ${edit ? 'update' : 'create'} the monitor`,
                    text: 'Fix all highlighted error(s) before continuing.',
                  })
                }
              />
            </Fragment>
          )}
        </Formik>
      </div>
    );
  }