OCPBUGS-63056: Add favourites to Metrics page

Author: logonoff

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>