openshift · logonoff · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -70,7 +70,6 @@
     "murmurhash-js": "1.0.x",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-helmet": "^6.1.0",
     "react-i18next": "^11.8.11",
     "react-linkify": "^0.2.2",
     "react-modal": "^3.12.1",
@@ -87,7 +86,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.17.2",
     "@types/react": "17.0.83",
-    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.2",
     "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^8.39.1",

diff --git a/web/src/components/Incidents/IncidentsPage.tsx b/web/src/components/Incidents/IncidentsPage.tsx
@@ -20,7 +20,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { IncidentsTable } from './IncidentsTable';
 import {
   getIncidentsTimeRanges,
@@ -59,7 +58,7 @@ import { usePatternFlyTheme } from '../hooks/usePatternflyTheme';
 import { MonitoringState } from 'src/reducers/observe';
 import { Incident } from './model';
 import { useAlertsPoller } from '../hooks/useAlertsPoller';
-import { Rule } from '@openshift-console/dynamic-plugin-sdk';
+import { DocumentTitle, Rule } from '@openshift-console/dynamic-plugin-sdk';
 
 const IncidentsPage = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -296,9 +295,7 @@ const IncidentsPage = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         {alertsAreLoading && incidentsAreLoading ? (
           <Bullseye>

diff --git a/web/src/components/MetricsPage.tsx b/web/src/components/MetricsPage.tsx
@@ -1,4 +1,6 @@
 import {
+  DocumentTitle,
+  ListPageHeader,
   PrometheusData,
   PrometheusEndpoint,
   PrometheusLabels,
@@ -60,7 +62,6 @@ import {
 import * as _ from 'lodash-es';
 import type { FC, Ref } from 'react';
 import { useMemo, useCallback, useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -1391,17 +1392,9 @@ const MetricsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('Metrics')}</title>
-      </Helmet>
-      <PageSection hasBodyWrapper={false}>
+      <DocumentTitle>{t('Metrics')}</DocumentTitle>
+      <ListPageHeader title={perspective === 'dev' ? undefined : t('Metrics')}>
         <Split hasGutter>
-          {perspective !== 'dev' && (
-            <SplitItem>
-              <Title headingLevel="h1">{t('Metrics')}</Title>
-            </SplitItem>
-          )}
-          <SplitItem isFilled />
           <SplitItem data-test={DataTestIDs.MetricGraphUnitsDropDown}>
             <Tooltip content={<>{t('This dropdown only formats results.')}</>}>
               <GraphUnitsDropDown />
@@ -1414,7 +1407,7 @@ const MetricsPage_: FC = () => {
             <MetricsActionsMenu />
           </SplitItem>
         </Split>
-      </PageSection>
+      </ListPageHeader>
       <PageSection hasBodyWrapper={false}>
         <Stack hasGutter>
           <StackItem>

diff --git a/web/src/components/alerting/AlertRulesDetailsPage.tsx b/web/src/components/alerting/AlertRulesDetailsPage.tsx
@@ -1,6 +1,7 @@
 import {
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusAlert,
   ResourceIcon,
@@ -38,7 +39,6 @@ import {
 import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat';
@@ -184,9 +184,9 @@ const AlertRulesDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: rule?.name || RuleResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: rule?.name || RuleResource.label })}
+      </DocumentTitle>
       <StatusBox data={rule} label={RuleResource.label} loaded={loaded} loadError={loadError}>
         <PageGroup>
           <PageBreadcrumb hasBodyWrapper={false}>

diff --git a/web/src/components/alerting/AlertRulesPage.tsx b/web/src/components/alerting/AlertRulesPage.tsx
@@ -1,5 +1,6 @@
 import {
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   PrometheusAlert,
   ResourceIcon,
@@ -15,7 +16,6 @@ import { sortable, Td } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useMemo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
@@ -219,9 +219,7 @@ const AlertRulesPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <ListPageFilter
           data={staticData}

diff --git a/web/src/components/alerting/AlertingPage.tsx b/web/src/components/alerting/AlertingPage.tsx
@@ -1,8 +1,11 @@
-import { PageSection, Title } from '@patternfly/react-core';
 import type { FC } from 'react';
 import { lazy } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HorizontalNav, useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  HorizontalNav,
+  ListPageHeader,
+  useActivePerspective,
+} from '@openshift-console/dynamic-plugin-sdk';
 
 const AlertsPage = lazy(
   () => import(/* webpackChunkName: "AlertsPage" */ '../alerting/AlertsPage'),
@@ -50,10 +53,8 @@ const AlertingPage: FC = () => {
 
   return (
     <>
-      <PageSection hasBodyWrapper={false}>
-        <Title headingLevel="h1">{t('Alerting')}</Title>
-        <HorizontalNav contextId={contextId} pages={pages} />
-      </PageSection>
+      <ListPageHeader title={t('Alerting')} />
+      <HorizontalNav contextId={contextId} pages={pages} />
     </>
   );
 };

diff --git a/web/src/components/alerting/AlertsDetailsPage.tsx b/web/src/components/alerting/AlertsDetailsPage.tsx
@@ -3,6 +3,7 @@ import {
   Alert,
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusLabels,
   ResourceIcon,
@@ -57,7 +58,6 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { MonitoringState } from '../../reducers/observe';
 import withFallback from '../console/console-shared/error/fallbacks/withFallback';
 import { StatusBox } from '../console/console-shared/src/components/status/StatusBox';
@@ -153,9 +153,9 @@ const AlertsDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: labels?.alertname || AlertResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: labels?.alertname || AlertResource.label })}
+      </DocumentTitle>
       <StatusBox
         data={alert}
         label={AlertResource.label}

diff --git a/web/src/components/alerting/AlertsPage.tsx b/web/src/components/alerting/AlertsPage.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   RowFilter,
   useListPageFilter,
@@ -10,7 +11,6 @@ import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-tab
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useMemo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from '../../reducers/observe';
@@ -144,9 +144,7 @@ const AlertsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false} type="subnav">
         <Flex>
           <ListPageFilter

diff --git a/web/src/components/alerting/SilenceForm.tsx b/web/src/components/alerting/SilenceForm.tsx
@@ -1,4 +1,8 @@
-import { consoleFetchJSON, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  consoleFetchJSON,
+  DocumentTitle,
+  useActiveNamespace,
+} from '@openshift-console/dynamic-plugin-sdk';
 import {
   ActionGroup,
   Alert,
@@ -34,7 +38,6 @@ import { t_global_spacer_sm } from '@patternfly/react-tokens';
 import * as _ from 'lodash-es';
 import type { ComponentType, FC, FormEventHandler, MouseEvent, ChangeEvent, Ref } from 'react';
 import { useState, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom-v5-compat';
@@ -277,9 +280,7 @@ const SilenceForm_: FC<SilenceFormProps> = ({ defaults, Info, title }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1">{title}</Title>
         <HelperText>

diff --git a/web/src/components/alerting/SilencesDetailsPage.tsx b/web/src/components/alerting/SilencesDetailsPage.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import {
   Alert,
+  DocumentTitle,
   ResourceIcon,
   Timestamp,
   useActiveNamespace,
@@ -28,7 +29,6 @@ import {
   SplitItem,
   Title,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { MonitoringState } from 'src/reducers/observe';
 import {
@@ -73,9 +73,9 @@ const SilencesDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: silence?.name || SilenceResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: silence?.name || SilenceResource.label })}
+      </DocumentTitle>
       <StatusBox
         data={silence}
         label={SilenceResource.label}

diff --git a/web/src/components/alerting/SilencesPage.tsx b/web/src/components/alerting/SilencesPage.tsx
@@ -1,6 +1,7 @@
 import {
   AlertSeverity,
   consoleFetchJSON,
+  DocumentTitle,
   ListPageFilter,
   RowProps,
   Silence,
@@ -23,7 +24,6 @@ import { sortable } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useState, useMemo, useContext, useCallback, memo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
@@ -185,7 +185,7 @@ const SilencesPage_: FC = () => {
 
   return (
     <>
-      <Helmet>{perspective === 'dev' ? <title>Silences</title> : <title>Alerting</title>}</Helmet>
+      <DocumentTitle>{perspective === 'dev' ? t('Silences') : t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <SelectedSilencesContext.Provider value={{ selectedSilences, setSelectedSilences }}>
           <Flex>