[Monitoring] Sass cleanup

x-pack/legacy/plugins/monitoring/public/components/chart/_chart.scss

@@ -1,7 +1,7 @@
-@mixin monitoringNoUserSelect(){
+@mixin monitoringNoUserSelect {
   user-select: none;
-  -webkit-touch-callout: none;
-  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none; // sass-lint:disable-line no-vendor-prefixes
+  -webkit-tap-highlight-color: transparent; // sass-lint:disable-line no-vendor-prefixes
 }
 
 .monRhythmChart__wrapper .monRhythmChart__zoom {
@@ -12,7 +12,7 @@
 .monRhythmChart__wrapper:hover .monRhythmChart__zoom {
   visibility: visible;
 }
-  
+
 .monRhythmChart {
   position: relative;
   display: flex;
@@ -50,14 +50,17 @@
 
   // SASSTODO: generic selector
   div {
-    @include monitoringNoUserSelect();
+    @include monitoringNoUserSelect;
   }
 }
 
 .monRhythmChart__legendItem {
   font-size: $euiFontSizeXS;
   cursor: pointer;
   color: $euiTextColor;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
   &-isDisabled {
     opacity: 0.5;
@@ -71,7 +74,11 @@
 .monRhythmChart__legendLabel {
   overflow: hidden;
   white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
+
 .monRhythmChart__legendValue {
   overflow: hidden;
   white-space: nowrap;

x-pack/legacy/plugins/monitoring/public/components/chart/horizontal_legend.js

@@ -6,9 +6,7 @@
 
 import React from 'react';
 import { includes, isFunction } from 'lodash';
-import {
-  EuiKeyboardAccessible,
-} from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiKeyboardAccessible } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
@@ -23,11 +21,7 @@ export class HorizontalLegend extends React.Component {
    * @param {Number} value Final value to display
    */
   displayValue(value) {
-    return (
-      <span className="monRhythmChart__legendValue">
-        { value }
-      </span>
-    );
+    return <span className="monRhythmChart__legendValue">{value}</span>;
   }
 
   /**
@@ -44,10 +38,12 @@ export class HorizontalLegend extends React.Component {
    */
   formatter(value, row) {
     if (!this.validValue(value)) {
-      return (<FormattedMessage
-        id="xpack.monitoring.chart.horizontalLegend.notAvailableLabel"
-        defaultMessage="N/A"
-      />);
+      return (
+        <FormattedMessage
+          id="xpack.monitoring.chart.horizontalLegend.notAvailableLabel"
+          defaultMessage="N/A"
+        />
+      );
     }
 
     if (row && row.tickFormatter) {
@@ -61,38 +57,37 @@ export class HorizontalLegend extends React.Component {
   }
 
   createSeries(row, rowIdx) {
-    const classes = ['col-md-4 col-xs-6 monRhythmChart__legendItem'];
+    const classes = ['monRhythmChart__legendItem'];
 
     if (!includes(this.props.seriesFilter, row.id)) {
       classes.push('monRhythmChart__legendItem-isDisabled');
     }
     if (!row.label || row.legend === false) {
-      return (
-        <div
-          key={rowIdx}
-          style={{ display: 'none' }}
-        />
-      );
+      return <div key={rowIdx} style={{ display: 'none' }} />;
     }
 
     return (
       <EuiKeyboardAccessible key={rowIdx}>
-        <div
+        <EuiFlexItem
+          grow={false}
           className={classes.join(' ')}
           onClick={event => this.props.onToggle(event, row.id)}
         >
           <span className="monRhythmChart__legendLabel">
-            <span
-              className="fa fa-circle monRhythmChart__legendIndicator"
-              style={{ color: row.color }}
-              aria-label={i18n.translate('xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel', {
-                defaultMessage: 'toggle button'
-              })}
+            <EuiIcon
+              className="monRhythmChart__legendIndicator"
+              aria-label={i18n.translate(
+                'xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel',
+                { defaultMessage: 'toggle button' }
+              )}
+              size="l"
+              type="dot"
+              color={row.color}
             />
-            { ' ' + row.label + ' ' }
+            {' ' + row.label + ' '}
           </span>
-          { this.formatter(this.props.seriesValues[row.id], row) }
-        </div>
+          {this.formatter(this.props.seriesValues[row.id], row)}
+        </EuiFlexItem>
       </EuiKeyboardAccessible>
     );
   }
@@ -102,9 +97,9 @@ export class HorizontalLegend extends React.Component {
 
     return (
       <div className="monRhythmChart__legendHorizontal">
-        <div className="row monRhythmChart__legend-series">
-          { rows }
-        </div>
+        <EuiFlexGroup wrap={true} gutterSize="s" className="monRhythmChart__legend-series">
+          {rows}
+        </EuiFlexGroup>
       </div>
     );
   }

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/indices/indices.js

@@ -31,12 +31,9 @@ const columns = [
     field: 'name',
     width: '350px',
     sortable: true,
-    render: (value) => (
+    render: value => (
       <div data-test-subj="name">
-        <EuiLink
-          href={`#/elasticsearch/indices/${value}`}
-          data-test-subj={`indexLink-${value}`}
-        >
+        <EuiLink href={`#/elasticsearch/indices/${value}`} data-test-subj={`indexLink-${value}`}>
           {value}
         </EuiLink>
       </div>
@@ -48,12 +45,13 @@ const columns = [
     }),
     field: 'status',
     sortable: true,
-    render: (value) => (
-      <div title={`Index status: ${value}`}>
-        <ElasticsearchStatusIcon status={value} />&nbsp;
+    render: value => (
+      <div className="monStatusColumn" title={`Index status: ${value}`}>
+        <ElasticsearchStatusIcon status={value} />
+        &nbsp;
         {capitalize(value)}
       </div>
-    )
+    ),
   },
   {
     name: i18n.translate('xpack.monitoring.elasticsearch.indices.documentCountTitle', {
@@ -62,34 +60,24 @@ const columns = [
     field: 'doc_count',
     sortable: true,
     render: value => (
-      <div data-test-subj="documentCount">
-        {formatMetric(value, LARGE_ABBREVIATED)}
-      </div>
-    )
+      <div data-test-subj="documentCount">{formatMetric(value, LARGE_ABBREVIATED)}</div>
+    ),
   },
   {
     name: i18n.translate('xpack.monitoring.elasticsearch.indices.dataTitle', {
       defaultMessage: 'Data',
     }),
     field: 'data_size',
     sortable: true,
-    render: value => (
-      <div data-test-subj="dataSize">
-        {formatMetric(value, LARGE_BYTES)}
-      </div>
-    )
+    render: value => <div data-test-subj="dataSize">{formatMetric(value, LARGE_BYTES)}</div>,
   },
   {
     name: i18n.translate('xpack.monitoring.elasticsearch.indices.indexRateTitle', {
       defaultMessage: 'Index Rate',
     }),
     field: 'index_rate',
     sortable: true,
-    render: value => (
-      <div data-test-subj="indexRate">
-        {formatMetric(value, LARGE_FLOAT, '/s')}
-      </div>
-    )
+    render: value => <div data-test-subj="indexRate">{formatMetric(value, LARGE_FLOAT, '/s')}</div>,
   },
   {
     name: i18n.translate('xpack.monitoring.elasticsearch.indices.searchRateTitle', {
@@ -98,23 +86,17 @@ const columns = [
     field: 'search_rate',
     sortable: true,
     render: value => (
-      <div data-test-subj="searchRate">
-        {formatMetric(value, LARGE_FLOAT, '/s')}
-      </div>
-    )
+      <div data-test-subj="searchRate">{formatMetric(value, LARGE_FLOAT, '/s')}</div>
+    ),
   },
   {
     name: i18n.translate('xpack.monitoring.elasticsearch.indices.unassignedShardsTitle', {
       defaultMessage: 'Unassigned Shards',
     }),
     field: 'unassigned_shards',
     sortable: true,
-    render: value => (
-      <div data-test-subj="unassignedShards">
-        {formatMetric(value, '0')}
-      </div>
-    )
-  }
+    render: value => <div data-test-subj="unassignedShards">{formatMetric(value, '0')}</div>,
+  },
 ];
 
 const getNoDataMessage = () => {
@@ -154,16 +136,16 @@ export const ElasticsearchIndices = ({
         <EuiSpacer size="m" />
         <EuiPageContent>
           <EuiSwitch
-            label={(
+            label={
               <FormattedMessage
                 id="xpack.monitoring.elasticsearch.indices.systemIndicesLabel"
                 defaultMessage="System indices"
               />
-            )}
+            }
             checked={showSystemIndices}
             onChange={e => toggleShowSystemIndices(e.target.checked)}
           />
-          <EuiSpacer size="m"/>
+          <EuiSpacer size="m" />
           <EuiMonitoringTable
             className="elasticsearchIndicesTable"
             rows={indices}
@@ -174,14 +156,17 @@ export const ElasticsearchIndices = ({
             search={{
               box: {
                 incremental: true,
-                placeholder: i18n.translate('xpack.monitoring.elasticsearch.indices.monitoringTablePlaceholder', {
-                  defaultMessage: 'Filter Indices…'
-                })
+                placeholder: i18n.translate(
+                  'xpack.monitoring.elasticsearch.indices.monitoringTablePlaceholder',
+                  {
+                    defaultMessage: 'Filter Indices…',
+                  }
+                ),
               },
             }}
             onTableChange={onTableChange}
             executeQueryOptions={{
-              defaultFields: ['name']
+              defaultFields: ['name'],
             }}
           />
         </EuiPageContent>