[Uptime] Fix/details page tabs #86296
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import * as reactRouterDom from 'react-router-dom'; | ||
| import { MonitorPageTitle } from '../monitor_title'; | ||
| import { renderWithRouter, MountWithReduxProvider } from '../../../lib'; | ||
| import { AppState, store } from '../../../state'; | ||
|
|
||
| jest.mock('react-router-dom', () => ({ | ||
| __esModule: true, | ||
| // @ts-ignore | ||
|
There was a problem hiding this comment. What's the reason for this being ignored? Any type script ignore statements should come with a comment explaining the why here. As a reviewer (or someone coming along later) it answers a lot of questions. |
||
| ...jest.requireActual('react-router-dom'), | ||
| })); | ||
|
|
||
| describe('MonitorTitle component', () => { | ||
| const monitorName = 'sample monitor'; | ||
| const monitorId = 'always-down'; | ||
| const initialState = store.getState(); | ||
| const url = { | ||
| full: 'https://www.elastic.co/', | ||
| }; | ||
| const monitorStatus = { | ||
|
There was a problem hiding this comment. It feels like the complexity of these mocks at this point justifies a bit of refactoring here. We do things like this elsewhere, but it's something we should avoid when we can. The reason is, if we add any additional mandatory fields to this type, this is one more file we must update. Also, it's hard to read etc. I am wondering if we could make a new selector in redux that just pulls the fields we need, so we would only need to mock that minimal set of fields. In general, when passing a complex mocked object, that can point to a need to reduce the surface area of the function (or component) being tested. It may accept a more complex object than it needs to. I'm also open to other approaches that could simplify the tests here. |
||
| loading: false, | ||
| status: { | ||
| docId: '', | ||
| timestamp: '', | ||
| monitor: { | ||
| duration: { us: 0 }, | ||
| id: monitorId, | ||
| status: '', | ||
| type: '', | ||
| ...initialState?.monitorStatus?.status, | ||
| name: monitorName, | ||
| }, | ||
| url, | ||
| }, | ||
| }; | ||
|
|
||
| const stateWithMonitorName: AppState = { | ||
| ...initialState, | ||
| monitorStatus, | ||
| }; | ||
|
|
||
| const stateWithoutMonitorName: AppState = { | ||
| ...initialState, | ||
| monitorStatus: { | ||
| ...monitorStatus, | ||
| status: { | ||
| ...monitorStatus.status, | ||
| monitor: { | ||
| ...monitorStatus.status.monitor, | ||
| name: undefined, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| it('renders the monitor heading and EnableMonitorAlert toggle', () => { | ||
| const component = renderWithRouter( | ||
| <MountWithReduxProvider store={stateWithMonitorName}> | ||
| <MonitorPageTitle /> | ||
| </MountWithReduxProvider> | ||
| ); | ||
| expect(component.find('h1').text()).toBe(monitorName); | ||
| expect(component.find('[data-test-subj="uptimeDisplayDefineConnector"]').length).toBe(1); | ||
| }); | ||
|
|
||
| it('renders the user provided monitorId when the name is not present', () => { | ||
| jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ | ||
| monitorId: 'YWx3YXlzLWRvd24', // resolves to always-down | ||
| })); | ||
| const component = renderWithRouter( | ||
| <MountWithReduxProvider store={stateWithoutMonitorName}> | ||
| <MonitorPageTitle /> | ||
| </MountWithReduxProvider> | ||
| ); | ||
| expect(component.find('h1').text()).toBe(monitorId); | ||
| }); | ||
|
|
||
| it('renders the url when the monitorId is auto generated and the monitor name is not present', () => { | ||
| jest.spyOn(reactRouterDom, 'useParams').mockImplementation(() => ({ | ||
| monitorId: 'YXV0by1pY21wLTBYMjQ5NDhGNDY3QzZDNEYwMQ', // resolves to auto-icmp-0X24948F467C6C4F01 | ||
| })); | ||
| const component = renderWithRouter( | ||
| <MountWithReduxProvider store={stateWithoutMonitorName}> | ||
| <MonitorPageTitle /> | ||
| </MountWithReduxProvider> | ||
| ); | ||
| expect(component.find('h1').text()).toBe(url.full); | ||
| }); | ||
| }); | ||
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,58 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui'; | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { useMonitorId } from '../../hooks'; | ||
| import { monitorStatusSelector } from '../../state/selectors'; | ||
| import { EnableMonitorAlert } from '../overview/monitor_list/columns/enable_alert'; | ||
| import { Ping } from '../../../common/runtime_types/ping'; | ||
| import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; | ||
|
|
||
| const isAutogeneratedId = (id: string) => { | ||
| const autoGeneratedId = /^auto-(icmp|http|tcp|browser)-0X[A-F0-9]{16}.*/; | ||
shahzad31 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| return autoGeneratedId.test(id); | ||
| }; | ||
|
|
||
| // For monitors with no explicit ID, we display the URL instead of the | ||
| // auto-generated ID because it is difficult to derive meaning from a | ||
| // generated id like `auto-http-0X8D6082B94BBE3B8A`. | ||
| // We may deprecate this behavior in the next major release, because | ||
| // the heartbeat config will require an explicit ID. | ||
| const getPageTitle = (monitorId: string, selectedMonitor: Ping | null) => { | ||
| if (isAutogeneratedId(monitorId)) { | ||
| return selectedMonitor?.url?.full || monitorId; | ||
| } | ||
| return monitorId; | ||
| }; | ||
|
|
||
| export const MonitorPageTitle: React.FC = () => { | ||
| const monitorId = useMonitorId(); | ||
|
|
||
| const selectedMonitor = useSelector(monitorStatusSelector); | ||
|
|
||
| const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor); | ||
|
|
||
| useBreadcrumbs([{ text: nameOrId }]); | ||
|
|
||
| return ( | ||
| <EuiFlexGroup wrap={false}> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiTitle> | ||
| <h1 className="eui-textNoWrap">{nameOrId}</h1> | ||
| </EuiTitle> | ||
| <EuiSpacer size="xs" /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}> | ||
| <EnableMonitorAlert | ||
| monitorId={monitorId} | ||
| monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ); | ||
| }; | ||
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a way we can just add a
data-test-subjto the whole tab group instead of looking for specific links? Seems like the wrong approach, and fragile if the links themselves change.