percona · matejkubinec · Apr 16, 2026 · Apr 24, 2026 · Apr 27, 2026 · Apr 27, 2026
@@ -24,6 +24,13 @@ jobs:
         with:
           ref: ${{ github.event.inputs.ref || github.ref }}
 
+      - name: Install Chrome for linkspector
+        id: setup-chrome
+        uses: browser-actions/setup-chrome@c785b87e244131f27c9f19c1a33e2ead956ab7ce # v1.7.3
+
+      - name: Configure Chrome path for puppeteer
+        run: echo "PUPPETEER_EXECUTABLE_PATH=${{ steps.setup-chrome.outputs.chrome-path }}" >> "$GITHUB_ENV"
+
       - name: Run linkspector
         uses: umbrelladocs/action-linkspector@963b6264d7de32c904942a70b488d3407453049e # v1.5.1
         with:

@@ -252,7 +252,7 @@
         },
         {
             "datasource": "Metrics",
-            "description": "Shows how many cluster communication messages are being sent and received over time. High message rates can indicate cluster instability or frequent topology changes.",
+            "description": "Cluster control-bus traffic as a rate (messages per second). High sustained rates can indicate instability or frequent topology changes. Raw counters are not shown.",
             "fieldConfig": {
                 "defaults": {
                     "color": {
@@ -262,7 +262,7 @@
                         "axisBorderShow": false,
                         "axisCenteredZero": false,
                         "axisColorMode": "text",
-                        "axisLabel": "",
+                        "axisLabel": "messages / s",
                         "axisPlacement": "auto",
                         "barAlignment": 0,
                         "barWidthFactor": 0.6,
@@ -303,7 +303,8 @@
                                 "value": 80
                             }
                         ]
-                    }
+                    },
+                    "unit": "ops"
                 },
                 "overrides": []
             },
