[Backport 3.0] [Feature] Fetch top query with verbose=false on overview

common/utils/QueryUtils.ts

@@ -7,11 +7,12 @@
 
 // Utility function to fetch query by id and time range
 export const retrieveQueryById = async (
   core: { http: { get: (endpoint: string, params: any) => Promise<any> } },
   dataSourceId: string,
   start: string | null,
   end: string | null,
-  id: string | null
+  id: string | null,
+  verbose: boolean
 ): Promise<SearchQueryRecord | null> => {
   const nullResponse = { response: { top_queries: [] } };
   const params = {
@@ -20,6 +21,7 @@
       from: start,
       to: end,
       id,
+      verbose,
     },
   };
 

cypress/e2e/1_top_queries.cy.js

@@ -44,7 +44,7 @@
   /**
    * Validate the main overview page loads correctly
    */
   it('should display the main overview page', () => {
     cy.get('.euiBasicTable').should('be.visible');
     cy.contains('Query insights - Top N queries');
     cy.url().should('include', '/queryInsights');
@@ -82,7 +82,7 @@
       });
   });
 
   it('should switch between tabs', () => {
     // Click Configuration tab
     cy.getElementByText('.euiTab', 'Configuration').click({ force: true });
     cy.contains('Query insights - Configuration');
@@ -93,28 +93,28 @@
     cy.url().should('include', '/queryInsights');
   });
 
   it('should filter queries', () => {
     cy.get('.euiFieldSearch').should('be.visible');
     cy.get('.euiFieldSearch').type('sample_index');
     // Add assertions for filtered results
     cy.get('.euiTableRow').should('have.length.greaterThan', 0);
   });
 
   it('should clear the search input and reset results', () => {
     cy.get('.euiFieldSearch').type('random_string');
     cy.get('.euiTableRow').should('have.length.greaterThan', 0);
     cy.get('.euiFieldSearch').clear();
     cy.get('.euiTableRow').should('have.length.greaterThan', 0);
   });
 
   it('should display a message when no top queries are found', () => {
     clearAll();
     cy.wait(10000);
     cy.reload();
     cy.contains('No items found');
   });
 
   it('should paginate the query table', () => {
     for (let i = 0; i < 20; i++) {
       cy.searchOnIndex(indexName);
     }
@@ -125,10 +125,69 @@
     // Verify rows on the second page
     cy.get('.euiTableRow').should('have.length.greaterThan', 0);
   });
-  after(() => clearAll());
+
+  it('should get minimal details of the query using verbose=false', () => {
+    const to = new Date().toISOString();
+    const from = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+
+    return cy
+      .request({
+        method: 'GET',
+        url: `/api/top_queries/latency`,
+        qs: {
+          from: from,
+          to: to,
+          verbose: false,
+        },
+      })
+      .then((response) => {
+        expect(response.status).to.eq(200);
+        expect(response.body).to.have.property('ok', true);
+
+        const responseData = response.body.response;
+        expect(responseData).to.have.property('top_queries');
+        expect(responseData.top_queries).to.be.an('array');
+        expect(responseData.top_queries.length).to.be.greaterThan(0);
+
+        const firstQuery = responseData.top_queries[0];
+        const requiredFields = [
+          'group_by',
+          'id',
+          'indices',
+          'labels',
+          'measurements',
+          'node_id',
+          'search_type',
+          'timestamp',
+          'total_shards',
+        ];
+
+        expect(firstQuery).to.include.all.keys(requiredFields);
+        const typeValidations = {
+          group_by: 'string',
+          id: 'string',
+          indices: 'array',
+          labels: 'object',
+          measurements: 'object',
+          node_id: 'string',
+          search_type: 'string',
+          timestamp: 'number',
+          total_shards: 'number',
+        };
+        Object.entries(typeValidations).forEach(([field, type]) => {
+          expect(firstQuery[field]).to.be.a(type, `${field} should be a ${type}`);
+        });
+        expect(firstQuery.measurements).to.have.all.keys(['cpu', 'latency', 'memory']);
+        ['cpu', 'latency', 'memory'].forEach((metric) => {
+          expect(firstQuery.measurements[metric]).to.be.an('object');
+        });
+      });
+
+    after(() => clearAll());
+  });
 });
 
