Lighthouse performance metrics setup

.github/workflows/performance_testing.yml

@@ -0,0 +1,51 @@
+name: Performance Testing
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lighthouse:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version-file: '.nvmrc'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup Yarn
+        run: |
+          npm uninstall -g yarn
+          npm i -g [email protected]
+
+      - name: Run bootstrap
+        run: yarn osd bootstrap
+
+      - name: Install Lighthouse CI
+        run: yarn global add @lhci/cli
+
+      - name: Build OpenSearch Dashboards
+        run: yarn build
+
+      - name: Start OpenSearch Dashboards
+        run: yarn start --no-base-path & yarn wait-on http://localhost:5601
+
+      - name: Run Lighthouse CI
+        run: yarn lhci autorun || echo "Lighthouse assertion failed, check results"
+
+      - name: Post Lighthouse Report to PR
+        if: always()
+        run: |
+          echo "🚦 **Lighthouse CI Report**" > comment.txt
+          echo "" >> comment.txt
+          lhci upload --target=temporary-public-storage | tee lhci_output.txt
+          REPORT_URL=$(grep -o 'https://storage.googleapis.com/lighthouse-infrastructure-.*' lhci_output.txt | head -n 1)
+          echo "🔗 [View Full Lighthouse Report]($REPORT_URL)" >> comment.txt
+          gh pr comment ${{ github.event.pull_request.number }} --body "$(cat comment.txt)"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.lighthouserc.js

@@ -0,0 +1,28 @@
+const baseUrl = 'http://localhost:5601';
+
+module.exports = {
+  ci: {
+    collect: {
+      url: [`${baseUrl}`, `${baseUrl}/app/data-explorer/discover`, `${baseUrl}/app/dashboards`], // Add more URLs as needed
+      startServerCommand: 'yarn start --no-base-path',
+      numberOfRuns: 3,
+      settings: {
+        chromePath: require('puppeteer').executablePath(),
+        chromeFlags: '--no-sandbox --disable-gpu --headless',
+      },
+    },
+    assert: {
+      preset: 'lighthouse:recommended',
+      assertions: {
+        performance: ['error', { minScore: 0.9 }],
+        'first-contentful-paint': ['warn', { maxNumericValue: 1800 }],
+        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
+        interactive: ['warn', { maxNumericValue: 5000 }],
+        'total-blocking-time': ['warn', { maxNumericValue: 300 }],
+      },
+    },
+    upload: {
+      target: 'temporary-public-storage', // Required for GitHub integration
+    },
+  },
+};

config/opensearch_dashboards.yml

@@ -372,10 +372,10 @@
 
 # Set the backend roles in groups or users, whoever has the backend roles or exactly match the user ids defined in this config will be regard as dashboard admin.
 # Dashboard admin will have the access to all the workspaces(workspace.enabled: true) and objects inside OpenSearch Dashboards.
-# The default config is [], and no one will be dashboard admin. 
+# The default config is [], and no one will be dashboard admin.
 # If the user config is set to wildcard ["*"], anyone will be dashboard admin.
 # opensearchDashboards.dashboardAdmin.groups: ["dashboard_admin"]
 # opensearchDashboards.dashboardAdmin.users: ["dashboard_admin"]
 
 # Set the value to true to enable the new UI for savedQueries in Discover
-# data.savedQueriesNewUI.enabled: true
+# data.savedQueriesNewUI.enabled: true

package.json

@@ -271,6 +271,7 @@
     "@elastic/filesaver": "1.1.2",
     "@elastic/makelogs": "^6.1.0",
     "@faker-js/faker": "^7.6.0",
+    "@lhci/cli": "^0.14.0",
     "@microsoft/api-documenter": "^7.13.78",
     "@microsoft/api-extractor": "^7.19.3",
     "@osd/babel-preset": "1.0.0",
@@ -464,6 +465,7 @@
     "postcss": "^8.4.5",
     "prettier": "^2.1.1",
     "prop-types": "^15.7.2",
+    "puppeteer": "^24.1.1",
     "react": "^16.14.0",
     "react-grid-layout": "^0.16.2",
     "react-markdown": "^4.3.1",