From fddf9c9526f94c4fd76045036ef07a35b1edd76f Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 30 Sep 2020 15:42:44 +0200
Subject: [PATCH] [ML] Cleanup, layout fixes, making dummy values dynamic.
 i18n.

---
 .../exploration_query_bar.tsx                 | 146 ++------
 .../outlier_exploration.scss                  |   3 +
 .../outlier_exploration.tsx                   | 312 ++++++++----------
 .../expanded_row_details_pane.scss            |   8 +
 .../expanded_row_details_pane.tsx             |  39 ++-
 .../expanded_row_messages_pane.scss           |   9 +
 .../expanded_row_messages_pane.tsx            |  16 +-
 7 files changed, 235 insertions(+), 298 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss
 create mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss
 create mode 100644 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
index 9e9bb8019df82..8ed732bf7da2b 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/exploration_query_bar/exploration_query_bar.tsx
@@ -6,15 +6,7 @@
 
 import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
 
-import {
-  EuiButton,
-  EuiCheckboxGroup,
-  EuiCode,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiInputPopover,
-  EuiPopover,
-} from '@elastic/eui';
+import { EuiCode, EuiInputPopover } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
@@ -40,7 +32,6 @@ interface ExplorationQueryBarProps {
   setSearchQuery: Dispatch<SetStateAction<SavedSearchQuery>>;
   includeQueryString?: boolean;
   defaultQueryString?: string;
-  options: any;
 }
 
 export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
@@ -48,7 +39,6 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
   setSearchQuery,
   includeQueryString = false,
   defaultQueryString,
