feat: show different page titles on different pages (#733)

Author: ValeraS

package-lock.json

@@ -32,6 +32,7 @@
     "qs": "^6.11.0",
     "react-error-boundary": "^4.0.12",
     "react-json-inspector": "^7.1.1",
+    "react-helmet-async": "2.0.4",
     "react-list": "^0.8.11",
     "react-monaco-editor": "^0.47.0",
     "react-redux": "^7.2.6",

package.json

@@ -1,5 +1,6 @@
 import React from 'react';
 import {connect} from 'react-redux';
+import {Helmet} from 'react-helmet-async';
 
 import ContentWrapper, {Content} from './Content';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
@@ -30,6 +31,7 @@ export interface AppProps {
 function App({store, history, singleClusterMode, children, userSettings = settings}: AppProps) {
     return (
         <Providers store={store} history={history}>
+            <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />
             <ContentWrapper>
                 <Navigation userSettings={userSettings}>
                     <ErrorBoundary>

src/containers/App/App.tsx

@@ -4,6 +4,7 @@ import {Router} from 'react-router';
 import {QueryParamProvider} from 'use-query-params';
 import {ReactRouter5Adapter} from 'use-query-params/adapters/react-router-5';
 import {ThemeProvider} from '@gravity-ui/uikit';
+import {HelmetProvider} from 'react-helmet-async';
 
 import {ComponentsProvider} from '../../components/ComponentsProvider/ComponentsProvider';
 import {componentsRegistry as defaultComponentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
@@ -28,17 +29,19 @@ export function Providers({
     children,
 }: ProvidersProps) {
     return (
-        <Provider store={store}>
-            <Router history={history}>
-                <QueryParamProvider adapter={ReactRouter5Adapter}>
-                    <Theme>
-                        <ComponentsProvider registry={componentsRegistry}>
-                            {children}
-                        </ComponentsProvider>
-                    </Theme>
-                </QueryParamProvider>
-            </Router>
-        </Provider>
+        <HelmetProvider>
+            <Provider store={store}>
+                <Router history={history}>
+                    <QueryParamProvider adapter={ReactRouter5Adapter}>
+                        <Theme>
+                            <ComponentsProvider registry={componentsRegistry}>
+                                {children}
+                            </ComponentsProvider>
+                        </Theme>
+                    </QueryParamProvider>
+                </Router>
+            </Provider>
+        </HelmetProvider>
     );
 }
 

src/containers/App/Providers.tsx

@@ -1,6 +1,7 @@
 import {useEffect, useMemo, useRef} from 'react';
 import {Redirect, Switch, Route, useLocation, useRouteMatch} from 'react-router';
 import {useDispatch} from 'react-redux';
+import {Helmet} from 'react-helmet-async';
 import cn from 'bem-cn-lite';
 import qs from 'qs';
 
@@ -52,7 +53,7 @@ function Cluster({
 
     const dispatch = useDispatch();
 
-    const activeTab = useClusterTab();
+    const activeTabId = useClusterTab();
 
     const location = useLocation();
     const queryParams = qs.parse(location.search, {
@@ -117,14 +118,23 @@ function Cluster({
         );
     };
 
+    const clusterTitle = cluster?.Name ?? clusterName ?? CLUSTER_DEFAULT_TITLE;
+    const activeTab = useMemo(() => clusterTabs.find(({id}) => id === activeTabId), [activeTabId]);
+
     return (
         <div className={b()} ref={container}>
+            <Helmet
+                defaultTitle={`${clusterTitle} — YDB Monitoring`}
+                titleTemplate={`%s — ${clusterTitle} — YDB Monitoring`}
+            >
+                {activeTab ? <title>{activeTab.title}</title> : null}
+            </Helmet>
             <div className={b('header')}>{getClusterTitle()}</div>
             <div className={b('tabs')}>
                 <Tabs
                     size="l"
                     allowNotSelected={true}
-                    activeTab={activeTab}
+                    activeTab={activeTabId}
                     items={clusterTabs}
                     wrapTo={({id}, node) => {
                         const path = getClusterPath(id as ClusterTab, queryParams);
@@ -197,7 +207,7 @@ function Cluster({
                     >
                         <Versions versionToColor={versionToColor} />
                     </Route>
-                    <Redirect to={getLocationObjectFromHref(getClusterPath(activeTab))} />
+                    <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
                 </Switch>
             </div>
         </div>

src/containers/Cluster/Cluster.tsx

@@ -1,11 +1,12 @@
 import {useCallback, useMemo} from 'react';
 import {useDispatch} from 'react-redux';
+import {Helmet} from 'react-helmet-async';
 
 import DataTable from '@gravity-ui/react-data-table';
-
 import {TableColumnSetup, Select} from '@gravity-ui/uikit';
 
 import {Search} from '../../components/Search';
+import {Loader} from '../../components/Loader';
 import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {useAutofetcher} from '../../utils/hooks';
 
@@ -35,10 +36,9 @@ import {ClustersStatistics} from './ClustersStatistics';
 import {CLUSTERS_COLUMNS} from './columns';
 import {useSelectedColumns} from './useSelectedColumns';
 import {b} from './shared';
+import i18n from './i18n';
 
 import './Clusters.scss';
-import {Loader} from '../../components/Loader';
-import i18n from './i18n';
 
 export function Clusters() {
     const dispatch = useDispatch();
@@ -103,6 +103,10 @@ export function Clusters() {
 
     return (
         <div className={b()}>
+            <Helmet>
+                <title>{i18n('page_title')}</title>
+            </Helmet>
+
             <ClustersStatistics stats={aggregation} count={filteredClusters.length} />
             <div className={b('controls')}>
                 <div className={b('control', {wide: true})}>

src/containers/Clusters/Clusters.tsx

@@ -13,5 +13,7 @@
   "statistics_load": "Load",
   "statistics_storage": "Storage",
 
-  "tooltip_no-cluster-data": "No cluster data"
+  "tooltip_no-cluster-data": "No cluster data",
+
+  "page_title": "Clusters"
 }

src/containers/Clusters/i18n/en.json

@@ -1,11 +1,8 @@
-import {Lang, i18n} from '../../../utils/i18n';
+import {registerKeysets} from '../../../utils/i18n';
 
 import en from './en.json';
 import ru from './ru.json';
 
 const COMPONENT = 'ydb-clusters-page';
 
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, {ru, en});

src/containers/Clusters/i18n/index.ts

@@ -13,5 +13,7 @@
   "statistics_load": "Нагрузка",
   "statistics_storage": "Хранилище",
 
-  "tooltip_no-cluster-data": "Нет данных кластера"
+  "tooltip_no-cluster-data": "Нет данных кластера",
+
+  "page_title": "Кластеры"
 }

src/containers/Clusters/i18n/ru.json

@@ -2,6 +2,7 @@ import {useEffect, useMemo, useRef} from 'react';
 import {useLocation, useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
+import {Helmet} from 'react-helmet-async';
 
 import {Tabs} from '@gravity-ui/uikit';
 import {Link} from 'react-router-dom';
@@ -52,10 +53,6 @@ function Node(props: NodeProps) {
     const {activeTabVerified, nodeTabs} = useMemo(() => {
         const hasStorage = node?.Roles?.find((el) => el === STORAGE_ROLE);
 
-        let actualActiveTab = activeTab;
-        if (!hasStorage && activeTab === STORAGE) {
-            actualActiveTab = OVERVIEW;
-        }
         const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
 
         const actualNodeTabs = nodePages.map((page) => {
@@ -65,6 +62,11 @@ function Node(props: NodeProps) {
             };
         });
 
+        let actualActiveTab = actualNodeTabs.find(({id}) => id === activeTab);
+        if (!actualActiveTab) {
+            actualActiveTab = actualNodeTabs[0];
+        }
+
         return {activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [activeTab, node]);
 
@@ -97,7 +99,7 @@ function Node(props: NodeProps) {
                 <Tabs
                     size="l"
                     items={nodeTabs}
-                    activeTab={activeTabVerified}
+                    activeTab={activeTabVerified.id}
                     wrapTo={({id}, tabNode) => (
                         <Link
                             to={createHref(routes.node, {id: nodeId, activeTab: id})}
@@ -113,7 +115,7 @@ function Node(props: NodeProps) {
         );
     };
     const renderTabContent = () => {
-        switch (activeTab) {
+        switch (activeTabVerified.id) {
             case STORAGE: {
                 return (
                     <div className={b('storage')}>
@@ -145,6 +147,13 @@ function Node(props: NodeProps) {
         if (node) {
             return (
                 <div className={b(null, props.className)} ref={container}>
+                    <Helmet
+                        titleTemplate={`%s — ${node.Host} — YDB Monitoring`}
+                        defaultTitle={`${node.Host} — YDB Monitoring`}
+                    >
+                        <title>{activeTabVerified.title}</title>
+                    </Helmet>
+
                     <BasicNodeViewer
                         node={node}
                         additionalNodesProps={props.additionalNodesProps}