Update "APM" title to "Applications" (#201522)

## Summary

Update "APM" title to "Applications" in left-hand navbar and search
results. Add "apm" keyword to display search results for backward
compatibility.

### Test
- implemented both search scenarios (applications, apm) in Cypress e2e.

--- 

### **Before:**
<img width="338" alt="image"
src="https://github.com/user-attachments/assets/15fa2618-b788-4c72-a400-88a0b4cfbef5">
<img width="698" alt="image"
src="https://github.com/user-attachments/assets/bf897121-4198-42b2-bbb6-ec9526d60449">

### **After:**
<img width="528" alt="Screenshot 2024-11-26 at 15 35 57"
src="https://github.com/user-attachments/assets/0e6566f0-86fc-4200-9d88-d00bce5762bd">
<img width="716" alt="image"
src="https://github.com/user-attachments/assets/706eea2e-6043-4b66-addd-9089fe112da1">
<img width="675" alt="image"
src="https://github.com/user-attachments/assets/34e6d514-e6e6-4371-b9e6-34687837b011">
This commit is contained in:
Milosz Marcinkowski 2024-11-27 11:33:22 +01:00 committed by GitHub
parent 1dfc18ef4e
commit 7318e75083
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 68 additions and 44 deletions

View file

@ -5,70 +5,88 @@
* 2.0.
*/
describe('APM deep links', () => {
describe('Applications deep links', () => {
beforeEach(() => {
cy.loginAsViewerUser();
});
it('navigates to apm links on search elastic', () => {
it('navigates to Application links on "application" search', () => {
cy.visitKibana('/');
navigatesToApmLinks('applications');
});
it('navigates to Application links on "apm" search', () => {
cy.visitKibana('/');
navigatesToApmLinks('apm');
});
function navigatesToApmLinks(keyword: string) {
// Wait until the page content is fully loaded
// otherwise, the search results may disappear before all checks are completed, making this test flaky
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 })
.type(keyword, { force: true })
.focus();
cy.contains('APM');
cy.contains('APM / Service Inventory');
cy.contains('APM / Service groups');
cy.contains('APM / Traces');
cy.contains('APM / Service Map');
cy.contains('APM / Dependencies');
cy.contains('APM / Settings');
cy.contains('Applications');
cy.contains('Applications / Service Inventory');
cy.contains('Applications / Service groups');
cy.contains('Applications / Traces');
cy.contains('Applications / Service Map');
// scroll to the bottom because results are not rendering otherwise
scrollToBottomResults();
cy.contains('Applications / Dependencies');
cy.contains('Applications / Settings');
// navigates to home page
// Force click because welcome screen changes
// https://github.com/elastic/kibana/pull/108193
cy.contains('APM').click({ force: true });
cy.contains('Applications').click({ force: true });
cy.url().should('include', '/apm/services');
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 });
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input').should('be.visible').type(keyword, { force: true });
// navigates to services page
cy.contains('APM / Service Inventory').click({ force: true });
cy.contains('Applications / Service Inventory').click({ force: true });
cy.url().should('include', '/apm/services');
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 });
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input').should('be.visible').type(keyword, { force: true });
// navigates to service groups page
cy.contains('APM / Service groups').click({ force: true });
cy.contains('Applications / Service groups').click({ force: true });
cy.url().should('include', '/apm/service-groups');
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 });
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input').should('be.visible').type(keyword, { force: true });
// navigates to traces page
cy.contains('APM / Traces').click({ force: true });
cy.contains('Applications / Traces').click({ force: true });
cy.url().should('include', '/apm/traces');
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 });
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input').should('be.visible').type(keyword, { force: true });
scrollToBottomResults();
// navigates to service maps
cy.contains('APM / Service Map').click({ force: true });
cy.contains('Applications / Service Map').click({ force: true });
cy.url().should('include', '/apm/service-map');
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 });
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input').should('be.visible').type(keyword, { force: true });
// scroll to the bottom because results are not rendering otherwise
scrollToBottomResults();
// navigates to dependencies page
cy.contains('APM / Dependencies').click({ force: true });
cy.contains('Applications / Dependencies').click({ force: true });
cy.url().should('include', '/apm/dependencies/inventory');
cy.getByTestSubj('nav-search-input')
.should('be.visible')
.type('APM', { force: true, delay: 100 });
cy.waitUntilPageContentIsLoaded();
cy.getByTestSubj('nav-search-input').should('be.visible').type(keyword, { force: true });
// scroll to the bottom because results are not rendering otherwise
scrollToBottomResults();
// navigates to settings page
cy.contains('APM / Settings').click({ force: true });
cy.contains('Applications / Settings').click({ force: true });
cy.url().should('include', '/apm/settings/general-settings');
});
}
});
function scrollToBottomResults() {
cy.getByTestSubj('euiSelectableList').find('div > div').scrollTo('bottom');
}

View file

@ -161,6 +161,10 @@ Cypress.Commands.add('withHidden', (selector, callback) => {
cy.get(selector).invoke('attr', 'style', '');
});
Cypress.Commands.add('waitUntilPageContentIsLoaded', () => {
cy.getByTestSubj('kbnAppWrapper visibleChrome').find('[aria-busy=false]').should('be.visible');
});
// A11y configuration
const axeConfig = {

View file

@ -25,5 +25,6 @@ declare namespace Cypress {
updateAdvancedSettings(settings: Record<string, unknown>): void;
getByTestSubj(selector: string): Chainable<JQuery<Element>>;
withHidden(selector: string, callback: () => void): void;
waitUntilPageContentIsLoaded(): void;
}
}

View file

@ -350,12 +350,13 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
core.application.register({
id: 'apm',
title: 'APM',
title: 'Applications',
order: 8300,
euiIconType: 'logoObservability',
appRoute: '/app/apm',
icon: 'plugins/apm/public/icon.svg',
category: DEFAULT_APP_CATEGORIES.observability,
keywords: ['apm'],
deepLinks: [
{
id: 'service-groups-list',

View file

@ -46,7 +46,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
basePath: '/s/custom_space',
});
const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
expect(navLinks).to.contain('APM');
expect(navLinks).to.contain('Applications');
});
it('can navigate to APM app', async () => {

View file

@ -47,7 +47,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
basePath: '/s/custom_space',
});
const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
expect(navLinks).to.contain('APM');
expect(navLinks).to.contain('Applications');
});
it('can navigate to APM app', async () => {

View file

@ -64,7 +64,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
expect(navLinks.map((link) => link.text)).to.eql([
'Overview',
'Alerts',
'APM',
'Applications',
'User Experience',
'Stack Management',
]);
@ -119,7 +119,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
expect(navLinks).to.eql([
'Overview',
'Alerts',
'APM',
'Applications',
'User Experience',
'Stack Management',
]);
@ -175,7 +175,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
it(`doesn't show APM navlink`, async () => {
const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
expect(navLinks).not.to.contain('APM');
expect(navLinks).not.to.contain('Applications');
});
it(`renders no permission page`, async () => {

View file

@ -33,7 +33,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
basePath: '/s/custom_space',
});
const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
expect(navLinks).to.contain('APM');
expect(navLinks).to.contain('Applications');
});
it('can navigate to Uptime app', async () => {
@ -62,7 +62,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
basePath: '/s/custom_space',
});
const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
expect(navLinks).not.to.contain('APM');
expect(navLinks).not.to.contain('Applications');
});
it(`renders not found page`, async () => {