diff --git a/x-pack/legacy/plugins/ml/public/application/app.tsx b/x-pack/legacy/plugins/ml/public/application/app.tsx index 18545f31f03c739..a8ad93670cdb752 100644 --- a/x-pack/legacy/plugins/ml/public/application/app.tsx +++ b/x-pack/legacy/plugins/ml/public/application/app.tsx @@ -12,6 +12,7 @@ import 'ace'; import { AppMountParameters, CoreStart } from 'kibana/public'; import { DataPublicPluginStart } from 'src/plugins/data/public'; +import { ManagementSetup } from 'src/plugins/management/public'; import { SecurityPluginSetup } from '../../../../../plugins/security/public'; import { LicensingPluginSetup } from '../../../../../plugins/licensing/public'; @@ -25,6 +26,7 @@ export interface MlDependencies extends AppMountParameters { data: DataPublicPluginStart; security: SecurityPluginSetup; licensing: LicensingPluginSetup; + management: ManagementSetup; } interface AppProps { diff --git a/x-pack/legacy/plugins/ml/public/application/management/index.ts b/x-pack/legacy/plugins/ml/public/application/management/index.ts index 99a2e8353a87424..2f580c29e9c1e2f 100644 --- a/x-pack/legacy/plugins/ml/public/application/management/index.ts +++ b/x-pack/legacy/plugins/ml/public/application/management/index.ts @@ -11,14 +11,12 @@ */ import { npSetup } from 'ui/new_platform'; -import { management } from 'ui/management'; import { i18n } from '@kbn/i18n'; import chrome from 'ui/chrome'; import { metadata } from 'ui/metadata'; import { take } from 'rxjs/operators'; -import { JOBS_LIST_PATH } from './management_urls'; import { setDependencyCache } from '../util/dependency_cache'; -import './jobs_list'; +import { renderApp } from './jobs_list'; import { LicensingPluginSetup, LICENSE_CHECK_STATE, @@ -36,11 +34,12 @@ const plugins = npSetup.plugins as PluginsSetupExtended; const licensing = plugins.licensing.license$.pipe(take(1)); licensing.subscribe(license => { if (license.check(PLUGIN_ID, MINIMUM_FULL_LICENSE).state === LICENSE_CHECK_STATE.Valid) { - initManagementSection(); + // initManagementSection(); } }); +const { management } = plugins; -function initManagementSection() { +export function initManagementSection() { const legacyBasePath = { prepend: chrome.addBasePath, get: chrome.getBasePath, @@ -56,20 +55,23 @@ function initManagementSection() { basePath: legacyBasePath as any, }); - management.register('ml', { - display: i18n.translate('xpack.ml.management.mlTitle', { + const mlSection = management.sections.register({ + id: 'ml', + title: i18n.translate('xpack.ml.management.mlTitle', { defaultMessage: 'Machine Learning', }), order: 100, icon: 'machineLearningApp', }); - management.getSection('ml').register('jobsList', { - name: 'jobsListLink', - order: 10, - display: i18n.translate('xpack.ml.management.jobsListTitle', { + mlSection.registerApp({ + id: 'jobsListLink', + title: i18n.translate('xpack.ml.management.jobsListTitle', { defaultMessage: 'Jobs list', }), - url: `#${JOBS_LIST_PATH}`, + order: 10, + async mount(params) { + return renderApp(params.element, {}); + }, }); } diff --git a/x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts b/x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts index b88138d139f6079..3b3046aa5ca6889 100644 --- a/x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts +++ b/x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts @@ -4,52 +4,23 @@ * you may not use this file except in compliance with the Elastic License. */ -import ReactDOM, { render, unmountComponentAtNode } from 'react-dom'; +import ReactDOM, { unmountComponentAtNode } from 'react-dom'; import React from 'react'; -import routes from 'ui/routes'; -import { canGetManagementMlJobs } from '../../privilege/check_privilege'; -import { JOBS_LIST_PATH, ACCESS_DENIED_PATH } from '../management_urls'; -import { JobsListPage, AccessDeniedPage } from './components'; -import { getJobsListBreadcrumbs } from '../breadcrumbs'; +// import { canGetManagementMlJobs } from '../../privilege/check_privilege'; +// import { JOBS_LIST_PATH, ACCESS_DENIED_PATH } from '../management_urls'; +// import { JobsListPage, AccessDeniedPage } from './components'; +import { JobsListPage } from './components'; +// import { getJobsListBreadcrumbs } from '../breadcrumbs'; -const template = ` -
-`; +export const renderApp = (element: HTMLElement, appDependencies: any) => { + // const { mlFeatureEnabledInSpace } = checkPrivilege; + const mlFeatureEnabledInSpace = true; + ReactDOM.render( + React.createElement(JobsListPage, { isMlEnabledInSpace: mlFeatureEnabledInSpace }), + element + ); -routes.when(JOBS_LIST_PATH, { - template, - k7Breadcrumbs: getJobsListBreadcrumbs, - resolve: { - checkPrivilege: canGetManagementMlJobs, - }, - controller($scope, checkPrivilege) { - const { mlFeatureEnabledInSpace } = checkPrivilege; - - $scope.$on('$destroy', () => { - const elem = document.getElementById('kibanaManagementMLSection'); - if (elem) unmountComponentAtNode(elem); - }); - $scope.$$postDigest(() => { - const element = document.getElementById('kibanaManagementMLSection'); - ReactDOM.render( - React.createElement(JobsListPage, { isMlEnabledInSpace: mlFeatureEnabledInSpace }), - element - ); - }); - }, -}); - -routes.when(ACCESS_DENIED_PATH, { - template, - k7Breadcrumbs: getJobsListBreadcrumbs, - controller($scope) { - $scope.$on('$destroy', () => { - const elem = document.getElementById('kibanaManagementMLSection'); - if (elem) unmountComponentAtNode(elem); - }); - $scope.$$postDigest(() => { - const element = document.getElementById('kibanaManagementMLSection'); - render(AccessDeniedPage(), element); - }); - }, -}); + return () => { + unmountComponentAtNode(element); + }; +}; diff --git a/x-pack/legacy/plugins/ml/public/plugin.ts b/x-pack/legacy/plugins/ml/public/plugin.ts index 7b3a5f6fadfacaf..b452473f20659be 100644 --- a/x-pack/legacy/plugins/ml/public/plugin.ts +++ b/x-pack/legacy/plugins/ml/public/plugin.ts @@ -4,18 +4,20 @@ * you may not use this file except in compliance with the Elastic License. */ +import { i18n } from '@kbn/i18n'; + import { Plugin, CoreStart, CoreSetup } from 'src/core/public'; import { MlDependencies } from './application/app'; export class MlPlugin implements Plugin { - setup(core: CoreSetup, { data, security, licensing }: MlDependencies) { + setup(core: CoreSetup, { data, security, licensing, management }: MlDependencies) { core.application.register({ id: 'ml', title: 'Machine learning', async mount(context, params) { const [coreStart, depsStart] = await core.getStartServices(); - const { renderApp } = await import('./application/app'); - return renderApp(coreStart, depsStart, { + const { renderApp: renderMlApp } = await import('./application/app'); + return renderMlApp(coreStart, depsStart, { element: params.element, appBasePath: params.appBasePath, onAppLeave: params.onAppLeave, @@ -23,10 +25,34 @@ export class MlPlugin implements Plugin { data, security, licensing, + management, }); }, }); + const mlSection = management.sections.register({ + id: 'ml', + title: i18n.translate('xpack.ml.management.mlTitle', { + defaultMessage: 'Machine Learning', + }), + order: 100, + icon: 'machineLearningApp', + }); + + mlSection.registerApp({ + id: 'jobsListLink', + title: i18n.translate('xpack.ml.management.jobsListTitle', { + defaultMessage: 'Jobs list', + }), + order: 10, + async mount(params) { + const { renderApp: renderManagementApp } = await import( + './application/management/jobs_list' + ); + return renderManagementApp(params.element, {}); + }, + }); + return {}; }