[Services map] Update redirection/Focus field rework

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

@@ -202,7 +202,7 @@
     cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
     cy.focused().type('       source = ',);
     cy.focused().type('{enter}');
     cy.get('[data-test-subj="createAndSetButton"]').click({ force: true });
     cy.get('.euiTableRow').should('have.length.lessThan', 1);
     cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
     cy.get('.euiBreadcrumb[href="#/"]').click();
@@ -274,13 +274,13 @@
 
   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
     cy.get('.ytitle').contains('Error rate').should('exist');
     cy.get('[data-test-subj="dataGridRowCell"]').eq(0).click({force: true}); // absolutely doesn't click no matter what unless theres a double click
     cy.get('button[data-test-subj="spanId-link"]').eq(0).click({force: true});
     cy.get('[data-test-subj="spanDetailFlyout"]').contains('Span detail').should('be.visible');
     cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication');
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
@@ -297,6 +297,7 @@
     });
     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();
@@ -359,7 +360,7 @@
     cy.get('.euiTab[id="availability-panel"]').click();
 
     cy.get('[data-test-subj="comboBoxInput"]').click();
     cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true });
     cy.focused().type('{enter}');
 
     cy.get('[data-test-subj="addAvailabilityButton"]').click();
@@ -397,7 +398,7 @@
     cy.get('[data-test-subj="main-content-visTab"]').click();
     cy.get('.euiTab[id="availability-panel"]').click();
     cy.get('[data-test-subj="comboBoxInput"]').click();
     cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Time series').click({ force: true });
     cy.get('[data-test-subj="addAvailabilityButton"]').click();
     cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
     cy.get('[aria-label="Select #9170B8 as the color"]').click();

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

@@ -136,16 +136,16 @@
   });
 
   it('Renders spans data grid, flyout, filters', () => {
     cy.get("[data-test-subj='spanId-link']")
       .contains(SERVICE_SPAN_ID)
       .trigger('mouseover', { force: true });
     cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
     cy.contains('Span detail').should('exist');
     cy.contains('Span attributes').should('exist');
     cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
     cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
     cy.get('.euiBadge__text').contains('spanId: ').should('exist');
     cy.get('[data-test-subj="euiFlyoutCloseButton"]').click({ force: true });
     cy.contains('Spans (1)').should('exist');
   });
 });
@@ -160,6 +160,7 @@
     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 @@
     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
   });
 });
 
@@ -200,7 +264,7 @@
   it('Toggle columns and verify the columns hidden text verify rows', () => {
     cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist');
     expandServiceView(1);
     cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click({ force: true });
     cy.get('.panel-title-count').contains('8').should('exist');
     cy.get('.euiSwitch.euiSwitch--compressed.euiSwitch--mini .euiSwitch__button').eq(3).click();
     cy.get('[data-test-subj = "dataGridColumnSelectorButton"]')

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 [
@@ -1295,7 +1295,7 @@ exports[`Trace Detail Render Flyout component render trace detail 1`] = `
                           },
                         ],
                         "showlegend": false,
-                        "width": undefined,
+                        "width": 412,
                         "xaxis": Object {
                           "color": "#91989c",
                           "range": Array [
@@ -1365,7 +1365,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 [
@@ -1425,7 +1425,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 [