-describe('Query Insights Dashboard - Dynamic Columns with Stubbed Top Queries', () => {
+describe('Query Insights Dashboard - Dynamic Columns change with Intercepted Top Queries', () => {
   beforeEach(() => {
     cy.fixture('stub_top_queries.json').then((stubResponse) => {
       cy.intercept('GET', '**/api/top_queries/*', {

cypress/e2e/2_query_details.cy.js

@@ -34,7 +34,7 @@
     cy.wait(1000);
   });
 
   it('should display correct details on the query details page', () => {
     // cy.get('.euiBasicTable a').first().click(); // Navigate to details
     cy.url().should('include', '/query-details');
     // Validate the page title
@@ -50,7 +50,7 @@
   /**
    * Validate summary panel has valid labels
    */
   it('the summary panel should display correctly', () => {
     // Validate all field labels exist
     const fieldLabels = [
       'Timestamp',
@@ -133,5 +133,52 @@
     cy.get('#latency').trigger('mousemove', { clientX: 100, clientY: 100 });
   });
 
+  it('should get complete details of the query using verbose=true for query type', () => {
+    const to = new Date().toISOString();
+    const from = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+
+    return cy
+      .request({
+        method: 'GET',
+        url: `/api/top_queries/latency`,
+        qs: {
+          from: from,
+          to: to,
+          verbose: true,
+        },
+      })
+      .then((response) => {
+        expect(response.status).to.eq(200);
+        expect(response.body).to.have.property('ok', true);
+
+        cy.log('Response structure:', JSON.stringify(response.body, null, 2));
+
+        const responseData = response.body.response;
+        expect(responseData).to.have.property('top_queries');
+        expect(responseData.top_queries).to.be.an('array');
+        expect(responseData.top_queries.length).to.be.greaterThan(0);
+
+        const firstQuery = responseData.top_queries[0];
+        expect(firstQuery).to.include.all.keys([
+          'group_by',
+          'id',
+          'indices',
+          'labels',
+          'measurements',
+          'node_id',
+          'phase_latency_map',
+          'search_type',
+          'source',
+          'task_resource_usages',
+          'timestamp',
+          'total_shards',
+        ]);
+
+        expect(firstQuery.group_by).to.equal('NONE');
+        expect(firstQuery.indices).to.be.an('array');
+        expect(firstQuery.measurements).to.have.all.keys(['cpu', 'latency', 'memory']);
+      });
+  });
+
   after(() => clearAll());
 });

cypress/e2e/4_group_details.cy.js

@@ -106,6 +106,62 @@ describe('Query Group Details Page', () => {
         cy.get('#latency').should('be.visible');
       });
   });
+  it('should get complete details of the query using verbose=true for group type', () => {
+    const to = new Date().toISOString();
+    const from = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+
+    return cy
+      .request({
+        method: 'GET',
+        url: `/api/top_queries/latency`,
+        qs: {
+          from: from,
+          to: to,
+          verbose: true,
+        },
+      })
+      .then((response) => {
+        // Verify response status and structure
+        expect(response.status).to.eq(200);
+        expect(response.body).to.have.property('ok', true);
+
+        cy.log('Response structure:', JSON.stringify(response.body, null, 2));
+
+        const responseData = response.body.response;
+        expect(responseData).to.have.property('top_queries');
+        expect(responseData.top_queries).to.be.an('array');
+        expect(responseData.top_queries.length).to.be.greaterThan(0);
+
+        const firstQuery = responseData.top_queries[0];
+        expect(firstQuery).to.include.all.keys([
+          'group_by',
+          'id',
+          'indices',
+          'labels',
+          'measurements',
+          'node_id',
+          'phase_latency_map',
+          'query_group_hashcode',
+          'search_type',
+          'source',
+          'task_resource_usages',
+          'timestamp',
+          'total_shards',
+        ]);
+        expect(firstQuery.group_by).to.equal('SIMILARITY');
+        expect(firstQuery.indices).to.be.an('array');
+        expect(firstQuery.id).to.be.a('string');
+        expect(firstQuery.labels).to.be.an('object');
+        expect(firstQuery.node_id).to.be.a('string');
+        expect(firstQuery.query_group_hashcode).to.be.a('string');
+        expect(firstQuery.search_type).to.be.a('string');
+        expect(firstQuery.timestamp).to.be.a('number');
+        expect(firstQuery.total_shards).to.be.a('number');
+        expect(firstQuery.measurements.cpu).to.be.an('object');
+        expect(firstQuery.measurements.latency).to.be.an('object');
+        expect(firstQuery.measurements.memory).to.be.an('object');
+      });
+  });
 
   after(() => clearAll());
 });

public/pages/QueryDetails/QueryDetails.test.tsx

@@ -58,7 +58,7 @@ describe('QueryDetails component', () => {
         initialEntries={[
           `/query-details/?id=${hash(
             mockQuery.id
-          )}&from=2025-01-21T22:30:33.347Z&to=2025-01-22T22:30:33.347Z`,
+          )}&from=2025-01-21T22:30:33.347Z&to=2025-01-22T22:30:33.347Z&verbose=true`,
         ]}
       >
         <DataSourceContext.Provider value={mockDataSourceContext}>

public/pages/QueryDetails/QueryDetails.tsx

@@ -47,6 +47,7 @@ const QueryDetails = ({
   const id = searchParams.get('id');
   const from = searchParams.get('from');
   const to = searchParams.get('to');
+  const verbose = Boolean(searchParams.get('verbose'));
 
   const [query, setQuery] = useState<SearchQueryRecord | null>(null);
   const history = useHistory();
@@ -60,15 +61,22 @@ const QueryDetails = ({
   }, []);
 
   const fetchQueryDetails = async () => {
-    const retrievedQuery = await retrieveQueryById(core, getDataSourceFromUrl().id, from, to, id);
+    const retrievedQuery = await retrieveQueryById(
+      core,
+      getDataSourceFromUrl().id,
+      from,
+      to,
+      id,
+      verbose
+    );
     setQuery(retrievedQuery);
   };
 
   useEffect(() => {
-    if (id && from && to) {
+    if (id && from && to && verbose != null) {
       fetchQueryDetails();
     }
-  }, [id, from, to]);
+  }, [id, from, to, verbose]);
 
   // Initialize the Plotly chart
   const initPlotlyChart = useCallback(() => {

public/pages/QueryGroupDetails/QueryGroupDetails.test.tsx

@@ -62,7 +62,9 @@ describe('QueryGroupDetails', () => {
   const renderComponent = () => {
     return render(
       <MemoryRouter
-        initialEntries={['/query-group-details?id=mockId&from=1632441600000&to=1632528000000']}
+        initialEntries={[
+          '/query-group-details?id=mockId&from=1632441600000&to=1632528000000&verbose=true',
+        ]}
       >
         <DataSourceContext.Provider value={mockDataSourceContext}>
           <Route path="/query-group-details">
@@ -101,7 +103,8 @@ describe('QueryGroupDetails', () => {
         undefined,
         '1632441600000',
         '1632528000000',
-        'mockId'
+        'mockId',
+        true
       );
     });
 

public/pages/QueryGroupDetails/QueryGroupDetails.tsx

@@ -49,6 +49,7 @@ export const QueryGroupDetails = ({
   const id = searchParams.get('id');
   const from = searchParams.get('from');
   const to = searchParams.get('to');
+  const verbose = Boolean(searchParams.get('verbose'));
 
   const [query, setQuery] = useState<SearchQueryRecord | null>(null);
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
@@ -62,15 +63,22 @@ export const QueryGroupDetails = ({
   const history = useHistory();
 
   const fetchQueryDetails = async () => {
-    const retrievedQuery = await retrieveQueryById(core, getDataSourceFromUrl().id, from, to, id);
+    const retrievedQuery = await retrieveQueryById(
+      core,
+      getDataSourceFromUrl().id,
+      from,
+      to,
+      id,
+      verbose
+    );
     setQuery(retrievedQuery);
   };
 
   useEffect(() => {
-    if (id && from && to) {
+    if (id && from && to && verbose) {
       fetchQueryDetails();
     }
-  }, [id, from, to]);
+  }, [id, from, to, verbose]);
 
   useEffect(() => {
     if (query) {

public/pages/QueryInsights/QueryInsights.tsx

@@ -117,8 +117,8 @@ const QueryInsights = ({
               onClick={() => {
                 const route =
                   query.group_by === 'SIMILARITY'
-                    ? `/query-group-details?from=${from}&to=${to}&id=${query.id}`
-                    : `/query-details?from=${from}&to=${to}&id=${query.id}`;
+                    ? `/query-group-details?from=${from}&to=${to}&id=${query.id}&verbose=${true}`
+                    : `/query-details?from=${from}&to=${to}&id=${query.id}&verbose=${true}`;
                 history.push(route);
               }}
             >
@@ -139,8 +139,8 @@ const QueryInsights = ({
               onClick={() => {
                 const route =
                   query.group_by === 'SIMILARITY'
-                    ? `/query-group-details?from=${from}&to=${to}&id=${query.id}`
-                    : `/query-details?from=${from}&to=${to}&id=${query.id}`;
+                    ? `/query-group-details?from=${from}&to=${to}&id=${query.id}&verbose=${true}`
+                    : `/query-details?from=${from}&to=${to}&id=${query.id}&verbose=${true}`;
                 history.push(route);
               }}
             >
@@ -251,7 +251,7 @@ const QueryInsights = ({
         const isQuery = query.group_by === 'NONE';
         const linkContent = isQuery ? convertTime(query.timestamp) : '-';
         const onClickHandler = () => {
-          const route = `/query-details?from=${from}&to=${to}&id=${query.id}`;
+          const route = `/query-details?from=${from}&to=${to}&id=${query.id}&verbose=true`;
           history.push(route);
         };
         return (

public/pages/TopNQueries/TopNQueries.tsx

@@ -171,6 +171,7 @@ const TopNQueries = ({
           from: parseDateString(start),
           to: parseDateString(end),
           dataSourceId: getDataSourceFromUrl().id, // TODO: get this dynamically from the URL
+          verbose: false,
         },
       };
       const fetchMetric = async (endpoint: string) => {