Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ML] Fix annotations pagination & change labels from letters to numbers #72204

Merged
merged 4 commits into from
Jul 17, 2020
Merged

[ML] Fix annotations pagination & change labels from letters to numbers #72204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d5869f8
[ML] Change annotations label to numbers instead of letters
qn895 Jul 16, 2020
6872670
[ML] Fix weird bug with table pagination
qn895 Jul 16, 2020
cc6ba19
[ML] Update snapshot
qn895 Jul 16, 2020
5e43657
[ML] Update sort logic for numerical label
qn895 Jul 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...ion/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 8 additions & 5 deletions ...ugins/ml/public/application/components/annotations/annotations_table/annotations_table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)) {
Expand All @@ -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
Expand Down Expand Up @@ -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>;
Expand Down Expand Up @@ -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}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Label column should sort numerically:

image

I think you can just replace sortable: true with something like sortable: (key) => +key,

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the sort for numerical labels here 5e43657

pagination={{
pageSizeOptions: [5, 10, 25],
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/ml/public/application/explorer/explorer_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions ...ugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_utils/get_focus_data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});

Expand Down