[ML] align layout

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

Hide file tree

Showing 6 changed files with 71 additions and 105 deletions.
diff --git a/...a_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx b/...a_frame_analytics/pages/analytics_management/components/analytics_list/analytics_list.tsx
@@ -4,11 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment, FC, useState, useEffect } from 'react';
+import React, { Fragment, FC, useState } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
-import { EuiButtonEmpty, EuiCallOut, EuiEmptyPrompt } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiCallOut,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import { DataFrameAnalyticsId, useRefreshAnalyticsList } from '../../../../common';
 import { checkPermission } from '../../../../../privilege/check_privilege';
@@ -22,7 +29,6 @@ import {
   Query,
   Clause,
 } from './common';
-import { ActionDispatchers } from '../../hooks/use_create_analytics_form/actions';
 import { getAnalyticsFactory } from '../../services/analytics_service';
 import { getColumns } from './columns';
 import { ExpandedRow } from './expanded_row';
@@ -33,7 +39,9 @@ import {
   SortDirection,
   SORT_DIRECTION,
 } from '../../../../../components/ml_in_memory_table';
-import { AnalyticStatsBarStats } from '../../../../../components/stats_bar';
+import { AnalyticStatsBarStats, StatsBar } from '../../../../../components/stats_bar';
+import { RefreshAnalyticsListButton } from '../refresh_analytics_list_button';
+import { CreateAnalyticsButton } from '../create_analytics_button';
 
 function getItemIdToExpandedRowMap(
   itemIds: DataFrameAnalyticsId[],
@@ -60,19 +68,16 @@ function stringMatch(str: string | undefined, substr: string) {
 }
 
 interface Props {
-  isManagementTable?: boolean;
+  allowCreate?: boolean;
   isMlEnabledInSpace?: boolean;
   blockRefresh?: boolean;
-  openCreateJobModal?: ActionDispatchers['openModal'];
-  onJobStatsChange?: (stats: AnalyticStatsBarStats | undefined) => void;
+  createAnalyticsForm?: any;
 }
-// isManagementTable - for use in Kibana managagement ML section
 export const DataFrameAnalyticsList: FC<Props> = ({
-  isManagementTable = false,
+  allowCreate = true,
   isMlEnabledInSpace = true,
   blockRefresh = false,
-  openCreateJobModal,
-  onJobStatsChange,
+  createAnalyticsForm,
 }) => {
   const [isInitialized, setIsInitialized] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -106,12 +111,6 @@ export const DataFrameAnalyticsList: FC<Props> = ({
     blockRefresh
   );
 
-  useEffect(() => {
-    if (onJobStatsChange) {
-      onJobStatsChange(analyticsStats);
-    }
-  }, [analyticsStats]);
-
   // Subscribe to the refresh observable to trigger reloading the analytics list.
   useRefreshAnalyticsList({
     isLoading: setIsLoading,
@@ -227,9 +226,12 @@ export const DataFrameAnalyticsList: FC<Props> = ({
             </h2>
           }
           actions={
-            !isManagementTable && openCreateJobModal !== undefined
+            !allowCreate
               ? [
-                  <EuiButtonEmpty onClick={openCreateJobModal} isDisabled={disabled}>
+                  <EuiButtonEmpty
+                    onClick={createAnalyticsForm.actions.openModal}
+                    isDisabled={disabled}
+                  >
                     {i18n.translate('xpack.ml.dataFrame.analyticsList.emptyPromptButtonText', {
                       defaultMessage: 'Create your first data frame analytics job',
                     })}
@@ -246,7 +248,7 @@ export const DataFrameAnalyticsList: FC<Props> = ({
   const columns = getColumns(
     expandedRowItemIds,
     setExpandedRowItemIds,
-    isManagementTable,
+    allowCreate,
     isMlEnabledInSpace
   );
 
@@ -324,7 +326,28 @@ export const DataFrameAnalyticsList: FC<Props> = ({
 
   return (
     <Fragment>
-      <ProgressBar isLoading={isLoading} />
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          {analyticsStats && (
+            <EuiFlexItem grow={false}>
+              <StatsBar stats={analyticsStats} dataTestSub={'mlAnalyticsStatsBar'} />
+            </EuiFlexItem>
+          )}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <RefreshAnalyticsListButton />
+            </EuiFlexItem>
+            {allowCreate && (
+              <EuiFlexItem grow={false}>
+                <CreateAnalyticsButton {...createAnalyticsForm} />
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
       <MlInMemoryTable
         allowNeutralSort={false}
         className="mlAnalyticsTable"

diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/page.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/page.tsx
@@ -11,31 +11,20 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiBetaBadge,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiPage,
   EuiPageBody,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiPanel,
-  EuiSpacer,
   EuiTitle,
+  EuiPageHeader,
+  EuiPageHeaderSection,
 } from '@elastic/eui';
 
 import { NavigationMenu } from '../../../components/navigation_menu';
-import { CreateAnalyticsButton } from './components/create_analytics_button';
 import { DataFrameAnalyticsList } from './components/analytics_list';
-import { RefreshAnalyticsListButton } from './components/refresh_analytics_list_button';
 import { useRefreshInterval } from './components/analytics_list/use_refresh_interval';
 import { useCreateAnalyticsForm } from './hooks/use_create_analytics_form';
-import { AnalyticStatsBarStats, StatsBar } from '../../../components/stats_bar';
 
 export const Page: FC = () => {
   const [blockRefresh, setBlockRefresh] = useState(false);
-  const [stats, setStats] = useState<AnalyticStatsBarStats | undefined>(
-    {} as AnalyticStatsBarStats
-  );
 
   useRefreshInterval(setBlockRefresh);
 
@@ -46,8 +35,8 @@ export const Page: FC = () => {
       <NavigationMenu tabId="data_frame_analytics" />
       <EuiPage data-test-subj="mlPageDataFrameAnalytics">
         <EuiPageBody>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
               <EuiTitle>
                 <h1>
                   <FormattedMessage
@@ -71,37 +60,12 @@ export const Page: FC = () => {
                   />
                 </h1>
               </EuiTitle>
-              {stats && (
-                <div style={{ margin: '0 -14px' }}>
-                  <StatsBar stats={stats} dataTestSub={'mlAnalyticsStatsBar'} />
-                </div>
-              )}
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup alignItems="center">
-                {/* grow={false} fixes IE11 issue with nested flex */}
-                <EuiFlexItem grow={false}>
-                  <RefreshAnalyticsListButton />
-                </EuiFlexItem>
-                {/* grow={false} fixes IE11 issue with nested flex */}
-                <EuiFlexItem grow={false}>
-                  <CreateAnalyticsButton {...createAnalyticsForm} />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
-          <EuiPageContentBody>
-            <EuiSpacer size="l" />
-            <EuiPanel>
-              <DataFrameAnalyticsList
-                blockRefresh={blockRefresh}
-                openCreateJobModal={createAnalyticsForm.actions.openModal}
-                onJobStatsChange={analyticsStats => {
-                  setStats(analyticsStats);
-                }}
-              />
-            </EuiPanel>
-          </EuiPageContentBody>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <DataFrameAnalyticsList
+            blockRefresh={blockRefresh}
+            createAnalyticsForm={createAnalyticsForm}
+          />
         </EuiPageBody>
       </EuiPage>
     </Fragment>

diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_jobs_list.scss b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/_jobs_list.scss
@@ -1,7 +1,3 @@
-.job-management {
-  padding: $euiSizeL;
-}
-
 .new-job-button-container {
   float: right;
-}
+}
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
@@ -4,11 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
+import React, { Component } from 'react';
 import { timefilter } from 'ui/timefilter';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 
 import { ml } from 'plugins/ml/services/ml_api_service';
-import { loadFullJob, filterJobs, checkForAutoStartDatafeed } from '../utils';
+import { checkForAutoStartDatafeed, filterJobs, loadFullJob } from '../utils';
 import { JobsList } from '../jobs_list';
 import { JobDetails } from '../job_details';
 import { JobFilterBar } from '../job_filter_bar';
@@ -26,22 +27,10 @@ import { isEqual } from 'lodash';
 
 import {
   DEFAULT_REFRESH_INTERVAL_MS,
-  MINIMUM_REFRESH_INTERVAL_MS,
   DELETING_JOBS_REFRESH_INTERVAL_MS,
+  MINIMUM_REFRESH_INTERVAL_MS,
 } from '../../../../../common/constants/jobs_list';
 
-import React, {
-  Component
-} from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-
 
 let jobsRefreshInterval =  null;
 let deletingJobsRefreshTimeout = null;
@@ -446,14 +435,6 @@ export class JobsListView extends Component {
     return (
       <React.Fragment>
         <div className="job-management" data-test-subj="ml-jobs-list">
-          <EuiTitle>
-            <h1>
-              <FormattedMessage
-                id="xpack.ml.jobsList.title"
-                defaultMessage="Anomaly Detection"
-              />
-            </h1>
-          </EuiTitle>
 
           <NodeAvailableWarning />
 
@@ -473,7 +454,7 @@ export class JobsListView extends Component {
                     isRefreshing={isRefreshing}
                   />
                 </EuiFlexItem>
-                {isManagementTable === undefined &&
+                {!isManagementTable &&
                 <EuiFlexItem grow={false}>
                   <NewJobButton />
                 </EuiFlexItem>}

diff --git a/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js b/x-pack/legacy/plugins/ml/public/jobs/jobs_list/jobs.js
@@ -5,6 +5,8 @@
  */
 
 import React, { Fragment } from 'react';
+import { EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import { NavigationMenu } from '../../components/navigation_menu';
 
@@ -13,6 +15,14 @@ import { JobsListView } from './components/jobs_list_view';
 export const JobsPage = (props) => (
   <Fragment>
     <NavigationMenu tabId="jobs" />
+    <EuiTitle style={{ padding: '16px 16px 0 16px' }}>
+      <h1>
+        <FormattedMessage
+          id="xpack.ml.jobsList.title"
+          defaultMessage="Anomaly Detection"
+        />
+      </h1>
+    </EuiTitle>
     <JobsListView {...props} />
   </Fragment>
 );
diff --git a/...egacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx b/...egacy/plugins/ml/public/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
@@ -23,7 +23,6 @@ import { metadata } from 'ui/metadata';
 // @ts-ignore undeclared module
 import { JobsListView } from '../../../../jobs/jobs_list/components/jobs_list_view';
 import { DataFrameAnalyticsList } from '../../../../data_frame_analytics/pages/analytics_management/components/analytics_list';
-import { RefreshAnalyticsListButton } from '../../../../data_frame_analytics/pages/analytics_management/components/refresh_analytics_list_button';
 
 interface Props {
   isMlEnabledInSpace: boolean;
@@ -56,14 +55,7 @@ function getTabs(isMlEnabledInSpace: boolean): Tab[] {
       content: (
         <Fragment>
           <EuiSpacer size="m" />
-          <span className="mlKibanaManagement__analyticsRefreshButton">
-            <RefreshAnalyticsListButton />
-          </span>
-          <EuiSpacer size="s" className="mlKibanaManagement__analyticsSpacer" />
-          <DataFrameAnalyticsList
-            isManagementTable={true}
-            isMlEnabledInSpace={isMlEnabledInSpace}
-          />
+          <DataFrameAnalyticsList allowCreate={false} isMlEnabledInSpace={isMlEnabledInSpace} />
         </Fragment>
       ),
     },