Skip to content

Commit

Permalink
[Ingest] Data source configuration validation UI (elastic#61180)
Browse files Browse the repository at this point in the history 
* Initial pass at datasource configuration validation

* Show error icon and red text at input and stream levels

* Add tests, fix bugs in validation method

* Fix typings
  • Loading branch information
@jen-huang
jen-huang committed Apr 8, 2020
1 parent 2cadd34 commit 3ecc632
Show file tree
Hide file tree
Showing 12 changed files with 1,038 additions and 92 deletions.
63 changes: 50 additions & 13 deletions ...nager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,38 @@
import React, { useState, Fragment } from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiTextColor,
EuiSpacer,
EuiButtonEmpty,
EuiTitle,
EuiIconTip,
} from '@elastic/eui';
import { DatasourceInput, RegistryVarsEntry } from '../../../../types';
import { isAdvancedVar } from '../services';
import { isAdvancedVar, DatasourceConfigValidationResults, validationHasErrors } 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: DatasourceConfigValidationResults;
forceShowErrors?: boolean;
}> = ({
packageInputVars,
datasourceInput,
updateDatasourceInput,
inputVarsValidationResults,
forceShowErrors,
}) => {
// Showing advanced options toggle state
const [isShowingAdvanced, setIsShowingAdvanced] = useState<boolean>(false);

// Errors state
const hasErrors = forceShowErrors && validationHasErrors(inputVarsValidationResults);

const requiredVars: RegistryVarsEntry[] = [];
const advancedVars: RegistryVarsEntry[] = [];

Expand All @@ -40,15 +52,36 @@ export const DatasourceInputConfig: React.FunctionComponent<{
}

return (
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart">
<EuiFlexItem grow={1}>
<EuiTitle size="s">
<h4>
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.inputSettingsTitle"
defaultMessage="Settings"
/>
</h4>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<h4>
<EuiTextColor color={hasErrors ? 'danger' : 'default'}>
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.inputSettingsTitle"
defaultMessage="Settings"
/>
</EuiTextColor>
</h4>
</EuiFlexItem>
{hasErrors ? (
<EuiFlexItem grow={false}>
<EuiIconTip
content={
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.inputConfigErrorsTooltip"
defaultMessage="Fix configuration errors"
/>
}
position="right"
type="alert"
iconProps={{ color: 'danger' }}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</EuiTitle>
<EuiSpacer size="m" />
<EuiText color="subdued" size="s">
Expand All @@ -60,7 +93,7 @@ export const DatasourceInputConfig: React.FunctionComponent<{
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={1}>
<EuiFlexGroup direction="column" gutterSize="m">
{requiredVars.map(varDef => {
const { name: varName, type: varType } = varDef;
Expand All @@ -81,6 +114,8 @@ export const DatasourceInputConfig: React.FunctionComponent<{
},
});
}}
errors={inputVarsValidationResults.config![varName]}
forceShowErrors={forceShowErrors}
/>
</EuiFlexItem>
);
Expand Down Expand Up @@ -123,6 +158,8 @@ export const DatasourceInputConfig: React.FunctionComponent<{
},
});
}}
errors={inputVarsValidationResults.config![varName]}
forceShowErrors={forceShowErrors}
/>
</EuiFlexItem>
);
Expand All @@ -132,6 +169,6 @@ export const DatasourceInputConfig: React.FunctionComponent<{
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGrid>
</EuiFlexGroup>
);
};
50 changes: 46 additions & 4 deletions ...anager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@ import {
EuiButtonIcon,
EuiHorizontalRule,
EuiSpacer,
EuiIconTip,
} from '@elastic/eui';
import { DatasourceInput, DatasourceInputStream, RegistryInput } from '../../../../types';
import { DatasourceInputValidationResults, validationHasErrors } from '../services';
import { DatasourceInputConfig } from './datasource_input_config';
import { DatasourceInputStreamConfig } from './datasource_input_stream_config';

Expand All @@ -32,20 +34,54 @@ 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);

// Errors state
const hasErrors = forceShowErrors && validationHasErrors(inputValidationResults);

