Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Ingest] Data source configuration validation UI #61180

Merged
merged 6 commits into from
Apr 8, 2020
Merged

[Ingest] Data source configuration validation UI #61180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
632a5ae
Initial pass at datasource configuration validation
jen-huang Mar 24, 2020
d647499
Show error icon and red text at input and stream levels
jen-huang Mar 24, 2020
4530a39
Merge remote-tracking branch 'upstream/master' into ingest/ds-validation
jen-huang Mar 24, 2020
01ebec4
Add tests, fix bugs in validation method
jen-huang Mar 25, 2020
17a7449
Merge remote-tracking branch 'upstream/master' into ingest/ds-validation
jen-huang Apr 8, 2020
dd7b9fd
Fix typings
jen-huang Apr 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 50 additions & 13 deletions ...nager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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