display warning state when status check has no data (elastic#22178) (e…

…lastic#22321) * display warning state when status check has no data * render status check step in markdown
nreese · Aug 24, 2018 · 711671c · 711671c
1 parent fdf5aac
commit 711671c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 46 deletions.
diff --git a/...plugins/kibana/public/home/components/tutorial/__snapshots__/instruction_set.test.js.snap b/...plugins/kibana/public/home/components/tutorial/__snapshots__/instruction_set.test.js.snap
@@ -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"

diff --git a/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.js b/src/core_plugins/kibana/public/home/components/tutorial/instruction_set.js
@@ -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'
     };