[ML] Adding initial file analysis overrides (#74376)

* [ML] Adding initial file analysis overrides

* using common default sample lines

* correcting bottom padding

* adding missed padding

* code clean up

* fixing translations

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js

@@ -20,6 +20,7 @@ import { EditFlyout } from '../edit_flyout';
 import { ExplanationFlyout } from '../explanation_flyout';
 import { ImportView } from '../import_view';
 import {
+  DEFAULT_LINES_TO_SAMPLE,
   getMaxBytes,
   readFile,
   createUrlOverrides,
@@ -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,7 +283,7 @@ export class FileDataVisualizerView extends Component {
     return (
       <div>
         {mode === MODE.READ && (
-          <React.Fragment>
+          <>
             {!loading && !loaded && <AboutPanel onFilePickerChange={this.onFilePickerChange} />}
 
             {loading && <LoadingPanel />}
@@ -286,10 +293,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 && (
@@ -298,8 +309,8 @@ export class FileDataVisualizerView extends Component {
                 explanation={explanation}
                 fileName={fileName}
                 data={fileContents}
-                showEditFlyout={() => this.showEditFlyout()}
-                showExplanationFlyout={() => this.showExplanationFlyout()}
+                showEditFlyout={this.showEditFlyout}
+                showExplanationFlyout={this.showExplanationFlyout}
                 disableButtons={isEditFlyoutVisible || isExplanationFlyoutVisible}
               />
             )}
@@ -317,19 +328,20 @@ export class FileDataVisualizerView extends Component {
             )}
 
             {bottomBarVisible && loaded && (
-              <BottomBar
-                mode={MODE.READ}
-                onChangeMode={this.changeMode}
-                onCancel={this.onCancel}
-                disableImport={hasPermissionToImport === false}
-              />
+              <>
+                <BottomBar
+                  mode={MODE.READ}
+                  onChangeMode={this.changeMode}
+                  onCancel={this.onCancel}
+                  disableImport={hasPermissionToImport === false}
+                />
+                <BottomPadding />
+              </>
             )}
-
-            <BottomPadding />
-          </React.Fragment>
+          </>
         )}
         {mode === MODE.IMPORT && (
-          <React.Fragment>
+          <>
             <ImportView
               results={results}
               fileName={fileName}
@@ -342,15 +354,16 @@ export class FileDataVisualizerView extends Component {
             />
 
             {bottomBarVisible && (
-              <BottomBar
-                mode={MODE.IMPORT}
-                onChangeMode={this.changeMode}
-                onCancel={this.onCancel}
-              />
+              <>
+                <BottomBar
+                  mode={MODE.IMPORT}
+                  onChangeMode={this.changeMode}
+                  onCancel={this.onCancel}
+                />
+                <BottomPadding />
+              </>
             )}
-
-            <BottomPadding />
-          </React.Fragment>
+          </>
         )}
       </div>
     );
@@ -360,10 +373,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>
+    </>
   );
 }

x-pack/plugins/ml/public/application/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.applyOverridesDescription"
+              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>
+    </>
   );
 };
 

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/utils/index.ts

@@ -11,4 +11,5 @@ export {
   readFile,
   getMaxBytes,
   getMaxBytesFormatted,
+  DEFAULT_LINES_TO_SAMPLE,
 } from './utils';

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/utils/utils.ts

@@ -18,7 +18,7 @@ import {
 import { getUiSettings } from '../../../../util/dependency_cache';
 import { FILE_DATA_VISUALIZER_MAX_FILE_SIZE } from '../../../../../../common/constants/settings';
 
-const DEFAULT_LINES_TO_SAMPLE = 1000;
+export const DEFAULT_LINES_TO_SAMPLE = 1000;
 const UPLOAD_SIZE_MB = 5;
 
 const overrideDefaults = {