From 3ddd775ad6d61c4b85d11554510bb6838862f70f Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Wed, 25 Mar 2020 11:45:55 -0400 Subject: [PATCH 01/12] use fixed table layout --- .../sections/epm/screens/detail/markdown_renderers.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/markdown_renderers.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/markdown_renderers.tsx index 2e321e8bfc36f..c164138e35740 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/markdown_renderers.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/screens/detail/markdown_renderers.tsx @@ -28,9 +28,7 @@ export const markdownRenderers = { {children} ), table: ({ children }: { children: React.ReactNode[] }) => ( - - {children} -
+ {children}
), tableRow: ({ children }: { children: React.ReactNode[] }) => ( {children} From d2f103d698fe215b92115bda801b75508aca18f7 Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Tue, 28 Apr 2020 14:42:46 -0400 Subject: [PATCH 02/12] add alpha messaging flyout --- .../components/alpha_flyout.tsx | 105 ++++++++++++++++++ .../components/alpha_messaging.tsx | 53 +++++---- 2 files changed, 137 insertions(+), 21 deletions(-) create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx new file mode 100644 index 0000000000000..062c1a38494aa --- /dev/null +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx @@ -0,0 +1,105 @@ +/* + * 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, { useState } from 'react'; +import { + EuiCallOut, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiSpacer, + EuiTitle, + EuiIcon, + EuiText, + EuiTextColor, + EuiLink, + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + EuiButton, + EuiFlyoutFooter, +} from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; + +interface Props { + onClose: () => void; +} + +export const AlphaFlyout: React.FunctionComponent = ({ onClose }) => { + return ( + + + +

+ +

+ + + + +

+ + + + ), + forumLink: ( + + + + ), + }} + /> +

+ +

+ + + + ), + }} + /> +

+ + + + + + + + + ); +}; diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx index 0f3ddee29fa44..64f9e807fb699 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx @@ -3,10 +3,11 @@ * 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 React, { useState } from 'react'; import styled from 'styled-components'; import { FormattedMessage } from '@kbn/i18n/react'; -import { EuiText } from '@elastic/eui'; +import { EuiText, EuiLink } from '@elastic/eui'; +import { AlphaFlyout } from './alpha_flyout'; const Message = styled(EuiText).attrs(props => ({ color: 'subdued', @@ -15,23 +16,33 @@ const Message = styled(EuiText).attrs(props => ({ padding: ${props => props.theme.eui.paddingSizes.m}; `; -export const AlphaMessaging: React.FC<{}> = () => ( - -

- - - - - {' – '} - + + {' – '} + - -

- -); + />{' '} + setIsAlphaFlyoutOpen(true)}> + View more details. + + +

+ + {isAlphaFlyoutOpen && setIsAlphaFlyoutOpen(false)} />} + + ); +}; From 0e1fbfdad77196bd61cca92d6d2d2ac9fa557d95 Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Tue, 28 Apr 2020 15:19:54 -0400 Subject: [PATCH 03/12] Added alpha badge + data streams link --- .../sections/overview/index.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx index 05d150fd9ae23..caa9c6416f8fe 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx @@ -8,6 +8,7 @@ import styled from 'styled-components'; import { EuiButton, EuiButtonEmpty, + EuiBetaBadge, EuiPanel, EuiText, EuiTitle, @@ -19,10 +20,11 @@ import { EuiFlexItem, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { WithHeaderLayout } from '../../layouts'; import { useLink, useGetAgentConfigs } from '../../hooks'; import { AgentEnrollmentFlyout } from '../fleet/agent_list_page/components'; -import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../../constants'; +import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH, DATA_STREAM_PATH } from '../../constants'; const OverviewPanel = styled(EuiPanel).attrs(props => ({ paddingSize: 'm', @@ -57,6 +59,11 @@ const OverviewStats = styled(EuiDescriptionList).attrs(props => ({ } `; +const AlphaBadge = styled(EuiBetaBadge)` + vertical-align: top; + margin-left: ${props => props.theme.eui.paddingSizes.s}; +`; + export const IngestManagerOverview: React.FunctionComponent = () => { // Agent enrollment flyout state const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false); @@ -79,6 +86,18 @@ export const IngestManagerOverview: React.FunctionComponent = () => { id="xpack.ingestManager.overviewPageTitle" defaultMessage="Ingest Manager" /> + @@ -213,7 +232,7 @@ export const IngestManagerOverview: React.FunctionComponent = () => { /> - + Date: Tue, 28 Apr 2020 17:28:10 -0400 Subject: [PATCH 04/12] Update x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx Co-Authored-By: Jen Huang --- .../applications/ingest_manager/components/alpha_flyout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx index 062c1a38494aa..6ec0aaa470c1b 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx @@ -44,7 +44,7 @@ export const AlphaFlyout: React.FunctionComponent = ({ onClose }) => {

Date: Tue, 28 Apr 2020 17:28:28 -0400 Subject: [PATCH 05/12] Update x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx Co-Authored-By: Jen Huang --- .../applications/ingest_manager/components/alpha_flyout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx index 6ec0aaa470c1b..b15a959c58059 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx @@ -71,7 +71,7 @@ export const AlphaFlyout: React.FunctionComponent = ({ onClose }) => {

Date: Tue, 28 Apr 2020 17:38:16 -0400 Subject: [PATCH 07/12] Update x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx Co-Authored-By: Jen Huang --- .../applications/ingest_manager/sections/overview/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx index caa9c6416f8fe..c459b1b3bfb9b 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx @@ -87,13 +87,13 @@ export const IngestManagerOverview: React.FunctionComponent = () => { defaultMessage="Ingest Manager" /> Date: Tue, 28 Apr 2020 17:44:05 -0400 Subject: [PATCH 08/12] remove small tags --- .../components/alpha_messaging.tsx | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx index 64f9e807fb699..0cdbf0ef79273 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx @@ -12,6 +12,7 @@ import { AlphaFlyout } from './alpha_flyout'; const Message = styled(EuiText).attrs(props => ({ color: 'subdued', textAlign: 'center', + size: 's', }))` padding: ${props => props.theme.eui.paddingSizes.m}; `; @@ -23,23 +24,21 @@ export const AlphaMessaging: React.FC<{}> = () => { <>

- - - - - {' – '} + + + {' – '} + {' '} - setIsAlphaFlyoutOpen(true)}> - View more details. - - + />{' '} + setIsAlphaFlyoutOpen(true)}> + View more details. +

{isAlphaFlyoutOpen && setIsAlphaFlyoutOpen(false)} />} From 771153ea2cfbe8ef4b198e42d26c998809ed131e Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Tue, 28 Apr 2020 18:23:48 -0400 Subject: [PATCH 09/12] change messaging from alpha to experimental --- .../components/alpha_flyout.tsx | 53 ++++++++++--------- .../components/alpha_messaging.tsx | 2 +- .../sections/overview/index.tsx | 9 ++-- 3 files changed, 34 insertions(+), 30 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx index c972947bc4b35..586a16578fa08 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx @@ -45,45 +45,48 @@ export const AlphaFlyout: React.FunctionComponent = ({ onClose }) => {

- - - ), - forumLink: ( - - - - ), - }} + defaultMessage="This release is experimental and is not subject to the support SLA. It is designed for users to test and offer feedback about Ingest + Manager and the new Elastic Agent. It is not intended for use in production environments since certain features may change or go away in a future release." />

+ + + + ), + forumLink: ( + + + + ), + }} + /> +

), diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx index 0cdbf0ef79273..5a06a9a879441 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx @@ -27,7 +27,7 @@ export const AlphaMessaging: React.FC<{}> = () => { {' – '} diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx index c459b1b3bfb9b..7eb1f84427cab 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx @@ -87,15 +87,16 @@ export const IngestManagerOverview: React.FunctionComponent = () => { defaultMessage="Ingest Manager" /> From 06d8835407987a7199eb9051ecbcd0ead86c1bdb Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Tue, 28 Apr 2020 20:52:56 -0400 Subject: [PATCH 10/12] add period --- .../applications/ingest_manager/sections/overview/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx index 7eb1f84427cab..2b33ef956a535 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx @@ -96,7 +96,7 @@ export const IngestManagerOverview: React.FunctionComponent = () => { })} tooltipContent={i18n.translate('xpack.IngestManager.alphaBadge.tooltipText', { defaultMessage: - 'This plugin might change or be removed in a future release and is not subject to the support SLA', + 'This plugin might change or be removed in a future release and is not subject to the support SLA.', })} /> From 430805a25083fe7bf9a0a4f0d31bc0c1fcba20a1 Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Wed, 29 Apr 2020 09:57:04 -0400 Subject: [PATCH 11/12] remove unused imports --- .../ingest_manager/components/alpha_flyout.tsx | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx index 586a16578fa08..c71d1e0925dda 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx @@ -3,23 +3,16 @@ * 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, { useState } from 'react'; +import React from 'react'; import { - EuiCallOut, + EuiButtonEmpty, EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, - EuiSpacer, - EuiTitle, - EuiIcon, - EuiText, - EuiTextColor, - EuiLink, - EuiFlexGroup, - EuiFlexItem, - EuiButtonEmpty, - EuiButton, EuiFlyoutFooter, + EuiLink, + EuiText, + EuiTitle, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; From 508eb680ed2c5a9564ec0fb1c6dbed44632a31e0 Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Wed, 29 Apr 2020 12:58:30 -0400 Subject: [PATCH 12/12] fixed i18n ids --- .../applications/ingest_manager/components/alpha_flyout.tsx | 2 +- .../applications/ingest_manager/sections/overview/index.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx index c71d1e0925dda..1e7a14e350229 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx @@ -91,7 +91,7 @@ export const AlphaFlyout: React.FunctionComponent = ({ onClose }) => { diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx index 2b33ef956a535..70d8e7d6882f8 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx @@ -88,13 +88,13 @@ export const IngestManagerOverview: React.FunctionComponent = () => { />