PMM-15326: Mount OM in the PMM app and its navigation

Adds the OpenManager entry with its four children, and mounts OmApp as a
splat since the plugin composes its own routes.

Deliberately not part of addSepApps: those entries are gated as a group on
SEP, and OM is served by pmm-managed over PMM's own data, so hiding it when
SEP is off would hide a working page.

For the same reason the chrome is OmPage rather than SepPage, whose
SepAuthGate fails closed and would blank a page that has no SEP call on any
browser path. OmPage keeps the PMM-admin restriction and enforces it on the
route, because NavigationProvider only hides the entry while the route
still matches on direct navigation.

Signed-off-by: Pawel Lebioda <pawel.lebioda@percona.com>

Author: plebioda

ui/apps/pmm/package.json

@@ -33,6 +33,7 @@
     "@sep/api": "workspace:*",
     "@sep/framework": "workspace:*",
     "@sep/plugins-atw": "workspace:*",
+    "@sep/plugins-om": "workspace:*",
     "@tanstack/react-query": "^5.100.7",
     "axios": "^1.13.5",
     "axios-case-converter": "^1.1.1",

ui/apps/pmm/src/contexts/navigation/navigation.provider.tsx

@@ -13,6 +13,7 @@ import {
   addUsersAndAccess,
   addHomePage,
   addSepApps,
+  addOm,
 } from './navigation.utils';
 import { useUser } from 'contexts/user';
 import { useAdvisors } from 'hooks/api/useAdvisors';
