mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[ML] Converts Settings page to react (#27144)
* Replace settings page with react directive * Adds test for Settings component * add calendar permission check * Update settings test * Remove outdated angular settings tests
This commit is contained in:
Melissa Alvarez
GitHub
parent
99a5727c6c
commit
6dd6f2f200
9 changed files with 276 additions and 146 deletions
|
|
@ -0,0 +1,74 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Settings Renders settings page 1`] = `
|
||||
<EuiPage
|
||||
className="mlSettingsPage"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageBody
|
||||
className="mlSettingsPage__body"
|
||||
restrictWidth={false}
|
||||
>
|
||||
<EuiPageContent
|
||||
className="mlSettingsPage__content"
|
||||
horizontalPosition="center"
|
||||
panelPaddingSize="l"
|
||||
>
|
||||
<EuiPageContentHeader
|
||||
responsive={true}
|
||||
>
|
||||
<EuiTitle
|
||||
size="m"
|
||||
textTransform="none"
|
||||
>
|
||||
<h2>
|
||||
Job Management
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageContentHeader>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
component="div"
|
||||
direction="row"
|
||||
gutterSize="xl"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-testid="ml_calendar_mng_button"
|
||||
href="undefined/app/ml#/settings/calendars_list"
|
||||
iconSide="left"
|
||||
isDisabled={false}
|
||||
size="l"
|
||||
type="button"
|
||||
>
|
||||
Calendar management
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-testid="ml_filter_lists_button"
|
||||
href="undefined/app/ml#/settings/filter_lists"
|
||||
iconSide="left"
|
||||
isDisabled={false}
|
||||
size="l"
|
||||
type="button"
|
||||
>
|
||||
Filter Lists
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
`;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import ngMock from 'ng_mock';
|
||||
import expect from 'expect.js';
|
||||
|
||||
describe('ML - Settings Controller', () => {
|
||||
beforeEach(() => {
|
||||
ngMock.module('kibana');
|
||||
});
|
||||
|
||||
it('Initialize Settings Controller', (done) => {
|
||||
ngMock.inject(function ($rootScope, $controller) {
|
||||
const scope = $rootScope.$new();
|
||||
|
||||
expect(() => {
|
||||
$controller('MlSettings', { $scope: scope });
|
||||
}).to.not.throwError();
|
||||
|
||||
expect(scope.canCreateFilter).to.eql(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,18 +1,14 @@
|
|||
.disabled {
|
||||
color: $euiColorMediumShade;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mlSettingsPage {
|
||||
|
||||
ml-settings {
|
||||
.mgtPanel {
|
||||
.mgtPanel__link {
|
||||
font-size: $euiFontSizeM;
|
||||
line-height: $euiSizeXL;
|
||||
margin-left: $euiSizeXS;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $euiColorMediumShade;
|
||||
}
|
||||
.mlSettingsPage__body {
|
||||
background: $euiColorLightestShade;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.mlSettingsPage__content {
|
||||
width: map-get($euiBreakpoints, 'xl');
|
||||
margin-top: $euiSize;
|
||||
margin-bottom: $euiSize;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@
|
|||
|
||||
|
||||
|
||||
import './settings_controller';
|
||||
import './settings_directive';
|
||||
import './calendars';
|
||||
import './filter_lists';
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
<ml-nav-menu name="settings"></ml-nav-menu>
|
||||
<ml-settings ng-controller="MlSettings">
|
||||
|
||||
<div class="page-row">
|
||||
|
||||
<div class="kuiPanel mgtPanel">
|
||||
<div class="kuiPanelHeader">
|
||||
<div class="kuiPanelHeaderSection">
|
||||
<div class="kuiPanelHeader__title ng-binding">
|
||||
Job Management
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiPanelBody mgtPanel__body">
|
||||
<div class="row">
|
||||
<ul class="list-unstyled">
|
||||
<li class="col-xs-4 col-md-3 ng-scope">
|
||||
<a
|
||||
data-test-subj=""
|
||||
class="mgtPanel__link ng-binding"
|
||||
tooltip=""
|
||||
tooltip-placement="bottom"
|
||||
tooltip-popup-delay="400"
|
||||
tooltip-append-to-body="1"
|
||||
href="ml#/settings/calendars_list">
|
||||
Calendar management
|
||||
</a>
|
||||
</li>
|
||||
<li class="col-xs-4 col-md-3 ng-scope">
|
||||
<a
|
||||
ng-if="(canCreateFilter === true)"
|
||||
data-test-subj=""
|
||||
class="mgtPanel__link ng-binding"
|
||||
tooltip=""
|
||||
tooltip-placement="bottom"
|
||||
tooltip-popup-delay="400"
|
||||
tooltip-append-to-body="1"
|
||||
href="ml#/settings/filter_lists">
|
||||
Filter Lists
|
||||
</a>
|
||||
<span
|
||||
ng-if="(canCreateFilter === false)"
|
||||
class="mgtPanel__link disabled ng-binding"
|
||||
tooltip="You do not have permission to manage filter lists"
|
||||
tooltip-placement="bottom"
|
||||
tooltip-popup-delay="400"
|
||||
tooltip-append-to-body="1"
|
||||
>
|
||||
Filter Lists
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ml-settings>
|
||||
75
x-pack/plugins/ml/public/settings/settings.js
Normal file
75
x-pack/plugins/ml/public/settings/settings.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React from 'react';
|
||||
import { PropTypes } from 'prop-types';
|
||||
|
||||
import {
|
||||
EuiButtonEmpty,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPage,
|
||||
EuiPageContentHeader,
|
||||
EuiPageContent,
|
||||
EuiPageBody,
|
||||
EuiTitle
|
||||
} from '@elastic/eui';
|
||||
|
||||
import chrome from 'ui/chrome';
|
||||
|
||||
|
||||
export function Settings({ canCreateFilter, canCreateCalendar }) {
|
||||
return (
|
||||
<EuiPage className="mlSettingsPage">
|
||||
<EuiPageBody className="mlSettingsPage__body">
|
||||
<EuiPageContent
|
||||
className="mlSettingsPage__content"
|
||||
horizontalPosition="center"
|
||||
>
|
||||
<EuiPageContentHeader>
|
||||
<EuiTitle>
|
||||
<h2>Job Management</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageContentHeader>
|
||||
|
||||
<EuiFlexGroup gutterSize="xl">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
data-testid="ml_calendar_mng_button"
|
||||
size="l"
|
||||
color="primary"
|
||||
href={`${chrome.getBasePath()}/app/ml#/settings/calendars_list`}
|
||||
isDisabled={canCreateCalendar === false}
|
||||
>
|
||||
Calendar management
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
data-testid="ml_filter_lists_button"
|
||||
size="l"
|
||||
color="primary"
|
||||
href={`${chrome.getBasePath()}/app/ml#/settings/filter_lists`}
|
||||
isDisabled={canCreateFilter === false}
|
||||
>
|
||||
Filter Lists
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
);
|
||||
}
|
||||
|
||||
Settings.propTypes = {
|
||||
canCreateFilter: PropTypes.bool.isRequired,
|
||||
canCreateCalendar: PropTypes.bool.isRequired,
|
||||
};
|
||||
49
x-pack/plugins/ml/public/settings/settings.test.js
Normal file
49
x-pack/plugins/ml/public/settings/settings.test.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
jest.mock('ui/chrome', () => ({
|
||||
getBasePath: jest.fn()
|
||||
}));
|
||||
|
||||
import { shallow, mount } from 'enzyme';
|
||||
import React from 'react';
|
||||
|
||||
import { Settings } from './settings';
|
||||
|
||||
|
||||
describe('Settings', () => {
|
||||
|
||||
test('Renders settings page', () => {
|
||||
const wrapper = shallow(
|
||||
<Settings canCreateFilter={true} canCreateCalendar={true}/>
|
||||
);
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('Filter Lists button disabled if canCreateFilter is false', () => {
|
||||
const wrapper = mount(
|
||||
<Settings canCreateFilter={false} canCreateCalendar={true}/>
|
||||
);
|
||||
|
||||
const button = wrapper.find('[data-testid="ml_filter_lists_button"]');
|
||||
const filterButton = button.find('EuiButtonEmpty');
|
||||
expect(filterButton.prop('isDisabled')).toBe(true);
|
||||
});
|
||||
|
||||
test('Calendar management button disabled if canCreateCalendar is false', () => {
|
||||
const wrapper = mount(
|
||||
<Settings canCreateFilter={true} canCreateCalendar={false} />
|
||||
);
|
||||
|
||||
const button = wrapper.find('[data-testid="ml_calendar_mng_button"]');
|
||||
const calendarButton = button.find('EuiButtonEmpty');
|
||||
expect(calendarButton.prop('isDisabled')).toBe(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import uiRoutes from 'ui/routes';
|
||||
import { getSettingsBreadcrumbs } from './breadcrumbs';
|
||||
import { checkFullLicense } from 'plugins/ml/license/check_license';
|
||||
import { checkGetJobsPrivilege, checkPermission } from 'plugins/ml/privilege/check_privilege';
|
||||
import { getMlNodeCount } from 'plugins/ml/ml_nodes_check/check_ml_nodes';
|
||||
import { initPromise } from 'plugins/ml/util/promise';
|
||||
|
||||
import template from './settings.html';
|
||||
|
||||
import { timefilter } from 'ui/timefilter';
|
||||
|
||||
uiRoutes
|
||||
.when('/settings', {
|
||||
template,
|
||||
k7Breadcrumbs: getSettingsBreadcrumbs,
|
||||
resolve: {
|
||||
CheckLicense: checkFullLicense,
|
||||
privileges: checkGetJobsPrivilege,
|
||||
mlNodeCount: getMlNodeCount,
|
||||
initPromise: initPromise(true)
|
||||
}
|
||||
});
|
||||
|
||||
import { uiModules } from 'ui/modules';
|
||||
const module = uiModules.get('apps/ml');
|
||||
|
||||
module.controller('MlSettings', function ($scope) {
|
||||
|
||||
timefilter.disableTimeRangeSelector(); // remove time picker from top of page
|
||||
timefilter.disableAutoRefreshSelector(); // remove time picker from top of page
|
||||
|
||||
$scope.canCreateFilter = checkPermission('canCreateFilter');
|
||||
});
|
||||
65
x-pack/plugins/ml/public/settings/settings_directive.js
Normal file
65
x-pack/plugins/ml/public/settings/settings_directive.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
|
||||
import 'ngreact';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import { uiModules } from 'ui/modules';
|
||||
const module = uiModules.get('apps/ml', ['react']);
|
||||
|
||||
import { checkFullLicense } from '../license/check_license';
|
||||
import { checkGetJobsPrivilege, checkPermission } from '../privilege/check_privilege';
|
||||
import { getMlNodeCount } from '../ml_nodes_check/check_ml_nodes';
|
||||
import { initPromise } from '../util/promise';
|
||||
import { getSettingsBreadcrumbs } from './breadcrumbs';
|
||||
|
||||
import uiRoutes from 'ui/routes';
|
||||
import { timefilter } from 'ui/timefilter';
|
||||
|
||||
const template = `
|
||||
<ml-nav-menu name="settings" />
|
||||
<div class="mlSettingsPage">
|
||||
<ml-settings />
|
||||
</div>
|
||||
`;
|
||||
|
||||
uiRoutes
|
||||
.when('/settings', {
|
||||
template,
|
||||
k7Breadcrumbs: getSettingsBreadcrumbs,
|
||||
resolve: {
|
||||
CheckLicense: checkFullLicense,
|
||||
privileges: checkGetJobsPrivilege,
|
||||
mlNodeCount: getMlNodeCount,
|
||||
initPromise: initPromise(false)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
import { Settings } from './settings.js';
|
||||
|
||||
module.directive('mlSettings', function () {
|
||||
|
||||
timefilter.disableTimeRangeSelector(); // remove time picker from top of page
|
||||
timefilter.disableAutoRefreshSelector(); // remove time picker from top of page
|
||||
|
||||
const canCreateFilter = checkPermission('canCreateFilter');
|
||||
const canCreateCalendar = checkPermission('canCreateCalendar');
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: false,
|
||||
scope: {},
|
||||
link: function (scope, element) {
|
||||
ReactDOM.render(
|
||||
React.createElement(Settings, { canCreateFilter, canCreateCalendar }),
|
||||
element[0]
|
||||
);
|
||||
}
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue