Change orientation of the ML setup form (#108339)

Co-authored-by: Alejandro Fernández Gómez <alejandro.fernandez@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_indices_form.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
+import { EuiTitle, EuiText, EuiFormRow, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback } from 'react';
@@ -54,44 +54,47 @@ export const AnalysisSetupIndicesForm: React.FunctionComponent<{
   const isInvalid = validationErrors.length > 0;
 
   return (
-    <EuiDescribedFormGroup
-      title={
-        <h3>
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem>
+        <EuiTitle size="xs">
+          <h3>
+            <FormattedMessage
+              id="xpack.infra.analysisSetup.indicesSelectionTitle"
+              defaultMessage="Choose indices"
+            />
+          </h3>
+        </EuiTitle>
+        <EuiText size="s" color="subdued">
           <FormattedMessage
-            id="xpack.infra.analysisSetup.indicesSelectionTitle"
-            defaultMessage="Choose indices"
+            id="xpack.infra.analysisSetup.indicesSelectionDescription"
+            defaultMessage="By default, Machine Learning analyzes log messages in all log indices configured for the source. You can choose to only analyze a subset of the index names. Every selected index name must match at least one index with log entries. You can also choose to only include a certain subset of datasets. Note that the dataset filter applies to all selected indices."
           />
-        </h3>
-      }
-      description={
-        <FormattedMessage
-          id="xpack.infra.analysisSetup.indicesSelectionDescription"
-          defaultMessage="By default, Machine Learning analyzes log messages in all log indices configured for the source. You can choose to only analyze a subset of the index names. Every selected index name must match at least one index with log entries. You can also choose to only include a certain subset of datasets. Note that the dataset filter applies to all selected indices."
-        />
-      }
-    >
-      <LoadingOverlayWrapper isLoading={isValidating}>
-        <EuiFormRow
-          fullWidth
-          isInvalid={isInvalid}
-          label={indicesSelectionLabel}
-          labelType="legend"
-        >
-          <>
-            {indices.map((index) => (
-              <IndexSetupRow
-                index={index}
-                isDisabled={disabled}
-                key={index.name}
-                onChangeIsSelected={changeIsIndexSelected}
-                onChangeDatasetFilter={changeDatasetFilter}
-                previousQualityWarnings={previousQualityWarnings}
-              />
-            ))}
-          </>
-        </EuiFormRow>
-      </LoadingOverlayWrapper>
-    </EuiDescribedFormGroup>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <LoadingOverlayWrapper isLoading={isValidating}>
+          <EuiFormRow
+            fullWidth
+            isInvalid={isInvalid}
+            label={indicesSelectionLabel}
+            labelType="legend"
+          >
+            <>
+              {indices.map((index) => (
+                <IndexSetupRow
+                  index={index}
+                  isDisabled={disabled}
+                  key={index.name}
+                  onChangeIsSelected={changeIsIndexSelected}
+                  onChangeDatasetFilter={changeDatasetFilter}
+                  previousQualityWarnings={previousQualityWarnings}
+                />
+              ))}
+            </>
+          </EuiFormRow>
+        </LoadingOverlayWrapper>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/analysis_setup_timerange_form.tsx

@@ -6,8 +6,10 @@
  */
 
 import {
-  EuiDescribedFormGroup,
+  EuiTitle,
+  EuiText,
   EuiFlexGroup,
+  EuiFlexItem,
   EuiFormControlLayout,
   EuiFormRow,
 } from '@elastic/eui';
@@ -80,70 +82,75 @@ export const AnalysisSetupTimerangeForm: React.FunctionComponent<{
   );
 
   return (
-    <EuiDescribedFormGroup
-      title={
-        <h3>
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem>
+        <EuiTitle size="xs">
+          <h3>
+            <FormattedMessage
+              id="xpack.infra.analysisSetup.timeRangeTitle"
+              defaultMessage="Choose a time range"
+            />
+          </h3>
+        </EuiTitle>
+        <EuiText size="s" color="subdued">
           <FormattedMessage
-            id="xpack.infra.analysisSetup.timeRangeTitle"
-            defaultMessage="Choose a time range"
+            id="xpack.infra.analysisSetup.timeRangeDescription"
+            defaultMessage="By default, Machine Learning analyzes log messages in your log indices no older than four weeks, and continues indefinitely. You can specify a different date to begin, to end, or both."
           />
-        </h3>
-      }
-      description={
-        <FormattedMessage
-          id="xpack.infra.analysisSetup.timeRangeDescription"
-          defaultMessage="By default, Machine Learning analyzes log messages in your log indices no older than four weeks, and continues indefinitely. You can specify a different date to begin, to end, or both."
-        />
-      }
-    >
-      <EuiFormRow
-        error={startTimeValidationErrorMessages}
-        fullWidth
-        isInvalid={startTimeValidationErrorMessages.length > 0}
-        label={startTimeLabel}
-      >
-        <EuiFlexGroup gutterSize="s">
-          <EuiFormControlLayout
-            clear={startTime && !disabled ? { onClick: () => setStartTime(undefined) } : undefined}
-            isDisabled={disabled}
-          >
-            <FixedDatePicker
-              disabled={disabled}
-              showTimeSelect
-              selected={startTimeValue}
-              onChange={(date) => setStartTime(selectedDateToParam(date))}
-              placeholder={startTimeDefaultDescription}
-              maxDate={now}
-            />
-          </EuiFormControlLayout>
-        </EuiFlexGroup>
-      </EuiFormRow>
-      <EuiFormRow
-        error={endTimeValidationErrorMessages}
-        fullWidth
-        isInvalid={endTimeValidationErrorMessages.length > 0}
-        label={endTimeLabel}
-      >
-        <EuiFlexGroup gutterSize="s">
-          <EuiFormControlLayout
-            clear={endTime && !disabled ? { onClick: () => setEndTime(undefined) } : undefined}
-            isDisabled={disabled}
-          >
-            <FixedDatePicker
-              disabled={disabled}
-              showTimeSelect
-              selected={endTimeValue}
-              onChange={(date) => setEndTime(selectedDateToParam(date))}
-              placeholder={endTimeDefaultDescription}
-              openToDate={now}
-              minDate={startTimeValue}
-              minTime={selectedEndTimeIsToday ? now : moment().hour(0).minutes(0)}
-              maxTime={moment().hour(23).minutes(59)}
-            />
-          </EuiFormControlLayout>
-        </EuiFlexGroup>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFormRow
+          error={startTimeValidationErrorMessages}
+          fullWidth
+          isInvalid={startTimeValidationErrorMessages.length > 0}
+          label={startTimeLabel}
+        >
+          <EuiFlexGroup gutterSize="s">
+            <EuiFormControlLayout
+              clear={
+                startTime && !disabled ? { onClick: () => setStartTime(undefined) } : undefined
+              }
+              isDisabled={disabled}
+            >
+              <FixedDatePicker
+                disabled={disabled}
+                showTimeSelect
+                selected={startTimeValue}
+                onChange={(date) => setStartTime(selectedDateToParam(date))}
+                placeholder={startTimeDefaultDescription}
+                maxDate={now}
+              />
+            </EuiFormControlLayout>
+          </EuiFlexGroup>
+        </EuiFormRow>
+        <EuiFormRow
+          error={endTimeValidationErrorMessages}
+          fullWidth
+          isInvalid={endTimeValidationErrorMessages.length > 0}
+          label={endTimeLabel}
+        >
+          <EuiFlexGroup gutterSize="s">
+            <EuiFormControlLayout
+              clear={endTime && !disabled ? { onClick: () => setEndTime(undefined) } : undefined}
+              isDisabled={disabled}
+            >
+              <FixedDatePicker
+                disabled={disabled}
+                showTimeSelect
+                selected={endTimeValue}
+                onChange={(date) => setEndTime(selectedDateToParam(date))}
+                placeholder={endTimeDefaultDescription}
+                openToDate={now}
+                minDate={startTimeValue}
+                minTime={selectedEndTimeIsToday ? now : moment().hour(0).minutes(0)}
+                maxTime={moment().hour(23).minutes(59)}
+              />
+            </EuiFormControlLayout>
+          </EuiFlexGroup>
+        </EuiFormRow>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
 

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_dataset_filter.tsx

@@ -60,7 +60,13 @@ export const IndexSetupDatasetFilter: React.FC<{
   );
 
   const datasetFilterButton = (
-    <EuiFilterButton disabled={isDisabled} isSelected={isVisible} onClick={show}>
+    <EuiFilterButton
+      disabled={isDisabled}
+      isSelected={isVisible}
+      onClick={show}
+      iconType="arrowDown"
+      size="s"
+    >
       <FormattedMessage
         id="xpack.infra.analysisSetup.indexDatasetFilterIncludeAllButtonLabel"
         defaultMessage="{includeType, select, includeAll {All datasets} includeSome {{includedDatasetCount, plural, one {# dataset} other {# datasets}}}}"

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/index_setup_row.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiCheckbox, EuiCode, EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
+import { EuiCheckbox, EuiCode, EuiIconTip, EuiSpacer, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback, useMemo } from 'react';
 import { DatasetFilter, QualityWarning } from '../../../../../common/log_analysis';
@@ -63,36 +63,36 @@ export const IndexSetupRow: React.FC<{
   const isSelected = index.validity === 'valid' && index.isSelected;
 
   return (
-    <EuiFlexGroup alignItems="center">
-      <EuiFlexItem>
-        <EuiCheckbox
-          key={index.name}
-          id={index.name}
-          label={
-            <>
-              <EuiCode>{index.name}</EuiCode>{' '}
-              {index.validity === 'valid' && hasWarnings ? (
-                <EuiIconTip
-                  content={
-                    <FormattedMessage
-                      id="xpack.infra.logs.analsysisSetup.indexQualityWarningTooltipMessage"
-                      defaultMessage="While analyzing the log messages from these indices we've detected some problems which might indicate a reduced quality of the results. Consider excluding these indices or problematic datasets from the analysis."
-                    />
-                  }
-                  type="alert"
-                  color="warning"
-                />
-              ) : null}
-            </>
-          }
-          onChange={changeIsSelected}
-          checked={isSelected}
-          disabled={isDisabled || index.validity === 'invalid'}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+    <>
+      <EuiCheckbox
+        key={index.name}
+        id={index.name}
+        label={
+          <>
+            {index.name}
+            {index.validity === 'valid' && hasWarnings ? (
+              <EuiIconTip
+                content={
+                  <FormattedMessage
+                    id="xpack.infra.logs.analsysisSetup.indexQualityWarningTooltipMessage"
+                    defaultMessage="While analyzing the log messages from these indices we've detected some problems which might indicate a reduced quality of the results. Consider excluding these indices or problematic datasets from the analysis."
+                  />
+                }
+                type="alert"
+                color="warning"
+              />
+            ) : null}
+          </>
+        }
+        onChange={changeIsSelected}
+        checked={isSelected}
+        disabled={isDisabled || index.validity === 'invalid'}
+      />
+      <>
         {index.validity === 'invalid' ? (
-          <EuiIconTip content={formatValidationError(index.errors)} type="alert" color="danger" />
+          <EuiText size="xs" color="textSubduedColor">
+            {formatValidationError(index.errors)}
+          </EuiText>
         ) : index.validity === 'valid' ? (
           <IndexSetupDatasetFilter
             availableDatasets={datasets}
@@ -101,8 +101,9 @@ export const IndexSetupRow: React.FC<{
             onChangeDatasetFilter={changeDatasetFilter}
           />
         ) : null}
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      </>
+      <EuiSpacer size="l" />
+    </>
   );
 };
 

x-pack/plugins/infra/public/components/logging/log_analysis_setup/initial_configuration_step/initial_configuration_step.tsx

@@ -63,7 +63,6 @@ export const InitialConfigurationStep: React.FunctionComponent<InitialConfigurat
 
   return (
     <>
-      <EuiSpacer size="m" />
       <EuiForm>
         <AnalysisSetupTimerangeForm
           disabled={disabled}
@@ -73,6 +72,7 @@ export const InitialConfigurationStep: React.FunctionComponent<InitialConfigurat
           endTime={endTime}
           validationErrors={timeRangeValidationErrors}
         />
+        <EuiSpacer size="xl" />
         <AnalysisSetupIndicesForm
           disabled={disabled}
           indices={validatedIndices}