@spinnaker/kayenta 0.0.0-main-2

package/src/kayenta/manualAnalysis/ManualAnalysisModal.tsx

@@ -0,0 +1,716 @@
+import { Field, Form, Formik, FormikActions, FormikErrors, FormikProps, FormikTouched } from 'formik';
+import { get } from 'lodash';
+import * as React from 'react';
+import { Modal } from 'react-bootstrap';
+
+import {
+  Application,
+  HelpField,
+  HoverablePopover,
+  IModalComponentProps,
+  MapEditor,
+  ModalClose,
+  noop,
+  ReactModal,
+  SubmitButton,
+  TetheredSelect,
+} from '@spinnaker/core';
+
+import { CanaryScores } from '../components/canaryScores';
+import { ICanaryConfigSummary, ICanaryExecutionRequest, IKayentaAccount, KayentaAccountType } from '../domain';
+import { startCanaryRun } from '../service/canaryRun.service';
+
+const RESOURCE_TYPES = {
+  prometheus: [
+    { label: '', value: '' },
+    { label: 'gce_instance', value: 'gce_instance' },
+    { label: 'aws_ec2_instance', value: 'aws_ec2_instance' },
+  ],
+  stackdriver: [
+    { label: 'gce_instance', value: 'gce_instance' },
+    { label: 'aws_ec2_instance', value: 'aws_ec2_instance' },
+    { label: 'gae_app', value: 'gae_app' },
+    { label: 'k8s_container', value: 'k8s_container' },
+    { label: 'k8s_pod', value: 'k8s_pod' },
+    { label: 'k8s_node', value: 'k8s_node' },
+    { label: 'gke_container', value: 'gke_container' },
+    { label: 'https_lb_rule', value: 'https_lb_rule' },
+    { label: 'global', value: 'global' },
+  ],
+};
+
+export interface IManualAnalysisModalProps extends IModalComponentProps {
+  title: string;
+  application: Application;
+  accounts: IKayentaAccount[];
+  initialValues?: IManualAnalysisModalFormProps;
+}
+
+export interface IManualAnalysisModalState {
+  showAllControlLocations: boolean;
+  showAllExperimentLocations: boolean;
+}
+
+export interface IManualAnalysisModalFormProps {
+  configId: string;
+  startTime: string;
+  endTime: string;
+  step: string;
+  baselineScope: string;
+  canaryScope: string;
+  baselineLocation: string;
+  canaryLocation: string;
+  extendedScopeParams: { [key: string]: string };
+  resourceType: string;
+  marginalThreshold: string;
+  passThreshold: string;
+  metricsAccountName: string;
+  storageAccountName: string;
+}
+
+const transformFormPropsToExecutionRequest = (
+  values: IManualAnalysisModalFormProps,
+  accounts: IKayentaAccount[],
+): ICanaryExecutionRequest => {
+  const step = parseInt(values.step, 10);
+  const pass = parseInt(values.passThreshold, 10);
+  const marginal = parseInt(values.marginalThreshold, 10);
+
+  const metricsAccount = accounts.find(({ name }) => values.metricsAccountName === name);
+
+  const accountSpecificParams: { [param: string]: string } = {};
+
+  if (values.resourceType) {
+    accountSpecificParams.resourceType = values.resourceType;
+  }
+
+  if (metricsAccount.type === 'atlas' && !values.extendedScopeParams?.type) {
+    accountSpecificParams.type = 'cluster';
+  }
+
+  const extendedScopeParams = { ...values.extendedScopeParams, ...accountSpecificParams };
+
+  return {
+    scopes: {
+      default: {
+        controlScope: {
+          scope: values.baselineScope,
+          start: values.startTime,
+          end: values.endTime,
+          location: values.baselineLocation,
+          step,
+          extendedScopeParams,
+        },
+        experimentScope: {
+          scope: values.canaryScope,
+          start: values.startTime,
+          end: values.endTime,
+          location: values.canaryLocation,
+          step,
+          extendedScopeParams,
+        },
+      },
+    },
+    thresholds: {
+      pass,
+      marginal,
+    },
+  };
+};
+
+const defaultValues: IManualAnalysisModalFormProps = {
+  configId: null,
+  startTime: '',
+  endTime: '',
+  step: '',
+  baselineScope: '',
+  canaryScope: '',
+  baselineLocation: '',
+  canaryLocation: '',
+  extendedScopeParams: {},
+  resourceType: '',
+  marginalThreshold: '',
+  passThreshold: '',
+  metricsAccountName: '',
+  storageAccountName: '',
+};
+
+export class ManualAnalysisModal extends React.Component<IManualAnalysisModalProps, IManualAnalysisModalState> {
+  public static defaultProps: Partial<IManualAnalysisModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+    initialValues: defaultValues,
+  };
+
+  public static show(props: IManualAnalysisModalProps): Promise<any> {
+    const modalProps = { dialogClassName: 'modal-lg' };
+    return ReactModal.show(ManualAnalysisModal, props, modalProps);
+  }
+
+  constructor(props: IManualAnalysisModalProps) {
+    super(props);
+    const { initialValues, accounts } = props;
+    const selectedMetricsStore = accounts.find(({ name }) => initialValues.metricsAccountName === name);
+    const recommendedLocations = selectedMetricsStore?.recommendedLocations ?? [];
+    this.state = {
+      showAllControlLocations: !recommendedLocations.includes(initialValues.baselineLocation),
+      showAllExperimentLocations: !recommendedLocations.includes(initialValues.canaryLocation),
+    };
+  }
+
+  private validate = (values: IManualAnalysisModalFormProps) => {
+    const errors = {} as FormikErrors<IManualAnalysisModalFormProps>;
+    let startTime, endTime;
+
+    if (!values.configId) {
+      errors.configId = 'You must choose a canary config';
+    }
+
+    if (!values.startTime) {
+      errors.startTime = 'You must provide a start time';
+    } else {
+      try {
+        startTime = new Date(values.startTime).getTime();
+      } catch (e) {
+        errors.startTime = 'Invalid start time. Time must be in ISO-8601 format, e.g. 2018-07-12T22:28:29Z';
+      }
+    }
+
+    if (!values.endTime) {
+      errors.endTime = 'You must provide an end time';
+    } else {
+      try {
+        endTime = new Date(values.endTime).getTime();
+      } catch (e) {
+        errors.endTime = 'Invalid start time. Time must be in ISO-8601 format, e.g. 2018-07-12T22:28:29Z';
+      }
+    }
+
+    if (startTime && endTime && endTime <= startTime) {
+      errors.endTime = 'End time must be after start time';
+    }
+
+    if (!values.step) {
+      errors.step = 'You must provide a step value';
+    } else if (parseInt(values.step, 10) < 1) {
+      errors.step = 'Invalid step value';
+    }
+
+    if (!values.baselineScope) {
+      errors.baselineScope = 'You must provide a baseline scope';
+    }
+
+    if (!values.canaryScope) {
+      errors.canaryScope = 'You must provide a canary scope';
+    }
+
+    if (!values.baselineLocation) {
+      errors.baselineLocation = 'You must provide a baseline location';
+    }
+
+    if (!values.canaryLocation) {
+      errors.canaryLocation = 'You must provide a canary location';
+    }
+
+    const marginalThreshold = parseInt(values.marginalThreshold, 10);
+    const passThreshold = parseInt(values.passThreshold, 10);
+
+    if (!values.marginalThreshold) {
+      errors.marginalThreshold = 'You must provide a marginal score threshold';
+    } else if (marginalThreshold > passThreshold) {
+      errors.marginalThreshold = 'Marginal threshold must be greater than passing threshold';
+    } else if (marginalThreshold < 1) {
+      errors.marginalThreshold = 'Marginal threshold must be positive';
+    }
+
+    if (!values.passThreshold) {
+      errors.passThreshold = 'You must provide a passing score threshold';
+    } else if (passThreshold > 100) {
+      errors.passThreshold = 'Passing threshold cannot be greater than 100';
+    }
+
+    if (!values.metricsAccountName) {
+      errors.metricsAccountName = 'You must choose a metrics account';
+    }
+
+    if (!values.storageAccountName) {
+      errors.storageAccountName = 'You must choose a storage account';
+    }
+
+    return errors;
+  };
+
+  private submit = (values: IManualAnalysisModalFormProps, actions: FormikActions<IManualAnalysisModalFormProps>) => {
+    const { configId, metricsAccountName, storageAccountName } = values;
+    const { application, accounts } = this.props;
+    const executionRequest = transformFormPropsToExecutionRequest(values, accounts);
+
+    startCanaryRun(configId, executionRequest, {
+      application: application.name,
+      metricsAccountName,
+      storageAccountName,
+    })
+      .then(() => {
+        actions.setSubmitting(false);
+        actions.setStatus({ succeeded: true });
+      })
+      .catch((error) => {
+        actions.setSubmitting(false);
+        actions.setStatus({ succeeded: false, error });
+      });
+  };
+
+  public render() {
+    const { dismissModal, title, application, accounts, initialValues } = this.props;
+    const { showAllControlLocations, showAllExperimentLocations } = this.state;
+
+    const canaryConfigs: ICanaryConfigSummary[] = application
+      .getDataSource('canaryConfigs')
+      .data.slice()
+      .sort((a: ICanaryConfigSummary, b: ICanaryConfigSummary) => a.name.localeCompare(b.name));
+    const metricsStores = accounts.filter(({ supportedTypes }) =>
+      supportedTypes.includes(KayentaAccountType.MetricsStore),
+    );
+    const objectStores = accounts.filter(({ supportedTypes }) =>
+      supportedTypes.includes(KayentaAccountType.ObjectStore),
+    );
+    // TODO: support a scope name besides 'default'.
+    const showAdvancedSettings = metricsStores.length > 1 || objectStores.length > 1;
+
+    return (
+      <Formik
+        initialValues={{
+          ...initialValues,
+          metricsAccountName: get(metricsStores[0], 'name', ''),
+          storageAccountName: get(objectStores[0], 'name', ''),
+        }}
+        onSubmit={this.submit}
+        validate={this.validate}
+        isInitialValid={!!initialValues.configId} // if we have a config id initially, everything else should be valid
+        render={({
+          values,
+          touched,
+          isValid,
+          isSubmitting,
+          status,
+          setFieldValue,
+          setFieldTouched,
+          errors,
+        }: FormikProps<IManualAnalysisModalFormProps>) => {
+          if (get(status, 'succeeded') === true) {
+            return (
+              <>
+                <ModalClose dismiss={dismissModal} />
+                <Modal.Header>{<h3>Analysis Started</h3>}</Modal.Header>
+                <Modal.Body>
+                  <p>Analysis started — check the list of reports in a few minutes to view results</p>
+                </Modal.Body>
+                <Modal.Footer className="horizontal right">
+                  <button className="btn btn-primary" onClick={dismissModal} type="button">
+                    Got it
+                  </button>
+                </Modal.Footer>
+              </>
+            );
+          }
+
+          const selectedMetricsStore = metricsStores.find(({ name }) => values.metricsAccountName === name);
+          const selectedObjectStore = objectStores.find(({ name }) => values.storageAccountName === name);
+
+          const recommendedLocations = get(selectedMetricsStore, 'recommendedLocations', []);
+          const { canaryLocation, baselineLocation } = initialValues;
+          const locations = get(selectedMetricsStore, 'locations', []);
+          // Almost every report generated for Atlas uses a simple region for its location. On the backend, Kayenta
+          // performs amazing feats to reconcile the location with an Atlas backend, considering the values of several
+          // extended params. We are not going to reverse engineer that logic here in order to pick a predefined value
+          // from the dropdown: if a location was valid to generate the report, it'll probably be valid when we
+          // regenerate it.
+          if (canaryLocation && !locations.includes(canaryLocation)) {
+            locations.push(canaryLocation);
+          }
+          if (baselineLocation && !locations.includes(baselineLocation)) {
+            locations.push(baselineLocation);
+          }
+
+          const hasLocationChoices = recommendedLocations.length > 0 || locations.length > 0;
+
+          return (
+            <Form className="form-horizontal">
+              <ModalClose dismiss={dismissModal} />
+              <Modal.Header>{title && <h3>{title}</h3>}</Modal.Header>
+              <Modal.Body>
+                <div className="row">
+                  <div className="col-md-12">
+                    <div className="container-fluid form-horizontal">
+                      <h5>Analysis Configuration</h5>
+                      <div className="horizontal-rule" />
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">Config Name</div>
+                        <div className="col-md-7">
+                          <TetheredSelect
+                            value={values.configId}
+                            options={canaryConfigs.map(({ id, name }) => ({ label: name, value: id }))}
+                            onChange={(item: { label: string; value: string }) =>
+                              setFieldValue('configId', (item && item.value) || null)
+                            }
+                          />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          Start Time <HelpField id="pipeline.config.canary.startTimeIso" />
+                        </div>
+                        <div className="col-md-7">
+                          <ValidatedField errors={errors} touched={touched} name="startTime" />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          End Time <HelpField id="pipeline.config.canary.endTimeIso" />
+                        </div>
+                        <div className="col-md-7">
+                          <ValidatedField errors={errors} touched={touched} name="endTime" />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">Step</div>
+                        <div className="col-md-7">
+                          <ValidatedField
+                            errors={errors}
+                            touched={touched}
+                            type="number"
+                            style={{ width: '60px', display: 'inline-block' }}
+                            name="step"
+                          />
+                          <span className="form-control-static"> seconds</span>
+                        </div>
+                      </div>
+                      <h5>Baseline + Canary Pair</h5>
+                      <div className="horizontal-rule" />
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          Baseline <HelpField id="pipeline.config.canary.baselineGroup" />
+                        </div>
+                        <div className="col-md-7">
+                          <ValidatedField name="baselineScope" errors={errors} touched={touched} />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          Baseline Location <HelpField id="pipeline.config.canary.baselineLocation" />
+                        </div>
+                        <div className="col-md-7">
+                          <LocationField
+                            hasLocationChoices={hasLocationChoices}
+                            showAll={showAllControlLocations}
+                            recommendedLocations={recommendedLocations}
+                            locations={locations}
+                            value={values.baselineLocation}
+                            field="baselineLocation"
+                            errors={errors}
+                            touched={touched}
+                            onChange={(location) => {
+                              setFieldTouched('baselineLocation', true);
+                              setFieldValue('baselineLocation', location);
+                            }}
+                            onShowAllChange={(showAll) => this.setState({ showAllControlLocations: showAll })}
+                          />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          Canary <HelpField id="pipeline.config.canary.canaryGroup" />
+                        </div>
+                        <div className="col-md-7">
+                          <ValidatedField errors={errors} touched={touched} name="canaryScope" />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          Canary Location <HelpField id="pipeline.config.canary.canaryLocation" />
+                        </div>
+                        <div className="col-md-7">
+                          <LocationField
+                            hasLocationChoices={hasLocationChoices}
+                            showAll={showAllExperimentLocations}
+                            recommendedLocations={recommendedLocations}
+                            locations={locations}
+                            value={values.canaryLocation}
+                            field="canaryLocation"
+                            errors={errors}
+                            touched={touched}
+                            onChange={(location) => {
+                              setFieldTouched('canaryLocation', true);
+                              setFieldValue('canaryLocation', location);
+                            }}
+                            onShowAllChange={(showAll) => this.setState({ showAllExperimentLocations: showAll })}
+                          />
+                        </div>
+                      </div>
+                      <h5>Metric Scope</h5>
+                      <div className="horizontal-rule" />
+                      {RESOURCE_TYPES.hasOwnProperty(get(selectedMetricsStore, 'type')) && (
+                        <div className="form-group">
+                          <div className="col-md-3 sm-label-right">Resource Type</div>
+                          <div className="col-md-7">
+                            <TetheredSelect
+                              value={values.resourceType}
+                              options={RESOURCE_TYPES[selectedMetricsStore.type as keyof typeof RESOURCE_TYPES]}
+                              onChange={(item: { label: string; value: string }) =>
+                                setFieldValue('resourceType', (item && item.value) || '')
+                              }
+                            />
+                            <ErrorMessage field="resourceType" errors={errors} touched={touched} />
+                          </div>
+                        </div>
+                      )}
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">
+                          Extended Params <HelpField id="pipeline.config.canary.extendedScopeParams" />
+                        </div>
+                        <div className="col-md-7">
+                          <MapEditor
+                            model={values.extendedScopeParams}
+                            onChange={(model) => setFieldValue('extendedScopeParams', model)}
+                            hiddenKeys={['resourceType']}
+                          />
+                        </div>
+                      </div>
+                      <h5>Scoring Thresholds</h5>
+                      <div className="horizontal-rule" />
+                      <CanaryScores
+                        onChange={({ unhealthyScore, successfulScore }) => {
+                          setFieldValue('marginalThreshold', unhealthyScore);
+                          setFieldValue('passThreshold', successfulScore);
+                        }}
+                        successfulHelpFieldId="pipeline.config.canary.passingScore"
+                        successfulLabel="Pass "
+                        successfulScore={values.passThreshold}
+                        unhealthyHelpFieldId="pipeline.config.canary.marginalScore"
+                        unhealthyLabel="Marginal "
+                        unhealthyScore={values.marginalThreshold}
+                      />
+                      {showAdvancedSettings && (
+                        <AdvancedSettings
+                          metricsStores={metricsStores}
+                          selectedMetricsStore={selectedMetricsStore}
+                          objectStores={objectStores}
+                          selectedObjectStore={selectedObjectStore}
+                          onChange={setFieldValue}
+                          errors={errors}
+                          touched={touched}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+                {get(status, 'error') && (
+                  <div className="row">
+                    <div className="col-md-7 col-md-offset-3">
+                      <div className="well-compact alert alert-danger">
+                        <b>There was a problem starting your analysis:</b>
+                        <span>{JSON.stringify(status.error.data)}</span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </Modal.Body>
+              <Modal.Footer className="horizontal right">
+                <button className="btn btn-default" onClick={dismissModal} type="button">
+                  Cancel
+                </button>
+                <SubmitFormButton isValid={isValid} isSubmitting={isSubmitting} errors={errors} />
+              </Modal.Footer>
+            </Form>
+          );
+        }}
+      />
+    );
+  }
+}
+
+const SubmitFormButton = ({
+  errors,
+  isValid,
+  isSubmitting,
+}: {
+  errors: FormikErrors<any>;
+  isValid: boolean;
+  isSubmitting: boolean;
+}) => {
+  const button = (
+    <SubmitButton isDisabled={!isValid} submitting={isSubmitting} isFormSubmit={true} label="Start analysis" />
+  );
+  const errorMessages = Object.values(errors).map((error: string, i) => <li key={i}>{error}</li>);
+  if (isValid || !errorMessages.length) {
+    return button;
+  }
+
+  const popoverComponent = () => (
+    <div>
+      The following errors must be corrected before submitting:<ul>{errorMessages}</ul>
+    </div>
+  );
+  return (
+    <div className="sp-margin-s-left">
+      <HoverablePopover Component={popoverComponent}>{button}</HoverablePopover>
+    </div>
+  );
+};
+
+const combineLocations = (includeAll: boolean, recommendedLocations: string[], locations: string[]) => {
+  if (includeAll) {
+    return [...new Set(recommendedLocations.concat(locations))];
+  }
+
+  return recommendedLocations.length > 0 ? recommendedLocations : locations;
+};
+
+interface ILocationFieldProps {
+  hasLocationChoices: boolean;
+  showAll: boolean;
+  recommendedLocations: string[];
+  locations: string[];
+  value: string;
+  onChange: (location: string) => any;
+  onShowAllChange: (showAll: boolean) => any;
+  errors: FormikErrors<IManualAnalysisModalFormProps>;
+  touched: FormikTouched<IManualAnalysisModalFormProps>;
+  field: keyof IManualAnalysisModalFormProps;
+}
+
+const LocationField = ({
+  hasLocationChoices,
+  showAll,
+  recommendedLocations,
+  locations,
+  value,
+  onChange,
+  onShowAllChange,
+  errors,
+  touched,
+  field,
+}: ILocationFieldProps) => {
+  if (!hasLocationChoices) {
+    return <ValidatedField name={field} errors={errors} touched={touched} />;
+  }
+  const combinedLocations = combineLocations(showAll, recommendedLocations, locations).sort();
+  const options = combinedLocations.map((location) => ({ label: location, value: location }));
+
+  return (
+    <>
+      <TetheredSelect
+        clearable={false}
+        value={value}
+        options={options}
+        onChange={(item: { label: string; value: string }) => onChange((item && item.value) || '')}
+      />
+      <ErrorMessage field={field} errors={errors} touched={touched} />
+      {recommendedLocations.length > 0 && locations.length > 0 && (
+        <div className="pull-right">
+          <button
+            type="button"
+            className="link"
+            onClick={() => {
+              onShowAllChange(!showAll);
+              if (!combineLocations(!showAll, recommendedLocations, locations).includes(value)) {
+                onChange('');
+              }
+            }}
+          >
+            {showAll ? 'Only show recommended locations' : 'Show all locations'}
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+interface IAdvancedSettingsProps {
+  metricsStores: IKayentaAccount[];
+  objectStores: IKayentaAccount[];
+  selectedMetricsStore: IKayentaAccount;
+  selectedObjectStore: IKayentaAccount;
+  onChange: (field: 'metricsAccountName' | 'storageAccountName', value: string) => any;
+  errors: FormikErrors<IManualAnalysisModalFormProps>;
+  touched: FormikTouched<IManualAnalysisModalFormProps>;
+}
+
+const AdvancedSettings = ({
+  metricsStores,
+  selectedMetricsStore,
+  objectStores,
+  selectedObjectStore,
+  onChange,
+  errors,
+  touched,
+}: IAdvancedSettingsProps) => {
+  return (
+    <>
+      <h5>Advanced Settings</h5>
+      <div className="horizontal-rule" />
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">
+          Metrics Account <HelpField id="pipeline.config.metricsAccount" />
+        </div>
+        <div className="col-md-7">
+          <TetheredSelect
+            clearable={false}
+            value={get(selectedMetricsStore, 'name')}
+            options={metricsStores.map(({ name }) => ({ label: name, value: name }))}
+            onChange={(item: { label: string; value: string }) =>
+              onChange('metricsAccountName', (item && item.value) || '')
+            }
+          />
+          <ErrorMessage field="metricsAccountName" errors={errors} touched={touched} />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">
+          Storage Account <HelpField id="pipeline.config.storageAccount" />
+        </div>
+        <div className="col-md-7">
+          <TetheredSelect
+            clearable={false}
+            value={get(selectedObjectStore, 'name')}
+            options={objectStores.map(({ name }) => ({ label: name, value: name }))}
+            onChange={(item: { label: string; value: string }) =>
+              onChange('storageAccountName', (item && item.value) || '')
+            }
+          />
+          <ErrorMessage field="storageAccountName" errors={errors} touched={touched} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+interface IErrorMessageProps {
+  field: keyof IManualAnalysisModalFormProps;
+  errors: FormikErrors<IManualAnalysisModalFormProps>;
+  touched: FormikTouched<IManualAnalysisModalFormProps>;
+}
+
+const ErrorMessage = ({ field, errors, touched }: IErrorMessageProps) => {
+  if (!touched[field] || !errors[field]) {
+    return null;
+  }
+  return <div className="error-message">{errors[field]}</div>;
+};
+
+export interface IValidatedFieldProps {
+  errors: FormikErrors<IManualAnalysisModalFormProps>;
+  touched: FormikTouched<IManualAnalysisModalFormProps>;
+  name: keyof IManualAnalysisModalFormProps;
+  [field: string]: any;
+}
+
+const ValidatedField = (props: IValidatedFieldProps) => {
+  const { errors, name, touched } = props;
+  return (
+    <>
+      <Field {...props} className="form-control input-sm" required={touched[name]} error={errors[name]} />
+      <ErrorMessage field={name} errors={errors} touched={touched} />
+    </>
+  );
+};