Query grouping dashboard changes and extensive tests

.github/workflows/cypress-tests.yml

@@ -1,155 +1,155 @@
-name: Cypress e2e integration tests workflow
-on:
-  pull_request:
-    branches:
-      - "*"
-  push:
-    branches:
-      - "*"
-env:
-  OPENSEARCH_DASHBOARDS_VERSION: 'main'
-  OPENSEARCH_VERSION: '3.0.0-SNAPSHOT'
-  QUERY_INSIGHTS_BRANCH: 'main'
-  GRADLE_VERSION: '7.6.1'
-jobs:
-  tests:
-    name: Run Cypress E2E tests
-    strategy:
-      matrix:
-        os: [ubuntu-latest, windows-latest]
-        include:
-          - os: windows-latest
-            cypress_cache_folder: ~/AppData/Local/Cypress/Cache
-          - os: ubuntu-latest
-            cypress_cache_folder: ~/.cache/Cypress
-    runs-on: ${{ matrix.os }}
-    env:
-      # prevents extra Cypress installation progress messages
-      CI: 1
-      # avoid warnings like "tput: No value for $TERM and no -T specified"
-      TERM: xterm
-    steps:
-      - name: Set up JDK
-        uses: actions/setup-java@v1
-        with:
-          java-version: 21
-
-      - name: Enable longer filenames
-        if: ${{ matrix.os == 'windows-latest' }}
-        run: git config --system core.longpaths true
-
-      - name: Checkout Query Insights
-        uses: actions/checkout@v2
-        with:
-          path: query-insights
-          repository: opensearch-project/query-insights
-          ref: ${{ env.QUERY_INSIGHTS_BRANCH }}
-
-      - name: Set up Gradle
-        uses: gradle/gradle-build-action@v2
-        with:
-          gradle-version: ${{ env.GRADLE_VERSION }}
-
-      - name: Run OpenSearch with Query Insights plugin
-        run: |
-          cd query-insights
-          ./gradlew run -Dopensearch.version=${{ env.OPENSEARCH_VERSION }} &
-          sleep 300
-        shell: bash
-
-      - name: Checkout OpenSearch-Dashboards
-        uses: actions/checkout@v2
-        with:
-          repository: opensearch-project/OpenSearch-Dashboards
-          path: OpenSearch-Dashboards
-          ref: ${{ env.OPENSEARCH_DASHBOARDS_VERSION }}
-
-      - name: Checkout Query Insights Dashboards plugin
-        uses: actions/checkout@v2
-        with:
-          path: OpenSearch-Dashboards/plugins/query-insights-dashboards
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: './OpenSearch-Dashboards/.nvmrc'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install Yarn
-        # Need to use bash to avoid having a windows/linux specific step
-        shell: bash
-        run: |
-          YARN_VERSION=$(node -p "require('./OpenSearch-Dashboards/package.json').engines.yarn")
-          echo "Installing yarn@$YARN_VERSION"
-          npm i -g yarn@$YARN_VERSION
-      - run: node -v
-      - run: yarn -v
-
-      - name: Bootstrap plugin/OpenSearch-Dashboards
-        run: |
-          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
-          yarn osd bootstrap --single-version=loose
-
-      - name: Run OpenSearch-Dashboards server
-        run: |
-          cd OpenSearch-Dashboards
-          yarn start --no-base-path --no-watch --server.host="0.0.0.0" &
-        shell: bash
-
-      # Window is slow so wait longer
-      - name: Sleep until OSD server starts - windows
-        if: ${{ matrix.os == 'windows-latest' }}
-        run: Start-Sleep -s 600
-        shell: powershell
-
-      - name: Sleep until OSD server starts - non-windows
-        if: ${{ matrix.os != 'windows-latest' }}
-        run: sleep 500
-        shell: bash
-
-      - name: Install Cypress
-        run: |
-          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
-          # This will install Cypress in case the binary is missing which can happen on Windows and Mac
-          # If the binary exists, this will exit quickly so it should not be an expensive operation
-          npx cypress install
-        shell: bash
-
-      - name: Get Cypress version
-        id: cypress_version
-        run: |
-          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
-          echo "::set-output name=cypress_version::$(cat ./package.json | jq '.dependencies.cypress' | tr -d '"')"
-
-      - name: Cache Cypress
-        id: cache-cypress
-        uses: actions/cache@v2
-        with:
-          path: ${{ matrix.cypress_cache_folder }}
-          key: cypress-cache-v2-${{ matrix.os }}-${{ hashFiles('OpenSearch-Dashboards/plugins/query-insights-dashboards/package.json') }}
-
-      # for now just chrome, use matrix to do all browsers later
-      - name: Cypress tests
-        uses: cypress-io/github-action@v5
-        with:
-          working-directory: OpenSearch-Dashboards/plugins/query-insights-dashboards
-          command: yarn run cypress run
-          wait-on: 'http://localhost:5601'
-          wait-on-timeout: 600
-          browser: chrome
-        env:
-          CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }}
-
-      # Screenshots are only captured on failure, will change this once we do visual regression tests
-      - uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: cypress-screenshots-${{ matrix.os }}
-          path: OpenSearch-Dashboards/plugins/query-insights-dashboards/cypress/screenshots
-
-      # Test run video was always captured, so this action uses "always()" condition
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: cypress-videos-${{ matrix.os }}
-          path: OpenSearch-Dashboards/plugins/query-insights-dashboards/cypress/videos
+name: Cypress e2e integration tests workflow
+on:
+  pull_request:
+    branches:
+      - "*"
+  push:
+    branches:
+      - "*"
+env:
+  OPENSEARCH_DASHBOARDS_VERSION: 'main'
+  OPENSEARCH_VERSION: '3.0.0-SNAPSHOT'
+  QUERY_INSIGHTS_BRANCH: 'main'
+  GRADLE_VERSION: '7.6.1'
+jobs:
+  tests:
+    name: Run Cypress E2E tests
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest]
+        include:
+          - os: windows-latest
+            cypress_cache_folder: ~/AppData/Local/Cypress/Cache
+          - os: ubuntu-latest
+            cypress_cache_folder: ~/.cache/Cypress
+    runs-on: ${{ matrix.os }}
+    env:
+      # prevents extra Cypress installation progress messages
+      CI: 1
+      # avoid warnings like "tput: No value for $TERM and no -T specified"
+      TERM: xterm
+    steps:
+      - name: Set up JDK
+        uses: actions/setup-java@v1
+        with:
+          java-version: 21
+
+      - name: Enable longer filenames
+        if: ${{ matrix.os == 'windows-latest' }}
+        run: git config --system core.longpaths true
+
+      - name: Checkout Query Insights
+        uses: actions/checkout@v2
+        with:
+          path: query-insights
+          repository: opensearch-project/query-insights
+          ref: ${{ env.QUERY_INSIGHTS_BRANCH }}
+
+      - name: Set up Gradle
+        uses: gradle/gradle-build-action@v2
+        with:
+          gradle-version: ${{ env.GRADLE_VERSION }}
+
+      - name: Run OpenSearch with Query Insights plugin
+        run: |
+          cd query-insights
+          ./gradlew run -Dopensearch.version=${{ env.OPENSEARCH_VERSION }} &
+          sleep 300
+        shell: bash
+
+      - name: Checkout OpenSearch-Dashboards
+        uses: actions/checkout@v2
+        with:
+          repository: opensearch-project/OpenSearch-Dashboards
+          path: OpenSearch-Dashboards
+          ref: ${{ env.OPENSEARCH_DASHBOARDS_VERSION }}
+
+      - name: Checkout Query Insights Dashboards plugin
+        uses: actions/checkout@v2
+        with:
+          path: OpenSearch-Dashboards/plugins/query-insights-dashboards
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: './OpenSearch-Dashboards/.nvmrc'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install Yarn
+        # Need to use bash to avoid having a windows/linux specific step
+        shell: bash
+        run: |
+          YARN_VERSION=$(node -p "require('./OpenSearch-Dashboards/package.json').engines.yarn")
+          echo "Installing yarn@$YARN_VERSION"
+          npm i -g yarn@$YARN_VERSION
+      - run: node -v
+      - run: yarn -v
+
+      - name: Bootstrap plugin/OpenSearch-Dashboards
+        run: |
+          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
+          yarn osd bootstrap --single-version=loose
+
+      - name: Run OpenSearch-Dashboards server
+        run: |
+          cd OpenSearch-Dashboards
+          yarn start --no-base-path --no-watch --server.host="0.0.0.0" &
+        shell: bash
+
+      # Window is slow so wait longer
+      - name: Sleep until OSD server starts - windows
+        if: ${{ matrix.os == 'windows-latest' }}
+        run: Start-Sleep -s 600
+        shell: powershell
+
+      - name: Sleep until OSD server starts - non-windows
+        if: ${{ matrix.os != 'windows-latest' }}
+        run: sleep 500
+        shell: bash
+
+      - name: Install Cypress
+        run: |
+          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
+          # This will install Cypress in case the binary is missing which can happen on Windows and Mac
+          # If the binary exists, this will exit quickly so it should not be an expensive operation
+          npx cypress install
+        shell: bash
+
+      - name: Get Cypress version
+        id: cypress_version
+        run: |
+          cd OpenSearch-Dashboards/plugins/query-insights-dashboards
+          echo "::set-output name=cypress_version::$(cat ./package.json | jq '.dependencies.cypress' | tr -d '"')"
+
+      - name: Cache Cypress
+        id: cache-cypress
+        uses: actions/cache@v2
+        with:
+          path: ${{ matrix.cypress_cache_folder }}
+          key: cypress-cache-v2-${{ matrix.os }}-${{ hashFiles('OpenSearch-Dashboards/plugins/query-insights-dashboards/package.json') }}
+
+      # for now just chrome, use matrix to do all browsers later
+      - name: Cypress tests
+        uses: cypress-io/github-action@v5
+        with:
+          working-directory: OpenSearch-Dashboards/plugins/query-insights-dashboards
+          command: yarn run cypress run
+          wait-on: 'http://localhost:5601'
+          wait-on-timeout: 600
+          browser: chrome
+        env:
+          CYPRESS_CACHE_FOLDER: ${{ matrix.cypress_cache_folder }}
+
+      # Screenshots are only captured on failure, will change this once we do visual regression tests
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots-${{ matrix.os }}
+          path: OpenSearch-Dashboards/plugins/query-insights-dashboards/cypress/screenshots
+
+      # Test run video was always captured, so this action uses "always()" condition
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: cypress-videos-${{ matrix.os }}
+          path: OpenSearch-Dashboards/plugins/query-insights-dashboards/cypress/videos

