[ML][UX]: Consistent Layout and UI Enhancements for ML Pages

x-pack/platform/packages/private/ml/date_picker/src/components/date_picker_wrapper.tsx

@@ -90,10 +90,6 @@ interface DatePickerWrapperProps {
   /**
    * Boolean flag to set use of flex group wrapper
    */
-  flexGroup?: boolean;
-  /**
-   * Boolean flag to disable the date picker
-   */
   isDisabled?: boolean;
   /**
    * Boolean flag to force change from 'Refresh' to 'Update' state
@@ -123,7 +119,6 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
     isLoading = false,
     showRefresh,
     width,
-    flexGroup = true,
     isDisabled = false,
     needsUpdate,
     onRefresh,
@@ -363,6 +358,8 @@ export const DatePickerWrapper: FC<DatePickerWrapperProps> = (props) => {
     </>
   );
 
+  const flexGroup = !isTimeRangeSelectorEnabled || isAutoRefreshOnly === true;
+
   const wrapped = flexGroup ? (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       {flexItems}

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

@@ -220,7 +220,7 @@ export const FullTimeRangeSelector: FC<FullTimeRangeSelectorProps> = (props) =>
   }, [frozenDataPreference, showFrozenDataTierChoice]);
 
   return (
-    <EuiFlexGroup responsive={false} gutterSize="xs">
+    <EuiFlexGroup responsive={false} gutterSize="s">
       <EuiToolTip content={buttonTooltip}>
         <EuiButton
           isDisabled={disabled}

x-pack/platform/plugins/private/data_visualizer/public/application/data_drift/data_drift_page.tsx

@@ -115,7 +115,6 @@ export const PageHeader: FC<PageHeaderProps> = ({ onRefresh, needsUpdate }) => {
           isAutoRefreshOnly={!hasValidTimeField}
           showRefresh={!hasValidTimeField}
           width="full"
-          flexGroup={!hasValidTimeField}
           onRefresh={onRefresh}
           needsUpdate={needsUpdate}
         />,

x-pack/platform/plugins/private/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx

@@ -20,7 +20,6 @@ import {
   EuiPanel,
   EuiProgress,
   EuiSpacer,
-  EuiTitle,
 } from '@elastic/eui';
 
 import { type Filter, FilterStateStore, type Query, buildEsQuery } from '@kbn/es-query';
@@ -37,7 +36,6 @@ import { useStorage } from '@kbn/ml-local-storage';
 import type { SavedSearch } from '@kbn/saved-search-plugin/public';
 import { SEARCH_QUERY_LANGUAGE, type SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { kbnTypeToSupportedType } from '../../../common/util/field_types_utils';
-import { useCurrentEuiTheme } from '../../../common/hooks/use_current_eui_theme';
 import {
   DV_FROZEN_TIER_PREFERENCE,
   DV_RANDOM_SAMPLER_PREFERENCE,
@@ -108,8 +106,6 @@ export interface IndexDataVisualizerViewProps {
 }
 
 export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVisualizerProps) => {
-  const euiTheme = useCurrentEuiTheme();
-
   const [savedRandomSamplerPreference, saveRandomSamplerPreference] = useStorage<
     DVKey,
     DVStorageMapped<typeof DV_RANDOM_SAMPLER_PREFERENCE>
@@ -515,49 +511,40 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
       paddingSize="none"
     >
       <EuiPageTemplate.Section>
-        <EuiPageTemplate.Header data-test-subj="dataVisualizerPageHeader" css={dvPageHeader}>
-          <EuiFlexGroup
-            data-test-subj="dataViewTitleHeader"
-            direction="row"
-            alignItems="center"
-            css={{ padding: `${euiTheme.euiSizeS} 0`, marginRight: `${euiTheme.euiSize}` }}
-          >
-            <EuiTitle size={'s'}>
-              <h2>{currentDataView.getName()}</h2>
-            </EuiTitle>
-            <DataVisualizerDataViewManagement currentDataView={currentDataView} />
-          </EuiFlexGroup>
-
-          {isWithinLargeBreakpoint ? <EuiSpacer size="m" /> : null}
-          <EuiFlexGroup
-            alignItems="center"
-            justifyContent="flexEnd"
-            gutterSize="s"
-            data-test-subj="dataVisualizerTimeRangeSelectorSection"
-          >
-            {hasValidTimeField ? (
-              <EuiFlexItem grow={false}>
-                <FullTimeRangeSelector
-                  frozenDataPreference={frozenDataPreference}
-                  setFrozenDataPreference={setFrozenDataPreference}
-                  dataView={currentDataView}
-                  query={undefined}
-                  disabled={false}
-                  timefilter={timefilter}
-                />
-              </EuiFlexItem>
-            ) : null}
-            <EuiFlexItem grow={false}>
-              <DatePickerWrapper
-                isAutoRefreshOnly={!hasValidTimeField}
-                showRefresh={!hasValidTimeField}
-                width="full"
-                needsUpdate={queryNeedsUpdate}
-                onRefresh={handleRefresh}
+        <EuiPageTemplate.Header
+          data-test-subj="dataVisualizerPageHeader"
+          css={dvPageHeader}
+          pageTitle={
+            <>
+              {currentDataView.getName()}
+              {/* TODO: This management section shouldn't live inside the header */}
+              <DataVisualizerDataViewManagement currentDataView={currentDataView} />
+            </>
+          }
+          rightSideGroupProps={{
+            gutterSize: 's',
+            'data-test-subj': 'dataComparisonTimeRangeSelectorSection',
+          }}
+          rightSideItems={[
+            <DatePickerWrapper
+              isAutoRefreshOnly={!hasValidTimeField}
+              showRefresh={!hasValidTimeField}
+              width="full"
+              needsUpdate={queryNeedsUpdate}
+              onRefresh={handleRefresh}
+            />,
+            hasValidTimeField && (
+              <FullTimeRangeSelector
+                frozenDataPreference={frozenDataPreference}
+                setFrozenDataPreference={setFrozenDataPreference}
+                dataView={currentDataView}
+                query={undefined}
+                disabled={false}
+                timefilter={timefilter}
               />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPageTemplate.Header>
+            ),
+          ]}
+        />
         <EuiSpacer size="m" />
 
         <EuiFlexGroup gutterSize="m" direction={isWithinLargeBreakpoint ? 'column' : 'row'}>

