Skip to content

Commit

Permalink
Improve alpha messaging (#64692) (#64840)
Browse files Browse the repository at this point in the history
  • Loading branch information
Henry Harding committed May 4, 2020
1 parent 1623629 commit 266da2b
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 22 deletions.
101 changes: 101 additions & 0 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* 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 {
EuiButtonEmpty,
EuiFlyout,
EuiFlyoutBody,
EuiFlyoutHeader,
EuiFlyoutFooter,
EuiLink,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

interface Props {
onClose: () => void;
}

export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
return (
<EuiFlyout onClose={onClose} size="m" maxWidth={640}>
<EuiFlyoutHeader hasBorder aria-labelledby="AlphaMessagingFlyoutTitle">
<EuiTitle size="m">
<h2 id="AlphaMessagingFlyoutTitle">
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.flyoutTitle"
defaultMessage="About this release"
/>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText size="m">
<p>
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.introText"
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."
/>
</p>
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.feedbackText"
defaultMessage="We encourage you to read our {docsLink} or to ask questions and send feedback in our {forumLink}."
values={{
docsLink: (
<EuiLink href="https://ela.st/ingest-manager-docs" external target="_blank">
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.docsLink"
defaultMessage="documentation"
/>
</EuiLink>
),
forumLink: (
<EuiLink href="https://ela.st/ingest-manager-forum" external target="_blank">
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.forumLink"
defaultMessage="Discuss forum"
/>
</EuiLink>
),
}}
/>
<p />

<p>
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.warningText"
defaultMessage="{note}: you should not store important data with Ingest Manager
since you will have limited visibility to it in a future release. This version uses an
indexing strategy that will be deprecated in a future release and there is no migration
path. Also, licensing for certain features is under consideration and may change in the future. As a result, you may lose access to certain features based on your license
tier."
values={{
note: (
<strong>
<FormattedMessage
id="xpack.ingestManager.alphaMessaging.warningNote"
defaultMessage="Note"
/>
</strong>
),
}}
/>
</p>
</EuiText>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
<FormattedMessage
id="xpack.ingestManager.alphaMessging.closeFlyoutLabel"
defaultMessage="Close"
/>
</EuiButtonEmpty>
</EuiFlyoutFooter>
</EuiFlyout>
);
};
50 changes: 30 additions & 20 deletions .../plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,45 @@
* 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',
textAlign: 'center',
size: 's',
}))`
padding: ${props => props.theme.eui.paddingSizes.m};
`;

export const AlphaMessaging: React.FC<{}> = () => (
<Message>
<p>
<small>
<strong>
export const AlphaMessaging: React.FC<{}> = () => {
const [isAlphaFlyoutOpen, setIsAlphaFlyoutOpen] = useState<boolean>(false);

return (
<>
<Message>
<p>
<strong>
<FormattedMessage
id="xpack.ingestManager.alphaMessageTitle"
defaultMessage="Experimental"
/>
</strong>
{' – '}
<FormattedMessage
id="xpack.ingestManager.alphaMessageTitle"
defaultMessage="Alpha release"
/>
</strong>
{' – '}
<FormattedMessage
id="xpack.ingestManager.alphaMessageDescription"
defaultMessage="Ingest Manager is under active development and is not
id="xpack.ingestManager.alphaMessageDescription"
defaultMessage="Ingest Manager is under active development and is not
intended for production purposes."
/>
</small>
</p>
</Message>
);
/>{' '}
<EuiLink color="subdued" onClick={() => setIsAlphaFlyoutOpen(true)}>
View more details.
</EuiLink>
</p>
</Message>
{isAlphaFlyoutOpen && <AlphaFlyout onClose={() => setIsAlphaFlyoutOpen(false)} />}
</>
);
};
24 changes: 22 additions & 2 deletions x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import styled from 'styled-components';
import {
EuiButton,
EuiButtonEmpty,
EuiBetaBadge,
EuiPanel,
EuiText,
EuiTitle,
Expand All @@ -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',
Expand Down Expand Up @@ -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<boolean>(false);
Expand All @@ -79,6 +86,19 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
id="xpack.ingestManager.overviewPageTitle"
defaultMessage="Ingest Manager"
/>
<AlphaBadge
iconType="beaker"
label={i18n.translate('xpack.ingestManager.alphaBadge.labelText', {
defaultMessage: 'Experimental',
})}
title={i18n.translate('xpack.ingestManager.alphaBadge.titleText', {
defaultMessage: 'Experimental',
})}
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.',
})}
/>
</h1>
</EuiText>
</EuiFlexItem>
Expand Down Expand Up @@ -213,7 +233,7 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
/>
</h2>
</EuiTitle>
<EuiButtonEmpty size="xs" flush="right">
<EuiButtonEmpty size="xs" flush="right" href={useLink(DATA_STREAM_PATH)}>
<FormattedMessage
id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
defaultMessage="View data streams"
Expand Down

0 comments on commit 266da2b

Please sign in to comment.