[ML] Adding initial file analysis overrides

elastic · Aug 5, 2020 · 851fffb · 851fffb
1 parent 88c0631
commit 851fffb
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 37 deletions.
diff --git a/...datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js b/...datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -28,6 +28,7 @@ import {
 } from '../utils';
 
 import { MODE } from './constants';
+const DEFAULT_LINES_TO_SAMPLE = 1000;
 
 export class FileDataVisualizerView extends Component {
   constructor(props) {
@@ -55,7 +56,9 @@ export class FileDataVisualizerView extends Component {
 
     this.overrides = {};
     this.previousOverrides = {};
-    this.originalSettings = {};
+    this.originalSettings = {
+      linesToSample: DEFAULT_LINES_TO_SAMPLE,
+    };
     this.maxFileUploadBytes = getMaxBytes();
   }
 
@@ -129,7 +132,7 @@ export class FileDataVisualizerView extends Component {
       const serverSettings = processResults(resp);
       const serverOverrides = resp.overrides;
 
-      this.previousOverrides = this.overrides;
+      this.previousOverrides = overrides;
       this.overrides = {};
 
       if (serverSettings.format === 'xml') {
@@ -185,9 +188,8 @@ export class FileDataVisualizerView extends Component {
         serverError: error,
       });
 
-      // as long as the previous overrides are different to the current overrides,
       // reload the results with the previous overrides
-      if (overrides !== undefined && isEqual(this.previousOverrides, overrides) === false) {
+      if (isRetry === false) {
         this.setState({
           loading: true,
           loaded: false,
@@ -244,6 +246,11 @@ export class FileDataVisualizerView extends Component {
   };
 
   onCancel = () => {
+    this.overrides = {};
+    this.previousOverrides = {};
+    this.originalSettings = {
+      linesToSample: DEFAULT_LINES_TO_SAMPLE,
+    };
     this.changeMode(MODE.READ);
     this.onFilePickerChange([]);
   };
@@ -276,8 +283,12 @@ export class FileDataVisualizerView extends Component {
     return (
       <div>
         {mode === MODE.READ && (
-          <React.Fragment>
-            {!loading && !loaded && <AboutPanel onFilePickerChange={this.onFilePickerChange} />}
+          <>
+            {!loading && !loaded && (
+              <>
+                <AboutPanel onFilePickerChange={this.onFilePickerChange} />
+              </>
+            )}
 
             {loading && <LoadingPanel />}
 
@@ -286,10 +297,14 @@ export class FileDataVisualizerView extends Component {
             )}
 
             {fileCouldNotBeRead && loading === false && (
-              <React.Fragment>
-                <FileCouldNotBeRead error={serverError} loaded={loaded} />
+              <>
+                <FileCouldNotBeRead
+                  error={serverError}
+                  loaded={loaded}
+                  showEditFlyout={() => this.showEditFlyout()}
+                />
                 <EuiSpacer size="l" />
-              </React.Fragment>
+              </>
             )}
 
             {loaded && (
@@ -326,10 +341,10 @@ export class FileDataVisualizerView extends Component {
             )}
 
             <BottomPadding />
-          </React.Fragment>
+          </>
         )}
         {mode === MODE.IMPORT && (
-          <React.Fragment>
+          <>
             <ImportView
               results={results}
               fileName={fileName}
@@ -350,7 +365,7 @@ export class FileDataVisualizerView extends Component {
             )}
 
             <BottomPadding />
-          </React.Fragment>
+          </>
         )}
       </div>
     );
@@ -360,10 +375,10 @@ export class FileDataVisualizerView extends Component {
 function BottomPadding() {
   // padding for the BottomBar
   return (
-    <React.Fragment>
+    <>
       <EuiSpacer size="m" />
       <EuiSpacer size="l" />
       <EuiSpacer size="l" />
-    </React.Fragment>
+    </>
   );
 }
diff --git a/...ion/datavisualizer/file_based/components/file_datavisualizer_view/file_error_callouts.tsx b/...ion/datavisualizer/file_based/components/file_datavisualizer_view/file_error_callouts.tsx
@@ -7,7 +7,7 @@
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC } from 'react';
 
-import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiSpacer, EuiButtonEmpty, EuiHorizontalRule } from '@elastic/eui';
 
 import numeral from '@elastic/numeral';
 import { ErrorResponse } from '../../../../../../common/types/errors';
@@ -77,34 +77,57 @@ export const FileTooLarge: FC<FileTooLargeProps> = ({ fileSize, maxFileSize }) =
 interface FileCouldNotBeReadProps {
   error: ErrorResponse;
   loaded: boolean;
+  showEditFlyout(): void;
 }
 
-export const FileCouldNotBeRead: FC<FileCouldNotBeReadProps> = ({ error, loaded }) => {
+export const FileCouldNotBeRead: FC<FileCouldNotBeReadProps> = ({
+  error,
+  loaded,
+  showEditFlyout,
+}) => {
   const message = error?.body?.message || '';
   return (
-    <EuiCallOut
-      title={
-        <FormattedMessage
-          id="xpack.ml.fileDatavisualizer.fileErrorCallouts.fileCouldNotBeReadTitle"
-          defaultMessage="File could not be read"
-        />
-      }
-      color="danger"
-      iconType="cross"
-      data-test-subj="mlFileUploadErrorCallout fileCouldNotBeRead"
-    >
-      {message}
-      <Explanation error={error} />
-      {loaded && (
-        <>
-          <EuiSpacer size="s" />
+    <>
+      <EuiCallOut
+        title={
           <FormattedMessage
-            id="xpack.ml.fileDatavisualizer.fileErrorCallouts.revertingToPreviousSettingsDescription"
-            defaultMessage="Reverting to previous settings"
+            id="xpack.ml.fileDatavisualizer.fileErrorCallouts.fileCouldNotBeReadTitle"
+            defaultMessage="File structure cannot be determined"
           />
-        </>
-      )}
-    </EuiCallOut>
+        }
+        color="danger"
+        iconType="cross"
+        data-test-subj="mlFileUploadErrorCallout fileCouldNotBeRead"
+      >
+        {loaded === false && (
+          <>
+            <FormattedMessage
+              id="xpack.ml.fileDatavisualizer.fileErrorCallouts.revertingToPreviousSettingsDescription"
+              defaultMessage="If you know something about this data, such as the file format or timestamp format, adding initial overrides may help us to infer the rest of the structure."
+            />
+            <br />
+            <EuiButtonEmpty onClick={showEditFlyout} flush="left" size="xs">
+              <FormattedMessage
+                id="xpack.ml.fileDatavisualizer.fileErrorCallouts.overrideButton"
+                defaultMessage="Apply override settings"
+              />
+            </EuiButtonEmpty>
+            <EuiHorizontalRule />
+          </>
+        )}
+        {message}
+        <Explanation error={error} />
+        {loaded && (
+          <>
+            <EuiSpacer size="s" />
+            <FormattedMessage
+              id="xpack.ml.fileDatavisualizer.fileErrorCallouts.revertingToPreviousSettingsDescription"
+              defaultMessage="Reverting to previous settings"
+            />
+          </>
+        )}
+      </EuiCallOut>
+    </>
   );
 };