Initial pass at datasource configuration validation

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx

@@ -15,14 +15,22 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { DatasourceInput, RegistryVarsEntry } from '../../../../types';
-import { isAdvancedVar } from '../services';
+import { isAdvancedVar, DatasourceInputValidationResults } from '../services';
 import { DatasourceInputVarField } from './datasource_input_var_field';
 
 export const DatasourceInputConfig: React.FunctionComponent<{
   packageInputVars?: RegistryVarsEntry[];
   datasourceInput: DatasourceInput;
   updateDatasourceInput: (updatedInput: Partial<DatasourceInput>) => void;
-}> = ({ packageInputVars, datasourceInput, updateDatasourceInput }) => {
+  inputVarsValidationResults: DatasourceInputValidationResults;
+  forceShowErrors?: boolean;
+}> = ({
+  packageInputVars,
+  datasourceInput,
+  updateDatasourceInput,
+  inputVarsValidationResults,
+  forceShowErrors,
+}) => {
   // Showing advanced options toggle state
   const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);
 
@@ -81,6 +89,8 @@ export const DatasourceInputConfig: React.FunctionComponent<{
                       },
                     });
                   }}
+                  errors={inputVarsValidationResults.config![varName]}
+                  forceShowErrors={forceShowErrors}
                 />
               </EuiFlexItem>
             );
@@ -123,6 +133,8 @@ export const DatasourceInputConfig: React.FunctionComponent<{
                               },
                             });
                           }}
+                          errors={inputVarsValidationResults.config![varName]}
+                          forceShowErrors={forceShowErrors}
                         />
                       </EuiFlexItem>
                     );

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx

@@ -19,6 +19,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { DatasourceInput, DatasourceInputStream, RegistryInput } from '../../../../types';
+import { DatasourceInputValidationResults } from '../services';
 import { DatasourceInputConfig } from './datasource_input_config';
 import { DatasourceInputStreamConfig } from './datasource_input_stream_config';
 
@@ -32,7 +33,15 @@ export const DatasourceInputPanel: React.FunctionComponent<{
   packageInput: RegistryInput;
   datasourceInput: DatasourceInput;
   updateDatasourceInput: (updatedInput: Partial<DatasourceInput>) => void;
-}> = ({ packageInput, datasourceInput, updateDatasourceInput }) => {
+  inputValidationResults: DatasourceInputValidationResults;
+  forceShowErrors?: boolean;
+}> = ({
+  packageInput,
+  datasourceInput,
+  updateDatasourceInput,
+  inputValidationResults,
+  forceShowErrors,
+}) => {
   // Showing streams toggle state
   const [isShowingStreams, setIsShowingStreams] = useState<boolean>(false);
 
@@ -122,6 +131,8 @@ export const DatasourceInputPanel: React.FunctionComponent<{
             packageInputVars={packageInput.vars}
             datasourceInput={datasourceInput}
             updateDatasourceInput={updateDatasourceInput}
+            inputVarsValidationResults={inputValidationResults}
+            forceShowErrors={forceShowErrors}
           />
           <EuiHorizontalRule margin="m" />
         </Fragment>
@@ -165,6 +176,10 @@ export const DatasourceInputPanel: React.FunctionComponent<{
 
                     updateDatasourceInput(updatedInput);
                   }}
+                  inputStreamValidationResults={
+                    inputValidationResults.streams![datasourceInputStream.id]
+                  }
+                  forceShowErrors={forceShowErrors}
                 />
                 <EuiSpacer size="m" />
                 <EuiHorizontalRule margin="none" />

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx

@@ -16,14 +16,22 @@ import {
   EuiButtonEmpty,
 } from '@elastic/eui';
 import { DatasourceInputStream, RegistryStream, RegistryVarsEntry } from '../../../../types';
-import { isAdvancedVar } from '../services';
+import { isAdvancedVar, DatasourceConfigValidationResults } from '../services';
 import { DatasourceInputVarField } from './datasource_input_var_field';
 
 export const DatasourceInputStreamConfig: React.FunctionComponent<{
   packageInputStream: RegistryStream;
   datasourceInputStream: DatasourceInputStream;
   updateDatasourceInputStream: (updatedStream: Partial<DatasourceInputStream>) => void;
-}> = ({ packageInputStream, datasourceInputStream, updateDatasourceInputStream }) => {
+  inputStreamValidationResults: DatasourceConfigValidationResults;
+  forceShowErrors?: boolean;
+}> = ({
+  packageInputStream,
+  datasourceInputStream,
+  updateDatasourceInputStream,
+  inputStreamValidationResults,
+  forceShowErrors,
+}) => {
   // Showing advanced options toggle state
   const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);
 
@@ -83,6 +91,8 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
                       },
                     });
                   }}
+                  errors={inputStreamValidationResults.config![varName]}
+                  forceShowErrors={forceShowErrors}
                 />
               </EuiFlexItem>
             );
@@ -125,6 +135,8 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
                               },
                             });
                           }}