common/constants.ts

@@ -4,10 +4,17 @@
  */
 
 export const TIMESTAMP = 'Timestamp';
+export const TYPE = 'Type';
+export const ID = 'Id';
+export const QUERY_COUNT = 'Query Count';
 export const LATENCY = 'Latency';
 export const CPU_TIME = 'CPU Time';
 export const MEMORY_USAGE = 'Memory Usage';
 export const INDICES = 'Indices';
 export const SEARCH_TYPE = 'Search Type';
 export const NODE_ID = 'Coordinator Node ID';
 export const TOTAL_SHARDS = 'Total Shards';
+export const GROUP_BY = 'Group by';
+export const AVERAGE_LATENCY = 'Average Latency';
+export const AVERAGE_CPU_TIME = 'Average CPU Time';
+export const AVERAGE_MEMORY_USAGE = 'Average Memory Usage';

cypress/e2e/2_query_details.cy.js

@@ -28,10 +28,10 @@
     // waiting for the query insights queue to drain
     cy.wait(10000);
     cy.navigateToOverview();
-    cy.get('.euiTableRow').first().find('button').click(); // Navigate to details
+    cy.get('.euiTableRow').first().find('button').first().click(); // Navigate to details
   });
 
   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
@@ -47,7 +47,7 @@
   /**
    * Validate summary panel has valid labels
    */
   it('the summary panel should display correctly', () => {
     // Validate all field labels exist
     const fieldLabels = [
       'Timestamp',
@@ -80,7 +80,7 @@
         .parent()
         .next()
         .invoke('text')
-        .should('match', /^\d+ ms$/);
+        .should('match', /^\d+(\.\d{1,2})? ms$/);
       // Validate CPU Time
       cy.contains('h4', 'CPU Time')
         .parent()
@@ -92,7 +92,7 @@
         .parent()
         .next()
         .invoke('text')
-        .should('match', /^\d+ B$/);
+        .should('match', /^\d+(\.\d+)? B$/);
       // Validate Indices
       cy.contains('h4', 'Indices').parent().next().invoke('text').should('not.be.empty');
       // Validate Search Type
@@ -122,7 +122,7 @@
   /**
    * Validate the latency chart interaction
    */
   it('should render the latency chart and allow interaction', () => {
     // Ensure the chart is visible
     cy.get('#latency').should('be.visible');
     cy.get('.plot-container').should('be.visible');

cypress/e2e/3_configurations.cy.js

@@ -20,7 +20,7 @@
   /**
    * Validate the presence and structure of the Configuration page
    */
   it('should display the Configuration page with correct structure', () => {
     // Validate the page title
     cy.get('h1').contains('Query insights - Configuration').should('be.visible');
     // Validate the tabs
@@ -29,7 +29,7 @@
     cy.contains('button', 'Top N queries').should('be.visible');
     cy.contains('button', 'Configuration').should('have.class', 'euiTab-isSelected');
     // Validate the panels
-    cy.get('.euiPanel').should('have.length', 2); // Two panels: configuration settings and statuses
+    cy.get('.euiPanel').should('have.length', 4); // Two panels: configuration settings and statuses
   });
 
   /**
@@ -125,7 +125,7 @@
   it('should display statuses for configuration metrics', () => {
     // Validate the status panel header
     cy.get('.euiPanel')
-      .last()
+      .eq(1) // Selects the second panel (index 1)
       .within(() => {
         cy.get('h2').contains('Statuses for configuration metrics').should('be.visible');
       });