add template navigation

x-pack/plugins/monitoring/public/application/pages/elasticsearch/item_template.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { PageTemplate } from '../page_template';
+import { TabMenuItem, PageTemplateProps } from '../page_template';
+
+interface ItemTemplateProps extends PageTemplateProps {
+  id: string;
+  pageType: string;
+}
+export const ItemTemplate: React.FC<ItemTemplateProps> = (props) => {
+  const { pageType, id, ...rest } = props;
+  const tabs: TabMenuItem[] = [
+    {
+      id: 'overview',
+      label: i18n.translate('xpack.monitoring.esNavigation.overviewLinkText', {
+        defaultMessage: 'Overview',
+      }),
+      route: `/elasticsearch/${pageType}/${id}`,
+    },
+    {
+      id: 'advanced',
+      label: i18n.translate('xpack.monitoring.esNavigation.nodesLinkText', {
+        defaultMessage: 'Advanced',
+      }),
+      route: `/elasticsearch/${pageType}/${id}/advanced`,
+    },
+  ];
+
+  return <PageTemplate {...rest} tabs={tabs} product="elasticsearch" />;
+};

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx

@@ -7,8 +7,7 @@
 import React, { useContext, useState, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
-import { find } from 'lodash';
-import { ElasticsearchTemplate } from './elasticsearch_template';
+import { ItemTemplate } from './item_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../global_state_context';
 import { NodeReact } from '../../../components/elasticsearch';
@@ -38,9 +37,6 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
 
   const clusterUuid = globalState.cluster_uuid;
   const ccs = globalState.ccs;
-  const cluster = find(clusters, {
-    cluster_uuid: clusterUuid,
-  });
   const [data, setData] = useState({} as any);
   const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
 
@@ -92,11 +88,12 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
   }, [showSystemIndices, setShowSystemIndices]);
 
   return (
-    <ElasticsearchTemplate
+    <ItemTemplate
       title={title}
       pageTitle={pageTitle}
       getPageData={getPageData}
-      cluster={cluster}
+      id={node}
+      pageType="nodes"
     >
       <div data-test-subj="elasticsearchNodeListingPage">
         <SetupModeRenderer
@@ -119,6 +116,6 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
           )}
         />
       </div>
-    </ElasticsearchTemplate>
+    </ItemTemplate>
   );
 };