return (
<EuiPanel>
{/* Header / input-level toggle */}
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem grow={false}>
<EuiSwitch
label={
<EuiText>
<h4>{packageInput.title || packageInput.type}</h4>
</EuiText>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiText>
<h4>
<EuiTextColor color={hasErrors ? 'danger' : 'default'}>
{packageInput.title || packageInput.type}
</EuiTextColor>
</h4>
</EuiText>
</EuiFlexItem>
{hasErrors ? (
<EuiFlexItem grow={false}>
<EuiIconTip
content={
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.inputLevelErrorsTooltip"
defaultMessage="Fix configuration errors"
/>
}
position="right"
type="alert"
iconProps={{ color: 'danger' }}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
}
checked={datasourceInput.enabled}
onChange={e => {
Expand Down Expand Up @@ -122,6 +158,8 @@ export const DatasourceInputPanel: React.FunctionComponent<{
packageInputVars={packageInput.vars}
datasourceInput={datasourceInput}
updateDatasourceInput={updateDatasourceInput}
inputVarsValidationResults={{ config: inputValidationResults.config }}
forceShowErrors={forceShowErrors}
/>
<EuiHorizontalRule margin="m" />
</Fragment>
Expand Down Expand Up @@ -165,6 +203,10 @@ export const DatasourceInputPanel: React.FunctionComponent<{

updateDatasourceInput(updatedInput);
}}
inputStreamValidationResults={
inputValidationResults.streams![datasourceInputStream.id]
}
forceShowErrors={forceShowErrors}
/>
<EuiSpacer size="m" />
<EuiHorizontalRule margin="none" />
Expand Down
55 changes: 47 additions & 8 deletions ...ections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,38 @@ import React, { useState, Fragment } from 'react';
import ReactMarkdown from 'react-markdown';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiSwitch,
EuiText,
EuiSpacer,
EuiButtonEmpty,
EuiTextColor,
EuiIconTip,
} from '@elastic/eui';
import { DatasourceInputStream, RegistryStream, RegistryVarsEntry } from '../../../../types';
import { isAdvancedVar } from '../services';
import { isAdvancedVar, DatasourceConfigValidationResults, validationHasErrors } 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);

// Errors state
const hasErrors = forceShowErrors && validationHasErrors(inputStreamValidationResults);

const requiredVars: RegistryVarsEntry[] = [];
const advancedVars: RegistryVarsEntry[] = [];

Expand All @@ -41,10 +53,33 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
}

return (
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={1}>
<EuiSwitch
label={packageInputStream.title || packageInputStream.dataset}
label={
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiTextColor color={hasErrors ? 'danger' : 'default'}>
{packageInputStream.title || packageInputStream.dataset}
</EuiTextColor>
</EuiFlexItem>
{hasErrors ? (
<EuiFlexItem grow={false}>
<EuiIconTip
content={
<FormattedMessage
id="xpack.ingestManager.createDatasource.stepConfigure.streamLevelErrorsTooltip"
defaultMessage="Fix configuration errors"
/>
}
position="right"
type="alert"
iconProps={{ color: 'danger' }}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
}
checked={datasourceInputStream.enabled}
onChange={e => {
const enabled = e.target.checked;
Expand All @@ -62,7 +97,7 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
</Fragment>
) : null}
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={1}>
<EuiFlexGroup direction="column" gutterSize="m">
{requiredVars.map(varDef => {
const { name: varName, type: varType } = varDef;
Expand All @@ -83,6 +118,8 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
},
});
}}
errors={inputStreamValidationResults.config![varName]}
forceShowErrors={forceShowErrors}
/>
</EuiFlexItem>
);
Expand Down Expand Up @@ -125,6 +162,8 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
},
});
}}
errors={inputStreamValidationResults.config![varName]}
forceShowErrors={forceShowErrors}
/>
</EuiFlexItem>
);
Expand All @@ -134,6 +173,6 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGrid>
</EuiFlexGroup>
);
};
Loading

0 comments on commit 3ecc632

Please sign in to comment.