x-pack/platform/plugins/shared/aiops/public/cases/constants.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+/**
+ * Titles for the cases toast messages
+ */
+export const TITLES = {
+  CHANGE_POINT_DETECTION: 'Change point detection',
+  LOG_RATE_ANALYSIS: 'Log rate analysis',
+  PATTERN_ANALYSIS: 'Log pattern analysis',
+};

x-pack/platform/plugins/shared/aiops/public/components/change_point_detection/fields_config.tsx

@@ -56,6 +56,7 @@ import {
 import { useChangePointResults } from './use_change_point_agg_request';
 import { useSplitFieldCardinality } from './use_split_field_cardinality';
 import { ViewTypeSelector } from './view_type_selector';
+import { TITLES } from '../../cases/constants';
 
 const selectControlCss = { width: '350px' };
 
@@ -215,7 +216,10 @@ const FieldPanel: FC<FieldPanelProps> = ({
     progress,
   } = useChangePointResults(fieldConfig, requestParams, combinedQuery, splitFieldCardinality);
 
-  const openCasesModalCallback = useCasesModal(EMBEDDABLE_CHANGE_POINT_CHART_TYPE);
+  const openCasesModalCallback = useCasesModal(
+    EMBEDDABLE_CHANGE_POINT_CHART_TYPE,
+    TITLES.CHANGE_POINT_DETECTION
+  );
 
   const selectedPartitions = useMemo(() => {
     return (selectedChangePoints[panelIndex] ?? []).map((v) => v.group?.value as string);
@@ -513,42 +517,37 @@ const FieldPanel: FC<FieldPanelProps> = ({
 
   return (
     <EuiPanel paddingSize="s" hasBorder hasShadow={false} data-test-subj={dataTestSubj}>
-      <EuiFlexGroup alignItems={'center'} justifyContent={'spaceBetween'} gutterSize={'s'}>
+      <EuiFlexGroup alignItems={'flexStart'} justifyContent={'spaceBetween'} gutterSize={'s'}>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup alignItems={'center'} gutterSize={'s'}>
-            <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                data-test-subj="aiopsChangePointDetectionExpandConfigButton"
-                iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
-                onClick={setIsExpanded.bind(null, (prevState) => !prevState)}
-                aria-label={i18n.translate('xpack.aiops.changePointDetection.expandConfigLabel', {
-                  defaultMessage: 'Expand configuration',
-                })}
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <FieldsControls fieldConfig={fieldConfig} onChange={onChange}>
-                <EuiFlexItem
-                  css={{ visibility: progress === null ? 'hidden' : 'visible' }}
-                  grow={true}
-                >
-                  <EuiProgress
-                    label={
-                      <FormattedMessage
-                        id="xpack.aiops.changePointDetection.progressBarLabel"
-                        defaultMessage="Fetching change points"
-                      />
-                    }
-                    value={progress ?? 0}
-                    max={100}
-                    valueText
-                    size="m"
+          <EuiButtonIcon
+            data-test-subj="aiopsChangePointDetectionExpandConfigButton"
+            iconType={isExpanded ? 'arrowDown' : 'arrowRight'}
+            onClick={setIsExpanded.bind(null, (prevState) => !prevState)}
+            aria-label={i18n.translate('xpack.aiops.changePointDetection.expandConfigLabel', {
+              defaultMessage: 'Expand configuration',
+            })}
+            size="s"
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <FieldsControls fieldConfig={fieldConfig} onChange={onChange} data-test-subj="blablabla">
+            <EuiFlexItem {...(progress === null && { css: { display: 'none' } })} grow={true}>
+              <EuiProgress
+                label={
+                  <FormattedMessage
+                    id="xpack.aiops.changePointDetection.progressBarLabel"
+                    defaultMessage="Fetching change points"
                   />
-                  <EuiSpacer size="s" />
-                </EuiFlexItem>
-              </FieldsControls>
+                }
+                value={progress ?? 0}
+                max={100}
+                valueText
+                size="m"
+              />
+              <EuiSpacer size="s" />
             </EuiFlexItem>
-          </EuiFlexGroup>
+          </FieldsControls>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
@@ -565,8 +564,11 @@ const FieldPanel: FC<FieldPanelProps> = ({
                         defaultMessage: 'Context menu',
                       }
                     )}
-                    iconType="boxesHorizontal"
                     color="text"
+                    display="base"
+                    size="s"
+                    isSelected={isActionMenuOpen}
+                    iconType="boxesHorizontal"
                     onClick={setIsActionMenuOpen.bind(null, !isActionMenuOpen)}
                   />
                 }
@@ -679,7 +681,7 @@ export const FieldsControls: FC<PropsWithChildren<FieldsControlsProps>> = ({
       }
       theme={theme}
     >
-      <EuiFlexGroup alignItems={'center'} responsive={true} wrap={true} gutterSize={'m'}>
+      <EuiFlexGroup alignItems={'center'} responsive={true} wrap={true} gutterSize={'s'}>
         <EuiFlexItem grow={false} css={{ width: '200px' }}>
           <FunctionPicker value={fieldConfig.fn} onChange={(v) => onChangeFn('fn', v)} />
         </EuiFlexItem>

x-pack/platform/plugins/shared/aiops/public/components/log_categorization/attachments_menu.tsx

@@ -34,6 +34,7 @@ import type { PatternAnalysisEmbeddableState } from '../../embeddables/pattern_a
 import type { RandomSamplerOption, RandomSamplerProbability } from './sampling_menu/random_sampler';
 import { useCasesModal } from '../../hooks/use_cases_modal';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
+import { TITLES } from '../../cases/constants';
 
 const SavedObjectSaveModalDashboard = withSuspense(LazySavedObjectSaveModalDashboard);
 
@@ -66,7 +67,10 @@ export const AttachmentsMenu = ({
     update: false,
   };
 
-  const openCasesModalCallback = useCasesModal(EMBEDDABLE_PATTERN_ANALYSIS_TYPE);
+  const openCasesModalCallback = useCasesModal(
+    EMBEDDABLE_PATTERN_ANALYSIS_TYPE,
+    TITLES.PATTERN_ANALYSIS
+  );
 
   const timeRange = useTimeRangeUpdates();
 
@@ -218,8 +222,11 @@ export const AttachmentsMenu = ({
                     defaultMessage: 'Attachments',
                   }
                 )}
-                iconType="boxesHorizontal"
+                size="m"
                 color="text"
+                display="base"
+                isSelected={isActionMenuOpen}
+                iconType="boxesHorizontal"
                 onClick={() => setIsActionMenuOpen(!isActionMenuOpen)}
               />
             }