[ML] Hide Exclude frozen data tier option in Transforms creation page (#166622)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/packages/ml/date_picker/src/components/full_time_range_selector.tsx

@@ -98,6 +98,7 @@ export const FullTimeRangeSelector: FC<FullTimeRangeSelectorProps> = (props) =>
     apiPath,
     hideFrozenDataTierChoice = false,
   } = props;
+
   const {
     http,
     notifications: { toasts },

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 }) => (
   <Router history={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 = (
         <KibanaThemeProvider theme$={appDependencies.theme.theme$}>
           <KibanaContextProvider services={appDependencies}>
             <I18nContext>
-              <ServerlessContextProvider isServerless={isServerless}>
+              <EnabledFeaturesContextProvider enabledFeatures={enabledFeatures}>
                 <App history={appDependencies.history} />
-              </ServerlessContextProvider>
+              </EnabledFeaturesContextProvider>
             </I18nContext>
           </KibanaContextProvider>
         </KibanaThemeProvider>

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();

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<StepDefineFormProps> = 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<StepDefineFormProps> = React.memo((props) => {
                   query={undefined}
                   disabled={false}
                   timefilter={timefilter}
+                  hideFrozenDataTierChoice={!showNodeInfo}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>

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<Props> = ({ 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: <TransformHealthColoredDot healthStatus={item.stats.health.status} />,
-      });
-    }
-  }
-
-  const state: SectionConfig = {
-    title: 'State',
-    items: stateItems,
-    position: 'right',
-  };
-
   const configItems = useMemo(() => {
     const configs: Item[] = [
       {
@@ -166,14 +140,25 @@ export const ExpandedRow: FC<Props> = ({ 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: <TransformHealthColoredDot healthStatus={item.stats.health.status} />,
+      });
+    }
+
     if (item.stats.checkpointing.changes_last_detected_at !== undefined) {
       checkpointingItems.push({
         title: 'changes_last_detected_at',
@@ -238,6 +223,18 @@ export const ExpandedRow: FC<Props> = ({ 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<Props> = ({ 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<Props> = ({ item, onAlertEdit, transformsStatsLoadi
           defaultMessage: 'Stats',
         }
       ),
-      content: item.stats ? (
+      content: isTransformListRowWithStats(item) ? (
         <ExpandedRowDetailsPane sections={[stats]} dataTestSubj={'transformStatsTabContent'} />
       ) : (
         <NoStatsFallbackTabContent transformsStatsLoading={transformsStatsLoading} />

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<ExpandedRowMessagesPaneProps> = ({ 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<ExpandedRowMessagesPaneProps> = ({ tran
       render: (timestamp: number) => formatDate(timestamp, TIME_FORMAT),
       sortable: true,
     },
-    ...(!hideNodeInfo
+    ...(showNodeInfo
       ? [
           {
             field: 'node_name',
@@ -121,7 +121,7 @@ export const ExpandedRowMessagesPane: FC<ExpandedRowMessagesPaneProps> = ({ tran
           defaultMessage: 'Message',
         }
       ),
-      width: !hideNodeInfo ? '50%' : '70%',
+      width: showNodeInfo ? '50%' : '70%',
     },
   ];
 

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<TransformStatsBarProps> = ({
   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 && (
         <>
           <EuiCallOut
             title={

x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx

@@ -24,7 +24,7 @@ import type { IHttpFetchError } from '@kbn/core-http-browser';
 import type { TransformListRow } from '../../common';
 import { isTransformStats } from '../../../../common/types/transform_stats';
 import { useGetTransformsStats } from '../../hooks/use_get_transform_stats';
-import { useIsServerless } from '../../serverless_context';
+import { useEnabledFeatures } from '../../serverless_context';
 import { needsReauthorization } from '../../common/reauthorization_utils';
 import { TRANSFORM_STATE } from '../../../../common/constants';
 
@@ -75,7 +75,7 @@ const ErrorMessageCallout: FC<{
 
 export const TransformManagement: FC = () => {
   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 && (
               <ErrorMessageCallout
                 text={
                   <FormattedMessage

x-pack/plugins/transform/public/app/serverless_context.tsx

@@ -7,20 +7,27 @@
 
 import React, { createContext, FC, useContext, useMemo } from 'react';
 
-export const ServerlessContext = createContext({
-  isServerless: false,
+export interface TransformEnabledFeatures {
+  showNodeInfo: boolean;
+}
+export const EnabledFeaturesContext = createContext({
+  showNodeInfo: true,
 });
 
-export const ServerlessContextProvider: FC<{ isServerless: boolean }> = (props) => {
-  const { children, isServerless } = props;
+export const EnabledFeaturesContextProvider: FC<{ enabledFeatures: TransformEnabledFeatures }> = (
+  props
+) => {
+  const { children, enabledFeatures } = props;
   return (
-    <ServerlessContext.Provider value={{ isServerless }}>{children}</ServerlessContext.Provider>
+    <EnabledFeaturesContext.Provider value={enabledFeatures}>
+      {children}
+    </EnabledFeaturesContext.Provider>
   );
 };
 
-export function useIsServerless() {
-  const context = useContext(ServerlessContext);
+export function useEnabledFeatures() {
+  const context = useContext(EnabledFeaturesContext);
   return useMemo(() => {
-    return context.isServerless;
+    return context;
   }, [context]);
 }