@@ -338,15 +339,15 @@
                 {
                     "datasource": "Metrics",
                     "editorMode": "code",
-                    "expr": "redis_cluster_messages_sent_total{service_name=~\"$service_name\"}",
+                    "expr": "rate(redis_cluster_messages_sent_total{service_name=~\"$service_name\"}[$__rate_interval])",
                     "legendFormat": "Sent - {{service_name}}",
                     "range": true,
                     "refId": "A"
                 },
                 {
                     "datasource": "Metrics",
                     "editorMode": "code",
-                    "expr": "redis_cluster_messages_received_total{service_name=~\"$service_name\"}",
+                    "expr": "rate(redis_cluster_messages_received_total{service_name=~\"$service_name\"}[$__rate_interval])",
                     "hide": false,
                     "legendFormat": "Received - {{service_name}}",
                     "range": true,

@@ -6,7 +6,7 @@ The following table lists all the PMM client/server components and their version
 |-----------------------------|----------|---------------|------------------|
 | Grafana  | 11.6.13*  | [Grafana documentation](https://grafana.com/docs/grafana/latest/)|[Github Grafana](https://github.com/percona-platform/grafana)|
 | VictoriaMetrics| v1.140.0 | [VictoriaMetrics documentation](https://docs.victoriametrics.com/)|[Github VictoriaMetrics](https://github.com/VictoriaMetrics/VictoriaMetrics)    |
-| Nginx    | 1.20.1   | [Nginx documentation](http://nginx.org/en/docs/)|[Github Nginx](https://github.com/nginx/nginx)                                                    |
+| Nginx    | 1.26.3  | [Nginx documentation](http://nginx.org/en/docs/)|[Github Nginx](https://github.com/nginx/nginx)                                                    |
 | Percona Distribution for PostgreSQL  | 14.5     | [Percona Distribution for PostgreSQL 14 documentation](https://www.percona.com/doc/postgresql/LATEST/index.html)|              |
 | ClickHouse| 25.3.6.56 |[ClickHouse documentation](https://clickhouse.com/docs/en/)|[Github ClickHouse](https://github.com/ClickHouse/ClickHouse)|
 | PerconaToolkit  | 3.5.2    | [Percona Toolkit documentation](https://www.percona.com/doc/percona-toolkit/3.0/index.html)|[Github Percona Toolkit](https://github.com/percona/percona-toolkit)|

@@ -26,7 +26,7 @@
     "@mui/icons-material": "^7.3.7",
     "@mui/material": "^7.3.7",
     "@mui/x-date-pickers": "^7.5.0",
-    "@percona/percona-ui": "1.0.16",
+    "@percona/percona-ui": "1.0.18",
     "@pmm/shared": "*",
     "@reactour/tour": "^3.8.0",
     "@tanstack/react-query": "^5.45.1",

@@ -0,0 +1,9 @@
+import { PrometheusAlertRulesResponse } from 'types/alerting.types';
+import { grafanaApi } from './api';
+
+export const getPrometheusAlertRules = async () => {
+  const response = await grafanaApi.get<PrometheusAlertRulesResponse>(
+    '/prometheus/grafana/api/v1/rules'
+  );
+  return response.data;
+};
@@ -2,7 +2,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { useNavigation } from 'contexts/navigation';
 import { NavigationHeading } from './nav-heading';
 import { Drawer } from './drawer';
-import { NavItem } from './nav-item';
+import { SidebarNavItem } from './nav-item';
 import List from '@mui/material/List';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
@@ -69,7 +69,7 @@ export const Sidebar: FC = () => {
         ]}
       >
         {navTree.map((item) => (
-          <NavItem
+          <SidebarNavItem
             key={item.id}
             item={item}
             activeItem={activeItem}

@@ -1,11 +1,8 @@
-import { listItemIconClasses } from '@mui/material/ListItemIcon';
 import { listItemTextClasses } from '@mui/material/ListItemText';
-import { typographyClasses } from '@mui/material/Typography';
 import { Theme } from '@mui/material';
 
 export const getStyles = (
   theme: Theme,
-  active: boolean,
   drawerOpen: boolean,
   level: number
 ) => ({
@@ -16,71 +13,33 @@ export const getStyles = (
     ? {
         mr: level > 0 ? 1 : 0,
       }
-    : {
-        py: 1.5,
-      },
+    : {},
   navItemRootCollapsible: {
     borderTopLeftRadius: 0,
     borderBottomLeftRadius: 0,
   },
-  listItemButton: {
-    px: 2,
-    height: 48,
-    borderRadius: 50,
-    justifyContent: drawerOpen ? undefined : 'center',
-
-    [`.${typographyClasses.root}`]: {
-      fontWeight: 600,
-    },
-
-    [`&, .${listItemIconClasses.root}`]: {
-      color: active ? theme.palette.primary.main : theme.palette.text.primary,
-    },
-  },
-  listItemButtonCollapsible: {
-    backgroundColor: active
-      ? theme.components?.MuiListItemButton?.styleOverrides?.selected
-      : 'initial',
-  },
   listCollapsible:
     level === 0
       ? {
-          pl: 4,
+          pl: 4.75,
           pb: 2,
         }
       : level === 1
         ? {
-            ml: 2.5,
-            pl: '11px',
-            pb: 2,
+            ml: 3.5,
+            pl: 1,
             borderLeft: 1,
             borderColor: theme.palette.divider,
           }
         : {},
-  listItemIcon: {
-    minWidth: 'auto',
-  },
   listItemDivider: {
     px: drawerOpen ? 2 : 1,
   },
   divider: {
     flex: 1,
   },
-  text: {
-    pl: 2,
-
-    [`&:hover .${listItemTextClasses.secondary}`]: {
-      color: 'inherit',
-    },
-
-    [`.${listItemTextClasses.secondary}`]: {
-      ...theme.typography.helperText,
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-
-      color: active ? 'inherit' : theme.palette.text.disabled,
-    },
+  listItemButton: {
+    px: 2,
   },
   textOnly: {
     m: 0,

@@ -1,10 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { wrapWithRouter } from 'utils/testUtils';
-import NavItem from './NavItem';
-import { NavItemProps } from './NavItem.types';
+import SidebarNavItem from './SidebarNavItem';
+import { NavItemProps } from './SidebarNavItem.types';
 import { NavItem as NavTreeItem } from 'types/navigation.types';
 import { collapseClasses } from '@mui/material/Collapse';
 import { MemoryRouterProps } from 'react-router-dom';
+import { ThemeContextProvider, pmmThemeOptions } from '@percona/percona-ui';
 
 const TEST_NAV_TREE: NavTreeItem = {
   id: 'level-0',
@@ -44,19 +45,21 @@ const renderNavItem = ({
   activeItem?: NavTreeItem;
 } = {}) =>
   render(
-    wrapWithRouter(
-      <NavItem
-        activeItem={activeItem}
-        item={TEST_NAV_TREE}
-        drawerOpen={true}
-        level={0}
-        {...props}
-      />,
-      routerProps
-    )
+    <ThemeContextProvider themeOptions={pmmThemeOptions}>
+      {wrapWithRouter(
+        <SidebarNavItem
+          activeItem={activeItem}
+          item={TEST_NAV_TREE}
+          drawerOpen={true}
+          level={0}
+          {...props}
+        />,
+        routerProps
+      )}
+    </ThemeContextProvider>
   );
 
-describe('NavItem', () => {
+describe('SidebarNavItem', () => {
   it('inner levels are closed by default', () => {
     renderNavItem();
 
@@ -157,14 +160,14 @@ describe('NavItem', () => {
         },
       ],
     };
-    renderNavItem({
+    const { container } = renderNavItem({
       activeItem: item,
       props: { item },
     });
 
     fireEvent.click(screen.getByTestId('navitem-with-badge-toggle'));
 
-    expect(screen.getByTestId('navitem-dot')).toBeInTheDocument();
+    expect(container.querySelector('.MuiBadge-dot')).toBeInTheDocument();
   });
 
   it('renders divider if item has type "menu-divider"', () => {