[ML] Removing scss override files for anomaly detection jobs

x-pack/plugins/ml/public/application/_index.scss

@@ -4,30 +4,18 @@
 // Protect the rest of Kibana from ML generic namespacing
 // SASSTODO: Prefix ml selectors instead
 .ml-app {
-  // App level
-  @import 'app';
-
   // Sub applications
   @import 'data_frame_analytics/index';
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
-  @import 'jobs/index'; // SASSTODO: This collection of sass files has multiple problems
-  @import 'overview/index';
   @import 'timeseriesexplorer/index';
 
   // Components
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/color_range_legend/index';
-  @import 'components/controls/index';
   @import 'components/entity_cell/index';
   @import 'components/influencers_list/index';
-  @import 'components/items_grid/index';
   @import 'components/job_selector/index';
-  @import 'components/loading_indicator/index'; // SASSTODO: This component should be replaced with EuiLoadingSpinner
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
-  @import 'components/stats_bar/index';
-  @import 'components/ml_embedded_map/index';
 
-  // Hacks are last so they can overwrite anything above if needed
-  @import 'hacks';
 }

x-pack/plugins/ml/public/application/components/anomalies_table/_anomalies_table.scss

@@ -1,45 +1,5 @@
 // SASSTODO: This file has several direct EUI overwrites that need to be removed
 .ml-anomalies-table {
-  .ml-icon-severity-critical,
-  .ml-icon-severity-major,
-  .ml-icon-severity-minor,
-  .ml-icon-severity-warning,
-  .ml-icon-severity-unknown {
-    color: inherit;
-    text-shadow: none;
-  }
-
-  // SASSTODO: Should only be three options, logic moved to the JS, where EuiIcon accepts a color
-  .ml-icon-severity-critical {
-    .euiIcon {
-      fill: $mlColorCriticalText;
-    }
-  }
-
-  .ml-icon-severity-major {
-    .euiIcon {
-      fill: $mlColorMajorText;
-    }
-  }
-
-  .ml-icon-severity-minor {
-    .euiIcon {
-      fill: $mlColorMinorText;
-    }
-  }
-
-  .ml-icon-severity-warning {
-    .euiIcon {
-      fill: $mlColorWarningText;
-    }
-  }
-
-  .ml-icon-severity-unknown {
-    .euiIcon {
-      fill: $mlColorUnknownText;
-    }
-  }
-
   tr th:first-child,
   tr td:first-child {
     width: $euiSizeXL;

x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx

@@ -137,7 +137,6 @@ export const JobMessages: FC<JobMessagesProps> = ({
     <>
       <EuiSpacer size="s" />
       <EuiInMemoryTable
-        className="job-messages-table"
         items={messages}
         columns={columns}
         sorting={defaultSorting}

x-pack/plugins/ml/public/application/components/loading_indicator/loading_indicator.tsx

@@ -7,23 +7,23 @@
 
 import React, { FC } from 'react';
 
-import { EuiLoadingChart, EuiSpacer } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiSpacer } from '@elastic/eui';
 
 export const LoadingIndicator: FC<{ height?: number; label?: string }> = ({ height, label }) => {
   height = height ? +height : 100;
   return (
-    <div
-      className="ml-loading-indicator"
-      style={{ height: `${height}px` }}
-      data-test-subj="mlLoadingIndicator"
-    >
-      <EuiLoadingChart size="xl" mono />
-      {label && (
-        <>
-          <EuiSpacer size="s" />
-          <div>{label}</div>
-        </>
-      )}
-    </div>
+    <EuiFlexGroup justifyContent="spaceEvenly">
+      <EuiFlexItem grow={false}>
+        <div style={{ height: `${height}px` }} data-test-subj="mlLoadingIndicator">
+          <EuiLoadingChart size="xl" mono />
+          {label && (
+            <>
+              <EuiSpacer size="s" />
+              <div>{label}</div>
+            </>
+          )}
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };

x-pack/plugins/ml/public/application/components/ml_embedded_map/ml_embedded_map.tsx

@@ -143,7 +143,14 @@ export function MlEmbeddedMapComponent({
   return (
     <div
       data-test-subj="mlEmbeddedMapContent"
-      className="mlEmbeddedMapContent"
+      css={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flex: '1 1 100%',
+        zIndex: 1,
+        minHeight: 0, // Absolute must for Firefox to scroll contents
+      }}
       ref={embeddableRoot}
     />
   );

x-pack/plugins/ml/public/application/components/stats_bar/stat.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { FC } from 'react';
+import { useEuiTheme } from '@elastic/eui';
 
 export interface StatsBarStat {
   label: string;
@@ -18,8 +19,9 @@ interface StatProps {
 }
 
 export const Stat: FC<StatProps> = ({ stat }) => {
+  const { euiTheme } = useEuiTheme();
   return (
-    <span className="stat">
+    <span css={{ marginRight: euiTheme.size.s }}>
       <span>{stat.label}</span>:{' '}
       <strong data-test-subj={stat['data-test-subj']}>{stat.value}</strong>
     </span>

x-pack/plugins/ml/public/application/components/stats_bar/stats_bar.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { FC } from 'react';
+import { useEuiTheme } from '@elastic/eui';
 import { Stat, StatsBarStat } from './stat';
 
 interface Stats {
@@ -37,9 +38,13 @@ interface StatsBarProps {
 }
 
 export const StatsBar: FC<StatsBarProps> = ({ stats, dataTestSub }) => {
+  const { euiTheme } = useEuiTheme();
   const statsList = Object.keys(stats).map((k) => stats[k as StatsKey]);
   return (
-    <div className="mlStatsBar" data-test-subj={dataTestSub}>
+    <div
+      css={{ padding: euiTheme.size.m, backgroundColor: euiTheme.colors.lightestShade }}
+      data-test-subj={dataTestSub}
+    >
       {statsList
         .filter((s: StatsBarStat) => s.show)
         .map((s: StatsBarStat) => (

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js

@@ -60,7 +60,7 @@ describe('ExplorerChart', () => {
     // the directive just ends up being empty.
     expect(wrapper.isEmptyRender()).toBeTruthy();
     expect(wrapper.find('.content-wrapper')).toHaveLength(0);
-    expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0);
+    expect(wrapper.find('.euiLoadingChart')).toHaveLength(0);
   });
 
   test('Loading status active, no chart', () => {
@@ -84,7 +84,7 @@ describe('ExplorerChart', () => {
 
     // test if the loading indicator is shown
     // Added span because class appears twice with classNames and Emotion
-    expect(wrapper.find('.ml-loading-indicator span.euiLoadingChart')).toHaveLength(1);
+    expect(wrapper.find('span.euiLoadingChart')).toHaveLength(1);
   });
 
   // For the following tests the directive needs to be rendered in the actual DOM,
@@ -121,7 +121,7 @@ describe('ExplorerChart', () => {
     const wrapper = init(mockChartData);
 
     // the loading indicator should not be shown
-    expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0);
+    expect(wrapper.find('.euiLoadingChart')).toHaveLength(0);
 
     // test if all expected elements are present
     // need to use getDOMNode() because the chart is not rendered via react itself

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js

@@ -62,7 +62,7 @@ describe('ExplorerChart', () => {
     // the directive just ends up being empty.
     expect(wrapper.isEmptyRender()).toBeTruthy();
     expect(wrapper.find('.content-wrapper')).toHaveLength(0);
-    expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0);
+    expect(wrapper.find('.euiLoadingChart')).toHaveLength(0);
   });
 
   test('Loading status active, no chart', () => {
@@ -87,7 +87,7 @@ describe('ExplorerChart', () => {
 
     // test if the loading indicator is shown
     // Added span because class appears twice with classNames and Emotion
-    expect(wrapper.find('.ml-loading-indicator span.euiLoadingChart')).toHaveLength(1);
+    expect(wrapper.find('span.euiLoadingChart')).toHaveLength(1);
   });
 
   // For the following tests the directive needs to be rendered in the actual DOM,
@@ -126,7 +126,7 @@ describe('ExplorerChart', () => {
     const wrapper = init(mockChartData);
 
     // the loading indicator should not be shown
-    expect(wrapper.find('.ml-loading-indicator .euiLoadingChart')).toHaveLength(0);
+    expect(wrapper.find('.euiLoadingChart')).toHaveLength(0);
 
     // test if all expected elements are present
     // need to use getDOMNode() because the chart is not rendered via react itself