From 82562a8e251fb0bfca68f3c5ce7bf096461eb7d5 Mon Sep 17 00:00:00 2001 From: Henry Harding Date: Mon, 13 Jul 2020 20:05:45 -0400 Subject: [PATCH] Add tooltips to Ingest manager overview section and update text to say Beta (#71373) * add tooltips and beta label to Ingest Manager overview page * updated footer messaging and about-this-release flyout * forgot to remove commented out code * fixed responsive issue with tooltip * removed unused import * fix i18n * update link to docs * update text Co-authored-by: Elastic Machine --- .../components/alpha_flyout.tsx | 58 +++++++------------ .../components/alpha_messaging.tsx | 11 ++-- .../overview/components/agent_section.tsx | 36 +++++------- .../components/configuration_section.tsx | 35 +++++------ .../components/datastream_section.tsx | 35 +++++------ .../components/integration_section.tsx | 36 +++++------- .../overview/components/overview_panel.tsx | 49 +++++++++++++++- .../sections/overview/index.tsx | 45 +++++++------- .../translations/translations/ja-JP.json | 5 -- .../translations/translations/zh-CN.json | 5 -- 10 files changed, 158 insertions(+), 157 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 1e7a14e350229..03c70f71529c9 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 @@ -38,50 +38,34 @@ export const AlphaFlyout: React.FunctionComponent = ({ onClose }) => {

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

-

+ docsLink: ( + + + + ), + 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 f43419fc52ef0..ca4dfcb685e7b 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 @@ -28,17 +28,20 @@ export const AlphaMessaging: React.FC<{}> = () => { {' – '} {' '} setIsAlphaFlyoutOpen(true)}> - View more details. +

diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx index 6e61a55466e87..7e33589bffea1 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx @@ -5,13 +5,13 @@ */ import React from 'react'; -import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { - EuiTitle, - EuiButtonEmpty, + EuiI18nNumber, EuiDescriptionListTitle, EuiDescriptionListDescription, + EuiFlexItem, } from '@elastic/eui'; import { OverviewPanel } from './overview_panel'; import { OverviewStats } from './overview_stats'; @@ -24,23 +24,19 @@ export const OverviewAgentSection = () => { return ( - -
- -

- -

- - - - -
+ {agentStatusRequest.isLoading ? ( diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx index 5a5e901d629b5..56aaba1d43321 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx @@ -5,11 +5,11 @@ */ import React from 'react'; -import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { - EuiTitle, - EuiButtonEmpty, + EuiFlexItem, + EuiI18nNumber, EuiDescriptionListTitle, EuiDescriptionListDescription, } from '@elastic/eui'; @@ -30,23 +30,18 @@ export const OverviewConfigurationSection: React.FC<{ agentConfigs: AgentConfig[ return ( - -
- -

- -

- - - - -
+ {packageConfigsRequest.isLoading ? ( diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx index eab6cf087e127..41c011de2da5c 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx @@ -5,11 +5,11 @@ */ import React from 'react'; -import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { - EuiTitle, - EuiButtonEmpty, + EuiFlexItem, + EuiI18nNumber, EuiDescriptionListTitle, EuiDescriptionListDescription, } from '@elastic/eui'; @@ -45,23 +45,18 @@ export const OverviewDatastreamSection: React.FC = () => { return ( - -
- -

- -

- - - - -
+ {datastreamRequest.isLoading ? ( diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx index b4669b0a0569b..ba16b47e73051 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx @@ -5,11 +5,11 @@ */ import React from 'react'; -import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { - EuiTitle, - EuiButtonEmpty, + EuiFlexItem, + EuiI18nNumber, EuiDescriptionListTitle, EuiDescriptionListDescription, } from '@elastic/eui'; @@ -31,23 +31,19 @@ export const OverviewIntegrationSection: React.FC = () => { )?.length ?? 0; return ( - -
- -

- -

- - - - -
+ {packagesRequest.isLoading ? ( diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx index 2e75d1e4690d6..65811261a6d6b 100644 --- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx +++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx @@ -4,10 +4,18 @@ * you may not use this file except in compliance with the Elastic License. */ +import React from 'react'; import styled from 'styled-components'; -import { EuiPanel } from '@elastic/eui'; +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiIconTip, + EuiButtonEmpty, +} from '@elastic/eui'; -export const OverviewPanel = styled(EuiPanel).attrs((props) => ({ +const StyledPanel = styled(EuiPanel).attrs((props) => ({ paddingSize: 'm', }))` header { @@ -26,3 +34,40 @@ export const OverviewPanel = styled(EuiPanel).attrs((props) => ({ padding: ${(props) => props.theme.eui.paddingSizes.xs} 0; } `; + +interface OverviewPanelProps { + title: string; + tooltip: string; + linkToText: string; + linkTo: string; + children: React.ReactNode; +} + +export const OverviewPanel = ({ + title, + tooltip, + linkToText, + linkTo, + children, +}: OverviewPanelProps) => { + return ( + +
+ + + +

{title}

+ + + + + + + + {linkToText} + +
+ {children} + + ); +}; 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 ca4151fa5c46f..f4b68f0c5107e 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 @@ -4,11 +4,11 @@ * you may not use this file except in compliance with the Elastic License. */ import React, { useState } from 'react'; -import styled from 'styled-components'; import { EuiButton, EuiBetaBadge, EuiText, + EuiTitle, EuiFlexGrid, EuiFlexGroup, EuiFlexItem, @@ -23,11 +23,6 @@ import { OverviewConfigurationSection } from './components/configuration_section import { OverviewIntegrationSection } from './components/integration_section'; import { OverviewDatastreamSection } from './components/datastream_section'; -const AlphaBadge = styled(EuiBetaBadge)` - vertical-align: top; - margin-left: ${(props) => props.theme.eui.paddingSizes.s}; -`; - export const IngestManagerOverview: React.FunctionComponent = () => { useBreadcrumbs('overview'); @@ -46,26 +41,30 @@ export const IngestManagerOverview: React.FunctionComponent = () => { leftColumn={ - -

- - + + +

+ +

+ + + + + -

- + + @@ -102,9 +101,7 @@ export const IngestManagerOverview: React.FunctionComponent = () => { - - diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index cba436f2e8b3b..4050982a6ef99 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -8098,9 +8098,6 @@ "xpack.ingestManager.agentReassignConfig.flyoutTitle": "新しいエージェント構成を割り当て", "xpack.ingestManager.agentReassignConfig.selectConfigLabel": "エージェント構成", "xpack.ingestManager.agentReassignConfig.successSingleNotificationTitle": "新しいエージェント構成が再割り当てされました", - "xpack.ingestManager.alphaBadge.labelText": "実験的", - "xpack.ingestManager.alphaBadge.titleText": "実験的", - "xpack.ingestManager.alphaBadge.tooltipText": "このプラグインは今後のリリースで変更または削除される可能性があり、SLAのサポート対象になりません。", "xpack.ingestManager.alphaMessageDescription": "Ingest Managerは開発中であり、本番用ではありません。", "xpack.ingestManager.alphaMessageTitle": "実験的", "xpack.ingestManager.alphaMessaging.docsLink": "ドキュメンテーション", @@ -8108,8 +8105,6 @@ "xpack.ingestManager.alphaMessaging.flyoutTitle": "このリリースについて", "xpack.ingestManager.alphaMessaging.forumLink": "ディスカッションフォーラム", "xpack.ingestManager.alphaMessaging.introText": "このリリースはテスト段階であり、SLAの対象ではありません。ユーザーがIngest Managerと新しいElasticエージェントをテストしてフィードバックを提供することを目的としています。今後のリリースにおいて特定の機能が変更されたり、廃止されたりする可能性があるため、本番環境で使用しないでください。", - "xpack.ingestManager.alphaMessaging.warningNote": "注", - "xpack.ingestManager.alphaMessaging.warningText": "{note}：今後のリリースでは表示が制限されるため、Ingest Managerでは重要なデータを保存しないでください。このバージョンは、今後のリリースで廃止予定のインデックスストラテジーを使用していて、移行方法はありません。また、特定の機能のライセンスは検討中であり、今後変更される場合があります。結果として、ライセンスティアによっては、特定の機能へのアクセスが失われる場合があります。", "xpack.ingestManager.alphaMessging.closeFlyoutLabel": "閉じる", "xpack.ingestManager.appNavigation.configurationsLinkText": "構成", "xpack.ingestManager.appNavigation.dataStreamsLinkText": "データストリーム", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index f512ad1046bac..7fc142a7684a1 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -8103,9 +8103,6 @@ "xpack.ingestManager.agentReassignConfig.flyoutTitle": "分配新代理配置", "xpack.ingestManager.agentReassignConfig.selectConfigLabel": "代理配置", "xpack.ingestManager.agentReassignConfig.successSingleNotificationTitle": "代理配置已重新分配", - "xpack.ingestManager.alphaBadge.labelText": "实验性", - "xpack.ingestManager.alphaBadge.titleText": "实验性", - "xpack.ingestManager.alphaBadge.tooltipText": "在未来的版本中可能会更改或移除此插件，其不受支持 SLA 的约束。", "xpack.ingestManager.alphaMessageDescription": "Ingest Manager 仍处于开发状态，不适用于生产用途。", "xpack.ingestManager.alphaMessageTitle": "实验性", "xpack.ingestManager.alphaMessaging.docsLink": "文档", @@ -8113,8 +8110,6 @@ "xpack.ingestManager.alphaMessaging.flyoutTitle": "关于本版本", "xpack.ingestManager.alphaMessaging.forumLink": "讨论论坛", "xpack.ingestManager.alphaMessaging.introText": "本版本为实验性版本，不受支持 SLA 的约束。其用于用户测试 Ingest Manager 和新 Elastic 代理并提供相关反馈。因为在未来版本中可能更改或移除某些功能，所以不适用于生产环境。", - "xpack.ingestManager.alphaMessaging.warningNote": "注意", - "xpack.ingestManager.alphaMessaging.warningText": "{note}：不应使用 Ingest Manager 存储重要的数据，因为在未来的版本中可能看不到这些数据。此版本将使用在未来版本中会过时的索引策略，而且没有迁移路径。另外，某些功能的许可方式正在考虑之中，将来可能会变更。因为，根据您的许可证级别，您可能无法使用某些功能。", "xpack.ingestManager.alphaMessging.closeFlyoutLabel": "关闭", "xpack.ingestManager.appNavigation.configurationsLinkText": "配置", "xpack.ingestManager.appNavigation.dataStreamsLinkText": "数据流",