Suggested changes

elastic · May 14, 2018 · d96bf79 · d96bf79
1 parent 3405014
commit d96bf79
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 83 deletions.
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
@@ -19,6 +19,7 @@ import {
   EuiButton,
   EuiCallOut,
 } from '@elastic/eui';
+import * as StatusCheckStates from './status_check_states';
 
 export class InstructionSet extends React.Component {
 
@@ -63,34 +64,42 @@ export class InstructionSet extends React.Component {
         {tab.name}
       </EuiTab>
     ));
-  }
+  };
 
-  renderStatusCheckMsg(msg, color) {
+  renderStatusCheckMessage() {
+    let message;
+    let color;
+    switch (this.props.statusCheckState) {
+      case StatusCheckStates.NOT_CHECKED:
+      case StatusCheckStates.FETCHING:
+        return null; // Don't show any message while fetching or if you haven't yet checked.
+      case StatusCheckStates.HAS_DATA:
+        message = this.props.statusCheckConfig.success ? this.props.statusCheckConfig.success : 'Success';
+        color = 'success';
+        break;
+      case StatusCheckStates.ERROR:
+      case StatusCheckStates.NO_DATA:
+        message = this.props.statusCheckConfig.error ? this.props.statusCheckConfig.error : 'No data found';
+        color = 'warning';
+        break;
+    }
     return (
       <EuiCallOut
-        title={msg}
+        title={message}
         color={color}
       />
     );
   }
 
   renderStatusCheck() {
-    let statusMsg;
-    if (this.props.statusCheckState === 'complete') {
-      const msg = this.props.statusCheckConfig.success ? this.props.statusCheckConfig.success : 'Success';
-      statusMsg = this.renderStatusCheckMsg(msg, 'success');
-    } else if (this.props.hasStatusCheckFailed) {
-      const msg = this.props.statusCheckConfig.error ? this.props.statusCheckConfig.error : 'No data found';
-      statusMsg = this.renderStatusCheckMsg(msg, 'warning');
-    }
-
-    const checkStausStep = (
+    const { statusCheckState, statusCheckConfig, onStatusCheck } = this.props;
+    const checkStatusStep = (
       <Fragment>
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem>
             <EuiText>
               <p>
-                {this.props.statusCheckConfig.text}
+                {statusCheckConfig.text}
               </p>
             </EuiText>
           </EuiFlexItem>
@@ -99,23 +108,26 @@ export class InstructionSet extends React.Component {
             grow={false}
           >
             <EuiButton
-              onClick={this.props.onStatusCheck}
-              isLoading={this.props.isCheckingStatus}
+              onClick={onStatusCheck}
+              isLoading={statusCheckState === StatusCheckStates.FETCHING}
             >
-              {this.props.statusCheckConfig.btnLabel || 'Check status'}
+              {statusCheckConfig.btnLabel || 'Check status'}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
 
         <EuiSpacer size="s" />
 
-        {statusMsg}
+        {this.renderStatusCheckMessage()}
       </Fragment>
     );
+
+    const stepStatus = statusCheckState === StatusCheckStates.NOT_CHECKED ||
+      statusCheckState === StatusCheckStates.FETCHING ? 'incomplete' : 'complete';
     return {
-      title: this.props.statusCheckConfig.title || 'Status Check',
-      status: this.props.statusCheckState,
-      children: checkStausStep,
+      title: statusCheckConfig.title || 'Status Check',
+      status: stepStatus,
+      children: checkStatusStep,
       key: 'checkStatusStep'
     };
   }
@@ -155,7 +167,7 @@ export class InstructionSet extends React.Component {
         firstStepNumber={this.props.offset}
       />
     );
-  }
+  };
 
   renderHeader = () => {
     let paramsVisibilityToggle;
@@ -193,7 +205,7 @@ export class InstructionSet extends React.Component {
         </KuiBarSection>
       </KuiBar>
     );
-  }
+  };
 
   render() {
     let paramsForm;
@@ -251,10 +263,14 @@ InstructionSet.propTypes = {
   title: PropTypes.string.isRequired,
   instructionVariants: PropTypes.arrayOf(instructionVariantShape).isRequired,
   statusCheckConfig: statusCheckConfigShape,
-  statusCheckState: PropTypes.string,
+  statusCheckState: PropTypes.oneOf([
+    StatusCheckStates.FETCHING,
+    StatusCheckStates.NOT_CHECKED,
+    StatusCheckStates.HAS_DATA,
+    StatusCheckStates.NO_DATA,
+    StatusCheckStates.ERROR,
+  ]),
   onStatusCheck: PropTypes.func.isRequired,
-  isCheckingStatus: PropTypes.bool,
-  hasStatusCheckFailed: PropTypes.bool,
   offset: PropTypes.number.isRequired,
   params: PropTypes.array,
   paramValues: PropTypes.object.isRequired,

diff --git a/src/core_plugins/kibana/public/home/components/tutorial/status_check_states.js b/src/core_plugins/kibana/public/home/components/tutorial/status_check_states.js
@@ -0,0 +1,5 @@
+export const HAS_DATA = 'has_data';
+export const FETCHING = 'FETCHING';
+export const NO_DATA = 'NO_DATA';
+export const NOT_CHECKED = 'NOT_CHECKED';
+export const ERROR = 'ERROR';
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js b/src/core_plugins/kibana/public/home/components/tutorial/tutorial.js
@@ -7,6 +7,7 @@ import { Introduction } from './introduction';
 import { InstructionSet } from './instruction_set';
 import { RadioButtonGroup } from './radio_button_group';
 import { EuiSpacer, EuiPage, EuiPanel, EuiLink, EuiText } from '@elastic/eui';
+import * as StatusCheckStates from './status_check_states';
 
 const INSTRUCTIONS_TYPE = {
   ELASTIC_CLOUD: 'elasticCloud',
@@ -22,7 +23,7 @@ export class Tutorial extends React.Component {
     this.state = {
       notFound: false,
       paramValues: {},
-      statusCheck: [],
+      statusCheckStates: [],
       tutorial: null
     };
 
@@ -76,7 +77,9 @@ export class Tutorial extends React.Component {
       default:
         throw new Error(`Unhandled instruction type ${this.state.visibleInstructions}`);
     }
-  }
+  };
+
+  getInstructionSets = () => this.getInstructions().instructionSets;
 
   initInstructionsState = () => {
     const instructions = this.getInstructions();
@@ -88,54 +91,50 @@ export class Tutorial extends React.Component {
       }));
     }
 
