Skip to content

Commit

Permalink
[Watcher] Fix sorting on JSX headers (#170085)
Browse files Browse the repository at this point in the history 
## Summary
Closes #164126

EUI in memory tables need to have stable headers between renders to sort
properly when the header is a JSX element
([Docs](https://eui.elastic.co/#/tabular-content/in-memory-tables)).
This PR stabilizes the headers for `WatchListPage` only. I noticed there
were some other columns which likely have the same issue in Watcher, but
I'm unsure how far reaching these changes need to be. Reading through
the issue @ElenaStoeva mentions changing the sorting anyways, so a quick
fix seems more appropriate.


![Untitled](https://github.com/elastic/kibana/assets/14021797/7d79c576-58b8-4ef5-a713-b87a3c52ea19)


## Release Note
Fixed issue where certain columns in the Watcher table were not sorting
properly.
  • Loading branch information
@Ikuni17
Ikuni17 authored Oct 30, 2023
1 parent efc2248 commit 540e6c0
Showing 1 changed file with 78 additions and 69 deletions.
147 changes: 78 additions & 69 deletions x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,80 @@ import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../lib/nav
import { useAppContext } from '../../app_context';
import { PageError as GenericPageError } from '../../shared_imports';

/*
* EuiMemoryTable relies on referential equality of a column's name field when sorting by that column.
* Therefore, we want the JSX elements preserved through renders.
*/
const stateColumnHeader = (
<EuiToolTip
content={i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader.tooltipText', {
defaultMessage: 'Active, inactive, or error.',
})}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader', {
defaultMessage: 'State',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
);

const conditionLastMetHeader = (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText',
{
defaultMessage: `The last time the condition was met and action taken.`,
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.lastFiredHeader', {
defaultMessage: 'Condition last met',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
);

const lastCheckedHeader = (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader.tooltipText',
{
defaultMessage: `The last time the condition was checked.`,
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader', {
defaultMessage: 'Last checked',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
);

const commentHeader = (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText',
{
defaultMessage:
'Whether any actions have been acknowledged, throttled, or failed to execute.',
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.commentHeader', {
defaultMessage: 'Comment',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
);

export const WatchListPage = () => {
// hooks
const {
Expand Down Expand Up @@ -273,46 +347,14 @@ export const WatchListPage = () => {
},
{
field: 'watchStatus.state',
name: (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.stateHeader.tooltipText',
{
defaultMessage: 'Active, inactive, or error.',
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader', {
defaultMessage: 'State',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
),
name: stateColumnHeader,
sortable: true,
width: '130px',
render: (state: string) => <WatchStateBadge state={state} />,
},
{
field: 'watchStatus.lastMetCondition',
name: (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.lastFiredHeader.tooltipText',
{
defaultMessage: `The last time the condition was met and action taken.`,
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.lastFiredHeader', {
defaultMessage: 'Condition last met',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
),
name: conditionLastMetHeader,
sortable: true,
truncateText: true,
width: '160px',
Expand All @@ -322,23 +364,7 @@ export const WatchListPage = () => {
},
{
field: 'watchStatus.lastChecked',
name: (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader.tooltipText',
{
defaultMessage: `The last time the condition was checked.`,
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader', {
defaultMessage: 'Last checked',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
),
name: lastCheckedHeader,
sortable: true,
truncateText: true,
width: '160px',
Expand All @@ -348,24 +374,7 @@ export const WatchListPage = () => {
},
{
field: 'watchStatus.comment',
name: (
<EuiToolTip
content={i18n.translate(
'xpack.watcher.sections.watchList.watchTable.commentHeader.tooltipText',
{
defaultMessage:
'Whether any actions have been acknowledged, throttled, or failed to execute.',
}
)}
>
<span>
{i18n.translate('xpack.watcher.sections.watchList.watchTable.commentHeader', {
defaultMessage: 'Comment',
})}{' '}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
),
name: commentHeader,
sortable: true,
truncateText: true,
},
Expand Down

0 comments on commit 540e6c0

Please sign in to comment.