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..f00596e1326b4 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,10 @@ export async function mountManagementSection( contentManagement, }; - const unmountAppCallback = renderApp(element, appDependencies, isServerless); + const enabledFeatures: TransformEnabledFeatures = { + showNodeInfo: !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..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 @@ -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 { showNodeInfo } = 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={!showNodeInfo} /> 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 c43e3d096f32b..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'; @@ -25,8 +25,8 @@ import { stringHash } from '@kbn/ml-string-hash'; import { isDefined } from '@kbn/ml-is-defined'; import { FormattedMessage } from '@kbn/i18n-react'; +import { useEnabledFeatures } from '../../../../serverless_context'; import { isTransformListRowWithStats } from '../../../../common/transform_list'; -import { useIsServerless } from '../../../../serverless_context'; import { TransformHealthAlertRule } from '../../../../../../common/types/alerting'; import { TransformListRow } from '../../../../common'; @@ -86,39 +86,13 @@ const NoStatsFallbackTabContent = ({ }; export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoading }) => { - const hideNodeInfo = useIsServerless(); + const { showNodeInfo } = useEnabledFeatures(); const stateItems: Item[] = []; stateItems.push({ title: 'ID', description: item.id, }); - if (isTransformListRowWithStats(item)) { - stateItems.push({ - title: 'state', - description: item.stats.state, - }); - - if (!hideNodeInfo && item.stats.node !== undefined) { - stateItems.push({ - title: 'node.name', - description: item.stats.node.name, - }); - } - if (item.stats.health !== undefined) { - stateItems.push({ - title: 'health', - description: , - }); - } - } - - const state: SectionConfig = { - title: 'State', - items: stateItems, - position: 'right', - }; - const configItems = useMemo(() => { const configs: Item[] = [ { @@ -166,14 +140,25 @@ export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoadi // eslint-disable-next-line react-hooks/exhaustive-deps }, [item?.config]); - const general: SectionConfig = { - title: 'General', - items: configItems, - position: 'left', - }; - const checkpointingItems: Item[] = []; if (isTransformListRowWithStats(item)) { + stateItems.push({ + title: 'state', + description: item.stats.state, + }); + if (showNodeInfo && item.stats.node !== undefined) { + stateItems.push({ + title: 'node.name', + description: item.stats.node.name, + }); + } + if (item.stats.health !== undefined) { + stateItems.push({ + title: 'health', + description: , + }); + } + if (item.stats.checkpointing.changes_last_detected_at !== undefined) { checkpointingItems.push({ title: 'changes_last_detected_at', @@ -238,6 +223,18 @@ 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', + }; + const alertRuleItems: Item[] | undefined = item.alerting_rules?.map((rule) => { return { title: ( @@ -274,7 +271,7 @@ export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoadi const stats: SectionConfig = { title: 'Stats', - items: item.stats + items: isTransformListRowWithStats(item) ? Object.entries(item.stats.stats).map((s) => { return { title: s[0].toString(), description: getItemDescription(s[1]) }; }) @@ -315,7 +312,7 @@ export const ExpandedRow: FC = ({ item, onAlertEdit, transformsStatsLoadi defaultMessage: 'Stats', } ), - content: item.stats ? ( + content: isTransformListRowWithStats(item) ? ( ) : ( 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 ea85f705e46ef..bf1e07a18f20f 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', @@ -125,19 +125,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(); @@ -92,7 +92,7 @@ export const TransformManagement: FC = () => { error: transformsErrorMessage, data: { transforms: transformsWithoutStats, transformIdsWithoutConfig }, } = useGetTransforms({ - enabled: !transformNodesInitialLoading && (transformNodes > 0 || hideNodeInfo), + enabled: !transformNodesInitialLoading && transformNodes > 0, }); const { @@ -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(() => { @@ -224,7 +224,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]); }