From d64749978d82314c9ca1c9e3acea0f866ab48961 Mon Sep 17 00:00:00 2001
From: Jen Huang
Date: Tue, 24 Mar 2020 14:30:43 -0700
Subject: [PATCH] Show error icon and red text at input and stream levels
---
.../components/datasource_input_config.tsx | 51 ++++++++++++++-----
.../components/datasource_input_panel.tsx | 37 ++++++++++++--
.../datasource_input_stream_config.tsx | 41 ++++++++++++---
.../services/validate_datasource.ts | 2 +-
.../step_configure_datasource.tsx | 16 +++---
5 files changed, 113 insertions(+), 34 deletions(-)
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
index 7694c35c35ad8..0e8763cb2d4c0 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_config.tsx
@@ -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) => void;
- inputVarsValidationResults: DatasourceInputValidationResults;
+ inputVarsValidationResults: DatasourceConfigValidationResults;
forceShowErrors?: boolean;
}> = ({
packageInputVars,
@@ -34,6 +35,9 @@ export const DatasourceInputConfig: React.FunctionComponent<{
// Showing advanced options toggle state
const [isShowingAdvanced, setIsShowingAdvanced] = useState(false);
+ // Errors state
+ const hasErrors = forceShowErrors && validationHasErrors(inputVarsValidationResults);
+
const requiredVars: RegistryVarsEntry[] = [];
const advancedVars: RegistryVarsEntry[] = [];
@@ -48,15 +52,36 @@ export const DatasourceInputConfig: React.FunctionComponent<{
}
return (
-
-
+
+
-
-
-
+
+
+
+
+
+
+
+
+ {hasErrors ? (
+
+
+ }
+ position="right"
+ type="alert"
+ iconProps={{ color: 'danger' }}
+ />
+
+ ) : null}
+
@@ -68,7 +93,7 @@ export const DatasourceInputConfig: React.FunctionComponent<{
-
+
{requiredVars.map(varDef => {
const { name: varName, type: varType } = varDef;
@@ -144,6 +169,6 @@ export const DatasourceInputConfig: React.FunctionComponent<{
) : null}
-
+
);
};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
index a60ee4b9f6253..6b0c68ccb7d3f 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_panel.tsx
@@ -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';
@@ -45,6 +46,9 @@ export const DatasourceInputPanel: React.FunctionComponent<{
// Showing streams toggle state
const [isShowingStreams, setIsShowingStreams] = useState(false);
+ // Errors state
+ const hasErrors = forceShowErrors && validationHasErrors(inputValidationResults);
+
return (
{/* Header / input-level toggle */}
@@ -52,9 +56,32 @@ export const DatasourceInputPanel: React.FunctionComponent<{
- {packageInput.title || packageInput.type}
-
+
+
+
+
+
+ {packageInput.title || packageInput.type}
+
+
+
+
+ {hasErrors ? (
+
+
+ }
+ position="right"
+ type="alert"
+ iconProps={{ color: 'danger' }}
+ />
+
+ ) : null}
+
}
checked={datasourceInput.enabled}
onChange={e => {
@@ -131,7 +158,7 @@ export const DatasourceInputPanel: React.FunctionComponent<{
packageInputVars={packageInput.vars}
datasourceInput={datasourceInput}
updateDatasourceInput={updateDatasourceInput}
- inputVarsValidationResults={inputValidationResults}
+ inputVarsValidationResults={{ config: inputValidationResults.config }}
forceShowErrors={forceShowErrors}
/>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
index 64829c6d08cd4..43e8f5a2c060d 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/components/datasource_input_stream_config.tsx
@@ -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<{
@@ -35,6 +36,9 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
// Showing advanced options toggle state
const [isShowingAdvanced, setIsShowingAdvanced] = useState(false);
+ // Errors state
+ const hasErrors = forceShowErrors && validationHasErrors(inputStreamValidationResults);
+
const requiredVars: RegistryVarsEntry[] = [];
const advancedVars: RegistryVarsEntry[] = [];
@@ -49,10 +53,33 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
}
return (
-
-
+
+
+
+
+ {packageInputStream.title || packageInputStream.dataset}
+
+
+ {hasErrors ? (
+
+
+ }
+ position="right"
+ type="alert"
+ iconProps={{ color: 'danger' }}
+ />
+
+ ) : null}
+
+ }
checked={datasourceInputStream.enabled}
onChange={e => {
const enabled = e.target.checked;
@@ -70,7 +97,7 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
) : null}
-
+
{requiredVars.map(varDef => {
const { name: varName, type: varType } = varDef;
@@ -146,6 +173,6 @@ export const DatasourceInputStreamConfig: React.FunctionComponent<{
) : null}
-
+
);
};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
index 3867ace9a0620..30df27f794db6 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/services/validate_datasource.ts
@@ -204,7 +204,7 @@ export const validationHasErrors = (
validationResults:
| DatasourceValidationResults
| DatasourceInputValidationResults
- | ValidationEntry
+ | DatasourceConfigValidationResults
) => {
const flattenedValidation = getFlattenedObject(validationResults);
return !!Object.entries(flattenedValidation).find(([, value]) => !!value);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
index 95c78e2ee2609..aa3bfde9aefd7 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/create_datasource_page/step_configure_datasource.tsx
@@ -9,7 +9,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiSteps,
EuiPanel,
- EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
@@ -99,8 +98,8 @@ export const StepConfigureDatasource: React.FunctionComponent<{
// Step A, define datasource
const renderDefineDatasource = () => (
-
-
+
+
-
+
-
+
-
-
+
+
-
+
+
) : null}