From 9ed704c0019a47a201876584194b27b203bcfa0c Mon Sep 17 00:00:00 2001
From: Quynh Nguyen <43350163+qn895@users.noreply.github.com>
Date: Fri, 17 Jul 2020 13:35:25 -0500
Subject: [PATCH] [ML] Fix annotations pagination & change labels from letters
 to numbers (#72204)

---
 .../__snapshots__/annotations_table.test.js.snap    |  1 +
 .../annotations_table/annotations_table.js          | 13 ++++++++-----
 .../public/application/explorer/explorer_utils.js   |  2 +-
 .../timeseriesexplorer_utils/get_focus_data.ts      |  4 ++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap
index 63ec1744b62d0..9eb44c71aa799 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap
+++ b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap
@@ -77,6 +77,7 @@ exports[`AnnotationsTable Initialization with annotations prop. 1`] = `
           "dataType": "boolean",
           "field": "current_series",
           "name": "current_series",
+          "render": [Function],
           "width": "0px",
         },
       ]
diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
index cf4d25f159a1a..86398a57c3a45 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
+++ b/x-pack/plugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
@@ -13,7 +13,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import rison from 'rison-node';
 import React, { Component, Fragment } from 'react';
-
+import memoizeOne from 'memoize-one';
 import {
   EuiBadge,
   EuiButtonIcon,
@@ -130,7 +130,7 @@ export class AnnotationsTable extends Component {
     }
   }
 
-  getAnnotationsWithExtraInfo(annotations) {
+  getAnnotationsWithExtraInfo = memoizeOne((annotations) => {
     // if there is a specific view/chart entities that the annotations can be scoped to
     // add a new column called 'current_series'
     if (Array.isArray(this.props.chartDetails?.entityData?.entities)) {
@@ -147,7 +147,7 @@ export class AnnotationsTable extends Component {
       // if not make it return the original annotations
       return annotations;
     }
-  }
+  });
 
   getJob(jobId) {
     // check if the job was supplied via props and matches the supplied jobId
@@ -438,7 +438,7 @@ export class AnnotationsTable extends Component {
         name: i18n.translate('xpack.ml.annotationsTable.labelColumnName', {
           defaultMessage: 'Label',
         }),
-        sortable: true,
+        sortable: (key) => +key,
         width: '60px',
         render: (key) => {
           return <EuiBadge color="default">{key}</EuiBadge>;
@@ -644,15 +644,18 @@ export class AnnotationsTable extends Component {
         name: CURRENT_SERIES,
         dataType: 'boolean',
         width: '0px',
+        render: () => '',
       }
     );
+
+    const items = this.getAnnotationsWithExtraInfo(annotations);
     return (
       <Fragment>
         <EuiInMemoryTable
           error={searchError}
           className="eui-textOverflowWrap"
           compressed={true}
-          items={this.getAnnotationsWithExtraInfo(annotations)}
+          items={items}
           columns={columns}
           pagination={{
             pageSizeOptions: [5, 10, 25],
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_utils.js b/x-pack/plugins/ml/public/application/explorer/explorer_utils.js
index 6e0863f1a6e5b..03a251d3e2f79 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer_utils.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer_utils.js
@@ -423,7 +423,7 @@ export function loadAnnotationsTableData(selectedCells, selectedJobs, interval,
               return a.timestamp - b.timestamp;
             })
             .map((d, i) => {
-              d.key = String.fromCharCode(65 + i);
+              d.key = (i + 1).toString();
               return d;
             }),
           aggregations: resp.aggregations,
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts
index 8bac9a51af174..d213d371f1d90 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts
@@ -156,8 +156,8 @@ export function getFocusData(
           .sort((a, b) => {
             return a.timestamp - b.timestamp;
           })
-          .map((d, i) => {
-            d.key = String.fromCharCode(65 + i);
+          .map((d, i: number) => {
+            d.key = (i + 1).toString();
             return d;
           });