github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Adds title elements which were missing from Calendars pages (#33257) (#33310)

Browse source 
* [ML] Adds title elements which were missing from Calendars pages

* [ML] Removed use of arrow function in calendar list header

* [ML] Updated calendar list header snapshot
This commit is contained in:
Pete Harverson 2019-03-15 15:53:46 +00:00 • committed by GitHub
parent 49bf592b0c
commit 24599135fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 304 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

15
x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
View file

@ -25,6 +25,21 @@ exports[`CalendarForm CalendarId shown as title when editing 1`] = `
exports[`CalendarForm Renders calendar form 1`] = `
<EuiForm>
<EuiTitle
size="m"
textTransform="none"
>
<h1>
<FormattedMessage
defaultMessage="Create new calendar"
id="xpack.ml.calendarsEdit.calendarForm.createCalendarTitle"
values={Object {}}
/>
</h1>
</EuiTitle>
<EuiSpacer
size="m"
/>
<EuiFormRow
describedByIds={Array []}
error={

9
x-pack/plugins/ml/public/settings/calendars/edit/calendar_form/calendar_form.js
View file

@ -91,6 +91,15 @@ export const CalendarForm = injectI18n(function CalendarForm({
<EuiForm>
{!isEdit &&
<Fragment>
<EuiTitle>
<h1>
<FormattedMessage
id="xpack.ml.calendarsEdit.calendarForm.createCalendarTitle"
defaultMessage="Create new calendar"
/>
</h1>
</EuiTitle>
<EuiSpacer size="m"/>
<EuiFormRow
label={<FormattedMessage
id="xpack.ml.calendarsEdit.calendarForm.calendarIdLabel"

4
x-pack/plugins/ml/public/settings/calendars/list/__snapshots__/calendars_list.test.js.snap
View file

@ -11,6 +11,10 @@ exports[`CalendarsList Renders calendar list with calendars 1`] = `
panelPaddingSize="l"
verticalPosition="center"
>
<CalendarsListHeader
refreshCalendars={[Function]}
totalCount={2}
/>
<InjectIntl(CalendarsListTable)
calendarsList={
Array [

122
x-pack/plugins/ml/public/settings/calendars/list/__snapshots__/header.test.js.snap Normal file
View file

@ -0,0 +1,122 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CalendarListsHeader renders header 1`] = `
<Fragment>
<EuiFlexGroup
alignItems="baseline"
justifyContent="spaceBetween"
>
<EuiFlexItem
grow={false}
>
<EuiFlexGroup
alignItems="baseline"
gutterSize="m"
responsive={false}
>
<EuiFlexItem
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
<h1>
<FormattedMessage
defaultMessage="Calendars"
id="xpack.ml.settings.calendars.listHeader.calendarsTitle"
values={Object {}}
/>
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiTextColor
color="subdued"
component="span"
>
<p>
<FormattedMessage
defaultMessage="{totalCount} in total"
id="xpack.ml.settings.calendars.listHeader.calendarsListTotalCount"
values={
Object {
"totalCount": 3,
}
}
/>
</p>
</EuiTextColor>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiFlexGroup
alignItems="baseline"
gutterSize="m"
responsive={false}
>
<EuiFlexItem
grow={false}
>
<EuiButtonEmpty
color="primary"
iconSide="left"
iconType="refresh"
onClick={[MockFunction]}
size="s"
type="button"
>
<FormattedMessage
defaultMessage="Refresh"
id="xpack.ml.settings.calendars.listHeader.refreshButtonLabel"
values={Object {}}
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer
size="m"
/>
<EuiText
grow={true}
size="m"
>
<p>
<EuiTextColor
color="subdued"
component="span"
>
<FormattedMessage
defaultMessage="Calendars contain a list of scheduled events for which you do not want to generate anomalies, such as planned system outages or public holidays. The same calendar can be assigned to multiple jobs.{br}{learnMoreLink}"
id="xpack.ml.settings.calendars.listHeader.calendarsDescription"
values={
Object {
"br": <br />,
"learnMoreLink": <EuiLink
color="primary"
href="https://www.elastic.co/guide/en/elastic-stack-overview/my-metadata-branch/ml-calendars.html"
target="_blank"
type="button"
>
<FormattedMessage
defaultMessage="Learn more"
id="xpack.ml.settings.calendars.listHeader.calendarsDescription.learnMoreLinkText"
values={Object {}}
/>
</EuiLink>,
}
}
/>
</EuiTextColor>
</p>
</EuiText>
<EuiSpacer
size="m"
/>
</Fragment>
`;

7
x-pack/plugins/ml/public/settings/calendars/list/calendars_list.js
View file

@ -19,6 +19,7 @@ import {
EUI_MODAL_CONFIRM_BUTTON,
} from '@elastic/eui';
import { CalendarsListHeader } from './header';
import { CalendarsListTable } from './table/';
import { ml } from '../../../services/ml_api_service';
import { toastNotifications } from 'ui/notify';
@ -45,6 +46,8 @@ export const CalendarsList = injectI18n(class CalendarsList extends Component {
}
loadCalendars = async () => {
this.setState({ loading: true });
try {
const calendars = await ml.calendars();
@ -150,6 +153,10 @@ export const CalendarsList = injectI18n(class CalendarsList extends Component {
verticalPosition="center"
horizontalPosition="center"
>
<CalendarsListHeader
totalCount={calendars.length}
refreshCalendars={this.loadCalendars}
/>
<CalendarsListTable
loading={loading}
calendarsList={this.addRequiredFieldsToList(calendars)}

2
x-pack/plugins/ml/public/settings/calendars/list/calendars_list.test.js
View file

@ -77,7 +77,7 @@ const props = {
describe('CalendarsList', () => {
test('loads calendars on mount', () => {
ml.calendars = jest.fn();
ml.calendars = jest.fn(() => []);
shallowWithIntl(
<CalendarsList.WrappedComponent {...props}/>
);

111
x-pack/plugins/ml/public/settings/calendars/list/header.js Normal file
View file

@ -0,0 +1,111 @@
/*
* 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.
*/
/*
* React component for the header section of the calendars list page.
*/
import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiSpacer,
EuiTitle,
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiText,
EuiTextColor,
EuiButtonEmpty,
} from '@elastic/eui';
import { metadata } from 'ui/metadata';
// metadata.branch corresponds to the version used in documentation links.
const docsUrl = `https://www.elastic.co/guide/en/elastic-stack-overview/${metadata.branch}/ml-calendars.html`;
export function CalendarsListHeader({ totalCount, refreshCalendars }) {
return (
<React.Fragment>
<EuiFlexGroup justifyContent="spaceBetween" alignItems="baseline">
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
<EuiFlexItem grow={false}>
<EuiTitle>
<h1>
<FormattedMessage
id="xpack.ml.settings.calendars.listHeader.calendarsTitle"
defaultMessage="Calendars"
/>
</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem>
<EuiTextColor color="subdued">
<p>
<FormattedMessage
id="xpack.ml.settings.calendars.listHeader.calendarsListTotalCount"
defaultMessage="{totalCount} in total"
values={{
totalCount,
}}
/>
</p>
</EuiTextColor>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
iconType="refresh"
onClick={refreshCalendars}
>
<FormattedMessage
id="xpack.ml.settings.calendars.listHeader.refreshButtonLabel"
defaultMessage="Refresh"
/>
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m"/>
<EuiText>
<p>
<EuiTextColor color="subdued">
<FormattedMessage
id="xpack.ml.settings.calendars.listHeader.calendarsDescription"
defaultMessage="Calendars contain a list of scheduled events for which you do not want to generate anomalies,
such as planned system outages or public holidays. The same calendar can be assigned to multiple jobs.{br}{learnMoreLink}"
values={{
br: <br />,
learnMoreLink: (
<EuiLink href={docsUrl} target="_blank">
<FormattedMessage
id="xpack.ml.settings.calendars.listHeader.calendarsDescription.learnMoreLinkText"
defaultMessage="Learn more"
/>
</EuiLink>
),
}}
/>
</EuiTextColor>
</p>
</EuiText>
<EuiSpacer size="m"/>
</React.Fragment>
);
}
CalendarsListHeader.propTypes = {
totalCount: PropTypes.number.isRequired,
refreshCalendars: PropTypes.func.isRequired
};

35
x-pack/plugins/ml/public/settings/calendars/list/header.test.js Normal file
View file

@ -0,0 +1,35 @@
/*
* 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 { shallowWithIntl } from 'test_utils/enzyme_helpers';
import React from 'react';
import { CalendarsListHeader } from './header';
describe('CalendarListsHeader', () => {
const refreshCalendars = jest.fn(() => {});
const requiredProps = {
totalCount: 3,
refreshCalendars,
};
test('renders header', () => {
const props = {
...requiredProps,
};
const component = shallowWithIntl(
<CalendarsListHeader {...props} />
);
expect(component).toMatchSnapshot();
});
});