[ML] Use EuiFlexGroup for Explorer Charts header.

elastic · Oct 3, 2018 · 829016e · 829016e
1 parent 89d0068
commit 829016e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 75 deletions.
diff --git a/...l/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/...l/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './styles/explorer_chart_label.less';
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -62,7 +60,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
         )}
       </span>
       {wrapLabel && (
-        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
+        <div>{entityFieldBadges}</div>
       )}
     </React.Fragment>
   );

diff --git a/...ic/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/...ic/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
@@ -16,7 +16,7 @@ import {
 export function ExplorerChartLabelBadge({ entity }) {
   return (
     <span className="ml-explorer-chart-label-badge">
-      <EuiBadge color="hollow">
+      <EuiBadge color="hollow" className="ml-reset-font-weight">
         {entity.fieldName} <strong>{entity.fieldValue}</strong>
       </EuiBadge>
     </span>

diff --git a/...explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/...explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
diff --git a/...er/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less b/...er/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
@@ -4,7 +4,6 @@
   Used in the Explorer Chart label badge to display an entity's
   field_name as `normal` and field_value as `strong`.
 */
-.ml-explorer-chart-label-badge {
+.ml-reset-font-weight {
   font-weight: normal;
-  vertical-align: middle;
 }
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
@@ -10,6 +10,7 @@ import React from 'react';
 import {
   EuiButtonEmpty,
   EuiFlexGrid,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiIconTip,
   EuiToolTip
@@ -54,40 +55,45 @@ function ExplorerChartContainer({
   } = series;
 
   return (
-    // Needs to be a div, Using React.Fragment would break the Flex Layout
-    <div>
-      <div className="ml-explorer-chart-icons">
-        {tooManyBuckets && (
-          <span className="ml-explorer-chart-icon">
-            <EuiIconTip
-              content={textTooManyBuckets}
+    <React.Fragment>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <ExplorerChartLabel
+            detectorLabel={detectorLabel}
+            entityFields={entityFields}
+            infoTooltip={series.infoTooltip}
+            wrapLabel={wrapLabel}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <div className="ml-explorer-chart-icons">
+            {tooManyBuckets && (
+              <span className="ml-explorer-chart-icon">
+                <EuiIconTip
+                  content={textTooManyBuckets}
+                  position="top"
+                  size="s"
+                  type="alert"
+                  color="warning"
+                />
+              </span>
+            )}
+            <EuiToolTip
               position="top"
-              size="s"
-              type="alert"
-              color="warning"
-            />
-          </span>
-        )}
-        <EuiToolTip
-          position="top"
-          content={textViewButton}
-        >
-          <EuiButtonEmpty
-            iconSide="right"
-            iconType="popout"
-            size="xs"
-            onClick={() => window.open(getExploreSeriesLink(series), '_blank')}
-          >
-            View
-          </EuiButtonEmpty>
-        </EuiToolTip>
-      </div>
-      <ExplorerChartLabel
-        detectorLabel={detectorLabel}
-        entityFields={entityFields}
-        infoTooltip={series.infoTooltip}
-        wrapLabel={wrapLabel}
-      />
+              content={textViewButton}
+            >
+              <EuiButtonEmpty
+                iconSide="right"
+                iconType="popout"
+                size="xs"
+                onClick={() => window.open(getExploreSeriesLink(series), '_blank')}
+              >
+                View
+              </EuiButtonEmpty>
+            </EuiToolTip>
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       {(() => {
         if (functionDescription === 'rare') {
           return (
@@ -98,7 +104,7 @@ function ExplorerChartContainer({
             />
           );
         }
-        if (functionDescription === 'count') {
+        if (functionDescription === 'count' && series.entityFields.find(f => f.fieldType === 'over')) {
           return (
             <ExplorerChartRare
               tooManyBuckets={tooManyBuckets}
@@ -115,7 +121,7 @@ function ExplorerChartContainer({
           />
         );
       })()}
-    </div>
+    </React.Fragment>
   );
 }
 

diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
@@ -104,7 +104,6 @@
 
 /* wrapper class for the top right alert icon and view button */
 .ml-explorer-chart-icons {
-  float:right;
   padding-left: 5px;
   /* counter-margin for EuiButtonEmpty's padding */
   margin: 2px -8px 0 0;