From b2d60704df654f5064f60e9e2b1cb67badd1e70a Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 6 Oct 2022 15:41:44 -0400 Subject: [PATCH 1/9] [APM] Adds button group to navigate to "All services" (#142084) --- .../service_groups_list/index.tsx | 70 ++++++++++++++++++- .../service_group_card.tsx | 43 +----------- .../service_groups_list.tsx | 26 ------- .../service_groups/service_groups_tour.tsx | 7 +- .../use_service_groups_tour.tsx | 2 +- .../translations/translations/fr-FR.json | 3 - .../translations/translations/ja-JP.json | 3 - .../translations/translations/zh-CN.json | 3 - 8 files changed, 75 insertions(+), 82 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx index 734298dabe9eb..353ca133eb179 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -12,6 +12,7 @@ import { EuiFlexItem, EuiFormControlLayout, EuiText, + EuiButtonGroup, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty, sortBy } from 'lodash'; @@ -21,11 +22,58 @@ import { ServiceGroupsListItems } from './service_groups_list'; import { Sort } from './sort'; import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber'; import { getDateRange } from '../../../../context/url_params_context/helpers'; +import { RedirectTo } from '../../../routing/redirect_to'; +import { ServiceGroupsTour } from '../service_groups_tour'; +import { useServiceGroupsTour } from '../use_service_groups_tour'; export type ServiceGroupsSortType = 'recently_added' | 'alphabetical'; export function ServiceGroupsList() { + const { tourEnabled, dismissTour } = useServiceGroupsTour( + 'serviceGroupsAllServices' + ); + const buttonGroupOptions = { + allServices: { + id: 'allServices', + label: ( + + <> + {i18n.translate('xpack.apm.serviceGroups.list.allServices.name', { + defaultMessage: 'All services', + })} + + + ), + }, + serviceGroups: { + id: 'serviceGroups', + label: i18n.translate( + 'xpack.apm.serviceGroups.emptyPrompt.serviceGroups', + { + defaultMessage: 'Service groups', + } + ), + }, + }; + const [filter, setFilter] = useState(''); + const [buttonGroupSelection, setButtonGroupSelection] = useState( + buttonGroupOptions.serviceGroups.id + ); const [apmServiceGroupsSortType, setServiceGroupsSortType] = useState('recently_added'); @@ -91,7 +139,6 @@ export function ServiceGroupsList() { }, []); if (isLoading) { - // return null; return ( } @@ -106,9 +153,28 @@ export function ServiceGroupsList() { ); } + if (buttonGroupSelection === buttonGroupOptions.allServices.id) { + return ; + } + return ( + + { + dismissTour(); + setButtonGroupSelection(id); + }} + legend="" + /> + @@ -151,7 +217,7 @@ export function ServiceGroupsList() { {i18n.translate('xpack.apm.serviceGroups.groupsCount', { defaultMessage: '{servicesCount} {servicesCount, plural, =0 {group} one {group} other {groups}}', - values: { servicesCount: filteredItems.length + 1 }, + values: { servicesCount: filteredItems.length }, })} diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx index 96d6f381ebe14..bc8a424c922b9 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx @@ -18,15 +18,12 @@ import { ServiceGroup, SERVICE_GROUP_COLOR_DEFAULT, } from '../../../../../common/service_groups'; -import { ServiceGroupsTour } from '../service_groups_tour'; -import { useServiceGroupsTour } from '../use_service_groups_tour'; interface Props { serviceGroup: ServiceGroup; hideServiceCount?: boolean; onClick?: () => void; href?: string; - withTour?: boolean; servicesCount?: number; } @@ -35,11 +32,8 @@ export function ServiceGroupsCard({ hideServiceCount = false, onClick, href, - withTour, servicesCount, }: Props) { - const { tourEnabled, dismissTour } = useServiceGroupsTour('serviceGroupCard'); - const cardProps: EuiCardProps = { style: { width: 286 }, icon: ( @@ -81,45 +75,10 @@ export function ServiceGroupsCard({ )} ), - onClick: () => { - dismissTour(); - if (onClick) { - onClick(); - } - }, + onClick, href, }; - if (withTour) { - return ( - - - <>{cardProps.description} - - } - /> - - ); - } - return ( diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx index 000759cc92021..64935927b9363 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx @@ -5,11 +5,9 @@ * 2.0. */ import { EuiFlexGrid } from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; import React from 'react'; import { SavedServiceGroup } from '../../../../../common/service_groups'; import { ServiceGroupsCard } from './service_group_card'; -import { SERVICE_GROUP_COLOR_DEFAULT } from '../../../../../common/service_groups'; import { useApmRouter } from '../../../../hooks/use_apm_router'; import { useApmParams } from '../../../../hooks/use_apm_params'; import { useDefaultEnvironment } from '../../../../hooks/use_default_environment'; @@ -42,30 +40,6 @@ export function ServiceGroupsListItems({ items, servicesCounts }: Props) { })} /> ))} - ); } diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx index 0d4f825caefe3..c0065e859178a 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx @@ -11,7 +11,10 @@ import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { ElasticDocsLink } from '../../shared/links/elastic_docs_link'; -export type TourType = 'createGroup' | 'editGroup' | 'serviceGroupCard'; +export type TourType = + | 'createGroup' + | 'editGroup' + | 'serviceGroupsAllServices'; interface Props { title: string; @@ -63,7 +66,7 @@ export function ServiceGroupsTour({ step={1} stepsTotal={1} title={title} - anchorPosition="leftUp" + anchorPosition="upLeft" footerAction={ {i18n.translate('xpack.apm.serviceGroups.tour.dismiss', { diff --git a/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx b/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx index ba27b0e2640e8..a6f4f89cdd04c 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx @@ -11,7 +11,7 @@ import { TourType } from './service_groups_tour'; const INITIAL_STATE: Record = { createGroup: true, editGroup: true, - serviceGroupCard: true, + serviceGroupsAllServices: true, }; export function useServiceGroupsTour(type: TourType) { diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 8a1fda344a013..66b0146ac835c 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -7528,7 +7528,6 @@ "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "Veuillez fournir une valeur de couleur valide", "xpack.apm.serviceGroups.groupDetailsForm.name": "Nom", "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "Sélectionner des services", - "xpack.apm.serviceGroups.list.allServices.description": "Afficher tous les services", "xpack.apm.serviceGroups.list.allServices.name": "Tous les services", "xpack.apm.serviceGroups.list.sort.alphabetical": "Alphabétique", "xpack.apm.serviceGroups.list.sort.recentlyAdded": "Récemment ajouté", @@ -7550,8 +7549,6 @@ "xpack.apm.serviceGroups.tour.dismiss": "Rejeter", "xpack.apm.serviceGroups.tour.editGroups.content": "Utilisez l'option de modification pour changer le nom, la requête ou les détails de ce groupe de services.", "xpack.apm.serviceGroups.tour.editGroups.title": "Modifier ce groupe de services", - "xpack.apm.serviceGroups.tour.serviceGroups.content": "Maintenant que vous avez créé un groupe de services, votre inventaire Tous les services a été déplacé ici. Ce groupe ne peut être ni modifié ni retiré.", - "xpack.apm.serviceGroups.tour.serviceGroups.title": "Groupe Tous les services", "xpack.apm.serviceHealthStatus.critical": "Critique", "xpack.apm.serviceHealthStatus.healthy": "Intègre", "xpack.apm.serviceHealthStatus.unknown": "Inconnu", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 79f3d61efeae0..e50e9e2e96a8a 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7515,7 +7515,6 @@ "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "有効な色値を指定してください", "xpack.apm.serviceGroups.groupDetailsForm.name": "名前", "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "サービスを選択", - "xpack.apm.serviceGroups.list.allServices.description": "すべてのサービスを表示", "xpack.apm.serviceGroups.list.allServices.name": "すべてのサービス", "xpack.apm.serviceGroups.list.sort.alphabetical": "アルファベット順", "xpack.apm.serviceGroups.list.sort.recentlyAdded": "最近追加された項目", @@ -7537,8 +7536,6 @@ "xpack.apm.serviceGroups.tour.dismiss": "閉じる", "xpack.apm.serviceGroups.tour.editGroups.content": "編集オプションを使用して、名前、クエリ、このサービスグループの詳細を変更します。", "xpack.apm.serviceGroups.tour.editGroups.title": "このサービスグループを編集", - "xpack.apm.serviceGroups.tour.serviceGroups.content": "サービスグループが作成されたため、すべてのサービスインベントリがここに移動されました。このグループは編集または削除できません。", - "xpack.apm.serviceGroups.tour.serviceGroups.title": "すべてのサービスグループ", "xpack.apm.serviceHealthStatus.critical": "重大", "xpack.apm.serviceHealthStatus.healthy": "正常", "xpack.apm.serviceHealthStatus.unknown": "不明", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index d0852f4c84387..d7d0f98a7535a 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7532,7 +7532,6 @@ "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "请提供有效的颜色值", "xpack.apm.serviceGroups.groupDetailsForm.name": "名称", "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "选择服务", - "xpack.apm.serviceGroups.list.allServices.description": "查看所有服务", "xpack.apm.serviceGroups.list.allServices.name": "所有服务", "xpack.apm.serviceGroups.list.sort.alphabetical": "按字母顺序", "xpack.apm.serviceGroups.list.sort.recentlyAdded": "最近添加", @@ -7554,8 +7553,6 @@ "xpack.apm.serviceGroups.tour.dismiss": "关闭", "xpack.apm.serviceGroups.tour.editGroups.content": "使用编辑选项更改此服务组的名称、查询或详情。", "xpack.apm.serviceGroups.tour.editGroups.title": "编辑此服务组", - "xpack.apm.serviceGroups.tour.serviceGroups.content": "既然您已创建服务组，您的所有服务库存已移到此处。无法编辑或移除该组。", - "xpack.apm.serviceGroups.tour.serviceGroups.title": "所有服务组", "xpack.apm.serviceHealthStatus.critical": "紧急", "xpack.apm.serviceHealthStatus.healthy": "运行正常", "xpack.apm.serviceHealthStatus.unknown": "未知", From 3e2b38b1760964795f262a1d53d2d80c165c252c Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 6 Oct 2022 19:59:02 +0000 Subject: [PATCH 2/9] [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' --- .../components/app/service_groups/service_groups_tour.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx index c0065e859178a..2805b8ff1cee8 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx @@ -11,10 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { ElasticDocsLink } from '../../shared/links/elastic_docs_link'; -export type TourType = - | 'createGroup' - | 'editGroup' - | 'serviceGroupsAllServices'; +export type TourType = 'createGroup' | 'editGroup' | 'serviceGroupsAllServices'; interface Props { title: string; From 11e99e372cb43f59bf2b334403fe1729165958be Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 6 Oct 2022 16:09:28 -0400 Subject: [PATCH 3/9] Adds button group legend, fixes spacing and translation IDs --- .../service_groups_list/index.tsx | 30 +++++++------------ .../translations/translations/fr-FR.json | 3 +- .../translations/translations/ja-JP.json | 3 +- .../translations/translations/zh-CN.json | 3 +- 4 files changed, 16 insertions(+), 23 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx index 353ca133eb179..19e27d8de934f 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -52,7 +52,7 @@ export function ServiceGroupsList() { )} > <> - {i18n.translate('xpack.apm.serviceGroups.list.allServices.name', { + {i18n.translate('xpack.apm.serviceGroups.buttonGroup.allServices', { defaultMessage: 'All services', })} @@ -62,10 +62,8 @@ export function ServiceGroupsList() { serviceGroups: { id: 'serviceGroups', label: i18n.translate( - 'xpack.apm.serviceGroups.emptyPrompt.serviceGroups', - { - defaultMessage: 'Service groups', - } + 'xpack.apm.serviceGroups.buttonGroup.serviceGroups', + { defaultMessage: 'Service groups' } ), }, }; @@ -88,11 +86,7 @@ export function ServiceGroupsList() { ); const { start, end } = useMemo( - () => - getDateRange({ - rangeFrom: 'now-24h', - rangeTo: 'now', - }), + () => getDateRange({ rangeFrom: 'now-24h', rangeTo: 'now' }), [] ); @@ -100,12 +94,7 @@ export function ServiceGroupsList() { (callApmApi) => { if (start && end) { return callApmApi('GET /internal/apm/service_groups/services_count', { - params: { - query: { - start, - end, - }, - }, + params: { query: { start, end } }, }); } }, @@ -172,7 +161,10 @@ export function ServiceGroupsList() { dismissTour(); setButtonGroupSelection(id); }} - legend="" + legend={i18n.translate( + 'xpack.apm.servicesGroups.buttonGroup.legend', + { defaultMessage: 'View all services or service groups' } + )} /> @@ -193,9 +185,7 @@ export function ServiceGroupsList() { onChange={(e) => setFilter(e.target.value)} placeholder={i18n.translate( 'xpack.apm.servicesGroups.filter', - { - defaultMessage: 'Filter groups', - } + { defaultMessage: 'Filter groups' } )} /> diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 66b0146ac835c..793bacc5ed235 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -7510,6 +7510,8 @@ "xpack.apm.serviceGroup.serviceInventory": "Inventory", "xpack.apm.serviceGroup.serviceMap": "Carte des services", "xpack.apm.serviceGroups.breadcrumb.title": "Services", + "xpack.apm.serviceGroups.buttonGroup.allServices": "Tous les services", + "xpack.apm.serviceGroups.buttonGroup.serviceGroups": "Groupes de services", "xpack.apm.serviceGroups.cardsList.emptyDescription": "Aucune description disponible", "xpack.apm.serviceGroups.createGroupLabel": "Créer un groupe", "xpack.apm.serviceGroups.createSuccess.toast.text": "Votre groupe est maintenant visible dans la nouvelle vue Services pour les groupes.", @@ -7528,7 +7530,6 @@ "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "Veuillez fournir une valeur de couleur valide", "xpack.apm.serviceGroups.groupDetailsForm.name": "Nom", "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "Sélectionner des services", - "xpack.apm.serviceGroups.list.allServices.name": "Tous les services", "xpack.apm.serviceGroups.list.sort.alphabetical": "Alphabétique", "xpack.apm.serviceGroups.list.sort.recentlyAdded": "Récemment ajouté", "xpack.apm.serviceGroups.selectServicesForm.cancel": "Annuler", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index e50e9e2e96a8a..bc9c3a4fd5922 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7497,6 +7497,8 @@ "xpack.apm.serviceGroup.serviceInventory": "インベントリ", "xpack.apm.serviceGroup.serviceMap": "サービスマップ", "xpack.apm.serviceGroups.breadcrumb.title": "サービス", + "xpack.apm.serviceGroups.buttonGroup.allServices": "すべてのサービス", + "xpack.apm.serviceGroups.buttonGroup.serviceGroups": "サービスグループ", "xpack.apm.serviceGroups.cardsList.emptyDescription": "説明がありません", "xpack.apm.serviceGroups.createGroupLabel": "グループを作成", "xpack.apm.serviceGroups.createSuccess.toast.text": "グループは、グループの新しいサービスビューに表示されます。", @@ -7515,7 +7517,6 @@ "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "有効な色値を指定してください", "xpack.apm.serviceGroups.groupDetailsForm.name": "名前", "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "サービスを選択", - "xpack.apm.serviceGroups.list.allServices.name": "すべてのサービス", "xpack.apm.serviceGroups.list.sort.alphabetical": "アルファベット順", "xpack.apm.serviceGroups.list.sort.recentlyAdded": "最近追加された項目", "xpack.apm.serviceGroups.selectServicesForm.cancel": "キャンセル", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index d7d0f98a7535a..e483fd9820d42 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7514,6 +7514,8 @@ "xpack.apm.serviceGroup.serviceInventory": "库存", "xpack.apm.serviceGroup.serviceMap": "服务地图", "xpack.apm.serviceGroups.breadcrumb.title": "服务", + "xpack.apm.serviceGroups.buttonGroup.allServices": "所有服务", + "xpack.apm.serviceGroups.buttonGroup.serviceGroups": "服务组", "xpack.apm.serviceGroups.cardsList.emptyDescription": "描述不可用", "xpack.apm.serviceGroups.createGroupLabel": "创建组", "xpack.apm.serviceGroups.createSuccess.toast.text": "您的组当前在组的新服务视图中可见。", @@ -7532,7 +7534,6 @@ "xpack.apm.serviceGroups.groupDetailsForm.invalidColorError": "请提供有效的颜色值", "xpack.apm.serviceGroups.groupDetailsForm.name": "名称", "xpack.apm.serviceGroups.groupDetailsForm.selectServices": "选择服务", - "xpack.apm.serviceGroups.list.allServices.name": "所有服务", "xpack.apm.serviceGroups.list.sort.alphabetical": "按字母顺序", "xpack.apm.serviceGroups.list.sort.recentlyAdded": "最近添加", "xpack.apm.serviceGroups.selectServicesForm.cancel": "取消", From 69b605dbefe87bc3dcdb95ea7bcce9670e0fbd77 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 27 Oct 2022 01:03:09 -0400 Subject: [PATCH 4/9] makes the button group part of the page template --- .../service_groups_button_group.tsx | 65 ++++++++++++++++++ .../service_groups_list/index.tsx | 68 ------------------- .../components/routing/apm_route_config.tsx | 1 + .../routing/templates/apm_main_template.tsx | 6 ++ .../templates/service_group_template.tsx | 1 + 5 files changed, 73 insertions(+), 68 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx new file mode 100644 index 0000000000000..111e01f119651 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx @@ -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 + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import { EuiButtonGroup } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { useHistory } from 'react-router-dom'; + +const buttonGroupOptions = { + allServices: { + option: { + id: 'allServices', + label: i18n.translate('xpack.apm.serviceGroups.buttonGroup.allServices', { + defaultMessage: 'All services', + }), + }, + pathname: '/services', + }, + serviceGroups: { + option: { + id: 'serviceGroups', + label: i18n.translate( + 'xpack.apm.serviceGroups.buttonGroup.serviceGroups', + { + defaultMessage: 'Service groups', + } + ), + }, + pathname: '/service-groups', + }, +}; +export function ServiceGroupsButtonGroup({ + selectedNavButton, +}: { + selectedNavButton: 'serviceGroups' | 'allServices' | undefined; +}) { + const history = useHistory(); + return ( + <> + { + const { pathname } = + buttonGroupOptions[id as NonNullable]; + history.push({ pathname }); + }} + legend={i18n.translate('xpack.apm.servicesGroups.buttonGroup.legend', { + defaultMessage: 'View all services or service groups', + })} + /> + + ); +} diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx index 19e27d8de934f..a126817331df6 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -12,7 +12,6 @@ import { EuiFlexItem, EuiFormControlLayout, EuiText, - EuiButtonGroup, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty, sortBy } from 'lodash'; @@ -22,56 +21,11 @@ import { ServiceGroupsListItems } from './service_groups_list'; import { Sort } from './sort'; import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber'; import { getDateRange } from '../../../../context/url_params_context/helpers'; -import { RedirectTo } from '../../../routing/redirect_to'; -import { ServiceGroupsTour } from '../service_groups_tour'; -import { useServiceGroupsTour } from '../use_service_groups_tour'; export type ServiceGroupsSortType = 'recently_added' | 'alphabetical'; export function ServiceGroupsList() { - const { tourEnabled, dismissTour } = useServiceGroupsTour( - 'serviceGroupsAllServices' - ); - const buttonGroupOptions = { - allServices: { - id: 'allServices', - label: ( - - <> - {i18n.translate('xpack.apm.serviceGroups.buttonGroup.allServices', { - defaultMessage: 'All services', - })} - - - ), - }, - serviceGroups: { - id: 'serviceGroups', - label: i18n.translate( - 'xpack.apm.serviceGroups.buttonGroup.serviceGroups', - { defaultMessage: 'Service groups' } - ), - }, - }; - const [filter, setFilter] = useState(''); - const [buttonGroupSelection, setButtonGroupSelection] = useState( - buttonGroupOptions.serviceGroups.id - ); const [apmServiceGroupsSortType, setServiceGroupsSortType] = useState('recently_added'); @@ -142,31 +96,9 @@ export function ServiceGroupsList() { ); } - if (buttonGroupSelection === buttonGroupOptions.allServices.id) { - return ; - } - return ( - - { - dismissTour(); - setButtonGroupSelection(id); - }} - legend={i18n.translate( - 'xpack.apm.servicesGroups.buttonGroup.legend', - { defaultMessage: 'View all services or service groups' } - )} - /> - diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx index 53fab0ed5694c..ac5c8f77f8b51 100644 --- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx +++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx @@ -79,6 +79,7 @@ const apmRoutes = { pageTitle={ServiceGroupsTitle} environmentFilter={false} showServiceGroupSaveButton + selectedNavButton="serviceGroups" > diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx index 4eb7d8140fdf3..4d93b63ef460e 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx @@ -17,6 +17,7 @@ import { ApmPluginStartDeps } from '../../../plugin'; import { ApmEnvironmentFilter } from '../../shared/environment_filter'; import { getNoDataConfig } from './no_data_config'; import { ServiceGroupSaveButton } from '../../app/service_groups'; +import { ServiceGroupsButtonGroup } from '../../app/service_groups/service_groups_button_group'; // Paths that must skip the no data screen const bypassNoDataScreenPaths = ['/settings']; @@ -37,6 +38,7 @@ export function ApmMainTemplate({ children, environmentFilter = true, showServiceGroupSaveButton = false, + selectedNavButton, ...pageTemplateProps }: { pageTitle?: React.ReactNode; @@ -44,6 +46,7 @@ export function ApmMainTemplate({ children: React.ReactNode; environmentFilter?: boolean; showServiceGroupSaveButton?: boolean; + selectedNavButton?: 'serviceGroups' | 'allServices'; } & KibanaPageTemplateProps) { const location = useLocation(); @@ -116,6 +119,9 @@ export function ApmMainTemplate({ pageTitle, rightSideItems, ...pageHeader, + children: renderServiceGroupSaveButton ? ( + + ) : null, }} {...pageTemplateProps} > diff --git a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx index 1eece05eb8843..085e6ff489b76 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx @@ -152,6 +152,7 @@ export function ServiceGroupTemplate({ }} environmentFilter={environmentFilter} showServiceGroupSaveButton={true} + selectedNavButton={!serviceGroupId ? 'allServices' : undefined} {...pageTemplateProps} > {children} From 908feffa48980b5229dce95e8414c89393a36208 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Thu, 27 Oct 2022 22:40:40 -0400 Subject: [PATCH 5/9] addresses feedback --- .../service_groups_button_group.tsx | 6 +- .../service_groups_list/index.tsx | 102 +++++++++++++----- .../components/routing/apm_route_config.tsx | 3 +- .../routing/service_groups_redirect.tsx | 13 +-- .../routing/templates/apm_main_template.tsx | 9 +- .../templates/service_group_template.tsx | 57 +++++----- .../translations/translations/fr-FR.json | 4 +- .../translations/translations/ja-JP.json | 4 +- .../translations/translations/zh-CN.json | 4 +- 9 files changed, 115 insertions(+), 87 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx index 111e01f119651..9e3ae01e4aadf 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx @@ -24,9 +24,7 @@ const buttonGroupOptions = { id: 'serviceGroups', label: i18n.translate( 'xpack.apm.serviceGroups.buttonGroup.serviceGroups', - { - defaultMessage: 'Service groups', - } + { defaultMessage: 'Service groups' } ), }, pathname: '/service-groups', @@ -44,8 +42,8 @@ export function ServiceGroupsButtonGroup({ color="primary" type="multi" options={[ - buttonGroupOptions.allServices.option, buttonGroupOptions.serviceGroups.option, + buttonGroupOptions.allServices.option, ]} idToSelectedMap={{ allServices: selectedNavButton === 'allServices', diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx index a126817331df6..15ae520b7103e 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -21,6 +21,7 @@ import { ServiceGroupsListItems } from './service_groups_list'; import { Sort } from './sort'; import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber'; import { getDateRange } from '../../../../context/url_params_context/helpers'; +import { ServiceGroupSaveButton } from '../service_group_save'; export type ServiceGroupsSortType = 'recently_added' | 'alphabetical'; @@ -46,7 +47,7 @@ export function ServiceGroupsList() { const { data: servicesCountData = { servicesCounts: {} } } = useFetcher( (callApmApi) => { - if (start && end) { + if (start && end && serviceGroups.length) { return callApmApi('GET /internal/apm/service_groups/services_count', { params: { query: { start, end } }, }); @@ -133,51 +134,94 @@ export function ServiceGroupsList() { - - - - {i18n.translate('xpack.apm.serviceGroups.groupsCount', { - defaultMessage: - '{servicesCount} {servicesCount, plural, =0 {group} one {group} other {groups}}', - values: { servicesCount: filteredItems.length }, - })} - - + + {serviceGroups.length ? ( + <> + + + + + {i18n.translate( + 'xpack.apm.serviceGroups.groupsCount', + { + defaultMessage: + '{servicesCount} {servicesCount, plural, =0 {groups} one {group} other {groups}}', + values: { servicesCount: filteredItems.length }, + } + )} + + + + + {i18n.translate( + 'xpack.apm.serviceGroups.listDescription', + { + defaultMessage: + 'Displayed service counts reflect the last 24 hours.', + } + )} + + + + + + + ) : null} - - {i18n.translate('xpack.apm.serviceGroups.listDescription', { - defaultMessage: - 'Displayed service counts reflect the last 24 hours.', - })} - - {items.length ? ( - + {serviceGroups.length ? ( + items.length ? ( + + ) : ( + + {i18n.translate( + 'xpack.apm.serviceGroups.filtered.emptyPrompt.serviceGroups', + { defaultMessage: 'Service groups' } + )} + + } + body={ +

+ {i18n.translate( + 'xpack.apm.serviceGroups.filtered.emptyPrompt.message', + { defaultMessage: 'No groups found for this filter' } + )} +

+ } + /> + ) ) : ( {i18n.translate( - 'xpack.apm.serviceGroups.emptyPrompt.serviceGroups', - { defaultMessage: 'Service groups' } + 'xpack.apm.serviceGroups.data.emptyPrompt.noServiceGroups', + { defaultMessage: 'No service groups' } )} } body={

{i18n.translate( - 'xpack.apm.serviceGroups.emptyPrompt.message', - { defaultMessage: 'No groups found for this filter' } + 'xpack.apm.serviceGroups.data.emptyPrompt.message', + { + defaultMessage: + 'Start grouping and organising your services and your application. Learn more about Service groups or create a group.', + } )}

} + actions={} /> )} diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx index ac5c8f77f8b51..f6296f4f6f26d 100644 --- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx +++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx @@ -78,7 +78,8 @@ const apmRoutes = { diff --git a/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx b/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx index f309c69932903..c290fb22f8ef9 100644 --- a/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx +++ b/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx @@ -8,29 +8,18 @@ import React from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { enableServiceGroups } from '@kbn/observability-plugin/public'; import { RedirectTo } from './redirect_to'; -import { useFetcher, FETCH_STATUS } from '../../hooks/use_fetcher'; export function ServiceGroupsRedirect({ children, }: { children?: React.ReactNode; }) { - const { data = { serviceGroups: [] }, status } = useFetcher( - (callApmApi) => callApmApi('GET /internal/apm/service-groups'), - [] - ); - const { serviceGroups } = data; - const isLoading = - status === FETCH_STATUS.NOT_INITIATED || status === FETCH_STATUS.LOADING; const { services: { uiSettings }, } = useKibana(); const isServiceGroupsEnabled = uiSettings?.get(enableServiceGroups); - if (isLoading) { - return null; - } - if (!isServiceGroupsEnabled || serviceGroups.length === 0) { + if (!isServiceGroupsEnabled) { return ; } return <>{children}; diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx index 4d93b63ef460e..c0bde965c4a5c 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx @@ -38,6 +38,7 @@ export function ApmMainTemplate({ children, environmentFilter = true, showServiceGroupSaveButton = false, + showServiceGroupsNav = false, selectedNavButton, ...pageTemplateProps }: { @@ -46,6 +47,7 @@ export function ApmMainTemplate({ children: React.ReactNode; environmentFilter?: boolean; showServiceGroupSaveButton?: boolean; + showServiceGroupsNav?: boolean; selectedNavButton?: 'serviceGroups' | 'allServices'; } & KibanaPageTemplateProps) { const location = useLocation(); @@ -119,9 +121,10 @@ export function ApmMainTemplate({ pageTitle, rightSideItems, ...pageHeader, - children: renderServiceGroupSaveButton ? ( - - ) : null, + children: + showServiceGroupsNav && isServiceGroupsEnabled ? ( + + ) : null, }} {...pageTemplateProps} > diff --git a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx index 085e6ff489b76..2138cff64f7aa 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx @@ -9,16 +9,15 @@ import { EuiPageHeaderProps, EuiFlexGroup, EuiFlexItem, - EuiButtonIcon, EuiLoadingContent, - EuiLoadingSpinner, + EuiIcon, } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template'; import { enableServiceGroups } from '@kbn/observability-plugin/public'; -import { useFetcher, FETCH_STATUS } from '../../../hooks/use_fetcher'; +import { useFetcher } from '../../../hooks/use_fetcher'; import { ApmPluginStartDeps } from '../../../plugin'; import { useApmRouter } from '../../../hooks/use_apm_router'; import { useAnyOfApmParams } from '../../../hooks/use_apm_params'; @@ -61,18 +60,9 @@ export function ServiceGroupTemplate({ [serviceGroupId] ); - const { data: serviceGroupsData, status: serviceGroupsStatus } = useFetcher( - (callApmApi) => { - if (!serviceGroupId && isServiceGroupsEnabled) { - return callApmApi('GET /internal/apm/service-groups'); - } - }, - [serviceGroupId, isServiceGroupsEnabled] - ); - const serviceGroupName = data?.serviceGroup.groupName; const loadingServiceGroupName = !!serviceGroupId && !serviceGroupName; - const hasServiceGroups = !!serviceGroupsData?.serviceGroups.length; + const isAllServices = !serviceGroupId; const serviceGroupsLink = router.link('/service-groups', { query: { ...query, serviceGroup: '' }, }); @@ -85,29 +75,13 @@ export function ServiceGroupTemplate({ justifyContent="flexStart" responsive={false} > - {serviceGroupsStatus === FETCH_STATUS.LOADING && ( - - - - )} - {(serviceGroupId || hasServiceGroups) && ( - - - - )} {loadingServiceGroupName ? ( ) : ( serviceGroupName || i18n.translate('xpack.apm.serviceGroup.allServices.title', { - defaultMessage: 'All services', + defaultMessage: 'Services', }) )} @@ -148,11 +122,30 @@ export function ServiceGroupTemplate({ pageTitle={isServiceGroupsEnabled ? serviceGroupsPageTitle : pageTitle} pageHeader={{ tabs: isServiceGroupsEnabled ? tabs : undefined, + breadcrumbs: !isAllServices + ? [ + { + text: ( + <> + {' '} + {i18n.translate( + 'xpack.apm.serviceGroups.breadcrumb.return', + { defaultMessage: 'Return' } + )} + + ), + color: 'primary', + 'aria-current': false, + href: serviceGroupsLink, + }, + ] + : undefined, ...pageHeader, }} environmentFilter={environmentFilter} - showServiceGroupSaveButton={true} - selectedNavButton={!serviceGroupId ? 'allServices' : undefined} + showServiceGroupSaveButton={!isAllServices} + showServiceGroupsNav={isAllServices} + selectedNavButton={isAllServices ? 'allServices' : 'serviceGroups'} {...pageTemplateProps} > {children} diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index fb91f9be426ae..14ad5ca5bb445 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -7477,8 +7477,8 @@ "xpack.apm.serviceGroups.deleteFailure.unknownId.toast.text": "Impossible de supprimer le groupe : id du groupe de service inconnu.", "xpack.apm.serviceGroups.editGroupLabel": "Modifier un groupe", "xpack.apm.serviceGroups.editSuccess.toast.text": "Nouveaux changements dans le groupe de services enregistrés.", - "xpack.apm.serviceGroups.emptyPrompt.message": "Aucun groupe trouvé pour ce filtre", - "xpack.apm.serviceGroups.emptyPrompt.serviceGroups": "Groupes de services", + "xpack.apm.serviceGroups.filtered.emptyPrompt.message": "Aucun groupe trouvé pour ce filtre", + "xpack.apm.serviceGroups.filtered.emptyPrompt.serviceGroups": "Groupes de services", "xpack.apm.serviceGroups.groupDetailsForm.cancel": "Annuler", "xpack.apm.serviceGroups.groupDetailsForm.color": "Couleur", "xpack.apm.serviceGroups.groupDetailsForm.create.title": "Créer un groupe", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index d79140fbbb778..094ad9f0eaf53 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7464,8 +7464,8 @@ "xpack.apm.serviceGroups.deleteFailure.unknownId.toast.text": "グループを削除できません。不明なサービスグループIDです。", "xpack.apm.serviceGroups.editGroupLabel": "グループを編集", "xpack.apm.serviceGroups.editSuccess.toast.text": "サービスグループの新しいグループが保存されました。", - "xpack.apm.serviceGroups.emptyPrompt.message": "このフィルターのグループが見つかりません", - "xpack.apm.serviceGroups.emptyPrompt.serviceGroups": "サービスグループ", + "xpack.apm.serviceGroups.filtered.emptyPrompt.message": "このフィルターのグループが見つかりません", + "xpack.apm.serviceGroups.filtered.emptyPrompt.serviceGroups": "サービスグループ", "xpack.apm.serviceGroups.groupDetailsForm.cancel": "キャンセル", "xpack.apm.serviceGroups.groupDetailsForm.color": "色", "xpack.apm.serviceGroups.groupDetailsForm.create.title": "グループを作成", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 5d16c542a12f3..b598ea51c5e0f 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7481,8 +7481,8 @@ "xpack.apm.serviceGroups.deleteFailure.unknownId.toast.text": "无法删除组：服务组 ID 未知。", "xpack.apm.serviceGroups.editGroupLabel": "编辑组", "xpack.apm.serviceGroups.editSuccess.toast.text": "已将新更改保存到服务组。", - "xpack.apm.serviceGroups.emptyPrompt.message": "找不到此筛选的组", - "xpack.apm.serviceGroups.emptyPrompt.serviceGroups": "服务组", + "xpack.apm.serviceGroups.filtered.emptyPrompt.message": "找不到此筛选的组", + "xpack.apm.serviceGroups.filtered.emptyPrompt.serviceGroups": "服务组", "xpack.apm.serviceGroups.groupDetailsForm.cancel": "取消", "xpack.apm.serviceGroups.groupDetailsForm.color": "颜色", "xpack.apm.serviceGroups.groupDetailsForm.create.title": "创建组", From ef3e2face63ac8f679b04ca3616a7a4a2194e0f4 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Fri, 28 Oct 2022 16:54:35 -0400 Subject: [PATCH 6/9] addressed feedback: - Use 'All services' as the default landing page - swap order of button group -> All services, Service groups - move tour from the create button to service group half of the button group - have service groups always enabled but marked Beta - removed some branching logic in routes / page templates - add 'Send feedback' link - fixed service count in cards --- .../service_group_save/create_button.tsx | 58 +++++++-------- .../service_groups_button_group.tsx | 37 +++++++--- .../service_groups_list/index.tsx | 32 ++++++++- .../service_groups/service_groups_tour.tsx | 16 +++-- .../components/routing/apm_route_config.tsx | 5 +- .../public/components/routing/home/index.tsx | 9 +-- .../routing/service_groups_redirect.tsx | 26 ------- .../routing/templates/apm_main_template.tsx | 16 ++--- .../templates/service_group_template.tsx | 12 +--- x-pack/plugins/apm/public/plugin.ts | 70 +++++-------------- x-pack/plugins/observability/common/index.ts | 1 - .../observability/common/ui_settings_keys.ts | 1 - x-pack/plugins/observability/public/index.ts | 1 - .../observability/server/ui_settings.ts | 19 ----- .../translations/translations/fr-FR.json | 3 +- .../translations/translations/ja-JP.json | 3 +- .../translations/translations/zh-CN.json | 3 +- 17 files changed, 127 insertions(+), 185 deletions(-) delete mode 100644 x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_group_save/create_button.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_group_save/create_button.tsx index cd1b819ce114e..6c872423d577a 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_group_save/create_button.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_group_save/create_button.tsx @@ -7,42 +7,42 @@ import { EuiButton } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { ServiceGroupsTour } from '../service_groups_tour'; -import { useServiceGroupsTour } from '../use_service_groups_tour'; +// import { ServiceGroupsTour } from '../service_groups_tour'; +// import { useServiceGroupsTour } from '../use_service_groups_tour'; interface Props { onClick: () => void; } export function CreateButton({ onClick }: Props) { - const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup'); + // const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup'); return ( - + { + // dismissTour(); + onClick(); + }} > - { - dismissTour(); - onClick(); - }} - > - {i18n.translate('xpack.apm.serviceGroups.createGroupLabel', { - defaultMessage: 'Create group', - })} - - + {i18n.translate('xpack.apm.serviceGroups.createGroupLabel', { + defaultMessage: 'Create group', + })} + + // ); } diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx index 9e3ae01e4aadf..f4be2a0c04358 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx @@ -8,6 +8,8 @@ import { EuiButtonGroup } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useHistory } from 'react-router-dom'; +import { ServiceGroupsTour } from './service_groups_tour'; +import { useServiceGroupsTour } from './use_service_groups_tour'; const buttonGroupOptions = { allServices: { @@ -30,34 +32,53 @@ const buttonGroupOptions = { pathname: '/service-groups', }, }; + +type SelectedNavButton = keyof typeof buttonGroupOptions; + export function ServiceGroupsButtonGroup({ selectedNavButton, }: { - selectedNavButton: 'serviceGroups' | 'allServices' | undefined; + selectedNavButton: SelectedNavButton | undefined; }) { const history = useHistory(); + const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup'); return ( - <> + { - const { pathname } = - buttonGroupOptions[id as NonNullable]; + const { pathname } = buttonGroupOptions[id as SelectedNavButton]; history.push({ pathname }); }} legend={i18n.translate('xpack.apm.servicesGroups.buttonGroup.legend', { defaultMessage: 'View all services or service groups', })} /> - + ); } diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx index 15ae520b7103e..2ee0224acda13 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -12,6 +12,7 @@ import { EuiFlexItem, EuiFormControlLayout, EuiText, + EuiLink, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty, sortBy } from 'lodash'; @@ -22,6 +23,7 @@ import { Sort } from './sort'; import { RefreshServiceGroupsSubscriber } from '../refresh_service_groups_subscriber'; import { getDateRange } from '../../../../context/url_params_context/helpers'; import { ServiceGroupSaveButton } from '../service_group_save'; +import { BetaBadge } from '../../../shared/beta_badge'; export type ServiceGroupsSortType = 'recently_added' | 'alphabetical'; @@ -40,6 +42,8 @@ export function ServiceGroupsList() { [] ); + const { serviceGroups } = data; + const { start, end } = useMemo( () => getDateRange({ rangeFrom: 'now-24h', rangeTo: 'now' }), [] @@ -53,11 +57,9 @@ export function ServiceGroupsList() { }); } }, - [start, end] + [start, end, serviceGroups.length] ); - const { serviceGroups } = data; - const isLoading = status === FETCH_STATUS.NOT_INITIATED || status === FETCH_STATUS.LOADING; @@ -169,6 +171,30 @@ export function ServiceGroupsList() { ) : null} + + + +
+ +
+ + + + {i18n.translate( + 'xpack.apm.serviceGroups.beta.feedback.link', + { defaultMessage: 'Send feedback' } + )} + + + + {serviceGroups.length ? ( items.length ? ( diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx index 2805b8ff1cee8..a8ca5fdd6ec43 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx @@ -5,7 +5,13 @@ * 2.0. */ -import { EuiButtonEmpty, EuiSpacer, EuiText, EuiTourStep } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiSpacer, + EuiText, + EuiTourStep, + PopoverAnchorPosition, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; @@ -18,6 +24,7 @@ interface Props { content: string; tourEnabled: boolean; dismissTour: () => void; + anchorPosition?: PopoverAnchorPosition; children: React.ReactElement; } @@ -26,6 +33,7 @@ export function ServiceGroupsTour({ dismissTour, title, content, + anchorPosition, children, }: Props) { return ( @@ -46,9 +54,7 @@ export function ServiceGroupsTour({ > {i18n.translate( 'xpack.apm.serviceGroups.tour.content.link.docs', - { - defaultMessage: 'docs', - } + { defaultMessage: 'docs' } )} ), @@ -63,7 +69,7 @@ export function ServiceGroupsTour({ step={1} stepsTotal={1} title={title} - anchorPosition="upLeft" + anchorPosition={anchorPosition} footerAction={ {i18n.translate('xpack.apm.serviceGroups.tour.dismiss', { diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx index f6296f4f6f26d..4624c29376fa5 100644 --- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx +++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx @@ -18,7 +18,6 @@ import { serviceDetail } from './service_detail'; import { settings } from './settings'; import { ApmMainTemplate } from './templates/apm_main_template'; import { ServiceGroupsList } from '../app/service_groups'; -import { ServiceGroupsRedirect } from './service_groups_redirect'; import { offsetRt } from '../../../common/comparison_rt'; const ServiceGroupsTitle = i18n.translate( @@ -82,9 +81,7 @@ const apmRoutes = { showServiceGroupsNav selectedNavButton="serviceGroups" > - - - + ), diff --git a/x-pack/plugins/apm/public/components/routing/home/index.tsx b/x-pack/plugins/apm/public/components/routing/home/index.tsx index 36ead4f7b36c7..555d42ddb6f98 100644 --- a/x-pack/plugins/apm/public/components/routing/home/index.tsx +++ b/x-pack/plugins/apm/public/components/routing/home/index.tsx @@ -22,7 +22,6 @@ import { TraceExplorer } from '../../app/trace_explorer'; import { TraceOverview } from '../../app/trace_overview'; import { TransactionTab } from '../../app/transaction_details/waterfall_with_summary/transaction_tabs'; import { RedirectTo } from '../redirect_to'; -import { ServiceGroupsRedirect } from '../service_groups_redirect'; import { ApmMainTemplate } from '../templates/apm_main_template'; import { ServiceGroupTemplate } from '../templates/service_group_template'; import { dependencies } from './dependencies'; @@ -236,13 +235,7 @@ export const home = { ...dependencies, ...legacyBackends, ...storageExplorer, - '/': { - element: ( - - - - ), - }, + '/': { element: }, }, }, }; diff --git a/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx b/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx deleted file mode 100644 index c290fb22f8ef9..0000000000000 --- a/x-pack/plugins/apm/public/components/routing/service_groups_redirect.tsx +++ /dev/null @@ -1,26 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ -import React from 'react'; -import { useKibana } from '@kbn/kibana-react-plugin/public'; -import { enableServiceGroups } from '@kbn/observability-plugin/public'; -import { RedirectTo } from './redirect_to'; - -export function ServiceGroupsRedirect({ - children, -}: { - children?: React.ReactNode; -}) { - const { - services: { uiSettings }, - } = useKibana(); - const isServiceGroupsEnabled = uiSettings?.get(enableServiceGroups); - - if (!isServiceGroupsEnabled) { - return ; - } - return <>{children}; -} diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx index c0bde965c4a5c..f837fafc95a22 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx @@ -10,7 +10,6 @@ import React from 'react'; import { useLocation } from 'react-router-dom'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template'; -import { enableServiceGroups } from '@kbn/observability-plugin/public'; import { EnvironmentsContextProvider } from '../../../context/environments_context/environments_context'; import { useFetcher, FETCH_STATUS } from '../../../hooks/use_fetcher'; import { ApmPluginStartDeps } from '../../../plugin'; @@ -102,14 +101,8 @@ export function ApmMainTemplate({ loading: isLoading, }); - const { - services: { uiSettings }, - } = useKibana(); - const isServiceGroupsEnabled = uiSettings?.get(enableServiceGroups); - const renderServiceGroupSaveButton = - showServiceGroupSaveButton && isServiceGroupsEnabled; const rightSideItems = [ - ...(renderServiceGroupSaveButton ? [] : []), + ...(showServiceGroupSaveButton ? [] : []), ...(environmentFilter ? [] : []), ]; @@ -121,10 +114,9 @@ export function ApmMainTemplate({ pageTitle, rightSideItems, ...pageHeader, - children: - showServiceGroupsNav && isServiceGroupsEnabled ? ( - - ) : null, + children: showServiceGroupsNav ? ( + + ) : null, }} {...pageTemplateProps} > diff --git a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx index 2138cff64f7aa..149188243ea35 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx @@ -14,11 +14,8 @@ import { } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; -import { useKibana } from '@kbn/kibana-react-plugin/public'; import type { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template'; -import { enableServiceGroups } from '@kbn/observability-plugin/public'; import { useFetcher } from '../../../hooks/use_fetcher'; -import { ApmPluginStartDeps } from '../../../plugin'; import { useApmRouter } from '../../../hooks/use_apm_router'; import { useAnyOfApmParams } from '../../../hooks/use_apm_params'; import { ApmMainTemplate } from './apm_main_template'; @@ -38,11 +35,6 @@ export function ServiceGroupTemplate({ environmentFilter?: boolean; serviceGroupContextTab: ServiceGroupContextTab['key']; } & KibanaPageTemplateProps) { - const { - services: { uiSettings }, - } = useKibana(); - const isServiceGroupsEnabled = uiSettings?.get(enableServiceGroups); - const router = useApmRouter(); const { query, @@ -119,9 +111,9 @@ export function ServiceGroupTemplate({ ); return ( { pluginSetupDeps.home.featureCatalogue.register(featureCatalogueEntry); } - const serviceGroupsEnabled = core.uiSettings.get( - enableServiceGroups, - false - ); - // register observability nav if user has access to plugin plugins.observability.navigation.registerSections( from(core.getStartServices()).pipe( @@ -170,26 +157,18 @@ export class ApmPlugin implements Plugin { label: 'APM', sortKey: 400, entries: [ - serviceGroupsEnabled - ? { - label: servicesTitle, - app: 'apm', - path: '/service-groups', - matchPath(currentPath: string) { - return [ - '/service-groups', - '/services', - '/service-map', - ].some((testPath) => - currentPath.startsWith(testPath) - ); - }, - } - : { - label: servicesTitle, - app: 'apm', - path: '/services', - }, + { + label: servicesTitle, + app: 'apm', + path: '/services', + matchPath(currentPath: string) { + return [ + '/service-groups', + '/services', + '/service-map', + ].some((testPath) => currentPath.startsWith(testPath)); + }, + }, { label: tracesTitle, app: 'apm', path: '/traces' }, { label: dependenciesTitle, @@ -209,15 +188,6 @@ export class ApmPlugin implements Plugin { } }, }, - ...(serviceGroupsEnabled - ? [] - : [ - { - label: serviceMapTitle, - app: 'apm', - path: '/service-map', - }, - ]), ], }, ]; @@ -298,18 +268,14 @@ export class ApmPlugin implements Plugin { icon: 'plugins/apm/public/icon.svg', category: DEFAULT_APP_CATEGORIES.observability, deepLinks: [ - ...(serviceGroupsEnabled - ? [ - { - id: 'service-groups-list', - title: servicesTitle, - path: '/service-groups', - }, - ] - : []), + { + id: 'service-groups-list', + title: servicesTitle, + path: '/service-groups', + }, { id: 'services', - title: serviceGroupsEnabled ? allServicesTitle : servicesTitle, + title: servicesTitle, path: '/services', }, { id: 'traces', title: tracesTitle, path: '/traces' }, diff --git a/x-pack/plugins/observability/common/index.ts b/x-pack/plugins/observability/common/index.ts index 123c0639f2d49..7a2100e15225a 100644 --- a/x-pack/plugins/observability/common/index.ts +++ b/x-pack/plugins/observability/common/index.ts @@ -18,7 +18,6 @@ export { enableComparisonByDefault, defaultApmServiceEnvironment, apmProgressiveLoading, - enableServiceGroups, apmServiceInventoryOptimizedSorting, apmServiceGroupMaxNumberOfServices, apmTraceExplorerTab, diff --git a/x-pack/plugins/observability/common/ui_settings_keys.ts b/x-pack/plugins/observability/common/ui_settings_keys.ts index ab1684c2e5bfe..7de867608bfcb 100644 --- a/x-pack/plugins/observability/common/ui_settings_keys.ts +++ b/x-pack/plugins/observability/common/ui_settings_keys.ts @@ -11,7 +11,6 @@ export const maxSuggestions = 'observability:maxSuggestions'; export const enableComparisonByDefault = 'observability:enableComparisonByDefault'; export const defaultApmServiceEnvironment = 'observability:apmDefaultServiceEnvironment'; export const apmProgressiveLoading = 'observability:apmProgressiveLoading'; -export const enableServiceGroups = 'observability:enableServiceGroups'; export const apmServiceInventoryOptimizedSorting = 'observability:apmServiceInventoryOptimizedSorting'; export const apmServiceGroupMaxNumberOfServices = diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 9bc1eb7f2a172..8c083012448e6 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -27,7 +27,6 @@ export type { export { enableInspectEsQueries, enableComparisonByDefault, - enableServiceGroups, enableNewSyntheticsView, apmServiceGroupMaxNumberOfServices, enableInfrastructureHostsView, diff --git a/x-pack/plugins/observability/server/ui_settings.ts b/x-pack/plugins/observability/server/ui_settings.ts index e979bd6a7fb11..a2bc38727e53e 100644 --- a/x-pack/plugins/observability/server/ui_settings.ts +++ b/x-pack/plugins/observability/server/ui_settings.ts @@ -15,7 +15,6 @@ import { maxSuggestions, defaultApmServiceEnvironment, apmProgressiveLoading, - enableServiceGroups, apmServiceInventoryOptimizedSorting, enableNewSyntheticsView, apmServiceGroupMaxNumberOfServices, @@ -162,24 +161,6 @@ export const uiSettings: Record = { }, showInLabs: true, }, - [enableServiceGroups]: { - category: [observabilityFeatureId], - name: i18n.translate('xpack.observability.enableServiceGroups', { - defaultMessage: 'Service groups feature', - }), - value: false, - description: i18n.translate('xpack.observability.enableServiceGroupsDescription', { - defaultMessage: - '{technicalPreviewLabel} Enable the Service groups feature on APM UI. {feedbackLink}.', - values: { - technicalPreviewLabel: `[${technicalPreviewLabel}]`, - feedbackLink: feedbackLink({ href: 'https://ela.st/feedback-service-groups' }), - }, - }), - schema: schema.boolean(), - requiresPageReload: true, - showInLabs: true, - }, [enableServiceMetrics]: { category: [observabilityFeatureId], name: i18n.translate('xpack.observability.apmEnableServiceMetrics', { diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 8bfe19dd04d69..662d44f03445d 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -23388,7 +23388,6 @@ "xpack.observability.enableInspectEsQueriesExperimentName": "Inspecter les recherches ES", "xpack.observability.enableNewSyntheticsViewExperimentDescription": "Activez la nouvelle application de monitoring synthétique dans Observability. Actualisez la page pour appliquer le paramètre.", "xpack.observability.enableNewSyntheticsViewExperimentName": "Activer la nouvelle application de monitoring synthétique", - "xpack.observability.enableServiceGroups": "Fonctionnalité de groupes de services", "xpack.observability.exp.breakDownFilter.noBreakdown": "Pas de répartition", "xpack.observability.exp.breakDownFilter.unavailable": "La répartition par nom d'étape n'est pas disponible pour l'indicateur de durée de monitoring. Utilisez l'indicateur de durée d'étape pour répartir par nom d'étape.", "xpack.observability.exp.breakDownFilter.warning": "Les répartitions ne peuvent être appliquées qu’à une seule série à la fois.", @@ -33676,4 +33675,4 @@ "xpack.painlessLab.title": "Painless Lab", "xpack.painlessLab.walkthroughButtonLabel": "Présentation" } -} \ No newline at end of file +} diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index bc8e5bcb0f9e7..f864bbebfae62 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -23367,7 +23367,6 @@ "xpack.observability.enableInspectEsQueriesExperimentName": "ESクエリを調査", "xpack.observability.enableNewSyntheticsViewExperimentDescription": "オブザーバビリティで新しい合成監視アプリケーションを有効にします。設定を適用するにはページを更新してください。", "xpack.observability.enableNewSyntheticsViewExperimentName": "新しい合成監視アプリケーションを有効にする", - "xpack.observability.enableServiceGroups": "サービスグループ機能", "xpack.observability.exp.breakDownFilter.noBreakdown": "内訳なし", "xpack.observability.exp.breakDownFilter.unavailable": "モニター期間メトリックでは、ステップ名内訳を使用できません。ステップ期間メトリックを使用して、ステップ名で分解します。", "xpack.observability.exp.breakDownFilter.warning": "内訳は一度に1つの系列にのみ適用できます。", @@ -33650,4 +33649,4 @@ "xpack.painlessLab.title": "Painless Lab", "xpack.painlessLab.walkthroughButtonLabel": "実地検証" } -} \ No newline at end of file +} diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 412b13dff13dc..7a1cbd4a82cc7 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -23398,7 +23398,6 @@ "xpack.observability.enableInspectEsQueriesExperimentName": "检查 ES 查询", "xpack.observability.enableNewSyntheticsViewExperimentDescription": "在 Observability 中启用新的组合监测应用程序。刷新页面可应用该设置。", "xpack.observability.enableNewSyntheticsViewExperimentName": "启用新的组合监测应用程序", - "xpack.observability.enableServiceGroups": "服务组功能", "xpack.observability.exp.breakDownFilter.noBreakdown": "无细目", "xpack.observability.exp.breakDownFilter.unavailable": "步骤名称细目不可用于监测持续时间指标。使用步骤持续时间指标以按步骤名称细分。", "xpack.observability.exp.breakDownFilter.warning": "一次只能将细目应用于一个序列。", @@ -33687,4 +33686,4 @@ "xpack.painlessLab.title": "Painless 实验室", "xpack.painlessLab.walkthroughButtonLabel": "指导" } -} \ No newline at end of file +} From 6277761b56973ed6a48d515ff3af4615497d321b Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Fri, 28 Oct 2022 22:45:16 -0400 Subject: [PATCH 7/9] fixes tests and deep links --- .../cypress/e2e/read_only_user/deep_links.cy.ts | 6 ++++++ .../header_filters/header_filters.cy.ts | 1 + x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts | 10 ++++++++++ x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts | 1 + .../app/service_groups/service_groups_tour.tsx | 2 +- .../app/service_groups/use_service_groups_tour.tsx | 1 - x-pack/plugins/apm/public/plugin.ts | 9 ++++++++- x-pack/plugins/translations/translations/fr-FR.json | 1 - x-pack/plugins/translations/translations/ja-JP.json | 1 - x-pack/plugins/translations/translations/zh-CN.json | 1 - 10 files changed, 27 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/deep_links.cy.ts b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/deep_links.cy.ts index 00b842f3265c7..513d9afeccf9d 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/deep_links.cy.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/deep_links.cy.ts @@ -14,6 +14,7 @@ describe('APM deep links', () => { cy.getByTestSubj('nav-search-input').type('APM'); cy.contains('APM'); cy.contains('APM / Services'); + cy.contains('APM / Service groups'); cy.contains('APM / Traces'); cy.contains('APM / Service Map'); @@ -28,6 +29,11 @@ describe('APM deep links', () => { cy.contains('APM / Services').click({ force: true }); cy.url().should('include', '/apm/services'); + cy.getByTestSubj('nav-search-input').type('APM'); + // navigates to service groups page + cy.contains('APM / Service groups').click({ force: true }); + cy.url().should('include', '/apm/service-groups'); + cy.getByTestSubj('nav-search-input').type('APM'); // navigates to traces page cy.contains('APM / Traces').click({ force: true }); diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/service_inventory/header_filters/header_filters.cy.ts b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/service_inventory/header_filters/header_filters.cy.ts index 4f72e968d81f8..e689e126d4bfd 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/service_inventory/header_filters/header_filters.cy.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/e2e/read_only_user/service_inventory/header_filters/header_filters.cy.ts @@ -28,6 +28,7 @@ describe('Service inventory - header filters', () => { specialServiceName, }) ); + cy.dismissServiceGroupsTour(); }); after(() => { diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts b/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts index 013296d815a58..e0af1e1a84729 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts @@ -125,6 +125,16 @@ Cypress.Commands.add( } ); +Cypress.Commands.add('dismissServiceGroupsTour', () => { + window.localStorage.setItem( + 'apm.serviceGroupsTour', + JSON.stringify({ + createGroup: false, + editGroup: false, + }) + ); +}); + // A11y configuration const axeConfig = { diff --git a/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts b/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts index 5d59d4691820a..d9675f2536315 100644 --- a/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts +++ b/x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts @@ -23,5 +23,6 @@ declare namespace Cypress { }): void; updateAdvancedSettings(settings: Record): void; getByTestSubj(selector: string): Chainable>; + dismissServiceGroupsTour(): void; } } diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx index a8ca5fdd6ec43..4f7a457be49b4 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_tour.tsx @@ -17,7 +17,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { ElasticDocsLink } from '../../shared/links/elastic_docs_link'; -export type TourType = 'createGroup' | 'editGroup' | 'serviceGroupsAllServices'; +export type TourType = 'createGroup' | 'editGroup'; interface Props { title: string; diff --git a/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx b/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx index a6f4f89cdd04c..400a88a026e01 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/use_service_groups_tour.tsx @@ -11,7 +11,6 @@ import { TourType } from './service_groups_tour'; const INITIAL_STATE: Record = { createGroup: true, editGroup: true, - serviceGroupsAllServices: true, }; export function useServiceGroupsTour(type: TourType) { diff --git a/x-pack/plugins/apm/public/plugin.ts b/x-pack/plugins/apm/public/plugin.ts index 994fcfbe9ce2c..0b3137ee6ad99 100644 --- a/x-pack/plugins/apm/public/plugin.ts +++ b/x-pack/plugins/apm/public/plugin.ts @@ -103,6 +103,13 @@ const servicesTitle = i18n.translate('xpack.apm.navigation.servicesTitle', { defaultMessage: 'Services', }); +const serviceGroupsTitle = i18n.translate( + 'xpack.apm.navigation.serviceGroupsTitle', + { + defaultMessage: 'Service groups', + } +); + const tracesTitle = i18n.translate('xpack.apm.navigation.tracesTitle', { defaultMessage: 'Traces', }); @@ -270,7 +277,7 @@ export class ApmPlugin implements Plugin { deepLinks: [ { id: 'service-groups-list', - title: servicesTitle, + title: serviceGroupsTitle, path: '/service-groups', }, { diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 662d44f03445d..087c56fab47b9 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -7431,7 +7431,6 @@ "xpack.apm.mlCallout.updateAvailableCalloutButtonText": "Mettre à jour les tâches", "xpack.apm.mlCallout.updateAvailableCalloutText": "Nous avons mis à jour les tâches de détection des anomalies qui fournissent des indications sur la dégradation des performances et ajouté des détecteurs de débit et de taux de transactions ayant échoué. Si vous choisissez de mettre à jour, nous créerons les nouvelles tâches et fermerons les tâches héritées. Les données affichées dans l'application APM passeront automatiquement aux nouvelles. Veuillez noter que l'option de migration de toutes les tâches existantes ne sera pas disponible si vous choisissez de créer une nouvelle tâche.", "xpack.apm.mlCallout.updateAvailableCalloutTitle": "Mises à jour disponibles", - "xpack.apm.navigation.allServicesTitle": "Tous les services", "xpack.apm.navigation.apmSettingsTitle": "Paramètres", "xpack.apm.navigation.dependenciesTitle": "Dépendances", "xpack.apm.navigation.serviceMapTitle": "Carte des services", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index f864bbebfae62..f4c281167d8b6 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -7419,7 +7419,6 @@ "xpack.apm.mlCallout.updateAvailableCalloutButtonText": "ジョブの更新", "xpack.apm.mlCallout.updateAvailableCalloutText": "劣化したパフォーマンスに関する詳細な分析を提供する異常検知ジョブを更新し、スループットと失敗したトランザクションレートの検知機能を追加しました。アップグレードを選択する場合は、新しいジョブが作成され、既存のレガシージョブが終了します。APMアプリに表示されるデータは自動的に新しいジョブに切り替わります。新しいジョブの作成を選択した場合は、すべての既存のジョブを移行するオプションを使用できません。", "xpack.apm.mlCallout.updateAvailableCalloutTitle": "更新が可能です", - "xpack.apm.navigation.allServicesTitle": "すべてのサービス", "xpack.apm.navigation.apmSettingsTitle": "設定", "xpack.apm.navigation.dependenciesTitle": "依存関係", "xpack.apm.navigation.serviceMapTitle": "サービスマップ", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 7a1cbd4a82cc7..ce903ab668bef 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -7435,7 +7435,6 @@ "xpack.apm.mlCallout.updateAvailableCalloutButtonText": "更新作业", "xpack.apm.mlCallout.updateAvailableCalloutText": "我们已更新有助于深入了解性能降级的异常检测作业，并添加了检测工具以获取吞吐量和失败事务率。如果您选择进行升级，我们将创建新作业，并关闭现有的旧版作业。APM 应用中显示的数据将自动切换到新数据。请注意，如果您选择创建新作业，用于迁移所有现有作业的选项将不可用。", "xpack.apm.mlCallout.updateAvailableCalloutTitle": "可用更新", - "xpack.apm.navigation.allServicesTitle": "所有服务", "xpack.apm.navigation.apmSettingsTitle": "设置", "xpack.apm.navigation.dependenciesTitle": "依赖项", "xpack.apm.navigation.serviceMapTitle": "服务地图", From b2f75435d5cbc66f0bdb866aded3155826c55680 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Sat, 29 Oct 2022 01:01:44 -0400 Subject: [PATCH 8/9] change button group to single type --- .../app/service_groups/service_groups_button_group.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx index f4be2a0c04358..09a26dd150116 100644 --- a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx +++ b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_button_group.tsx @@ -38,7 +38,7 @@ type SelectedNavButton = keyof typeof buttonGroupOptions; export function ServiceGroupsButtonGroup({ selectedNavButton, }: { - selectedNavButton: SelectedNavButton | undefined; + selectedNavButton: SelectedNavButton; }) { const history = useHistory(); const { tourEnabled, dismissTour } = useServiceGroupsTour('createGroup'); @@ -60,17 +60,11 @@ export function ServiceGroupsButtonGroup({ > { const { pathname } = buttonGroupOptions[id as SelectedNavButton]; history.push({ pathname }); From 0d0258958e38d41614695f2d06c4b9be4021b908 Mon Sep 17 00:00:00 2001 From: Oliver Gupte Date: Sat, 29 Oct 2022 22:06:45 -0400 Subject: [PATCH 9/9] fixes type error --- .../components/routing/templates/apm_main_template.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx index f837fafc95a22..60f06ddaef8fc 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/apm_main_template.tsx @@ -114,9 +114,10 @@ export function ApmMainTemplate({ pageTitle, rightSideItems, ...pageHeader, - children: showServiceGroupsNav ? ( - - ) : null, + children: + showServiceGroupsNav && selectedNavButton ? ( + + ) : null, }} {...pageTemplateProps} >