fix: e2e test coverage setup (#4897)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Added support for code coverage reporting with the integration of
`vite-plugin-istanbul`.
	- Introduced a new configuration file for code coverage settings.

- **Improvements**
	- Updated project to use ECMAScript modules for better compatibility.
- Enhanced UI test coverage with additional test cases and improved
error handling.
- Refactored test suites to utilize a custom module for better
organization and maintainability.
- Improved the login process and dashboard loading in test cases for
better reliability.

- **Bug Fixes**
- Resolved issues related to import statements affecting test execution.

- **Documentation**
- Updated `.gitignore` to exclude coverage directories from version
control.

These updates enhance the functionality, maintainability, and
reliability of the application and its testing framework.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.github/workflows/playwright.yml

@@ -62,11 +62,14 @@ jobs:
           node-version: 18
 
       - name: Build frontend code
+        env:
+          VITE_COVERAGE: "true"
+          COVERAGE: "true"
         run: cd web && npm install && npm run build
 
       - name: Build and run binary
         run: cargo build --release --target x86_64-unknown-linux-gnu
-
+        
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
         with:
@@ -114,9 +117,6 @@ jobs:
       - name: Download artifacts
         uses: actions/download-artifact@v4
 
-      - name: Display structure of downloaded files
-        run: ls -la .
-
       - name: Start OpenObserve
         run: chmod +x ./debug-binary/openobserve && ./debug-binary/openobserve > o2.log 2>&1 &
 
@@ -126,6 +126,9 @@ jobs:
       - name: Ensure we are getting a reply from the server
         run: curl http://localhost:5080/web/login
 
+      - name: Create coverage json folder
+        run: mkdir -p tests/ui-testing/.nyc_output
+
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
@@ -144,9 +147,64 @@ jobs:
       #   if: always()
       #   run: cat o2.log
 
+      - name: Sanitize Test Filename
+        shell: bash 
+        run: |
+          # Assign the matrix variable to a Bash variable
+          SANITIZED_FILENAME="${{ matrix.testfilename }}"
+          # Replace all '/' characters with '_'
+          SANITIZED_FILENAME="${SANITIZED_FILENAME//\//_}"
+          # Export as a GitHub Actions environment variable
+          echo "SANITIZED_FILENAME=$SANITIZED_FILENAME" >> $GITHUB_ENV
+
+      - name: Upload Coverage Data
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-coverage-${{ env.SANITIZED_FILENAME }}
+          path: tests/ui-testing/.nyc_output
+          include-hidden-files: true
+
+      - name: Generate Coverage Report
+        run: cd tests/ui-testing && npx nyc report
+
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+
+  generate_coverage_report:
+    name: Generate Coverage Report
+    needs: [build_binary, ui_integration_tests]
+    runs-on: ubuntu-latest
+    if: always()
+
+    steps:
+      - name: Clone the current repo
+        uses: actions/checkout@v4
+
+      - name: Download Playwright Coverage Data
+        uses: actions/download-artifact@v4
+        with:
+          pattern: playwright-coverage-*  # Match all artifacts with this prefix
+          path: merged-coverage
+          merge-multiple: true 
+
+      - name: Verify Downloaded Files
+        run: ls -R merged-coverage # Check the structure and contents
+
+      - name: Move Coverage Files to .nyc_output
+        run: |
+          mkdir -p tests/ui-testing/.nyc_output
+          mv merged-coverage/* tests/ui-testing/.nyc_output/ || echo "No files to move"
+
+      - name: Generate Coverage Report
+        run: cd tests/ui-testing && npm ci && npx nyc report
+
+      - name: Upload Coverage Report
+        uses: actions/upload-artifact@v4
+        with:
+          name: coverage-report
+          path: tests/ui-testing/coverage-report
+          retention-days: 30