+                          errors={inputStreamValidationResults.config![varName]}
+                          forceShowErrors={forceShowErrors}
                         />
                       </EuiFlexItem>
                     );

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_var_field.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFormRow, EuiFieldText, EuiComboBox, EuiText, EuiCodeEditor } from '@elastic/eui';
@@ -16,23 +16,32 @@ export const DatasourceInputVarField: React.FunctionComponent<{
   varDef: RegistryVarsEntry;
   value: any;
   onChange: (newValue: any) => void;
-}> = ({ varDef, value, onChange }) => {
+  errors?: string[] | null;
+  forceShowErrors?: boolean;
+}> = ({ varDef, value, onChange, errors: varErrors, forceShowErrors }) => {
+  const [isDirty, setIsDirty] = useState<boolean>(false);
+  const { multi, required, type, title, name, description } = varDef;
+  const isInvalid = (isDirty || forceShowErrors) && !!varErrors;
+  const errors = isInvalid ? varErrors : null;
+
   const renderField = () => {
-    if (varDef.multi) {
+    if (multi) {
       return (
         <EuiComboBox
           noSuggestions
+          isInvalid={isInvalid}
           selectedOptions={value.map((val: string) => ({ label: val }))}
           onCreateOption={(newVal: any) => {
             onChange([...value, newVal]);
           }}
           onChange={(newVals: any[]) => {
             onChange(newVals.map(val => val.label));
           }}
+          onBlur={() => setIsDirty(true)}
         />
       );
     }
-    if (varDef.type === 'yaml') {
+    if (type === 'yaml') {
       return (
         <EuiCodeEditor
           width="100%"
@@ -46,22 +55,27 @@ export const DatasourceInputVarField: React.FunctionComponent<{
           }}
           value={value}
           onChange={newVal => onChange(newVal)}
+          onBlur={() => setIsDirty(true)}
         />
       );
     }
     return (
       <EuiFieldText
+        isInvalid={isInvalid}
         value={value === undefined ? '' : value}
         onChange={e => onChange(e.target.value)}
+        onBlur={() => setIsDirty(true)}
       />
     );
   };
 
   return (
     <EuiFormRow
-      label={varDef.title || varDef.name}
+      isInvalid={isInvalid}
+      error={errors}
+      label={title || name}
       labelAppend={
-        !varDef.required ? (
+        !required ? (
           <EuiText size="xs" color="subdued">
             <FormattedMessage
               id="xpack.ingestManager.createDatasource.stepConfigure.inputVarFieldOptionalLabel"
@@ -70,7 +84,7 @@ export const DatasourceInputVarField: React.FunctionComponent<{
           </EuiText>
         ) : null
       }
-      helpText={<ReactMarkdown source={varDef.description} />}
+      helpText={<ReactMarkdown source={description} />}
     >
       {renderField()}
     </EuiFormRow>

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/index.ts

@@ -5,3 +5,4 @@
  */
 export { CreateDatasourcePageLayout } from './layout';
 export { DatasourceInputPanel } from './datasource_input_panel';
+export { DatasourceInputVarField } from './datasource_input_var_field';

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/index.tsx

@@ -21,6 +21,7 @@ import { useLinks as useEPMLinks } from '../../epm/hooks';
 import { CreateDatasourcePageLayout } from './components';
 import { CreateDatasourceFrom, CreateDatasourceStep } from './types';
 import { CREATE_DATASOURCE_STEP_PATHS } from './constants';
+import { DatasourceValidationResults, validateDatasource } from './services';
 import { StepSelectPackage } from './step_select_package';
 import { StepSelectConfig } from './step_select_config';
 import { StepConfigureDatasource } from './step_configure_datasource';
@@ -51,6 +52,9 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
     inputs: [],
   });
 
+  // Datasource validation state
+  const [validationResults, setValidationResults] = useState<DatasourceValidationResults>();
+
   // Update package info method
   const updatePackageInfo = (updatedPackageInfo: PackageInfo | undefined) => {
     if (updatedPackageInfo) {
@@ -84,9 +88,18 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
       ...updatedFields,
     };
     setDatasource(newDatasource);
-
     // eslint-disable-next-line no-console
     console.debug('Datasource updated', newDatasource);
+    updateDatasourceValidation(newDatasource);
+  };
+
+  const updateDatasourceValidation = (newDatasource?: NewDatasource) => {
+    if (packageInfo) {
+      const newValidationResult = validateDatasource(newDatasource || datasource, packageInfo);
+      setValidationResults(newValidationResult);
+      // eslint-disable-next-line no-console
+      console.debug('Datasource validation results', newValidationResult);
+    }
   };
 
   // Cancel url
@@ -202,6 +215,7 @@ export const CreateDatasourcePage: React.FunctionComponent = () => {
                 packageInfo={packageInfo}
                 datasource={datasource}
                 updateDatasource={updateDatasource}
+                validationResults={validationResults!}
                 backLink={
                   <EuiButtonEmpty href={firstStepUrl} iconType="arrowLeft" iconSide="left">
                     {from === 'config' ? (

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/index.ts

@@ -4,3 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { isAdvancedVar } from './is_advanced_var';
+export {
+  DatasourceValidationResults,
+  DatasourceConfigValidationResults,
+  DatasourceInputValidationResults,
+  validateDatasource,
+  validationHasErrors,
+} from './validate_datasource';