display warning state when status check has no data (#22178) (#22321)

* display warning state when status check has no data

* render status check step in markdown
This commit is contained in:
Nathan Reese 2018-08-24 08:07:38 -06:00 committed by GitHub
parent fdf5aac3ec
commit 711671c0b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 46 deletions

View file

@ -169,13 +169,9 @@ exports[`statusCheckState checking status 1`] = `
component="div"
grow={true}
>
<EuiText
grow={true}
>
<p>
custom status check description
</p>
</EuiText>
<Content
text="custom status check description"
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -296,13 +292,9 @@ exports[`statusCheckState failed status check - error 1`] = `
component="div"
grow={true}
>
<EuiText
grow={true}
>
<p>
custom status check description
</p>
</EuiText>
<Content
text="custom status check description"
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -330,7 +322,7 @@ exports[`statusCheckState failed status check - error 1`] = `
/>
</UNDEFINED>,
"key": "checkStatusStep",
"status": "complete",
"status": "danger",
"title": "custom title",
},
]
@ -428,13 +420,9 @@ exports[`statusCheckState failed status check - no data 1`] = `
component="div"
grow={true}
>
<EuiText
grow={true}
>
<p>
custom status check description
</p>
</EuiText>
<Content
text="custom status check description"
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -462,7 +450,7 @@ exports[`statusCheckState failed status check - no data 1`] = `
/>
</UNDEFINED>,
"key": "checkStatusStep",
"status": "complete",
"status": "warning",
"title": "custom title",
},
]
@ -560,13 +548,9 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
component="div"
grow={true}
>
<EuiText
grow={true}
>
<p>
custom status check description
</p>
</EuiText>
<Content
text="custom status check description"
/>
</EuiFlexItem>
<EuiFlexItem
component="div"
@ -687,13 +671,9 @@ exports[`statusCheckState successful status check 1`] = `
component="div"
grow={true}
>
<EuiText
grow={true}
>
<p>
custom status check description
</p>
</EuiText>
<Content
text="custom status check description"
/>
</EuiFlexItem>
<EuiFlexItem
component="div"

View file

@ -26,6 +26,7 @@ import {
} from '@kbn/ui-framework/components';
import { Instruction } from './instruction';
import { ParameterForm } from './parameter_form';
import { Content } from './content';
import { getDisplayText } from '../../../../common/tutorials/instruction_variant';
import {
EuiTabs,
@ -34,7 +35,6 @@ import {
EuiSteps,
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiButton,
EuiCallOut,
} from '@elastic/eui';
@ -110,17 +110,32 @@ export class InstructionSet extends React.Component {
);
}
getStepStatus(statusCheckState) {
switch (statusCheckState) {
case undefined:
case StatusCheckStates.NOT_CHECKED:
case StatusCheckStates.FETCHING:
return 'incomplete';
case StatusCheckStates.HAS_DATA:
return 'complete';
case StatusCheckStates.NO_DATA:
return 'warning';
case StatusCheckStates.ERROR:
return 'danger';
default:
throw new Error(`Unexpected status check state ${statusCheckState}`);
}
}
renderStatusCheck() {
const { statusCheckState, statusCheckConfig, onStatusCheck } = this.props;
const checkStatusStep = (
<Fragment>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiText>
<p>
{statusCheckConfig.text}
</p>
</EuiText>
<Content
text={statusCheckConfig.text}
/>
</EuiFlexItem>
<EuiFlexItem
@ -141,11 +156,9 @@ export class InstructionSet extends React.Component {
</Fragment>
);
const stepStatus = statusCheckState === StatusCheckStates.NOT_CHECKED ||
statusCheckState === StatusCheckStates.FETCHING ? 'incomplete' : 'complete';
return {
title: statusCheckConfig.title || 'Status Check',
status: stepStatus,
status: this.getStepStatus(statusCheckState),
children: checkStatusStep,
key: 'checkStatusStep'
};