github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Serverless] Fix active nav elements for oblt side nav (#162402)

Browse source 
## Summary

closes https://github.com/elastic/kibana/issues/162173

## Before


bf857880-9b34-4b1a-b3ae-9ca3fabf43ac


## After



474df79f-ebf5-4fce-acef-fc1f5e28d0c2
This commit is contained in:
Katerina Patticha 2023-07-26 09:10:03 +02:00 • committed by GitHub
parent a935527695
commit 9538fab090
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 100 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
x-pack/plugins/serverless_observability/public/components/side_navigation/index.tsx
View file

@ -67,10 +67,18 @@ const navigationTree: NavigationTreeDefinition = {
}),
link: 'ml:logRateAnalysis',
icon: 'beaker',
getIsActive: ({ pathNameSerialized, prepend }) => {
return pathNameSerialized.includes(prepend('/app/ml/aiops/log_rate_analysis'));
},
},
{
link: 'ml:changePointDetections',
icon: 'beaker',
getIsActive: ({ pathNameSerialized, prepend }) => {
return pathNameSerialized.includes(
prepend('/app/ml/aiops/change_point_detection')
);
},
},
{
title: i18n.translate('xpack.serverlessObservability.nav.ml.job.notifications', {
@ -93,12 +101,22 @@ const navigationTree: NavigationTreeDefinition = {
children: [
{
link: 'apm:services',
getIsActive: ({ pathNameSerialized, prepend }) => {
const regex = /app\/apm\/.*service.*/;
return regex.test(pathNameSerialized);
},
},
{
link: 'apm:traces',
getIsActive: ({ pathNameSerialized, prepend }) => {
return pathNameSerialized.startsWith(prepend('/app/apm/traces'));
},
},
{
link: 'apm:dependencies',
getIsActive: ({ pathNameSerialized, prepend }) => {
return pathNameSerialized.startsWith(prepend('/app/apm/dependencies'));
},
},
],
},

81
x-pack/test_serverless/functional/test_suites/observability/cypress/e2e/navigation.cy.ts
View file

@ -77,13 +77,13 @@ describe('Serverless', () => {
cy.url().should('include', '/app/ml/jobs');
cy.contains('Log rate analysis').click();
cy.url().should('include', 'app/ml/aiops/log_rate_analysis_index_select');
cy.url().should('include', '/app/ml/aiops/log_rate_analysis_index_select');
cy.contains('Change Point Detection').click();
cy.url().should('include', 'app/ml/aiops/change_point_detection_index_select');
cy.url().should('include', '/app/ml/aiops/change_point_detection_index_select');
cy.contains('Job notifications').click();
cy.url().should('include', 'app/ml/notifications');
cy.url().should('include', '/app/ml/notifications');
});
it('navigates to project settings', () => {
@ -99,6 +99,81 @@ describe('Serverless', () => {
cy.contains('Fleet').click();
cy.url().should('include', '/app/fleet/agents');
});
it('sets service nav item as active', () => {
cy.loginAsElasticUser('/app/apm/service-groups');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:services').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
cy.loginAsElasticUser('/app/apm/service-maps');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:services').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
cy.loginAsElasticUser('/app/apm/mobile-services/foo');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:services').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
});
it('sets dependencies nav item as active', () => {
cy.loginAsElasticUser('/app/apm/dependencies/inventory');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:dependencies').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
cy.loginAsElasticUser('/app/apm/dependencies/operations?dependencyName=foo');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:dependencies').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
});
it('sets traces nav item as active', () => {
cy.loginAsElasticUser('/app/apm/traces/explorer/waterfall');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:traces').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
cy.loginAsElasticUser('/app/apm/traces/explorer/critical_path');
cy.getByTestSubj('nav-item-id-apm').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-apm:traces').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
});
it('sets AIOps nav item as active', () => {
cy.loginAsElasticUser('app/ml/aiops/explain_log_rate_spikes');
cy.getByTestSubj('nav-item-id-aiops').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-ml:logRateAnalysis').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
cy.loginAsElasticUser('app/ml/aiops/change_point_detection');
cy.getByTestSubj('nav-item-id-aiops').should('have.class', 'euiSideNavItemButton-isOpen');
cy.getByTestSubj('nav-item-id-ml:changePointDetections').should(
'have.class',
'euiSideNavItemButton-isSelected'
);
});
});
export {};

6
x-pack/test_serverless/functional/test_suites/observability/cypress/support/commands.ts
View file

@ -7,8 +7,8 @@
import 'cypress-real-events/support';
import 'cypress-axe';
Cypress.Commands.add('loginAsElasticUser', () => {
cy.visit('/', {
Cypress.Commands.add('loginAsElasticUser', (path?: string) => {
cy.visit(path ?? '/', {
auth: {
username: 'elastic',
password: 'changeme',
@ -17,5 +17,5 @@ Cypress.Commands.add('loginAsElasticUser', () => {
});
Cypress.Commands.add('getByTestSubj', (selector: string) => {
return cy.get(`[data-test-subj="${selector}"]`);
return cy.get(`[data-test-subj*="${selector}"]`);
});

2
x-pack/test_serverless/functional/test_suites/observability/cypress/support/types.d.ts vendored
View file

@ -7,7 +7,7 @@
declare namespace Cypress {
interface Chainable {
loginAsElasticUser(): Cypress.Chainable<Cypress.Response<any>>;
loginAsElasticUser(path?: string): Cypress.Chainable<Cypress.Response<any>>;
getByTestSubj(selector: string): Chainable<JQuery<Element>>;
}
}