forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Uptime] Move uptime actions to Header Actions Menu (elastic#100298)
* Move uptime actions to Kibana's HeaderActionsMenu. * Delete a comment. * Extract ActionMenu content to dedicated component to make testing easier. * Add tests. * Use `EuiHeaderLinks` instead of `EuiFlexItem`. * Clean up tests. * Prefer `getByRole` for a test. * Fix copy mistake. * Fix a test broken by the previous commit. * Prefer `EuiHeaderSectionItem` over `EuiHeaderSectionLink` to avoid nesting `button`s within `buttons`. * Reverse "Settings" and "Alerts" menu options to make them uniform with APM. Co-authored-by: Kibana Machine <[email protected]>
- Loading branch information
1 parent
7270c3b
commit b189d05
Showing
6 changed files
with
166 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
x-pack/plugins/uptime/public/components/common/header/action_menu_content.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /* | ||
| * 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 { fireEvent, waitFor } from '@testing-library/react'; | ||
| import { render } from '../../../lib/helper/rtl_helpers'; | ||
| import { ActionMenuContent } from './action_menu_content'; | ||
|
|
||
| describe('ActionMenuContent', () => { | ||
| it('renders alerts dropdown', async () => { | ||
| const { getByLabelText, getByText } = render(<ActionMenuContent />); | ||
|
|
||
| const alertsDropdown = getByLabelText('Open alert context menu'); | ||
| fireEvent.click(alertsDropdown); | ||
|
|
||
| await waitFor(() => { | ||
| expect(getByText('Create alert')); | ||
| expect(getByText('Manage alerts')); | ||
| }); | ||
| }); | ||
|
|
||
| it('renders settings link', () => { | ||
| const { getByRole, getByText } = render(<ActionMenuContent />); | ||
|
|
||
| const settingsAnchor = getByRole('link', { name: 'Navigate to the Uptime settings page' }); | ||
| expect(settingsAnchor.getAttribute('href')).toBe('/settings'); | ||
| expect(getByText('Settings')); | ||
| }); | ||
|
|
||
| it('renders exploratory view link', () => { | ||
| const { getByLabelText, getByText } = render(<ActionMenuContent />); | ||
|
|
||
| const analyzeAnchor = getByLabelText( | ||
| 'Navigate to the "Analyze Data" view to visualize Synthetics/User data' | ||
| ); | ||
|
|
||
| expect(analyzeAnchor.getAttribute('href')).toContain('/app/observability/exploratory-view'); | ||
| expect(getByText('Analyze data')); | ||
| }); | ||
|
|
||
| it('renders Add Data link', () => { | ||
| const { getByLabelText, getByText } = render(<ActionMenuContent />); | ||
|
|
||
| const addDataAnchor = getByLabelText('Navigate to a tutorial about adding Uptime data'); | ||
|
|
||
| // this href value is mocked, so it doesn't correspond to the real link | ||
| // that Kibana core services will provide | ||
| expect(addDataAnchor.getAttribute('href')).toBe('/app/uptime'); | ||
| expect(getByText('Add data')); | ||
| }); | ||
| }); |
101 changes: 101 additions & 0 deletions
101
x-pack/plugins/uptime/public/components/common/header/action_menu_content.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiButtonEmpty, EuiHeaderLinks, EuiHeaderSectionItem, EuiToolTip } from '@elastic/eui'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
| import { useHistory } from 'react-router-dom'; | ||
| import { createExploratoryViewUrl, SeriesUrl } from '../../../../../observability/public'; | ||
| import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; | ||
| import { useUptimeSettingsContext } from '../../../contexts/uptime_settings_context'; | ||
| import { useGetUrlParams } from '../../../hooks'; | ||
| import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers'; | ||
| import { SETTINGS_ROUTE } from '../../../../common/constants'; | ||
| import { stringifyUrlParams } from '../../../lib/helper/stringify_url_params'; | ||
|
|
||
| const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', { | ||
| defaultMessage: 'Add data', | ||
| }); | ||
|
|
||
| const ANALYZE_DATA = i18n.translate('xpack.uptime.analyzeDataButtonLabel', { | ||
| defaultMessage: 'Analyze data', | ||
| }); | ||
|
|
||
| const ANALYZE_MESSAGE = i18n.translate('xpack.uptime.analyzeDataButtonLabel.message', { | ||
| defaultMessage: | ||
| 'EXPERIMENTAL - Analyze Data allows you to select and filter result data in any dimension and look for the cause or impact of performance problems.', | ||
| }); | ||
|
|
||
| export function ActionMenuContent(): React.ReactElement { | ||
| const kibana = useKibana(); | ||
| const { basePath } = useUptimeSettingsContext(); | ||
| const params = useGetUrlParams(); | ||
| const { dateRangeStart, dateRangeEnd } = params; | ||
| const history = useHistory(); | ||
|
|
||
| const syntheticExploratoryViewLink = createExploratoryViewUrl( | ||
| { | ||
| 'synthetics-series': { | ||
| dataType: 'synthetics', | ||
| time: { from: dateRangeStart, to: dateRangeEnd }, | ||
| } as SeriesUrl, | ||
| }, | ||
| basePath | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiHeaderLinks> | ||
| <EuiHeaderSectionItem> | ||
| <EuiButtonEmpty | ||
| aria-label={i18n.translate('xpack.uptime.page_header.settingsLink.label', { | ||
| defaultMessage: 'Navigate to the Uptime settings page', | ||
| })} | ||
| color="primary" | ||
| data-test-subj="settings-page-link" | ||
| href={history.createHref({ | ||
| pathname: SETTINGS_ROUTE, | ||
| search: stringifyUrlParams(params, true), | ||
| })} | ||
| iconType="gear" | ||
| > | ||
| <FormattedMessage id="xpack.uptime.page_header.settingsLink" defaultMessage="Settings" /> | ||
| </EuiButtonEmpty> | ||
| </EuiHeaderSectionItem> | ||
| <EuiHeaderSectionItem> | ||
| <ToggleAlertFlyoutButton /> | ||
| </EuiHeaderSectionItem> | ||
| <EuiHeaderSectionItem> | ||
| <EuiToolTip position="top" content={<p>{ANALYZE_MESSAGE}</p>}> | ||
| <EuiButtonEmpty | ||
| aria-label={i18n.translate('xpack.uptime.page_header.analyzeData.label', { | ||
| defaultMessage: | ||
| 'Navigate to the "Analyze Data" view to visualize Synthetics/User data', | ||
| })} | ||
| href={syntheticExploratoryViewLink} | ||
| color="primary" | ||
| iconType="visBarVerticalStacked" | ||
| > | ||
| {ANALYZE_DATA} | ||
| </EuiButtonEmpty> | ||
| </EuiToolTip> | ||
| </EuiHeaderSectionItem> | ||
| <EuiHeaderSectionItem> | ||
| <EuiButtonEmpty | ||
| aria-label={i18n.translate('xpack.uptime.page_header.addDataLink.label', { | ||
| defaultMessage: 'Navigate to a tutorial about adding Uptime data', | ||
| })} | ||
| href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')} | ||
| color="primary" | ||
| iconType="indexOpen" | ||
| > | ||
| {ADD_DATA_LABEL} | ||
| </EuiButtonEmpty> | ||
| </EuiHeaderSectionItem> | ||
| </EuiHeaderLinks> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters