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": "未知",