From bb8dc16888dc05e2b3a0086378c20c1dc52aa0b6 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Mon, 18 Sep 2023 08:34:35 -0500 Subject: [PATCH 1/4] Update transform to use EnabledFeaturesContext instead of serverless, hide exclude frozen tier --- .../components/full_time_range_selector.tsx | 1 + x-pack/plugins/transform/public/app/app.tsx | 11 +++++--- .../public/app/mount_management_section.ts | 7 +++++- .../step_define/step_define_form.tsx | 3 +++ .../transform_list/expanded_row.tsx | 6 ++--- .../expanded_row_messages_pane.tsx | 8 +++--- .../transform_list/transforms_stats_bar.tsx | 16 ++++++------ .../transform_management_section.tsx | 8 +++--- .../public/app/serverless_context.tsx | 25 +++++++++++++------ 9 files changed, 53 insertions(+), 32 deletions(-) diff --git a/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx b/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx index e3e5a1de3d65f..fcf4622e87cc0 100644 --- a/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx +++ b/x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx @@ -98,6 +98,7 @@ export const FullTimeRangeSelector: FC = (props) => apiPath, hideFrozenDataTierChoice = false, } = props; + const { http, notifications: { toasts }, diff --git a/x-pack/plugins/transform/public/app/app.tsx b/x-pack/plugins/transform/public/app/app.tsx index 2812475f7f87a..21d1ca2b1b6b6 100644 --- a/x-pack/plugins/transform/public/app/app.tsx +++ b/x-pack/plugins/transform/public/app/app.tsx @@ -20,7 +20,10 @@ import { AppDependencies } from './app_dependencies'; import { CloneTransformSection } from './sections/clone_transform'; import { CreateTransformSection } from './sections/create_transform'; import { TransformManagementSection } from './sections/transform_management'; -import { ServerlessContextProvider } from './serverless_context'; +import { + EnabledFeaturesContextProvider, + type TransformEnabledFeatures, +} from './serverless_context'; export const App: FC<{ history: ScopedHistory }> = ({ history }) => ( @@ -41,7 +44,7 @@ export const App: FC<{ history: ScopedHistory }> = ({ history }) => ( export const renderApp = ( element: HTMLElement, appDependencies: AppDependencies, - isServerless: boolean + enabledFeatures: TransformEnabledFeatures ) => { const I18nContext = appDependencies.i18n.Context; @@ -60,9 +63,9 @@ export const renderApp = ( - + - + diff --git a/x-pack/plugins/transform/public/app/mount_management_section.ts b/x-pack/plugins/transform/public/app/mount_management_section.ts index 86b2a297ed636..5101601ae8500 100644 --- a/x-pack/plugins/transform/public/app/mount_management_section.ts +++ b/x-pack/plugins/transform/public/app/mount_management_section.ts @@ -9,6 +9,7 @@ import { CoreSetup } from '@kbn/core/public'; import { ManagementAppMountParams } from '@kbn/management-plugin/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; +import { type TransformEnabledFeatures } from './serverless_context'; import { PluginsDependencies } from '../plugin'; import { getMlSharedImports } from '../shared_imports'; @@ -93,7 +94,11 @@ export async function mountManagementSection( contentManagement, }; - const unmountAppCallback = renderApp(element, appDependencies, isServerless); + const enabledFeatures: TransformEnabledFeatures = { + showNodeInfo: !isServerless, + showFrozenDataTierChoice: !isServerless, + }; + const unmountAppCallback = renderApp(element, appDependencies, enabledFeatures); return () => { docTitle.reset(); diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx index 246460d11d3ee..fe32366e15b74 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx @@ -35,6 +35,7 @@ import { import { useStorage } from '@kbn/ml-local-storage'; import { useUrlState } from '@kbn/ml-url-state'; +import { useEnabledFeatures } from '../../../../serverless_context'; import { PivotAggDict } from '../../../../../../common/types/pivot_aggs'; import { PivotGroupByDict } from '../../../../../../common/types/pivot_group_by'; import { TRANSFORM_FUNCTION } from '../../../../../../common/constants'; @@ -112,6 +113,7 @@ export const StepDefineForm: FC = React.memo((props) => { ); const toastNotifications = useToastNotifications(); const stepDefineForm = useStepDefineForm(props); + const { showFrozenDataTierChoice } = useEnabledFeatures(); const { advancedEditorConfig } = stepDefineForm.advancedPivotEditor.state; const { @@ -353,6 +355,7 @@ export const StepDefineForm: FC = React.memo((props) => { query={undefined} disabled={false} timefilter={timefilter} + hideFrozenDataTierChoice={!showFrozenDataTierChoice} /> 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 f4766da492f67..0bf2eda75b3a0 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 @@ -17,7 +17,7 @@ import { formatHumanReadableDateTimeSeconds } from '@kbn/ml-date-utils'; import { stringHash } from '@kbn/ml-string-hash'; import { isDefined } from '@kbn/ml-is-defined'; -import { useIsServerless } from '../../../../serverless_context'; +import { useEnabledFeatures } from '../../../../serverless_context'; import { TransformHealthAlertRule } from '../../../../../../common/types/alerting'; import { TransformListRow } from '../../../../common'; @@ -47,7 +47,7 @@ interface Props { type StateValues = Optional; export const ExpandedRow: FC = ({ item, onAlertEdit }) => { - const hideNodeInfo = useIsServerless(); + const { showNodeInfo } = useEnabledFeatures(); const stateValues: StateValues = { ...item.stats }; delete stateValues.stats; @@ -64,7 +64,7 @@ export const ExpandedRow: FC = ({ item, onAlertEdit }) => { description: item.stats.state, } ); - if (!hideNodeInfo && item.stats.node !== undefined) { + if (showNodeInfo && item.stats.node !== undefined) { stateItems.push({ title: 'node.name', description: item.stats.node.name, 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 10c1a4f01dfb2..8124ecbb87182 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 @@ -19,7 +19,7 @@ import { import { euiLightVars as theme } from '@kbn/ui-theme'; import { i18n } from '@kbn/i18n'; -import { useIsServerless } from '../../../../serverless_context'; +import { useEnabledFeatures } from '../../../../serverless_context'; import { DEFAULT_MAX_AUDIT_MESSAGE_SIZE, TIME_FORMAT } from '../../../../../../common/constants'; import { TransformMessage } from '../../../../../../common/types/messages'; @@ -36,7 +36,7 @@ interface Sorting { } export const ExpandedRowMessagesPane: FC = ({ transformId }) => { - const hideNodeInfo = useIsServerless(); + const { showNodeInfo } = useEnabledFeatures(); const [pageIndex, setPageIndex] = useState(0); const [pageSize, setPageSize] = useState(10); @@ -99,7 +99,7 @@ export const ExpandedRowMessagesPane: FC = ({ tran render: (timestamp: number) => formatDate(timestamp, TIME_FORMAT), sortable: true, }, - ...(!hideNodeInfo + ...(showNodeInfo ? [ { field: 'node_name', @@ -121,7 +121,7 @@ export const ExpandedRowMessagesPane: FC = ({ tran defaultMessage: 'Message', } ), - width: !hideNodeInfo ? '50%' : '70%', + width: showNodeInfo ? '50%' : '70%', }, ]; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transforms_stats_bar.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transforms_stats_bar.tsx index 79f6321c2419f..2ceb341eeea77 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transforms_stats_bar.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/transforms_stats_bar.tsx @@ -12,7 +12,7 @@ import { EuiButton, EuiCallOut, EuiLink, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { useIsServerless } from '../../../../serverless_context'; +import { useEnabledFeatures } from '../../../../serverless_context'; import { TRANSFORM_MODE, TRANSFORM_STATE } from '../../../../../../common/constants'; import { TransformListRow } from '../../../../common'; @@ -21,10 +21,10 @@ import { useDocumentationLinks, useRefreshTransformList } from '../../../../hook import { StatsBar, TransformStatsBarStats } from '../stats_bar'; -function createTranformStats( +function createTransformStats( transformNodes: number, transformsList: TransformListRow[], - hideNodeInfo: boolean + showNodeInfo: boolean ): TransformStatsBarStats { const transformStats: TransformStatsBarStats = { total: { @@ -64,7 +64,7 @@ function createTranformStats( }, }; - if (!hideNodeInfo) { + if (showNodeInfo) { transformStats.nodes = { label: i18n.translate('xpack.transform.statsBar.transformNodesLabel', { defaultMessage: 'Nodes', @@ -123,19 +123,19 @@ export const TransformStatsBar: FC = ({ transformNodes, transformsList, }) => { - const hideNodeInfo = useIsServerless(); + const { showNodeInfo } = useEnabledFeatures(); const refreshTransformList = useRefreshTransformList(); const { esNodeRoles } = useDocumentationLinks(); - const transformStats: TransformStatsBarStats = createTranformStats( + const transformStats: TransformStatsBarStats = createTransformStats( transformNodes, transformsList, - hideNodeInfo + showNodeInfo ); return ( <> - {!hideNodeInfo && transformNodes === 0 && ( + {showNodeInfo && transformNodes === 0 && ( <> { const { esTransform } = useDocumentationLinks(); - const hideNodeInfo = useIsServerless(); + const { showNodeInfo } = useEnabledFeatures(); const deleteTransforms = useDeleteTransforms(); @@ -89,7 +89,7 @@ export const TransformManagement: FC = () => { error: transformsErrorMessage, data: { transforms, transformIdsWithoutConfig }, } = useGetTransforms({ - enabled: !transformNodesInitialLoading && (transformNodes > 0 || hideNodeInfo), + enabled: !transformNodesInitialLoading && transformNodes > 0, }); const isInitialLoading = transformNodesInitialLoading || transformsInitialLoading; @@ -197,7 +197,7 @@ export const TransformManagement: FC = () => { <> {unauthorizedTransformsWarning} - {!hideNodeInfo && transformNodesErrorMessage !== null && ( + {showNodeInfo && transformNodesErrorMessage !== null && ( = (props) => { - const { children, isServerless } = props; +export const EnabledFeaturesContextProvider: FC<{ enabledFeatures: TransformEnabledFeatures }> = ( + props +) => { + const { children, enabledFeatures } = props; return ( - {children} + + {children} + ); }; -export function useIsServerless() { - const context = useContext(ServerlessContext); +export function useEnabledFeatures() { + const context = useContext(EnabledFeaturesContext); return useMemo(() => { - return context.isServerless; + return context; }, [context]); } From d5441b61dcb160c1ebdc5225ff29fc0896e076ad Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Wed, 20 Sep 2023 11:17:49 -0500 Subject: [PATCH 2/4] Update naming to only showNodeInfo --- .../plugins/transform/public/app/mount_management_section.ts | 1 - .../components/step_define/step_define_form.tsx | 4 ++-- x-pack/plugins/transform/public/app/serverless_context.tsx | 2 -- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/transform/public/app/mount_management_section.ts b/x-pack/plugins/transform/public/app/mount_management_section.ts index 5101601ae8500..f00596e1326b4 100644 --- a/x-pack/plugins/transform/public/app/mount_management_section.ts +++ b/x-pack/plugins/transform/public/app/mount_management_section.ts @@ -96,7 +96,6 @@ export async function mountManagementSection( const enabledFeatures: TransformEnabledFeatures = { showNodeInfo: !isServerless, - showFrozenDataTierChoice: !isServerless, }; const unmountAppCallback = renderApp(element, appDependencies, enabledFeatures); diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx index fe32366e15b74..e9326ae195015 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/step_define_form.tsx @@ -113,7 +113,7 @@ export const StepDefineForm: FC = React.memo((props) => { ); const toastNotifications = useToastNotifications(); const stepDefineForm = useStepDefineForm(props); - const { showFrozenDataTierChoice } = useEnabledFeatures(); + const { showNodeInfo } = useEnabledFeatures(); const { advancedEditorConfig } = stepDefineForm.advancedPivotEditor.state; const { @@ -355,7 +355,7 @@ export const StepDefineForm: FC = React.memo((props) => { query={undefined} disabled={false} timefilter={timefilter} - hideFrozenDataTierChoice={!showFrozenDataTierChoice} + hideFrozenDataTierChoice={!showNodeInfo} /> diff --git a/x-pack/plugins/transform/public/app/serverless_context.tsx b/x-pack/plugins/transform/public/app/serverless_context.tsx index 769aba3e268ca..5cfbcf6c91b06 100644 --- a/x-pack/plugins/transform/public/app/serverless_context.tsx +++ b/x-pack/plugins/transform/public/app/serverless_context.tsx @@ -9,11 +9,9 @@ import React, { createContext, FC, useContext, useMemo } from 'react'; export interface TransformEnabledFeatures { showNodeInfo: boolean; - showFrozenDataTierChoice: boolean; } export const EnabledFeaturesContext = createContext({ showNodeInfo: true, - showFrozenDataTierChoice: true, }); export const EnabledFeaturesContextProvider: FC<{ enabledFeatures: TransformEnabledFeatures }> = ( From 3f607c25cdb5ffc7d90379c661d8d7f13aa36f85 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Mon, 25 Sep 2023 13:05:42 -0500 Subject: [PATCH 3/4] Fix type --- .../components/transform_list/expanded_row.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 391b33edff1cd..dbfd6ba377ecf 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 @@ -85,7 +85,7 @@ const NoStatsFallbackTabContent = ({ ); }; -export const ExpandedRow: FC = ({ item, onAlertEdit }) => { +export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoading }) => { const { showNodeInfo } = useEnabledFeatures(); const stateItems: Item[] = []; From 9a630d4f6c44d6bc3aea5019d120d57d1f470569 Mon Sep 17 00:00:00 2001 From: Quynh Nguyen Date: Mon, 25 Sep 2023 13:49:11 -0500 Subject: [PATCH 4/4] Update type --- .../transform_list/expanded_row.tsx | 408 +++++++++--------- .../transform_management_section.tsx | 2 +- 2 files changed, 203 insertions(+), 207 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 dbfd6ba377ecf..079b3f72b59bd 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 @@ -5,18 +5,18 @@ * 2.0. */ -import React, { FC, useMemo } from 'react'; -import { css } from '@emotion/react'; +import React, { useMemo, type FC } from 'react'; import moment from 'moment-timezone'; +import { css } from '@emotion/react'; import { EuiButtonEmpty, EuiLoadingSpinner, - EuiTabbedContent, EuiFlexGroup, useEuiTheme, EuiCallOut, EuiFlexItem, + EuiTabbedContent, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -140,6 +140,7 @@ export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoadi // eslint-disable-next-line react-hooks/exhaustive-deps }, [item?.config]); + const checkpointingItems: Item[] = []; if (isTransformListRowWithStats(item)) { stateItems.push({ title: 'state', @@ -158,234 +159,229 @@ export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoadi }); } - const state: SectionConfig = { - title: 'State', - items: stateItems, - position: 'right', - }; - - const general: SectionConfig = { - title: 'General', - items: configItems, - position: 'left', - }; + if (item.stats.checkpointing.changes_last_detected_at !== undefined) { + checkpointingItems.push({ + title: 'changes_last_detected_at', + description: formatHumanReadableDateTimeSeconds( + item.stats.checkpointing.changes_last_detected_at + ), + }); + } - const checkpointingItems: Item[] = []; - if (isTransformListRowWithStats(item)) { - if (item.stats.checkpointing.changes_last_detected_at !== undefined) { + if (item.stats.checkpointing.last !== undefined) { + checkpointingItems.push({ + title: 'last.checkpoint', + description: item.stats.checkpointing.last.checkpoint, + }); + if (item.stats.checkpointing.last.timestamp_millis !== undefined) { checkpointingItems.push({ - title: 'changes_last_detected_at', + title: 'last.timestamp', description: formatHumanReadableDateTimeSeconds( - item.stats.checkpointing.changes_last_detected_at + item.stats.checkpointing.last.timestamp_millis ), }); - } - - if (item.stats.checkpointing.last !== undefined) { checkpointingItems.push({ - title: 'last.checkpoint', - description: item.stats.checkpointing.last.checkpoint, + title: 'last.timestamp_millis', + description: item.stats.checkpointing.last.timestamp_millis, }); - if (item.stats.checkpointing.last.timestamp_millis !== undefined) { - checkpointingItems.push({ - title: 'last.timestamp', - description: formatHumanReadableDateTimeSeconds( - item.stats.checkpointing.last.timestamp_millis - ), - }); - checkpointingItems.push({ - title: 'last.timestamp_millis', - description: item.stats.checkpointing.last.timestamp_millis, - }); - } } + } - if (item.stats.checkpointing.last_search_time !== undefined) { + if (item.stats.checkpointing.last_search_time !== undefined) { + checkpointingItems.push({ + title: 'last_search_time', + description: formatHumanReadableDateTimeSeconds(item.stats.checkpointing.last_search_time), + }); + } + + if (item.stats.checkpointing.next !== undefined) { + checkpointingItems.push({ + title: 'next.checkpoint', + description: item.stats.checkpointing.next.checkpoint, + }); + if (item.stats.checkpointing.next.checkpoint_progress !== undefined) { checkpointingItems.push({ - title: 'last_search_time', - description: formatHumanReadableDateTimeSeconds( - item.stats.checkpointing.last_search_time - ), + title: 'next.checkpoint_progress.total_docs', + description: item.stats.checkpointing.next.checkpoint_progress.total_docs, }); - } - - if (item.stats.checkpointing.next !== undefined) { checkpointingItems.push({ - title: 'next.checkpoint', - description: item.stats.checkpointing.next.checkpoint, + title: 'next.checkpoint_progress.docs_remaining', + description: item.stats.checkpointing.next.checkpoint_progress.docs_remaining, }); - if (item.stats.checkpointing.next.checkpoint_progress !== undefined) { - checkpointingItems.push({ - title: 'next.checkpoint_progress.total_docs', - description: item.stats.checkpointing.next.checkpoint_progress.total_docs, - }); - checkpointingItems.push({ - title: 'next.checkpoint_progress.docs_remaining', - description: item.stats.checkpointing.next.checkpoint_progress.docs_remaining, - }); - checkpointingItems.push({ - title: 'next.checkpoint_progress.percent_complete', - description: item.stats.checkpointing.next.checkpoint_progress.percent_complete, - }); - } - } - - if (item.stats.checkpointing.operations_behind !== undefined) { checkpointingItems.push({ - title: 'operations_behind', - description: item.stats.checkpointing.operations_behind, + title: 'next.checkpoint_progress.percent_complete', + description: item.stats.checkpointing.next.checkpoint_progress.percent_complete, }); } } - const alertRuleItems: Item[] | undefined = item.alerting_rules?.map((rule) => { - return { - title: ( - { - onAlertEdit(rule); - }} - flush="left" - size={'xs'} - iconSize={'s'} - > - {rule.name} - - ), - description: rule.executionStatus.status, - }; - }); + if (item.stats.checkpointing.operations_behind !== undefined) { + checkpointingItems.push({ + title: 'operations_behind', + description: item.stats.checkpointing.operations_behind, + }); + } + } - const checkpointing: SectionConfig = { - title: 'Checkpointing', - items: checkpointingItems, - position: 'right', - }; + const state: SectionConfig = { + title: 'State', + items: stateItems, + position: 'right', + }; - const alertingRules: SectionConfig = { - title: i18n.translate('xpack.transform.transformList.transformDetails.alertRulesTitle', { - defaultMessage: 'Alert rules', - }), - items: alertRuleItems!, - position: 'right', - }; + const general: SectionConfig = { + title: 'General', + items: configItems, + position: 'left', + }; - const stats: SectionConfig = { - title: 'Stats', - items: isTransformListRowWithStats(item) - ? Object.entries(item.stats.stats).map((s) => { - return { title: s[0].toString(), description: getItemDescription(s[1]) }; - }) - : [], - position: 'left', + const alertRuleItems: Item[] | undefined = item.alerting_rules?.map((rule) => { + return { + title: ( + { + onAlertEdit(rule); + }} + flush="left" + size={'xs'} + iconSize={'s'} + > + {rule.name} + + ), + description: rule.executionStatus.status, }; + }); - const tabId = stringHash(item.id); + const checkpointing: SectionConfig = { + title: 'Checkpointing', + items: checkpointingItems, + position: 'right', + }; - const tabs = [ - { - id: `transform-details-tab-${tabId}`, - 'data-test-subj': 'transformDetailsTab', - name: i18n.translate( - 'xpack.transform.transformList.transformDetails.tabs.transformDetailsLabel', - { - defaultMessage: 'Details', - } - ), - content: ( - - ), - }, - { - id: `transform-stats-tab-${tabId}`, - 'data-test-subj': 'transformStatsTab', - name: i18n.translate( - 'xpack.transform.transformList.transformDetails.tabs.transformStatsLabel', - { - defaultMessage: 'Stats', - } - ), - content: isTransformListRowWithStats(item) ? ( - - ) : ( - - ), - }, - { - id: `transform-json-tab-${tabId}`, - 'data-test-subj': 'transformJsonTab', - name: 'JSON', - content: , - }, - ...(item.stats?.health - ? [ - { - id: `transform-health-tab-${tabId}`, - 'data-test-subj': 'transformHealthTab', - name: i18n.translate( - 'xpack.transform.transformList.transformDetails.tabs.transformHealthLabel', - { - defaultMessage: 'Health', - } - ), - content: , - }, - ] - : []), - { - id: `transform-messages-tab-${tabId}`, - 'data-test-subj': 'transformMessagesTab', - name: i18n.translate( - 'xpack.transform.transformList.transformDetails.tabs.transformMessagesLabel', - { - defaultMessage: 'Messages', - } - ), - content: , - }, - { - id: `transform-preview-tab-${tabId}`, - 'data-test-subj': 'transformPreviewTab', - name: i18n.translate( - 'xpack.transform.transformList.transformDetails.tabs.transformPreviewLabel', + const alertingRules: SectionConfig = { + title: i18n.translate('xpack.transform.transformList.transformDetails.alertRulesTitle', { + defaultMessage: 'Alert rules', + }), + items: alertRuleItems!, + position: 'right', + }; + + const stats: SectionConfig = { + title: 'Stats', + items: isTransformListRowWithStats(item) + ? Object.entries(item.stats.stats).map((s) => { + return { title: s[0].toString(), description: getItemDescription(s[1]) }; + }) + : [], + position: 'left', + }; + + const tabId = stringHash(item.id); + + const tabs = [ + { + id: `transform-details-tab-${tabId}`, + 'data-test-subj': 'transformDetailsTab', + name: i18n.translate( + 'xpack.transform.transformList.transformDetails.tabs.transformDetailsLabel', + { + defaultMessage: 'Details', + } + ), + content: ( + + ), + }, + { + id: `transform-stats-tab-${tabId}`, + 'data-test-subj': 'transformStatsTab', + name: i18n.translate( + 'xpack.transform.transformList.transformDetails.tabs.transformStatsLabel', + { + defaultMessage: 'Stats', + } + ), + content: isTransformListRowWithStats(item) ? ( + + ) : ( + + ), + }, + { + id: `transform-json-tab-${tabId}`, + 'data-test-subj': 'transformJsonTab', + name: 'JSON', + content: , + }, + ...(item.stats?.health + ? [ { - defaultMessage: 'Preview', - } - ), - content: , - }, - ]; + id: `transform-health-tab-${tabId}`, + 'data-test-subj': 'transformHealthTab', + name: i18n.translate( + 'xpack.transform.transformList.transformDetails.tabs.transformHealthLabel', + { + defaultMessage: 'Health', + } + ), + content: , + }, + ] + : []), + { + id: `transform-messages-tab-${tabId}`, + 'data-test-subj': 'transformMessagesTab', + name: i18n.translate( + 'xpack.transform.transformList.transformDetails.tabs.transformMessagesLabel', + { + defaultMessage: 'Messages', + } + ), + content: , + }, + { + id: `transform-preview-tab-${tabId}`, + 'data-test-subj': 'transformPreviewTab', + name: i18n.translate( + 'xpack.transform.transformList.transformDetails.tabs.transformPreviewLabel', + { + defaultMessage: 'Preview', + } + ), + content: , + }, + ]; - // Using `expand=false` here so the tabs themselves don't spread - // across the full width. The 100% width is used so the bottom line - // as well as the tab content spans across the full width, - // even if the tab content wouldn't extend to the full width. - return ( - {}} - expand={false} - css={css` - width: 100%; + // Using `expand=false` here so the tabs themselves don't spread + // across the full width. The 100% width is used so the bottom line + // as well as the tab content spans across the full width, + // even if the tab content wouldn't extend to the full width. + return ( + {}} + expand={false} + css={css` + width: 100%; - .euiTable { - background-color: transparent; - } - `} - data-test-subj="transformExpandedRowTabbedContent" - /> - ); - } + .euiTable { + background-color: transparent; + } + `} + data-test-subj="transformExpandedRowTabbedContent" + /> + ); }; diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx index 1833eb56cd8f6..7e1f2ccd3bc09 100644 --- a/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx +++ b/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx @@ -100,7 +100,7 @@ export const TransformManagement: FC = () => { error: transformsStatsErrorMessage, data: transformsStats, } = useGetTransformsStats({ - enabled: !transformNodesInitialLoading && (transformNodes > 0 || hideNodeInfo), + enabled: !transformNodesInitialLoading && transformNodes > 0, }); const transforms: TransformListRow[] = useMemo(() => {