Merge branch 'v3' into PMM-12710-API-breaking-changes

.github/workflows/build.yml

@@ -1,6 +1,9 @@
 name: Test pipeline
 
-on: pull_request
+on:
+  pull_request:
+    paths:
+      - pmm-app/**
 
 jobs:
   build:
@@ -29,6 +32,28 @@ jobs:
           path: pmm-app/dist/
           if-no-files-found: error
 
+  unit_tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Run with Node 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "yarn"
+          cache-dependency-path: pmm-app/yarn.lock
+
+      - name: Install deps
+        run: make prepare_release
+
+      - name: Run lint
+        run: cd pmm-app && yarn lint:check
+
+      - name: Run unit tests
+        run: cd pmm-app && yarn test:ci
+
   code_coverage:
     needs: build
     runs-on: ubuntu-latest
@@ -57,7 +82,7 @@ jobs:
         run: make generate_coverage
 
   workflow_success:
-    needs: [code_coverage, build]
+    needs: [unit_tests, code_coverage, build]
     name: Slack Notification success
     runs-on: ubuntu-latest
     env:
@@ -77,7 +102,7 @@ jobs:
 
   workflow_failure:
     if: ${{ failure() }}
-    needs: [code_coverage, build]
+    needs: [unit_tests, code_coverage, build]
     name: Slack Notification failure
     runs-on: ubuntu-latest
     env:

.github/workflows/setup-page.yml

@@ -0,0 +1,29 @@
+name: Setup Page pipeline
+
+on:
+  pull_request:
+    paths:
+      - setup-page/**
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Run with Node 18
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: "npm"
+          cache-dependency-path: setup-page/package-lock.json
+
+      - name: Install deps
+        run: cd setup-page && npm ci
+
+      - name: Run lint
+        run: cd setup-page && npm run lint
+
+      - name: Run build
+        run: cd setup-page && npm run build

dashboards/MongoDB/MongoDB_Cluster_Summary.json

@@ -1011,17 +1011,17 @@
       "pluginVersion": "8.3.5",
       "targets": [
         {
-          "expr": "min(mongodb_mongos_sharding_chunks_is_balanced{cluster=\"$cluster\"})",
+          "expr": "min(mongodb_mongos_sharding_chunks_is_balancer_running{cluster=\"$cluster\"})",
           "format": "time_series",
           "interval": "5m",
           "intervalFactor": 1,
-          "legendFormat": "Cluster Balanced",
+          "legendFormat": "Cluster Balancer is Running",
           "refId": "A",
           "step": 300
         }
       ],
       "timeFrom": "1m",
-      "title": "Chunks Balanced",
+      "title": "Chunks Balancer is running",
       "type": "stat"
     },
     {
@@ -1400,11 +1400,11 @@
         "y": 24
       },
       "type": "state-timeline",
-      "title": "Chunks Balanced",
+      "title": "Chunks Balancer is running",
       "description": "The MongoDB balancer is a background process that monitors the number of chunks on each shard. When the number of chunks on a given shard reaches specific migration thresholds, the balancer attempts to automatically migrate chunks between shards and reach an equal number of chunks per shard.",
       "targets": [
         {
-          "expr": "min(mongodb_mongos_sharding_chunks_is_balanced{cluster=\"$cluster\"})",
+          "expr": "min(mongodb_mongos_sharding_chunks_is_balancer_running{cluster=\"$cluster\"})",
           "interval": "$interval",
           "legendFormat": "$cluster",
           "refId": "A"

pmm-app/package.json

@@ -16,6 +16,7 @@
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "jest": "jest",
     "lint": "yarn lint:dev",
+    "lint:check": "eslint --ext .tsx,.ts src/",
     "lint:dev": "eslint --ext .tsx,.ts --fix src/",
     "lint:fix": "yarn run lint --fix",
     "server": "docker-compose up --build",

pmm-app/src/pmm-qan/panel/components/Details/Metrics/Metrics.test.tsx

@@ -11,9 +11,10 @@ jest.mock('shared/components/helpers/notification-manager');
 jest.mock('antd/es/tooltip', () => <div className="tooltip" />);
 
 jest.mock('./hooks/useHistogram', () => ({
-  useHistogram: jest.fn(({ theme }) => (
-    [getChartDataFromHistogramItems([{ frequency: 6175, range: '(0-3)' }], theme), true]
-  )),
+  useHistogram: jest.fn(({ theme }) => [
+    getChartDataFromHistogramItems([{ frequency: 6175, range: '(0-3)' }], theme),
+    true,
+  ]),
 }));
 
 const originalConsoleError = console.error;
@@ -2696,6 +2697,10 @@ const panelState = {
 describe('useFilters::', () => {
   beforeEach(() => {
     console.error = jest.fn();
+    // TODO: Grafana Tooltip component uses a react 18 hook - useId
+    // due to enzyme we are currently stuck at react 17, mocking for now
+    // @ts-ignore
+    React.useId = () => '';
   });
 
   afterEach(() => {
@@ -2717,7 +2722,6 @@ describe('useFilters::', () => {
           textMetrics={textMetrics}
           loading={false}
         />
-        ,
       </QueryAnalyticsProvider.Provider>,
     );
 
@@ -2731,14 +2735,7 @@ describe('useFilters::', () => {
           panelState,
         }}
       >
-        <Metrics
-          databaseType={Databases.mysql}
-          groupBy="queryid"
-          totals
-          metrics={metrics}
-          loading={false}
-        />
-        ,
+        <Metrics databaseType={Databases.mysql} groupBy="queryid" totals metrics={metrics} loading={false} />
       </QueryAnalyticsProvider.Provider>,
     );
 
@@ -2760,7 +2757,6 @@ describe('useFilters::', () => {
           textMetrics={textMetrics}
           loading={false}
         />
-        ,
       </QueryAnalyticsProvider.Provider>,
     );
 

pmm-app/src/shared/components/Elements/Charts/TimeDistribution/__snapshots__/TimeDistribution.test.tsx.snap

@@ -4,14 +4,14 @@ exports[`TimeDistributionChart chart test Renders correct 1`] = `
 <Fragment>
   <h
     data={
-      Array [
-        Object {
+      [
+        {
           "color": "#BD4848",
           "description": "0.08%",
           "name": "Lock Time",
           "value": 1,
         },
-        Object {
+        {
           "color": "gray",
           "description": "99.92%",
           "name": "Other",