-  options,
 }) => {
   // The internal state of the input query bar updated on every key stroke.
   const [searchInput, setSearchInput] = useState<Query>({
@@ -93,106 +83,42 @@ export const ExplorationQueryBar: FC<ExplorationQueryBarProps> = ({
     }
   };
 
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  const onButtonClick = () => setIsPopoverOpen(() => !isPopoverOpen);
-  const closePopover = () => setIsPopoverOpen(false);
-
-  const featureButtons = [
-    {
-      id: `popoverAnalysis`,
-      label: 'Analysis',
-    },
-    {
-      id: `popoverResults`,
-      label: 'Results',
-    },
-    {
-      id: `popoverScatterplotMatrix`,
-      label: 'Scatterplot Matrix',
-    },
-  ];
-  const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<Record<string, boolean>>({
-    popoverResults: true,
-  });
-  const onChangeMulti = (optionId: string) => {
-    const newToggleIdToSelectedMap = {
-      ...toggleIdToSelectedMap,
-      ...{
-        [optionId]: !toggleIdToSelectedMap[optionId],
-      },
-    };
-    setToggleIdToSelectedMap(newToggleIdToSelectedMap);
-    options.onChange(optionId.replace('popover', 'section'));
-  };
-
-  useEffect(() => {
-    if (options.checkboxIdToSelectedMap !== undefined) {
-      setToggleIdToSelectedMap(
-        Object.entries(options.checkboxIdToSelectedMap).reduce((p, c) => {
-          return {
-            ...p,
-            [c[0].replace('section', 'popover')]: c[1],
-          };
-        }, {})
-      );
-    }
-  }, [options.checkboxIdToSelectedMap]);
-
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiInputPopover
-          style={{ maxWidth: '100%' }}
-          closePopover={() => setErrorMessage(undefined)}
-          input={
-            <QueryStringInput
-              bubbleSubmitEvent={true}
-              query={searchInput}
-              indexPatterns={[indexPattern]}
-              onChange={searchChangeHandler}
-              onSubmit={searchSubmitHandler}
-              placeholder={
-                searchInput.language === SEARCH_QUERY_LANGUAGE.KUERY
-                  ? i18n.translate('xpack.ml.stepDefineForm.queryPlaceholderKql', {
-                      defaultMessage: 'e.g. {example}',
-                      values: { example: 'method : "GET" or status : "404"' },
-                    })
-                  : i18n.translate('xpack.ml.stepDefineForm.queryPlaceholderLucene', {
-                      defaultMessage: 'e.g. {example}',
-                      values: { example: 'method:GET OR status:404' },
-                    })
-              }
-              disableAutoFocus={true}
-              dataTestSubj="transformQueryInput"
-              languageSwitcherPopoverAnchorPosition="rightDown"
-            />
+    <EuiInputPopover
+      style={{ maxWidth: '100%' }}
+      closePopover={() => setErrorMessage(undefined)}
+      input={
+        <QueryStringInput
+          bubbleSubmitEvent={true}
+          query={searchInput}
+          indexPatterns={[indexPattern]}
+          onChange={searchChangeHandler}
+          onSubmit={searchSubmitHandler}
+          placeholder={
+            searchInput.language === SEARCH_QUERY_LANGUAGE.KUERY
+              ? i18n.translate('xpack.ml.stepDefineForm.queryPlaceholderKql', {
+                  defaultMessage: 'e.g. {example}',
+                  values: { example: 'method : "GET" or status : "404"' },
+                })
+              : i18n.translate('xpack.ml.stepDefineForm.queryPlaceholderLucene', {
+                  defaultMessage: 'e.g. {example}',
+                  values: { example: 'method:GET OR status:404' },
+                })
           }
-          isOpen={errorMessage?.query === searchInput.query && errorMessage?.message !== ''}
-        >
-          <EuiCode>
-            {i18n.translate('xpack.ml.stepDefineForm.invalidQuery', {
-              defaultMessage: 'Invalid Query',
-            })}
-            {': '}
-            {errorMessage?.message.split('\n')[0]}
-          </EuiCode>
-        </EuiInputPopover>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiPopover
-          ownFocus
-          button={<EuiButton onClick={onButtonClick}>Options</EuiButton>}
-          isOpen={isPopoverOpen}
-          closePopover={closePopover}
-        >
-          <EuiCheckboxGroup
-            options={featureButtons}
-            idToSelectedMap={toggleIdToSelectedMap}
-            onChange={onChangeMulti}
-          />
-        </EuiPopover>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+          disableAutoFocus={true}
+          dataTestSubj="transformQueryInput"
+          languageSwitcherPopoverAnchorPosition="rightDown"
+        />
+      }
+      isOpen={errorMessage?.query === searchInput.query && errorMessage?.message !== ''}
+    >
+      <EuiCode>
+        {i18n.translate('xpack.ml.stepDefineForm.invalidQuery', {
+          defaultMessage: 'Invalid Query',
+        })}
+        {': '}
+        {errorMessage?.message.split('\n')[0]}
+      </EuiCode>
+    </EuiInputPopover>
   );
 };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss
new file mode 100644
index 0000000000000..920e774857872
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.scss
@@ -0,0 +1,3 @@
+.mlSectionPanel {
+  padding: 0 $euiSizeS $euiSizeS $euiSizeS;
+}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
index a42699dd74cd8..9e795e5b2d2a5 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.tsx
@@ -4,17 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './outlier_exploration.scss';
+
 import React, { useEffect, useState, FC } from 'react';
 
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import {
   EuiBadge,
   EuiButtonEmpty,
-  EuiButtonGroup,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
+  EuiLoadingContent,
+  EuiLoadingSpinner,
   EuiPanel,
   EuiSpacer,
   EuiText,
@@ -112,187 +116,155 @@ export const OutlierExploration: FC<ExplorationProps> = React.memo(({ jobId }) =
     setIsExpandedResultsTable(!isExpandedResultsTable);
   };
 
-  const featureButtons = [
-    {
-      id: `sectionAnalysis`,
-      label: 'Analysis',
-    },
-    {
-      id: `sectionResults`,
-      label: 'Results',
-    },
-    {
-      id: `sectionScatterplotMatrix`,
-      label: 'Scatterplot Matrix',
-    },
-  ];
-
-  const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<Record<string, boolean>>({
-    sectionResults: true,
-  });
-  const onChangeMulti = (optionId: string) => {
-    const newToggleIdToSelectedMap = {
-      ...toggleIdToSelectedMap,
-      ...{
-        [optionId]: !toggleIdToSelectedMap[optionId],
-      },
-    };
-    setToggleIdToSelectedMap(newToggleIdToSelectedMap);
-  };
-
   return (
     <>
-      <EuiButtonGroup
-        legend="Feature Button Group"
-        name="featureButtonGroup"
-        options={featureButtons}
-        idToSelectedMap={toggleIdToSelectedMap}
-        onChange={(id) => onChangeMulti(id)}
-        buttonSize="m"
-        type="multi"
-        color="primary"
-      />
-
-      <EuiSpacer size="m" />
-
       {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
         indexPattern !== undefined && (
           <>
-            <ExplorationQueryBar
-              indexPattern={indexPattern}
-              setSearchQuery={setSearchQuery}
-              options={{
-                checkboxes: featureButtons,
-                checkboxIdToSelectedMap: toggleIdToSelectedMap,
-                onChange: (id: string) => {
-                  onChangeMulti(id);
-                },
-              }}
-            />
+            <ExplorationQueryBar indexPattern={indexPattern} setSearchQuery={setSearchQuery} />
             <EuiSpacer size="m" />
           </>
         )}
 
-      {toggleIdToSelectedMap.sectionAnalysis && (
-        <>
-          <EuiPanel paddingSize="none">
-            <div style={{ padding: '10px' }}>
-              <EuiButtonEmpty
-                onClick={toggleExpandedAnalysisDetails}
-                iconType={isExpandedAnalysisDetails ? 'arrowUp' : 'arrowDown'}
-                size="l"
-                iconSide="right"
-                flush="left"
-              >
-                Analysis
-              </EuiButtonEmpty>
-              <EuiFlexGroup>
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs" color="subdued">
-                    <p>Type</p>
-                  </EuiText>
-                  <EuiBadge>outlier detection</EuiBadge>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs" color="subdued">
-                    <p>Source index</p>
-                  </EuiText>
-                  <EuiBadge>glass_source</EuiBadge>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs" color="subdued">
-                    <p>Destination index</p>
-                  </EuiText>
-                  <EuiBadge>glass_outlier_detection</EuiBadge>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </div>
-            {isExpandedAnalysisDetails && (
-              <>
-                <EuiHorizontalRule size="full" margin="none" />
-                {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
-                  indexPattern !== undefined &&
-                  jobConfig !== undefined &&
-                  columnsWithCharts.length > 0 &&
-                  tableItems.length > 0 &&
-                  expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
-              </>
+      <EuiPanel paddingSize="none">
+        <div className="mlSectionPanel">
+          <EuiButtonEmpty
+            onClick={toggleExpandedAnalysisDetails}
+            iconType={isExpandedAnalysisDetails ? 'arrowUp' : 'arrowDown'}
+            size="l"
+            iconSide="right"
+            flush="left"
+          >
+            <FormattedMessage
+              id="xpack.ml.dataframe.analytics.exploration.analysisSectionTitle"
+              defaultMessage="Analysis"
+            />
+          </EuiButtonEmpty>
+          {expandedRowItem === undefined && <EuiLoadingContent lines={1} />}
+          {expandedRowItem !== undefined && (
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs" color="subdued">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.ml.dataframe.analytics.exploration.analysisTypeLabel"
+                      defaultMessage="Type"
+                    />
+                  </p>
+                </EuiText>
+                <EuiBadge>{expandedRowItem.job_type}</EuiBadge>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs" color="subdued">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.ml.dataframe.analytics.exploration.analysisSourceIndexLabel"
+                      defaultMessage="Source index"
+                    />
+                  </p>
+                </EuiText>
+                <EuiBadge>{expandedRowItem.config.source.index}</EuiBadge>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs" color="subdued">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.ml.dataframe.analytics.exploration.analysisDestinationIndexLabel"
+                      defaultMessage="Destination index"
+                    />
+                  </p>
+                </EuiText>
+                <EuiBadge>{expandedRowItem.config.dest.index}</EuiBadge>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+        </div>
+        {isExpandedAnalysisDetails && (
+          <>
+            <EuiHorizontalRule size="full" margin="none" />
+            {expandedRowItem === undefined && (
+              <EuiText textAlign="center">
+                <EuiSpacer size="l" />
+                <EuiLoadingSpinner size="l" />
+                <EuiSpacer size="l" />
+              </EuiText>
             )}
-          </EuiPanel>
-          <EuiSpacer size="m" />
-        </>
-      )}
-
-      {toggleIdToSelectedMap.sectionResults && (
-        <>
-          <EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
-            <div style={{ padding: '10px' }}>
-              <EuiButtonEmpty
-                onClick={toggleExpandedResultsTable}
-                iconType={isExpandedResultsTable ? 'arrowUp' : 'arrowDown'}
-                size="l"
-                iconSide="right"
-                flush="left"
-              >
-                Results
-              </EuiButtonEmpty>
-              <EuiFlexGroup>
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs" color="subdued">
-                    <p>Total docs</p>
-                  </EuiText>
-                  <EuiBadge>123456</EuiBadge>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs" color="subdued">
-                    <p>Training docs</p>
-                  </EuiText>
-                  <EuiBadge>1234 (12%)</EuiBadge>
-                </EuiFlexItem>
-                <EuiFlexItem grow={false}>
-                  <EuiText size="xs" color="subdued">
-                    <p>Moar Stats</p>
-                  </EuiText>
-                  <EuiBadge>42</EuiBadge>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <ColorRangeLegend
-                    colorRange={colorRange}
-                    title={i18n.translate(
-                      'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle',
-                      {
-                        defaultMessage: 'Feature influence score',
-                      }
-                    )}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </div>
-            {isExpandedResultsTable && (
-              <>
-                {jobConfig !== undefined && needsDestIndexPattern && (
-                  <IndexPatternPrompt destIndex={jobConfig.dest.index} />
-                )}
-                {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
-                  indexPattern !== undefined && (
-                    <>
-                      <EuiSpacer size="s" />
-                      {columnsWithCharts.length > 0 && tableItems.length > 0 && (
-                        <DataGrid
-                          {...outlierData}
-                          dataTestSubj="mlExplorationDataGrid"
-                          toastNotifications={getToastNotifications()}
-                        />
-                      )}
-                    </>
+            {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
+              indexPattern !== undefined &&
+              jobConfig !== undefined &&
+              columnsWithCharts.length > 0 &&
+              tableItems.length > 0 &&
+              expandedRowItem !== undefined && <ExpandedRow item={expandedRowItem} />}
+          </>
+        )}
+      </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiPanel paddingSize="none" data-test-subj="mlDFAnalyticsOutlierExplorationTablePanel">
+        <div style={{ padding: '10px' }}>
+          <EuiButtonEmpty
+            onClick={toggleExpandedResultsTable}
+            iconType={isExpandedResultsTable ? 'arrowUp' : 'arrowDown'}
+            size="l"
+            iconSide="right"
+            flush="left"
+          >
+            <FormattedMessage
+              id="xpack.ml.dataframe.analytics.exploration.explorationTableTitle"
+              defaultMessage="Results"
+            />
+          </EuiButtonEmpty>
+          {(columnsWithCharts.length === 0 || tableItems.length === 0) && (
+            <EuiLoadingContent lines={1} />
+          )}
+          {columnsWithCharts.length > 0 && tableItems.length > 0 && (
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiText size="xs" color="subdued">
+                  <p>
+                    <FormattedMessage
+                      id="xpack.ml.dataframe.analytics.exploration.explorationTableTotalDocsLabel"
+                      defaultMessage="Total docs"
+                    />
+                  </p>
+                </EuiText>
+                <EuiBadge>{outlierData.rowCount}</EuiBadge>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <ColorRangeLegend
+                  colorRange={colorRange}
+                  title={i18n.translate(
+                    'xpack.ml.dataframe.analytics.exploration.colorRangeLegendTitle',
+                    {
+                      defaultMessage: 'Feature influence score',
+                    }
                   )}
-              </>
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+        </div>
+        {isExpandedResultsTable && (
+          <>
+            {jobConfig !== undefined && needsDestIndexPattern && (
+              <IndexPatternPrompt destIndex={jobConfig.dest.index} />
             )}
-          </EuiPanel>
-          <EuiSpacer size="m" />
-        </>
-      )}
-      {toggleIdToSelectedMap.sectionScatterplotMatrix && <EuiPanel>SCATTERPLOT MATRIX</EuiPanel>}
+            {(columnsWithCharts.length > 0 || searchQuery !== defaultSearchQuery) &&
+              indexPattern !== undefined && (
+                <>
+                  <EuiSpacer size="s" />
+                  {columnsWithCharts.length > 0 && tableItems.length > 0 && (
+                    <DataGrid
+                      {...outlierData}
+                      dataTestSubj="mlExplorationDataGrid"
+                      toastNotifications={getToastNotifications()}
+                    />
+                  )}
+                </>
+              )}
+          </>
+        )}
+      </EuiPanel>
+      <EuiSpacer size="m" />
     </>
   );
 });
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss
new file mode 100644
index 0000000000000..efc9296350232
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.scss
@@ -0,0 +1,8 @@
+.mlExpandedRowDetails {
+  padding: 0 $euiSizeS $euiSizeS $euiSizeS;
+}
+
+/* Hide the basic table's header */
+.mlExpandedRowDetailsSection thead {
+  display: none;
+}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
index 71ca2b6f60492..41722f7559de2 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -4,16 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './expanded_row_details_pane.scss';
+
 import React, { Fragment, FC, ReactElement } from 'react';
 
-import {
-  EuiDescriptionList,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiTitle,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
 
 export interface SectionItem {
   title: string;
@@ -34,13 +29,33 @@ export const Section: FC<SectionProps> = ({ section }) => {
     return null;
   }
 
+  const columns = [
+    {
+      field: 'title',
+      name: '',
+      render: (v: SectionItem['title']) => <strong>{v}</strong>,
+    },
+    {
+      field: 'description',
+      name: '',
+      render: (v: SectionItem['description']) => <>{v}</>,
+    },
+  ];
+
   return (
-    <EuiPanel>
+    <>
       <EuiTitle size="xs">
         <span>{section.title}</span>
       </EuiTitle>
-      <EuiDescriptionList compressed type="column" listItems={section.items} />
-    </EuiPanel>
+      <EuiBasicTable<SectionItem>
+        compressed
+        items={section.items}
+        columns={columns}
+        tableCaption={section.title}
+        tableLayout="auto"
+        className="mlExpandedRowDetailsSection"
+      />
+    </>
   );
 };
 
@@ -50,7 +65,7 @@ interface ExpandedRowDetailsPaneProps {
 
 export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({ sections }) => {
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup className="mlExpandedRowDetails">
       <EuiFlexItem style={{ width: '50%' }}>
         {sections
           .filter((s) => s.position === 'left')
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss
new file mode 100644
index 0000000000000..5a4d1b3190402
--- /dev/null
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss
@@ -0,0 +1,9 @@
+.mlExpandedRowJobMessages {
+  padding: 0 $euiSizeS $euiSizeS $euiSizeS;
+}
+
+/* override ML legacy class "job-messages-table" */
+.mlExpandedRowJobMessages .euiTable, .mlExpandedRowJobMessages .euiTableRowCell {
+  background-color: transparent !important;
+}
+
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
index 942e335526d68..91925b7f0afe1 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './expanded_row_messages_pane.scss';
+
 import React, { FC, useState, useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ml } from '../../../../../services/ml_api_service';
@@ -43,11 +45,13 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId }) => {
   useRefreshAnalyticsList({ onRefresh: getMessages });
 
   return (
-    <JobMessages
-      messages={messages}
-      loading={isLoading}
-      error={errorMessage}
-      refreshMessage={getMessages}
-    />
+    <div className="mlExpandedRowJobMessages">
+      <JobMessages
+        messages={messages}
+        loading={isLoading}
+        error={errorMessage}
+        refreshMessage={getMessages}
+      />
+    </div>
   );
 };