[ML] Adding better error reporting for reading and importing data (#24269)

* [ML] Adding better error reporting for reading and importing data

* changes to endpoint errors

* displaying errors

* step logic refactor

* removing log statements

Author: jgowdyelastic

x-pack/plugins/ml/public/file_datavisualizer/components/import_view/errors.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+import React from 'react';
+
+import {
+  EuiCallOut,
+} from '@elastic/eui';
+
+import { IMPORT_STATUS } from './import_progress';
+
+export function Errors({ errors, statuses }) {
+  return (
+    <EuiCallOut
+      title={title(statuses)}
+      color="danger"
+      iconType="cross"
+    >
+      {
+        errors.map((e, i) => (
+          <p key={i}>
+            { toString(e) }
+          </p>
+        ))
+      }
+
+    </EuiCallOut>
+  );
+}
+
+function title(statuses) {
+  switch (IMPORT_STATUS.FAILED) {
+    case statuses.readStatus:
+      return 'Error reading file';
+    case statuses.indexCreatedStatus:
+      return 'Error creating index';
+    case statuses.ingestPipelineCreatedStatus:
+      return 'Error creating ingest pipeline';
+    case statuses.uploadStatus:
+      return 'Error uploading data';
+    case statuses.indexPatternCreatedStatus:
+      return 'Error creating index pattern';
+    default:
+      return 'Error';
+  }
+}
+
+function toString(error) {
+  if (typeof error === 'object') {
+    if (error.msg !== undefined) {
+      return error.msg;
+    } else if (error.error !== undefined) {
+      return error.error;
+    } else {
+      return error.toString();
+    }
+  }
+  return error;
+}

x-pack/plugins/ml/public/file_datavisualizer/components/import_view/import_progress.js

@@ -34,40 +34,70 @@ export function ImportProgress({ statuses }) {
 
   let statusInfo = null;
 
-  let processFileTitle = 'Process file';
+  let completedStep = 0;
+
   if (reading === true && readStatus === IMPORT_STATUS.INCOMPLETE) {
-    processFileTitle = 'Processing file';
-    statusInfo = (<p>Converting file for import</p>);
-  } else if (reading === false && readStatus === IMPORT_STATUS.COMPLETE) {
-    processFileTitle = 'File processed';
+    completedStep = 0;
+  }
+  if (
+    readStatus === IMPORT_STATUS.COMPLETE &&
+    indexCreatedStatus  === IMPORT_STATUS.INCOMPLETE &&
+    ingestPipelineCreatedStatus  === IMPORT_STATUS.INCOMPLETE
+  ) {
+    completedStep = 1;
   }
-
-  let createIndexTitle = 'Create index';
   if (indexCreatedStatus === IMPORT_STATUS.COMPLETE) {
-    createIndexTitle = 'Index created';
+    completedStep = 2;
   }
-
-  let createIngestPipelineTitle = 'Create ingest pipeline';
   if (ingestPipelineCreatedStatus === IMPORT_STATUS.COMPLETE) {
-    createIngestPipelineTitle = 'Ingest pipeline created';
+    completedStep = 3;
+  }
+  if (uploadStatus === IMPORT_STATUS.COMPLETE) {
+    completedStep = 4;
   }
+  if (indexPatternCreatedStatus === IMPORT_STATUS.COMPLETE) {
+    completedStep = 5;
+  }
+
 
+  let processFileTitle = 'Process file';
+  let createIndexTitle = 'Create index';
+  let createIngestPipelineTitle = 'Create ingest pipeline';
   let uploadingDataTitle = 'Upload data';
-  if (uploadProgress > 0 && uploadStatus === IMPORT_STATUS.INCOMPLETE) {
-    uploadingDataTitle = 'Uploading data';
+  let createIndexPatternTitle = 'Create index pattern';
 
+  if (completedStep >= 0) {
+    processFileTitle = 'Processing file';
+    statusInfo = (<p>Converting file for import</p>);
+  }
+  if (completedStep >= 1) {
+    processFileTitle = 'File processed';
+    createIndexTitle = 'Creating index';
+    statusInfo = (<p>Creating index and ingest pipeline</p>);
+  }
+  if (completedStep >= 2) {
+    createIndexTitle = 'Index created';
+    createIngestPipelineTitle = 'Creating ingest pipeline';
+    statusInfo = (<p>Creating index and ingest pipeline</p>);
+  }
+  if (completedStep >= 3) {
+    createIngestPipelineTitle = 'Ingest pipeline created';
+    uploadingDataTitle = 'Uploading data';
     statusInfo = (<UploadFunctionProgress progress={uploadProgress} />);
-  } else if (uploadStatus === IMPORT_STATUS.COMPLETE) {
+  }
+  if (completedStep >= 4) {
     uploadingDataTitle = 'Data uploaded';
+    if (createIndexPattern === true) {
+      createIndexPatternTitle = 'Creating index pattern';
+      statusInfo = (<p>Creating index pattern</p>);
+    }
   }
-
-  let createIndexPatternTitle = 'Create index pattern';
-  if (indexPatternCreatedStatus === IMPORT_STATUS.FAILED) {
+  if (completedStep >= 5) {
     createIndexPatternTitle = 'Index pattern created';
     statusInfo = null;
   }
 
-  const firstSetOfSteps = [
+  const steps = [
     {
       title: processFileTitle,
       isSelected: true,
@@ -91,15 +121,15 @@ export function ImportProgress({ statuses }) {
     },
     {
       title: uploadingDataTitle,
-      isSelected: (indexCreatedStatus === IMPORT_STATUS.COMPLETE),
+      isSelected: (indexCreatedStatus === IMPORT_STATUS.COMPLETE && ingestPipelineCreatedStatus === IMPORT_STATUS.COMPLETE),
       isComplete: (uploadStatus === IMPORT_STATUS.COMPLETE),
       status: uploadStatus,
       onClick: () => {},
     }
   ];
 
   if (createIndexPattern === true) {
-    firstSetOfSteps.push({
+    steps.push({
       title: createIndexPatternTitle,
       isSelected: (uploadStatus === IMPORT_STATUS.COMPLETE),
       isComplete: (indexPatternCreatedStatus === IMPORT_STATUS.COMPLETE),
@@ -111,9 +141,14 @@ export function ImportProgress({ statuses }) {
   return (
     <React.Fragment>
       <EuiStepsHorizontal
-        steps={firstSetOfSteps}
+        steps={steps}
       />
-      { statusInfo }
+      { statusInfo &&
+        <React.Fragment>
+          <EuiSpacer size="m" />
+          { statusInfo }
+        </React.Fragment>
+      }
     </React.Fragment>
   );
 }