[ML] Fix partition value selection on the Single Metric Viewer (#81585)…

… (#81599) * [ML] remove tooltip wrapper for partition value control * [ML] add spacer
elastic · Oct 26, 2020 · da05392 · da05392
1 parent 49928b3
commit da05392
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 31 deletions.
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss
@@ -24,10 +24,6 @@
     }
   }
 
-  .single-metric-request-callout {
-    margin: 0 $euiSize;
-  }
-
   .results-container {
     .panel-title {
       font-size: $euiFontSizeM;

diff --git a/...ins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx b/...ins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
@@ -9,13 +9,7 @@ import React, { Component } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-import {
-  EuiComboBox,
-  EuiComboBoxOptionOption,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiToolTip,
-} from '@elastic/eui';
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
 export interface Entity {
   fieldName: string;
@@ -156,9 +150,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     return (
       <EuiFlexItem grow={false}>
         <EuiFormRow label={entity.fieldName} helpText={forceSelection ? selectMessage : null}>
-          <EuiToolTip position="right" content={forceSelection ? selectMessage : null}>
-            {control}
-          </EuiToolTip>
+          {control}
         </EuiFormRow>
       </EuiFlexItem>
     );

diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -1133,23 +1133,25 @@ export class TimeSeriesExplorer extends React.Component {
     return (
       <TimeSeriesExplorerPage dateFormatTz={dateFormatTz} resizeRef={this.resizeRef}>
         {fieldNamesWithEmptyValues.length > 0 && (
-          <EuiCallOut
-            className="single-metric-request-callout"
-            title={
-              <FormattedMessage
-                id="xpack.ml.timeSeriesExplorer.singleMetricRequiredMessage"
-                defaultMessage="To view a single metric you must select {missingValuesCount, plural, one {a value for {fieldName1}} other {values for {fieldName1} and {fieldName2}}}"
-                values={{
-                  missingValuesCount: fieldNamesWithEmptyValues.length,
-                  fieldName1: fieldNamesWithEmptyValues[0],
-                  fieldName2: fieldNamesWithEmptyValues[1],
-                }}
-              />
-            }
-            color="warning"
-            iconType="help"
-            size="s"
-          />
+          <>
+            <EuiCallOut
+              title={
+                <FormattedMessage
+                  id="xpack.ml.timeSeriesExplorer.singleMetricRequiredMessage"
+                  defaultMessage="To view a single metric you must select {missingValuesCount, plural, one {a value for {fieldName1}} other {values for {fieldName1} and {fieldName2}}}"
+                  values={{
+                    missingValuesCount: fieldNamesWithEmptyValues.length,
+                    fieldName1: fieldNamesWithEmptyValues[0],
+                    fieldName2: fieldNamesWithEmptyValues[1],
+                  }}
+                />
+              }
+              color="warning"
+              iconType="help"
+              size="s"
+            />
+            <EuiSpacer size="m" />
+          </>
         )}
 
         <div className="series-controls" data-test-subj="mlSingleMetricViewerSeriesControls">