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

[Watcher] Fix sorting on JSX headers #170085

Merged
merged 4 commits into from
Oct 30, 2023
Merged

[Watcher] Fix sorting on JSX headers #170085

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a96120d
Add column header component. Fix sorting on JSX headers
Ikuni17 Oct 28, 2023
04c31a2
Merge remote-tracking branch 'upstream/main' into feature/164126/watc…
Ikuni17 Oct 30, 2023
e37135f
Fix i18n, remove column header component
Ikuni17 Oct 30, 2023
a0bcce2
cleanup
Ikuni17 Oct 30, 2023
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
147 changes: 78 additions & 69 deletions x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx
View file
Open in desktop
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
Loading