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

* Change service table click to page redirection Signed-off-by: Adam Tackett <[email protected]> * remove focus on filtering, bug fixes Signed-off-by: Adam Tackett <[email protected]> * add jest test for url redirection on click Signed-off-by: Adam Tackett <[email protected]> * remove filter on focus, update focus functionality, add testing Signed-off-by: Adam Tackett <[email protected]> * add query filtering back Signed-off-by: Adam Tackett <[email protected]> * change url check to use hook state Signed-off-by: Adam Tackett <[email protected]> * fix location error Signed-off-by: Adam Tackett <[email protected]> * move flyout into hashrouter, remove extra filter Signed-off-by: Adam Tackett <[email protected]> * fix applications, address comments Signed-off-by: Adam Tackett <[email protected]> * fix flaky application test Signed-off-by: Adam Tackett <[email protected]> * make service map snapshop deep Signed-off-by: Adam Tackett <[email protected]> * add service map focus cypress testing Signed-off-by: Adam Tackett <[email protected]> * add more tests to cover service map load and click Signed-off-by: Shenoy Pratik <[email protected]> * add comments to cypress Signed-off-by: Shenoy Pratik <[email protected]> * remove only from cypress tests Signed-off-by: Shenoy Pratik <[email protected]> * update snapshots Signed-off-by: Shenoy Pratik <[email protected]> * adjust cypress test Signed-off-by: Adam Tackett <[email protected]> * adjust cypress testw Signed-off-by: Adam Tackett <[email protected]> * remove only and comment Signed-off-by: Adam Tackett <[email protected]> * switch test back Signed-off-by: Adam Tackett <[email protected]> * add dependancy to use effect Signed-off-by: Adam Tackett <[email protected]> --------- Signed-off-by: Adam Tackett <[email protected]> Signed-off-by: Shenoy Pratik <[email protected]> Co-authored-by: Adam Tackett <[email protected]> Co-authored-by: Shenoy Pratik <[email protected]>
opensearch-project · Dec 10, 2024 · c22c69d · c22c69d
1 parent c6c2bab
commit c22c69d
Show file tree

Hide file tree

Showing 19 changed files with 2,820 additions and 2,216 deletions.
diff --git a/.cypress/integration/app_analytics_test/app_analytics.spec.js b/.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();

diff --git a/.cypress/integration/trace_analytics_test/trace_analytics_services.spec.js b/.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
   });
 });
 

diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
diff --git a/public/components/application_analytics/__tests__/__snapshots__/flyout.test.tsx.snap b/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 [