From b6e2743d3877a692361d3349b8b79414a440318c Mon Sep 17 00:00:00 2001 From: Melissa Date: Mon, 15 Jul 2024 14:25:51 -0600 Subject: [PATCH 1/4] update width for icon in messages tab to prevent overlap --- .../components/transform_list/expanded_row_messages_pane.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx index 40ecd7585904d..84e248ef49ae0 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx @@ -11,7 +11,6 @@ import React, { useState, type FC } from 'react'; import type { EuiBasicTableProps } from '@elastic/eui'; import { formatDate, EuiPanel, EuiBasicTable, EuiToolTip, EuiButtonIcon } from '@elastic/eui'; -import { euiLightVars as theme } from '@kbn/ui-theme'; import { i18n } from '@kbn/i18n'; import { useEnabledFeatures } from '../../../../serverless_context'; @@ -81,7 +80,7 @@ export const ExpandedRowMessagesPane: FC = ({ tran '' ), render: (message: TransformMessage) => , - width: theme.euiSizeXL, + width: '6%', }, { field: 'timestamp', From accb7bdea0c21fe6b8265c12836ba45085507e53 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 15 Jul 2024 20:47:29 +0000 Subject: [PATCH 2/4] [CI] Auto-commit changed files from 'node scripts/lint_ts_projects --fix' --- x-pack/plugins/transform/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/plugins/transform/tsconfig.json b/x-pack/plugins/transform/tsconfig.json index 2faedae945810..9b1abbd589a83 100644 --- a/x-pack/plugins/transform/tsconfig.json +++ b/x-pack/plugins/transform/tsconfig.json @@ -41,7 +41,6 @@ "@kbn/es-query", "@kbn/ml-agg-utils", "@kbn/ml-string-hash", - "@kbn/ui-theme", "@kbn/field-types", "@kbn/ml-nested-property", "@kbn/ml-is-defined", From 3185e6cf7776883f33347267f16b16ae24bc3f74 Mon Sep 17 00:00:00 2001 From: Melissa Date: Thu, 18 Jul 2024 12:39:47 -0600 Subject: [PATCH 3/4] fix anomalies table and use same icon in transform messages --- .../application/components/job_messages/job_messages.tsx | 3 +-- x-pack/plugins/transform/public/app/components/job_icon.tsx | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx index e96a0e1188584..6fb19c7b64290 100644 --- a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx +++ b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx @@ -13,7 +13,6 @@ import { EuiSpacer, EuiInMemoryTable, EuiButtonIcon, EuiToolTip } from '@elastic import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiLightVars as theme } from '@kbn/ui-theme'; import { timeFormatter } from '@kbn/ml-date-utils'; import type { JobMessage } from '../../../../common/types/audit_message'; @@ -66,7 +65,7 @@ export const JobMessages: FC = ({ '' ), render: (message: JobMessage) => , - width: `${theme.euiSizeL}`, + width: '6%', }, { field: 'timestamp', diff --git a/x-pack/plugins/transform/public/app/components/job_icon.tsx b/x-pack/plugins/transform/public/app/components/job_icon.tsx index 139d168c9dbb7..1172b0b165051 100644 --- a/x-pack/plugins/transform/public/app/components/job_icon.tsx +++ b/x-pack/plugins/transform/public/app/components/job_icon.tsx @@ -23,10 +23,10 @@ export const JobIcon: FC = ({ message, showTooltip = false }) => { } let color = 'primary'; - const icon = 'warning'; + let icon = 'warning'; if (message.level === INFO) { - color = 'primary'; + icon = 'iInCircle'; } else if (message.level === WARNING) { color = 'warning'; } else if (message.level === ERROR) { From afa5d6d8faee66f5aba2853da205c7b15f775cbc Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 18 Jul 2024 21:59:56 +0200 Subject: [PATCH 4/4] CSS fixes to keep fixed widths instead of percentages --- .../components/transform_list/expanded_row.tsx | 6 ++++-- .../transform_list/expanded_row_messages_pane.tsx | 11 ++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx index 08806dbeb0818..549023a95732d 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row.tsx @@ -8,7 +8,7 @@ import React, { type FC } from 'react'; import { css } from '@emotion/react'; -import { EuiTabbedContent } from '@elastic/eui'; +import { useEuiTheme, EuiTabbedContent } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { stringHash } from '@kbn/ml-string-hash'; @@ -30,6 +30,7 @@ interface Props { } export const ExpandedRow: FC = ({ item, onAlertEdit }) => { + const { euiTheme } = useEuiTheme(); const tabId = stringHash(item.id); const tabs = [ @@ -112,7 +113,8 @@ export const ExpandedRow: FC = ({ item, onAlertEdit }) => { onTabClick={() => {}} expand={false} css={css` - width: 100%; + margin-left: -${euiTheme.size.xl}; + width: calce(100% + ${euiTheme.size.xl}); .euiTable { background-color: transparent; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx index 84e248ef49ae0..48077414ffabb 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx @@ -8,7 +8,7 @@ import type { MouseEvent } from 'react'; import React, { useState, type FC } from 'react'; -import type { EuiBasicTableProps } from '@elastic/eui'; +import { useEuiTheme, type EuiBasicTableProps } from '@elastic/eui'; import { formatDate, EuiPanel, EuiBasicTable, EuiToolTip, EuiButtonIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -30,6 +30,7 @@ interface Sorting { } export const ExpandedRowMessagesPane: FC = ({ transformId }) => { + const { euiTheme } = useEuiTheme(); const { showNodeInfo } = useEnabledFeatures(); const [pageIndex, setPageIndex] = useState(0); @@ -79,8 +80,12 @@ export const ExpandedRowMessagesPane: FC = ({ tran ) : ( '' ), - render: (message: TransformMessage) => , - width: '6%', + render: (message: TransformMessage) => ( +
+ +
+ ), + width: euiTheme.size.xl, }, { field: 'timestamp',