From a96120d38607c115cc4238ed4354a34554c4fa4b Mon Sep 17 00:00:00 2001 From: Brad White Date: Fri, 27 Oct 2023 21:21:03 -0600 Subject: [PATCH 1/3] Add column header component. Fix sorting on JSX headers --- .../components/column_header.tsx | 38 +++++++ .../watch_list_page/components/index.ts | 8 ++ .../watch_list_page/watch_list_page.tsx | 107 ++++++------------ 3 files changed, 83 insertions(+), 70 deletions(-) create mode 100644 x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx create mode 100644 x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx new file mode 100644 index 0000000000000..b446939cc9ce5 --- /dev/null +++ b/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx @@ -0,0 +1,38 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; + +import { EuiIcon, EuiToolTip } from '@elastic/eui'; + +import { i18n } from '@kbn/i18n'; + +interface Props { + field: string; + name: string; + tooltipText: string; +} + +export const ColumnHeader: React.FC = ({ field, name, tooltipText }) => { + return ( + + + {i18n.translate(`xpack.watcher.sections.watchList.watchTable.${field}Header`, { + defaultMessage: name, + })}{' '} + + + + ); +}; diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts b/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts new file mode 100644 index 0000000000000..ba5696b0c2041 --- /dev/null +++ b/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export { ColumnHeader } from './column_header'; diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx index 76a8328fb532a..d2af891016281 100644 --- a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx +++ b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx @@ -13,7 +13,6 @@ import { EuiButtonEmpty, EuiCallOut, EuiInMemoryTable, - EuiIcon, EuiLink, EuiSpacer, EuiText, @@ -46,6 +45,39 @@ import { useLoadWatches } from '../../lib/api'; import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../lib/navigation'; import { useAppContext } from '../../app_context'; import { PageError as GenericPageError } from '../../shared_imports'; +import { ColumnHeader } from './components'; + +/* + * 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 = ( + +); + +const conditionLastMetHeader = ( + +); + +const lastCheckedHeader = ( + +); + +const commentHeader = ( + +); export const WatchListPage = () => { // hooks @@ -273,46 +305,14 @@ export const WatchListPage = () => { }, { field: 'watchStatus.state', - name: ( - - - {i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader', { - defaultMessage: 'State', - })}{' '} - - - - ), + name: stateColumnHeader, sortable: true, width: '130px', render: (state: string) => , }, { field: 'watchStatus.lastMetCondition', - name: ( - - - {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastFiredHeader', { - defaultMessage: 'Condition last met', - })}{' '} - - - - ), + name: conditionLastMetHeader, sortable: true, truncateText: true, width: '160px', @@ -322,23 +322,7 @@ export const WatchListPage = () => { }, { field: 'watchStatus.lastChecked', - name: ( - - - {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader', { - defaultMessage: 'Last checked', - })}{' '} - - - - ), + name: lastCheckedHeader, sortable: true, truncateText: true, width: '160px', @@ -348,24 +332,7 @@ export const WatchListPage = () => { }, { field: 'watchStatus.comment', - name: ( - - - {i18n.translate('xpack.watcher.sections.watchList.watchTable.commentHeader', { - defaultMessage: 'Comment', - })}{' '} - - - - ), + name: commentHeader, sortable: true, truncateText: true, }, From e37135f07d70a78e0cec18a36adfdd39df175a5b Mon Sep 17 00:00:00 2001 From: Brad White Date: Mon, 30 Oct 2023 06:23:06 -0600 Subject: [PATCH 2/3] Fix i18n, remove column header component --- .../components/column_header.tsx | 38 ---------- .../watch_list_page/components/index.ts | 8 -- .../watch_list_page/watch_list_page.tsx | 76 ++++++++++++++----- 3 files changed, 59 insertions(+), 63 deletions(-) delete mode 100644 x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx delete mode 100644 x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx deleted file mode 100644 index b446939cc9ce5..0000000000000 --- a/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/column_header.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; - -import { EuiIcon, EuiToolTip } from '@elastic/eui'; - -import { i18n } from '@kbn/i18n'; - -interface Props { - field: string; - name: string; - tooltipText: string; -} - -export const ColumnHeader: React.FC = ({ field, name, tooltipText }) => { - return ( - - - {i18n.translate(`xpack.watcher.sections.watchList.watchTable.${field}Header`, { - defaultMessage: name, - })}{' '} - - - - ); -}; diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts b/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts deleted file mode 100644 index ba5696b0c2041..0000000000000 --- a/x-pack/plugins/watcher/public/application/sections/watch_list_page/components/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -export { ColumnHeader } from './column_header'; diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx index d2af891016281..fb0db66cf04d5 100644 --- a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx +++ b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx @@ -24,6 +24,7 @@ import { EuiPageHeader, EuiPageTemplate, EuiSearchBarOnChangeArgs, + EuiIcon, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -45,38 +46,79 @@ import { useLoadWatches } from '../../lib/api'; import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../lib/navigation'; import { useAppContext } from '../../app_context'; import { PageError as GenericPageError } from '../../shared_imports'; -import { ColumnHeader } from './components'; /* * 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 = ( - + + + {i18n.translate('xpack.watcher.sections.watchList.watchTable.stateHeader', { + defaultMessage: 'State', + })}{' '} + + + ); const conditionLastMetHeader = ( - + + + {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastFiredHeader', { + defaultMessage: 'Condition last met', + })}{' '} + + + ); const lastCheckedHeader = ( - + + + {i18n.translate('xpack.watcher.sections.watchList.watchTable.lastTriggeredHeader', { + defaultMessage: 'Last checked', + })}{' '} + + + ); const commentHeader = ( - + + + {i18n.translate('xpack.watcher.sections.watchList.watchTable.commentHeader', { + defaultMessage: 'Comment', + })}{' '} + + + ); export const WatchListPage = () => { From a0bcce29149e5fa2bb903b40cfd78c61c08941a6 Mon Sep 17 00:00:00 2001 From: Brad White Date: Mon, 30 Oct 2023 06:24:47 -0600 Subject: [PATCH 3/3] cleanup --- .../application/sections/watch_list_page/watch_list_page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx index fb0db66cf04d5..37d73d0c8a25a 100644 --- a/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx +++ b/x-pack/plugins/watcher/public/application/sections/watch_list_page/watch_list_page.tsx @@ -13,6 +13,7 @@ import { EuiButtonEmpty, EuiCallOut, EuiInMemoryTable, + EuiIcon, EuiLink, EuiSpacer, EuiText, @@ -24,7 +25,6 @@ import { EuiPageHeader, EuiPageTemplate, EuiSearchBarOnChangeArgs, - EuiIcon, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react';