-    const statusCheck = instructions.instructionSets.map((instructionSet) => {
-      return {
-        hasStatusCheck: instructionSet.statusCheck ? true : false,
-        isComplete: false,
-        hasFailed: false,
-        isFetchingStatus: false,
-      };
-    });
+    const statusCheckStates = new Array(instructions.instructionSets.length).fill(StatusCheckStates.NOT_CHECKED);
 
     this.setState({
       paramValues,
-      statusCheck,
+      statusCheckStates,
     });
-  }
+  };
 
   setVisibleInstructions = (instructionsType) => {
     this.setState({
       visibleInstructions: instructionsType
     }, this.initInstructionsState);
-  }
+  };
 
   setParameter = (paramId, newValue) => {
     this.setState(previousState => {
       const paramValues = _.cloneDeep(previousState.paramValues);
       paramValues[paramId] = newValue;
       return { paramValues: paramValues };
     });
-  }
+  };
 
   checkInstructionSetStatus = async (instructionSetIndex) => {
-    const instructions = this.getInstructions();
-    const esHitsCheckConfig = _.get(instructions, `instructionSets[${instructionSetIndex}].statusCheck.esHitsCheck`);
-    const { hasFailed, isComplete } = await this.fetchEsHitsStatus(esHitsCheckConfig);
-
-    this.setState((prevState) => {
-      const statusCheck = _.cloneDeep(prevState.statusCheck);
-      statusCheck[instructionSetIndex].isComplete = isComplete;
-      statusCheck[instructionSetIndex].hasFailed = hasFailed;
-      statusCheck[instructionSetIndex].isFetchingStatus = false;
-      return { statusCheck };
-    });
-  }
+    const instructionSet = this.getInstructionSets()[instructionSetIndex];
+    const esHitsCheckConfig = _.get(instructionSet, `statusCheck.esHitsCheck`);
 