@@ -94,6 +95,9 @@ export const NavigationProvider: FC<PropsWithChildren> = ({ children }) => {
         // is established; role/flag gating comes with real auth (Option B).
         items.push(...addSepApps());
 
+        // Served by pmm-managed, so it is not gated with the SEP group.
+        items.push(...addOm());
+
         if (settings.backupManagementEnabled) {
           items.push(NAV_BACKUPS);
         }

ui/apps/pmm/src/contexts/navigation/navigation.utils.tsx

@@ -1,7 +1,7 @@
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
 import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
-import { MySqlIcon } from '@percona/peak-ui';
+import { MongoIcon, MySqlIcon } from '@percona/peak-ui';
 import { NavItem } from 'types/navigation.types';
 import { ServiceType } from 'types/services.types';
 import { User, UserPreferences } from 'types/user.types';
@@ -11,6 +11,7 @@ import {
   PMM_NEW_NAV_GRAFANA_PATH,
   SEP_ATW_PATH,
   SEP_MYSQL_BACKUPS_PATH,
+  OM_PATH,
 } from 'lib/constants';
 import { ColorMode } from '@pmm/shared';
 import {
@@ -319,3 +320,47 @@ export const addSepApps = (): NavItem[] => [
     matches: [SEP_MYSQL_BACKUPS_PATH],
   },
 ];
+
+/**
+ * OM's navigation, deliberately not part of `addSepApps`.
+ *
+ * Those entries are gated as a group on SEP, and the group is expected to gain a
+ * flag gate with real auth. OM is served by pmm-managed and reads PMM's own data,
+ * so hiding it when SEP is off or unreachable would hide a working page.
+ */
+export const addOm = (): NavItem[] => [
+  {
+    id: 'om',
+    text: 'OpenManager',
+    icon: MongoIcon,
+    url: OM_PATH,
+    matches: [OM_PATH],
+    children: [
+      {
+        id: 'om-overview',
+        text: 'Overview',
+        url: OM_PATH,
+      },
+      {
+        id: 'om-services',
+        text: 'Services',
+        url: `${OM_PATH}/services`,
+        matches: [`${OM_PATH}/services`],
+      },
+      {
+        // The page a host with no database appears on, which no other OM page can
+        // show: it has no service to be listed through.
+        id: 'om-hosts',
+        text: 'Hosts',
+        url: `${OM_PATH}/hosts`,
+        matches: [`${OM_PATH}/hosts`],
+      },
+      {
+        id: 'om-inventory',
+        text: 'Inventory',
+        url: `${OM_PATH}/inventory`,
+        matches: [`${OM_PATH}/inventory`],
+      },
+    ],
+  },
+];

ui/apps/pmm/src/lib/constants.ts

@@ -23,6 +23,11 @@ export const PMM_NEW_NAV_HOME_URL = `${PMM_NEW_NAV_PATH}/graph/d/pmm-home`;
 export const SEP_ATW_PATH = `${PMM_NEW_NAV_PATH}/sep/atw`;
 export const SEP_MYSQL_BACKUPS_PATH = `${PMM_NEW_NAV_PATH}/sep/mysql-backups`;
 
+// OM (OpenManager) is a PMM page, not a SEP one. Its API is pmm-managed's own
+// `/v1/om`, authorised by the Grafana session, and no request it makes needs a SEP
+// bearer -- which is why it sits beside the SEP mounts above rather than under them.
+export const OM_PATH = `${PMM_NEW_NAV_PATH}/om`;
+
 export const INTERVALS_MS = {
   // 5 mins
   SERVICE_TYPES: 300000,

ui/apps/pmm/src/om/OmPage.tsx

@@ -0,0 +1,54 @@
+/**
+ * Copyright (C) 2026 Percona LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { FC, PropsWithChildren } from 'react';
+import Stack from '@mui/material/Stack';
+import { Page } from 'components/page';
+import { useUser } from 'contexts/user';
+import { OrgRole } from 'types/user.types';
+
+/**
+ * Host chrome for the OM page.
+ *
+ * Deliberately not `SepPage`, which OM used while its backend was a SEP app. That
+ * wrapper holds its children behind `SepAuthGate` until a SEP bearer has been minted
+ * from the PMM session, and fails closed — so a SEP that is down, unconfigured or
+ * refusing the exchange would blank a page whose data comes from pmm-managed's own
+ * inventory, VictoriaMetrics and stored snapshot. OM has no SEP call on any browser
+ * path, so it must not inherit SEP's availability.
+ *
+ * The PMM-admin restriction is kept, and enforced here rather than left to the
+ * sidebar: NavigationProvider only *hides* the entry for non-admins, while the route
+ * still matches on direct navigation. The predicate is the nav's own — `isPMMAdmin` is
+ * `isGrafanaAdmin || orgRole === Admin`, and `roles` (org-role only) cannot express the
+ * Grafana-admin half on its own, so it gates the remaining case and `Page` renders its
+ * standard unauthorized card.
+ */
+export const OmPage: FC<PropsWithChildren> = ({ children }) => {
+  const { user } = useUser();
+
+  return (
+    <Page
+      maxWidth="full"
+      roles={user?.isPMMAdmin ? undefined : [OrgRole.Admin]}
+    >
+      <Stack gap={3} sx={{ flex: 1 }}>
+        <div>{children}</div>
+      </Stack>
+    </Page>
+  );
+};

ui/apps/pmm/src/router.tsx

@@ -12,13 +12,16 @@ import {
   PMM_NEW_NAV_PATH,
   SEP_ATW_PATH,
   SEP_MYSQL_BACKUPS_PATH,
+  OM_PATH,
 } from 'lib/constants';
 import { RealtimeSessionsPage } from 'pages/rta/sessions';
 import { Redirect, SettingsRedirect } from 'components/redirect';
 import RealtimeOverviewPage from 'pages/rta/overview/RealtimeOverview';
 import RealtimeTab from 'pages/rta/tab/RealtimeTab';
 import { AlertsPage } from 'pages/alerting/status';
 import { AtwApp } from '@sep/plugins-atw';
+import { OmApp } from '@sep/plugins-om';
+import { OmPage } from 'om/OmPage';
 import { SchemaDrivenPlugin } from '@sep/framework';
 import { SepPage } from './sep/SepPage';
 
@@ -101,6 +104,24 @@ const router = createBrowserRouter(
                 </SepPage>
               ),
             },
+            {
+              // OM (OpenManager) is bespoke like ATW: OmApp composes its
+              // own <Routes>, so this must be a splat.
+              //
+              // All four pages are under it now. Inventory used to be mounted
+              // separately inside SepPage, because it read SEP's app directly and
+              // needed a bearer minted from the PMM session; pmm-managed proxies the
+              // estate at /v1/om/inventory, so no OM path in the browser talks to SEP
+              // any more. That is why OmPage rather than SepPage, and why a sick SEP
+              // now shows an error inside a page that still renders instead of
+              // blanking it -- SepAuthGate fails closed.
+              path: `${relativeToNav(OM_PATH)}/*`,
+              element: (
+                <OmPage>
+                  <OmApp />
+                </OmPage>
+              ),
+            },
             {
               path: `${relativeToNav(SEP_MYSQL_BACKUPS_PATH)}/*`,
               // routeBase must match the mount path (basename-stripped) so the