[Services map] Update redirection/Focus field rework (#2264) (#2292)

* Change service table click to page redirection



* remove focus on filtering, bug fixes



* add jest test for url redirection on click



* remove filter on focus, update focus functionality, add testing



* add query filtering back



* change url check to use hook state



* fix location error



* move flyout into hashrouter, remove extra filter



* fix applications, address comments



* fix flaky application test



* make service map snapshop deep



* add service map focus cypress testing



* add more tests to cover service map load and click



* add comments to cypress



* remove only from cypress tests



* update snapshots



* adjust cypress test



* adjust cypress testw



* remove only and comment



* switch test back



* add dependancy to use effect



---------





(cherry picked from commit c22c69d)

Signed-off-by: Adam Tackett <[email protected]>
Signed-off-by: Shenoy Pratik <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Adam Tackett <[email protected]>
Co-authored-by: Shenoy Pratik <[email protected]>

.cypress/integration/app_analytics_test/app_analytics.spec.js

@@ -274,7 +274,7 @@ describe('Viewing application', () => {
 
   it('Opens service detail flyout when Service Name is clicked', () => {
     cy.get('[data-test-subj="app-analytics-serviceTab"]').click();
-    cy.get('*[data-test-subj^="service-flyout-action-btntrace"]').eq(0).click();
+    cy.get('*[data-test-subj^="service-link"]').eq(0).click();
     cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible');
     cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
     cy.get('[data-text="Errors"]').eq(1).click(); // Selecting errors tab within flyout
@@ -297,6 +297,7 @@ describe('Viewing application', () => {
     });
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
     cy.get('[data-test-subj="traceDetailFlyout"]').should('not.exist');
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').click();//added to replace wait
     cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
     cy.get('[data-text="Span list"]').click();
     cy.get('[data-test-subj="dataGridRowCell"]').contains('d67c5bb617ba9203').click();

.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js

@@ -160,6 +160,7 @@ describe('Testing Service map', () => {
     cy.get("[data-test-subj='indexPattern-switch-link']").click();
     cy.get("[data-test-subj='data_prepper-mode']").click();
     setTimeFilter();
+    cy.get('.euiTableRow').should('have.length.greaterThan', 7); //Replaces wait
   });
 
   it('Render Service map', () => {
@@ -171,7 +172,70 @@ describe('Testing Service map', () => {
     cy.get('[data-text = "Duration"]').click();
     cy.contains('100');
     cy.get('.euiFormLabel.euiFormControlLayout__prepend').contains('Focus on').should('exist');
-    cy.get('[placeholder="Service name"]').focus().type('database{enter}');
+  });
+
+  it('Render the vis-network div and canvas', () => {
+    // Check the view where ServiceMap component is rendered
+    cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
+    cy.get('.vis-network').should('exist');
+    cy.get('.vis-network canvas').should('exist');
+
+    // Check the canvas is not empty
+    cy.get('.vis-network canvas')
+      .should('have.attr', 'style')
+      .and('include', 'position: relative')
+      .and('include', 'touch-action: none')
+      .and('include', 'user-select: none')
+      .and('include', 'width: 100%')
+      .and('include', 'height: 100%');
+
+    cy.get('.vis-network canvas').should('have.attr', 'width').and('not.eq', '0');
+    cy.get('.vis-network canvas').should('have.attr', 'height').and('not.eq', '0');
+  });
+
+  it('Click on a node to see the details', () => {
+    cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
+    cy.get('.vis-network canvas').should('exist');
+
+    // ensure rendering is complete before node click, replace wait
+    cy.get('[data-text="Errors"]').click();
+    cy.contains('60%');
+    cy.get('[data-text="Duration"]').click();
+    cy.contains('100');
+
+    // clicks on payment node
+    cy.get('.vis-network canvas').click(707, 388);
+    // checks the duration in node details popover
+    cy.get('.euiText.euiText--small').contains('Average duration: 216.43ms').should('exist');
+  });
+
+  it('Tests focus functionality in Service map', () => {
+    cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
+    cy.get('[data-test-subj="latency"]').should('exist');
+    cy.get('.ytitle').contains('Average duration (ms)');
+
+    // Test metric selection functionality
+    cy.get('[data-text="Errors"]').click();
+    cy.contains('60%');
+    cy.get('[data-text="Duration"]').click();
+    cy.contains('100');
+
+    // Focus on "order" by selecting the first option
+    cy.get('.euiFormLabel.euiFormControlLayout__prepend').contains('Focus on').should('exist');
+    cy.get('[placeholder="Service name"]').click();
+    cy.get('.euiSelectableList__list li').eq(0).click();
+
+    // Verify the service map updates and focus is applied
+    cy.get('.euiFormLabel.euiFormControlLayout__prepend').contains('Focus on').should('exist');
+    cy.get('[placeholder="order"]').click();
+    cy.get('.euiSelectableList__list li').should('have.length', 4); // Focused view with 4 options
+
+    // Refresh to reset the focus
+    cy.get('[data-test-subj="serviceMapRefreshButton"]').click();
+
+    // Verify the service map is reset to the original state
+    cy.get('[placeholder="Service name"]').should('have.value', '');
+    cy.get('.euiSelectableList__list li').should('have.length', 8); // Original 8 options
   });
 });
 

public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap

@@ -1221,7 +1221,7 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
                           "yref": "paper",
                         },
                       ],
-                      "width": undefined,
+                      "width": 412,
                       "xaxis": Object {
                         "color": "#91989c",
                         "range": Array [
@@ -1287,7 +1287,7 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
                           },
                         ],
                         "showlegend": false,
-                        "width": undefined,
+                        "width": 412,
                         "xaxis": Object {
                           "color": "#91989c",
                           "range": Array [
@@ -1357,7 +1357,7 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
                       },
                       "paper_bgcolor": "rgba(0, 0, 0, 0)",
                       "plot_bgcolor": "rgba(0, 0, 0, 0)",
-                      "width": undefined,
+                      "width": 412,
                       "xaxis": Object {
                         "color": "#91989c",
                         "range": Array [
@@ -1409,7 +1409,7 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
                         "paper_bgcolor": "rgba(0, 0, 0, 0)",
                         "plot_bgcolor": "rgba(0, 0, 0, 0)",
                         "showlegend": false,
-                        "width": undefined,
+                        "width": 412,
                         "xaxis": Object {
                           "color": "#91989c",
                           "range": Array [