Skip to content

Commit

Permalink
Show error icon and red text at input and stream levels
Browse files Browse the repository at this point in the history
  • Loading branch information
@jen-huang
jen-huang committed Mar 24, 2020
1 parent 632a5ae commit d647499
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 34 deletions.
51 changes: 38 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,23 +6,24 @@
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, DatasourceInputValidationResults } 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;
inputVarsValidationResults: DatasourceInputValidationResults;
inputVarsValidationResults: DatasourceConfigValidationResults;
forceShowErrors?: boolean;
}> = ({
packageInputVars,
Expand All @@ -34,6 +35,9 @@ export const DatasourceInputConfig: React.FunctionComponent<{
// 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 @@ -48,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 @@ -68,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 Down Expand Up @@ -144,6 +169,6 @@ export const DatasourceInputConfig: React.FunctionComponent<{
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGrid>
</EuiFlexGroup>
);
};
37 changes: 32 additions & 5 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,9 +17,10 @@ import {
EuiButtonIcon,
EuiHorizontalRule,
EuiSpacer,
EuiIconTip,
} from '@elastic/eui';
import { DatasourceInput, DatasourceInputStream, RegistryInput } from '../../../../types';
import { DatasourceInputValidationResults } from '../services';
import { DatasourceInputValidationResults, validationHasErrors } from '../services';
import { DatasourceInputConfig } from './datasource_input_config';
import { DatasourceInputStreamConfig } from './datasource_input_stream_config';

Expand All @@ -45,16 +46,42 @@ export const DatasourceInputPanel: React.FunctionComponent<{
// 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 @@ -131,7 +158,7 @@ export const DatasourceInputPanel: React.FunctionComponent<{
packageInputVars={packageInput.vars}
datasourceInput={datasourceInput}
updateDatasourceInput={updateDatasourceInput}
inputVarsValidationResults={inputValidationResults}
inputVarsValidationResults={{ config: inputValidationResults.config }}
forceShowErrors={forceShowErrors}
/>
<EuiHorizontalRule margin="m" />
Expand Down
41 changes: 34 additions & 7 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,16 +7,17 @@ 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, DatasourceConfigValidationResults } from '../services';
import { isAdvancedVar, DatasourceConfigValidationResults, validationHasErrors } from '../services';
import { DatasourceInputVarField } from './datasource_input_var_field';

export const DatasourceInputStreamConfig: React.FunctionComponent<{
Expand All @@ -35,6 +36,9 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
// 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 @@ -49,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 @@ -70,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 Down Expand Up @@ -146,6 +173,6 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
) : null}
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGrid>
</EuiFlexGroup>
);
};
2 changes: 1 addition & 1 deletion ...gest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export const validationHasErrors = (
validationResults:
| DatasourceValidationResults
| DatasourceInputValidationResults
| ValidationEntry
| DatasourceConfigValidationResults
) => {
const flattenedValidation = getFlattenedObject(validationResults);
return !!Object.entries(flattenedValidation).find(([, value]) => !!value);
Expand Down
16 changes: 8 additions & 8 deletions ...ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiSteps,
EuiPanel,
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
Expand Down Expand Up @@ -99,8 +98,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
// Step A, define datasource
const renderDefineDatasource = () => (
<EuiPanel>
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={1}>
<DatasourceInputVarField
varDef={{
name: 'name',
Expand All @@ -123,7 +122,7 @@ export const StepConfigureDatasource: React.FunctionComponent<{
forceShowErrors={submitAttempted}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem grow={1}>
<DatasourceInputVarField
varDef={{
name: 'description',
Expand All @@ -146,7 +145,7 @@ export const StepConfigureDatasource: React.FunctionComponent<{
forceShowErrors={submitAttempted}
/>
</EuiFlexItem>
</EuiFlexGrid>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiButtonEmpty
flush="left"
Expand All @@ -163,8 +162,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
{isShowingAdvancedDefine ? (
<Fragment>
<EuiSpacer size="m" />
<EuiFlexGrid columns={2}>
<EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem grow={1}>
<EuiFormRow
label={
<FormattedMessage
Expand All @@ -190,7 +189,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
/>
</EuiFormRow>
</EuiFlexItem>
</EuiFlexGrid>
<EuiFlexItem grow={1} />
</EuiFlexGroup>
</Fragment>
) : null}
</EuiPanel>
Expand Down

0 comments on commit d647499

Please sign in to comment.