[8.12] [ML] Fixes display of actions column in the datafeed chart flyout (#173365) (#173726)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[ML] Fixes display of actions column in the datafeed chart flyout
(#173365)](https://github.com/elastic/kibana/pull/173365)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Pete
Harverson","email":"pete@elastic.co"},"sourceCommit":{"committedDate":"2023-12-20T11:02:57Z","message":"[ML]
Fixes display of actions column in the datafeed chart flyout
(#173365)\n\n## Summary\r\n\r\nFixes the 'Actions' column in the
datafeed chart flyout, opened from the\r\nanomaly detection jobs list,
so that the 'Toggle in chart' action is\r\nonly shown once per
row.\r\n\r\n#### Before:\r\n\r\n<img width=\"851\"
alt=\"datafeed_flyout_actions_before\"\r\nsrc=\"60f5cb8c-8491-4548-a4d1-336aa66dabaa\">\r\n\r\n\r\n####
After:\r\n\r\n<img width=\"851\"
alt=\"datafeed_flyout_actions_after\"\r\nsrc=\"a85cbbea-44d8-499d-aa89-98b56386075d\">\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"643aa605cd803a3f323db323a679d207bd098544","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Feature:Anomaly
Detection","v8.12.0","v8.13.0"],"number":173365,"url":"https://github.com/elastic/kibana/pull/173365","mergeCommit":{"message":"[ML]
Fixes display of actions column in the datafeed chart flyout
(#173365)\n\n## Summary\r\n\r\nFixes the 'Actions' column in the
datafeed chart flyout, opened from the\r\nanomaly detection jobs list,
so that the 'Toggle in chart' action is\r\nonly shown once per
row.\r\n\r\n#### Before:\r\n\r\n<img width=\"851\"
alt=\"datafeed_flyout_actions_before\"\r\nsrc=\"60f5cb8c-8491-4548-a4d1-336aa66dabaa\">\r\n\r\n\r\n####
After:\r\n\r\n<img width=\"851\"
alt=\"datafeed_flyout_actions_after\"\r\nsrc=\"a85cbbea-44d8-499d-aa89-98b56386075d\">\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"643aa605cd803a3f323db323a679d207bd098544"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173365","number":173365,"mergeCommit":{"message":"[ML]
Fixes display of actions column in the datafeed chart flyout
(#173365)\n\n## Summary\r\n\r\nFixes the 'Actions' column in the
datafeed chart flyout, opened from the\r\nanomaly detection jobs list,
so that the 'Toggle in chart' action is\r\nonly shown once per
row.\r\n\r\n#### Before:\r\n\r\n<img width=\"851\"
alt=\"datafeed_flyout_actions_before\"\r\nsrc=\"60f5cb8c-8491-4548-a4d1-336aa66dabaa\">\r\n\r\n\r\n####
After:\r\n\r\n<img width=\"851\"
alt=\"datafeed_flyout_actions_after\"\r\nsrc=\"a85cbbea-44d8-499d-aa89-98b56386075d\">\r\n\r\nCo-authored-by:
Kibana Machine
<42973632+kibanamachine@users.noreply.github.com>","sha":"643aa605cd803a3f323db323a679d207bd098544"}}]}]
BACKPORT-->

Co-authored-by: Pete Harverson <pete@elastic.co>
This commit is contained in:
Kibana Machine 2023-12-20 07:22:36 -05:00 committed by GitHub
parent fe1cacecb0
commit f4d642d472
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -48,7 +48,7 @@ export const JobMessages: FC<JobMessagesProps> = ({
}) => {
const { showNodeInfo } = useEnabledFeatures();
const columns: Array<EuiBasicTableColumn<JobMessage>> = useMemo(() => {
const cols = [
const cols: Array<EuiBasicTableColumn<JobMessage>> = [
{
name: refreshMessage ? (
<EuiToolTip
@ -100,42 +100,42 @@ export const JobMessages: FC<JobMessagesProps> = ({
});
}
return cols;
}, [showNodeInfo, refreshMessage]);
if (typeof actionHandler === 'function') {
columns.push({
name: i18n.translate('xpack.ml.jobMessages.actionsLabel', {
defaultMessage: 'Actions',
}),
width: '10%',
actions: [
{
render: (message: JobMessage) => {
return (
<EuiToolTip
content={
<FormattedMessage
id="xpack.ml.jobMessages.toggleInChartTooltipText"
defaultMessage="Toggle in chart"
if (typeof actionHandler === 'function') {
cols.push({
name: i18n.translate('xpack.ml.jobMessages.actionsLabel', {
defaultMessage: 'Actions',
}),
width: '10%',
actions: [
{
render: (message: JobMessage) => {
return (
<EuiToolTip
content={
<FormattedMessage
id="xpack.ml.jobMessages.toggleInChartTooltipText"
defaultMessage="Toggle in chart"
/>
}
>
<EuiButtonIcon
size="xs"
aria-label={i18n.translate('xpack.ml.jobMessages.toggleInChartAriaLabel', {
defaultMessage: 'Toggle in chart',
})}
iconType="visAreaStacked"
onClick={() => actionHandler(message)}
/>
}
>
<EuiButtonIcon
size="xs"
aria-label={i18n.translate('xpack.ml.jobMessages.toggleInChartAriaLabel', {
defaultMessage: 'Toggle in chart',
})}
iconType="visAreaStacked"
onClick={() => actionHandler(message)}
/>
</EuiToolTip>
);
</EuiToolTip>
);
},
},
},
],
});
}
],
});
}
return cols;
}, [showNodeInfo, refreshMessage, actionHandler]);
const defaultSorting = {
sort: {