Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ML] Register NP ML plugin for Kibana management section. #59762

Merged
merged 3 commits into from
Mar 12, 2020
Merged

[ML] Register NP ML plugin for Kibana management section. #59762

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9903dd5
[ML] Register NP ML plugin for Kibana management section.
walterra Mar 10, 2020
972e455
[ML] Fix breadcrumb, permissions check, menu item.
walterra Mar 11, 2020
03c913d
[ML] Remove unnecessary management dependency. Re-add wrapping id to …
walterra Mar 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions x-pack/legacy/plugins/ml/public/application/management/breadcrumbs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,10 @@
*/

import { i18n } from '@kbn/i18n';
import { MANAGEMENT_BREADCRUMB } from 'ui/management/breadcrumbs';
import { JOBS_LIST_PATH } from './management_urls';

export function getJobsListBreadcrumbs() {
return [
MANAGEMENT_BREADCRUMB,
{
text: i18n.translate('xpack.ml.jobsList.breadcrumb', {
defaultMessage: 'Jobs',
Expand Down
39 changes: 24 additions & 15 deletions x-pack/legacy/plugins/ml/public/application/management/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,27 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { npSetup } from 'ui/new_platform';
import { management } from 'ui/management';
import { npSetup, npStart } from 'ui/new_platform';
Copy link
Member

@jgowdyelastic jgowdyelastic Mar 11, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't think we should be importing anything from ui/new_platform anymore.
I wonder if this whole file needs to go and for the management section registration to happen in our root plugin.ts file? or at least get called from there

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure this can be done as part of this PR. The only reference that ties into this code is managementSections: ['plugins/ml/application/management'] in plugins/ml/index.ts and I can't see how I'd pass on something to here. If we can think of a solution I'm happy to do it in this PR, however, the original scope here was only to migrate away from angular :). For transforms, the "cut-over" PR was not just moving files but it also included updating the plugins/transfrom/index.ts file to work again after the move, maybe we need to do it this way.

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 { ManagementSetup } from '../../../../../../../src/plugins/management/public';

import {
LicensingPluginSetup,
LICENSE_CHECK_STATE,
} from '../../../../../../plugins/licensing/public';

import { PLUGIN_ID } from '../../../common/constants/app';
import { MINIMUM_FULL_LICENSE } from '../../../common/license';

import { setDependencyCache } from '../util/dependency_cache';

import { getJobsListBreadcrumbs } from './breadcrumbs';
import { renderApp } from './jobs_list';

type PluginsSetupExtended = typeof npSetup.plugins & {
// adds licensing which isn't in the PluginsSetup interface, but does exist
licensing: LicensingPluginSetup;
Expand All @@ -36,11 +41,10 @@ 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(plugins.management);
}
});

function initManagementSection() {
function initManagementSection(management: ManagementSetup) {
const legacyBasePath = {
prepend: chrome.addBasePath,
get: chrome.getBasePath,
Expand All @@ -54,22 +58,27 @@ function initManagementSection() {
setDependencyCache({
docLinks: legacyDocLinks as any,
basePath: legacyBasePath as any,
http: npStart.core.http,
});

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({ element, setBreadcrumbs }) {
setBreadcrumbs(getJobsListBreadcrumbs());
return renderApp(element, {});
},
});
}
39 changes: 30 additions & 9 deletions ...s/ml/public/application/management/jobs_list/components/jobs_list_page/jobs_list_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Fragment, FC, useState } from 'react';
import React, { useEffect, useState, Fragment, FC } from 'react';
import { i18n } from '@kbn/i18n';
import { I18nContext } from 'ui/i18n';
import {
Expand All @@ -18,15 +18,14 @@ import {
EuiText,
EuiTitle,
} from '@elastic/eui';
import { getDocLinks } from '../../../../util/dependency_cache';

import { checkGetManagementMlJobs } from '../../../../privilege/check_privilege';

import { getDocLinks } from '../../../../util/dependency_cache';
// @ts-ignore undeclared module
import { JobsListView } from '../../../../jobs/jobs_list/components/jobs_list_view/index';
import { DataFrameAnalyticsList } from '../../../../data_frame_analytics/pages/analytics_management/components/analytics_list';

interface Props {
isMlEnabledInSpace: boolean;
}
interface Tab {
id: string;
name: string;
Expand Down Expand Up @@ -65,11 +64,33 @@ function getTabs(isMlEnabledInSpace: boolean): Tab[] {
];
}

export const JobsListPage: FC<Props> = ({ isMlEnabledInSpace }) => {
const docLinks = getDocLinks();
const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks;
export const JobsListPage: FC = () => {
const [initialized, setInitialized] = useState(false);
const [isMlEnabledInSpace, setIsMlEnabledInSpace] = useState(false);
const tabs = getTabs(isMlEnabledInSpace);
const [currentTabId, setCurrentTabId] = useState(tabs[0].id);

const check = async () => {
try {
const checkPrivilege = await checkGetManagementMlJobs();
setInitialized(true);
setIsMlEnabledInSpace(checkPrivilege.mlFeatureEnabledInSpace);
} catch (e) {
// Silent fail, `checkGetManagementMlJobs()` should redirect when
// there are insufficient permissions.
}
};

useEffect(() => {
check();
}, []);

if (initialized === false) {
return null;
}

const docLinks = getDocLinks();
const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks;
const anomalyDetectionJobsUrl = `${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/ml-jobs.html`;
const anomalyJobsUrl = `${ELASTIC_WEBSITE_URL}guide/en/machine-learning/${DOC_LINK_VERSION}/ml-dfanalytics.html`;

Expand Down Expand Up @@ -98,7 +119,7 @@ export const JobsListPage: FC<Props> = ({ isMlEnabledInSpace }) => {

return (
<I18nContext>
<EuiPageContent>
<EuiPageContent id="kibanaManagementMLSection">
<EuiTitle size="l">
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
Expand Down
54 changes: 8 additions & 46 deletions x-pack/legacy/plugins/ml/public/application/management/jobs_list/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,52 +4,14 @@
* 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 { JobsListPage } from './components';

const template = `<kbn-management-app section="ml/jobs-list">
<div id="kibanaManagementMLSection" />
</kbn-management-app>`;
export const renderApp = (element: HTMLElement, appDependencies: any) => {
ReactDOM.render(React.createElement(JobsListPage), 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);
};
};
4 changes: 2 additions & 2 deletions x-pack/legacy/plugins/ml/public/application/privilege/check_privilege.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ import { ACCESS_DENIED_PATH } from '../management/management_urls';

let privileges: Privileges = getDefaultPrivileges();
// manage_ml requires all monitor and admin cluster privileges: https://github.com/elastic/elasticsearch/blob/664a29c8905d8ce9ba8c18aa1ed5c5de93a0eabc/x-pack/plugin/core/src/main/java/org/elasticsearch/xpack/core/security/authz/privilege/ClusterPrivilege.java#L53
export function canGetManagementMlJobs() {
return new Promise((resolve, reject) => {
export function checkGetManagementMlJobs() {
return new Promise<{ mlFeatureEnabledInSpace: boolean }>((resolve, reject) => {
getManageMlPrivileges().then(
({ capabilities, isPlatinumOrTrialLicense, mlFeatureEnabledInSpace }) => {
privileges = capabilities;
Expand Down
3 changes: 2 additions & 1 deletion x-pack/legacy/plugins/ml/public/application/services/ml_api_service/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,8 @@ export const ml = {

checkManageMLPrivileges() {
return http({
url: `${basePath()}/ml_capabilities?ignoreSpaces=true`,
// TODO Fix http service parameters
url: `${basePath()}/ml_capabilities`, // '?ignoreSpaces=true'
method: 'GET',
});
},
Expand Down
4 changes: 2 additions & 2 deletions x-pack/legacy/plugins/ml/public/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export class MlPlugin implements Plugin<Setup, Start> {
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,
Expand Down