[ML] align layout for anomaly detection

elastic · Nov 1, 2019 · 1fd369d · 1fd369d
1 parent a28d562
commit 1fd369d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git a/...ck/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss b/...ck/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/_jobs_list_view.scss
@@ -8,11 +8,3 @@
 .job-management {
   padding: 20px;
 }
-
-.job-buttons-container {
-  float: right;
-}
-
-.clear {
-  clear: both;
-}
diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/components/jobs_list_view/jobs_list_view.js
@@ -38,7 +38,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
+  EuiTitle,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 
 let jobsRefreshInterval =  null;
@@ -443,30 +445,41 @@ export class JobsListView extends Component {
 
     return (
       <React.Fragment>
-        <JobStatsBar
-          jobsSummaryList={jobsSummaryList}
-        />
         <div className="job-management" data-test-subj="ml-jobs-list">
+          <EuiTitle>
+            <h1>
+              <FormattedMessage
+                id="xpack.ml.jobsList.title"
+                defaultMessage="Anomaly Detection"
+              />
+            </h1>
+          </EuiTitle>
+
           <NodeAvailableWarning />
+
           <UpgradeWarning />
-          <header>
-            <div className="job-buttons-container">
-              <EuiFlexGroup alignItems="center">
+
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <JobStatsBar
+                jobsSummaryList={jobsSummaryList}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="s">
                 <EuiFlexItem grow={false}>
                   <RefreshJobsListButton
                     onRefreshClick={this.onRefreshClick}
                     isRefreshing={isRefreshing}
                   />
                 </EuiFlexItem>
                 {isManagementTable === undefined &&
-                  <EuiFlexItem grow={false}>
-                    <NewJobButton />
-                  </EuiFlexItem>}
+                <EuiFlexItem grow={false}>
+                  <NewJobButton />
+                </EuiFlexItem>}
               </EuiFlexGroup>
-            </div>
-          </header>
-
-          <div className="clear" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
           <EuiSpacer size="s" />
 

diff --git a/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_buttons.scss b/x-pack/legacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/_buttons.scss
@@ -1,10 +1,6 @@
 
 // Refresh button style
 
-.job-buttons-container {
-  float: right;
-}
-
 .managementJobsList{
   clear: both;
 }