Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ObsUX][Profiling, Infra] Add NEW badge to the Profiling tab #174242

Merged
merged 1 commit into from
Jan 4, 2024
Merged

[ObsUX][Profiling, Infra] Add NEW badge to the Profiling tab #174242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions x-pack/plugins/infra/public/common/asset_details_config/asset_details_tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
*/

import { i18n } from '@kbn/i18n';
import React from 'react';
import { ContentTabIds, type Tab } from '../../components/asset_details/types';
import { NewBadge } from '../../components/new_badge';

export const commonFlyoutTabs: Tab[] = [
{
Expand All @@ -32,6 +34,7 @@ export const commonFlyoutTabs: Tab[] = [
name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.profiling', {
defaultMessage: 'Universal Profiling',
}),
append: <NewBadge />,
},
{
id: ContentTabIds.LOGS,
Expand Down
8 changes: 2 additions & 6 deletions ...plugins/infra/public/components/asset_details/tabs/overview/kpis/cpu_profiling_prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiButtonEmpty } from '@elastic/eui';
import { EuiBadge } from '@elastic/eui';
import { EuiFlexGroup } from '@elastic/eui';
import { NewBadge } from '../../../../new_badge';
import { useProfilingIntegrationSetting } from '../../../../../hooks/use_profiling_integration_setting';
import { useTabSwitcherContext } from '../../../hooks/use_tab_switcher';

Expand All @@ -28,11 +28,7 @@ export function CpuProfilingPrompt() {
gutterSize="s"
data-test-subj="infraAssetDetailsCPUProfilingPrompt"
>
<EuiBadge color="success">
{i18n.translate('xpack.infra.cpuProfilingPrompt.newBadgeLabel', {
defaultMessage: 'NEW',
})}
</EuiBadge>
<NewBadge />
<EuiFlexGroup alignItems="baseline" justifyContent="flexStart" gutterSize="xs">
{i18n.translate('xpack.infra.cpuProfilingPrompt.p.viewCPUBreakdownUsingLabel', {
defaultMessage: 'View CPU Breakdown using',
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/infra/public/components/asset_details/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export type RenderMode = FlyoutProps | FullPageProps;
export interface Tab {
id: ContentTabIds;
name: string;
append?: JSX.Element;
}

export type LinkOptions = 'alertRule' | 'nodeDetails' | 'apmServices';
Expand Down
18 changes: 18 additions & 0 deletions x-pack/plugins/infra/public/components/new_badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*
* 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 { EuiBadge } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';

export const NewBadge = () => (
<EuiBadge color="accent">
{i18n.translate('xpack.infra.newBadgeLabel', {
defaultMessage: 'NEW',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need to Uppercase it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure that I am the right person to decide that - I saw the profiling badge and the nav menu badge are uppercase so I tried to keep it consistent then I checked that in APM it's not 😕 So IMO if we have the same look everywhere is better but which one is better from the UX perspective (uppercase or lowercase) and how much we want to put the attention there I don't know. I would keep it like that here but we can also open a discussion with the design team and add an issue to align the labels everywhere, wdyt?

})}
</EuiBadge>
);