-  fetchEsHitsStatus = async (esHitsCheckConfig) => {
-    if (!esHitsCheckConfig) {
-      return { hasFailed: false, isComplete: false };
+    if (esHitsCheckConfig) {
+      const statusCheckState = await this.fetchEsHitsStatus(esHitsCheckConfig);
+
+      this.setState((prevState) => ({
+        statusCheckStates: {
+          ...prevState.statusCheckStates,
+          [instructionSetIndex]: statusCheckState,
+        }
+      }));
     }
+  };
 
+  /**
+   *
+   * @param esHitsCheckConfig
+   * @return {Promise<string>}
+   */
+  fetchEsHitsStatus = async (esHitsCheckConfig) => {
     const searchHeader = JSON.stringify({ index: esHitsCheckConfig.index });
     const searchBody = JSON.stringify({ query: esHitsCheckConfig.query, size: 1 });
     const response = await fetch(this.props.addBasePath('/elasticsearch/_msearch'), {
@@ -150,24 +149,21 @@ export class Tutorial extends React.Component {
     });
 
     if (response.status > 300) {
-      return { hasFailed: true, isComplete: false };
+      return StatusCheckStates.ERROR;
     }
 
     const results = await response.json();
     const numHits = _.get(results, 'responses.[0].hits.hits.length', 0);
-    return {
-      hasFailed: numHits === 0,
-      isComplete: numHits > 0
-    };
-  }
+    return numHits === 0 ? StatusCheckStates.NO_DATA : StatusCheckStates.HAS_DATA;
+  };
 
   onPrem = () => {
     this.setVisibleInstructions(INSTRUCTIONS_TYPE.ON_PREM);
-  }
+  };
 
   onPremElasticCloud = () => {
     this.setVisibleInstructions(INSTRUCTIONS_TYPE.ON_PREM_ELASTIC_CLOUD);
-  }
+  };
 
   renderInstructionSetsToggle = () => {
     if (!this.props.isCloudEnabled && this.state.tutorial.onPremElasticCloud) {
@@ -182,35 +178,33 @@ export class Tutorial extends React.Component {
         />
       );
     }
-  }
+  };
+
+  onStatusCheck = (instructionSetIndex) => {
+    this.setState(
+      (prevState) => ({
+        statusCheckStates: {
+          ...prevState.statusCheckStates,
+          [instructionSetIndex]: StatusCheckStates.FETCHING,
+        }
+      }),
+      this.checkInstructionSetStatus.bind(null, instructionSetIndex)
+    );
+  };
 
   renderInstructionSets = (instructions) => {
     let offset = 1;
     return instructions.instructionSets.map((instructionSet, index) => {
       const currentOffset = offset;
       offset += instructionSet.instructionVariants[0].instructions.length;
-      let statusCheckState = undefined;
-      let isCheckingStatus = false;
-      let hasFailed = false;
-      if (_.get(this.state, `statusCheck[${index}].hasStatusCheck`, false)) {
-        statusCheckState = this.state.statusCheck[index].isComplete ? 'complete' : 'incomplete';
-        isCheckingStatus = this.state.statusCheck[index].isFetchingStatus;
-        hasFailed = this.state.statusCheck[index].hasFailed;
-      }
+
       return (
         <InstructionSet
           title={instructionSet.title}
           instructionVariants={instructionSet.instructionVariants}
           statusCheckConfig={instructionSet.statusCheck}
-          statusCheckState={statusCheckState}
-          isCheckingStatus={isCheckingStatus}
-          hasStatusCheckFailed={hasFailed}
-          onStatusCheck={() => {
-            this.setState((prevState) => {
-              prevState.statusCheck[index].isFetchingStatus = true;
-              return { statusCheck: prevState.statusCheck };
-            }, this.checkInstructionSetStatus.bind(null, index));
-          }}
+          statusCheckState={this.state.statusCheckStates[index]}
+          onStatusCheck={() => { this.onStatusCheck(index); }}
           offset={currentOffset}
           params={instructions.params}
           paramValues={this.state.paramValues}
@@ -220,7 +214,7 @@ export class Tutorial extends React.Component {
         />
       );
     });
-  }
+  };
 
   renderFooter = () => {
     let label;
@@ -246,7 +240,7 @@ export class Tutorial extends React.Component {
         />
       );
     }
-  }
+  };
 
   render() {
     let content;