[ML] Fix analytics list on management page.

elastic · Aug 4, 2020 · 40ef5aa · 40ef5aa
1 parent fc04ef9
commit 40ef5aa
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 44 deletions.
diff --git a/...s/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx b/...s/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useState, Fragment, FC } from 'react';
+import { Router } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { CoreStart } from 'kibana/public';
 
@@ -20,6 +21,8 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
+import { ManagementAppMountParams } from '../../../../../../../../../src/plugins/management/public/';
+
 import { checkGetManagementMlJobsResolver } from '../../../../capabilities/check_capabilities';
 import { KibanaContextProvider } from '../../../../../../../../../src/plugins/kibana_react/public';
 
@@ -67,7 +70,10 @@ function getTabs(isMlEnabledInSpace: boolean): Tab[] {
   ];
 }
 
-export const JobsListPage: FC<{ coreStart: CoreStart }> = ({ coreStart }) => {
+export const JobsListPage: FC<{
+  coreStart: CoreStart;
+  history: ManagementAppMountParams['history'];
+}> = ({ coreStart, history }) => {
   const [initialized, setInitialized] = useState(false);
   const [accessDenied, setAccessDenied] = useState(false);
   const [isMlEnabledInSpace, setIsMlEnabledInSpace] = useState(false);
@@ -128,46 +134,48 @@ export const JobsListPage: FC<{ coreStart: CoreStart }> = ({ coreStart }) => {
   return (
     <I18nContext>
       <KibanaContextProvider services={{ ...coreStart }}>
-        <EuiPageContent id="kibanaManagementMLSection">
-          <EuiTitle size="l">
-            <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>
-                <h1>
-                  {i18n.translate('xpack.ml.management.jobsList.jobsListTitle', {
-                    defaultMessage: 'Machine Learning Jobs',
-                  })}
-                </h1>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  target="_blank"
-                  iconType="help"
-                  iconSide="left"
-                  color="primary"
-                  href={
-                    currentTabId === 'anomaly_detection_jobs'
-                      ? anomalyDetectionJobsUrl
-                      : anomalyJobsUrl
-                  }
-                >
-                  {currentTabId === 'anomaly_detection_jobs'
-                    ? anomalyDetectionDocsLabel
-                    : analyticsDocsLabel}
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiTitle size="s">
-            <EuiText color="subdued">
-              {i18n.translate('xpack.ml.management.jobsList.jobsListTagline', {
-                defaultMessage: 'View machine learning analytics and anomaly detection jobs.',
-              })}
-            </EuiText>
-          </EuiTitle>
-          <EuiSpacer size="l" />
-          <EuiPageContentBody>{renderTabs()}</EuiPageContentBody>
-        </EuiPageContent>
+        <Router history={history}>
+          <EuiPageContent id="kibanaManagementMLSection">
+            <EuiTitle size="l">
+              <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+                <EuiFlexItem grow={false}>
+                  <h1>
+                    {i18n.translate('xpack.ml.management.jobsList.jobsListTitle', {
+                      defaultMessage: 'Machine Learning Jobs',
+                    })}
+                  </h1>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    target="_blank"
+                    iconType="help"
+                    iconSide="left"
+                    color="primary"
+                    href={
+                      currentTabId === 'anomaly_detection_jobs'
+                        ? anomalyDetectionJobsUrl
+                        : anomalyJobsUrl
+                    }
+                  >
+                    {currentTabId === 'anomaly_detection_jobs'
+                      ? anomalyDetectionDocsLabel
+                      : analyticsDocsLabel}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiTitle>
+            <EuiSpacer size="s" />
+            <EuiTitle size="s">
+              <EuiText color="subdued">
+                {i18n.translate('xpack.ml.management.jobsList.jobsListTagline', {
+                  defaultMessage: 'View machine learning analytics and anomaly detection jobs.',
+                })}
+              </EuiText>
+            </EuiTitle>
+            <EuiSpacer size="l" />
+            <EuiPageContentBody>{renderTabs()}</EuiPageContentBody>
+          </EuiPageContent>
+        </Router>
       </KibanaContextProvider>
     </I18nContext>
   );

diff --git a/x-pack/plugins/ml/public/application/management/jobs_list/index.ts b/x-pack/plugins/ml/public/application/management/jobs_list/index.ts
@@ -13,8 +13,12 @@ import { JobsListPage } from './components';
 import { getJobsListBreadcrumbs } from '../breadcrumbs';
 import { setDependencyCache, clearCache } from '../../util/dependency_cache';
 
-const renderApp = (element: HTMLElement, coreStart: CoreStart) => {
-  ReactDOM.render(React.createElement(JobsListPage, { coreStart }), element);
+const renderApp = (
+  element: HTMLElement,
+  history: ManagementAppMountParams['history'],
+  coreStart: CoreStart
+) => {
+  ReactDOM.render(React.createElement(JobsListPage, { coreStart, history }), element);
   return () => {
     unmountComponentAtNode(element);
     clearCache();
@@ -36,5 +40,5 @@ export async function mountApp(
 
   params.setBreadcrumbs(getJobsListBreadcrumbs());
 
-  return renderApp(params.element, coreStart);
+  return renderApp(params.element, params.history, coreStart);
 }