Add pagination control to datavisualizer failures to rendering all er…

…rors at a single time (#93839) (#94442)

* Add pagination control to datavisualizer errors to avoid crashing browser

* conditionally render pagination control

* tslint

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/import_summary/failures.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { Component } from 'react';
+
+import { EuiAccordion, EuiPagination } from '@elastic/eui';
+
+const PAGE_SIZE = 100;
+
+export interface DocFailure {
+  item: number;
+  reason: string;
+  doc: {
+    message: string;
+  };
+}
+
+interface Props {
+  failedDocs: DocFailure[];
+}
+
+interface State {
+  page: number;
+}
+
+export class Failures extends Component<Props, State> {
+  state: State = { page: 0 };
+
+  _renderPaginationControl() {
+    return this.props.failedDocs.length > PAGE_SIZE ? (
+      <EuiPagination
+        pageCount={Math.floor(this.props.failedDocs.length / PAGE_SIZE)}
+        activePage={this.state.page}
+        onPageClick={(page) => this.setState({ page })}
+        compressed
+      />
+    ) : null;
+  }
+
+  render() {
+    const lastDocIndex = this.props.failedDocs.length - 1;
+    const startIndex = this.state.page * PAGE_SIZE;
+    const endIndex = startIndex + PAGE_SIZE > lastDocIndex ? lastDocIndex : startIndex + PAGE_SIZE;
+    return (
+      <EuiAccordion
+        id="failureList"
+        buttonContent={
+          <FormattedMessage
+            id="xpack.ml.fileDatavisualizer.importSummary.failedDocumentsButtonLabel"
+            defaultMessage="Failed documents"
+          />
+        }
+        paddingSize="m"
+      >
+        <div className="failure-list">
+          {this._renderPaginationControl()}
+          {this.props.failedDocs.slice(startIndex, endIndex).map(({ item, reason, doc }) => (
+            <div key={item}>
+              <div className="error-message">
+                {item}: {reason}
+              </div>
+              <div>{JSON.stringify(doc)}</div>
+            </div>
+          ))}
+        </div>
+      </EuiAccordion>
+    );
+  }
+}

x-pack/plugins/ml/public/application/datavisualizer/file_based/components/import_summary/import_summary.tsx

@@ -8,7 +8,8 @@
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC } from 'react';
 
-import { EuiSpacer, EuiDescriptionList, EuiCallOut, EuiAccordion } from '@elastic/eui';
+import { EuiSpacer, EuiDescriptionList, EuiCallOut } from '@elastic/eui';
+import { DocFailure, Failures } from './failures';
 
 interface Props {
   index: string;
@@ -20,14 +21,6 @@ interface Props {
   createPipeline: boolean;
 }
 
-interface DocFailure {
-  item: number;
-  reason: string;
-  doc: {
-    message: string;
-  };
-}
-
 export const ImportSummary: FC<Props> = ({
   index,
   indexPattern,
@@ -96,36 +89,6 @@ export const ImportSummary: FC<Props> = ({
   );
 };
 
-interface FailuresProps {
-  failedDocs: DocFailure[];
-}
-
-const Failures: FC<FailuresProps> = ({ failedDocs }) => {
-  return (
-    <EuiAccordion
-      id="failureList"
-      buttonContent={
-        <FormattedMessage
-          id="xpack.ml.fileDatavisualizer.importSummary.failedDocumentsButtonLabel"
-          defaultMessage="Failed documents"
-        />
-      }
-      paddingSize="m"
-    >
-      <div className="failure-list">
-        {failedDocs.map(({ item, reason, doc }) => (
-          <div key={item}>
-            <div className="error-message">
-              {item}: {reason}
-            </div>
-            <div>{JSON.stringify(doc)}</div>
-          </div>
-        ))}
-      </div>
-    </EuiAccordion>
-  );
-};
-
 function createDisplayItems(
   index: string,
   indexPattern: string,