implement advanced node view

x-pack/plugins/monitoring/public/application/index.tsx

@@ -27,6 +27,7 @@ import { CODE_PATH_ELASTICSEARCH, CODE_PATH_BEATS } from '../../common/constants
 import { ElasticsearchNodesPage } from './pages/elasticsearch/nodes_page';
 import { ElasticsearchIndicesPage } from './pages/elasticsearch/indices_page';
 import { ElasticsearchNodePage } from './pages/elasticsearch/node_page';
+import { ElasticsearchNodeAdvancedPage } from './pages/elasticsearch/node_advanced_page';
 import { MonitoringTimeContainer } from './hooks/use_monitoring_time';
 import { BreadcrumbContainer } from './hooks/use_breadcrumbs';
 
@@ -90,6 +91,13 @@ const MonitoringApp: React.FC<{
                     fetchAllClusters={false}
                   />
 
+                  <RouteInit
+                    path="/elasticsearch/nodes/:node/advanced"
+                    component={ElasticsearchNodeAdvancedPage}
+                    codePaths={[CODE_PATH_ELASTICSEARCH]}
+                    fetchAllClusters={false}
+                  />
+
                   <RouteInit
                     path="/elasticsearch/nodes/:node"
                     component={ElasticsearchNodePage}

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

@@ -0,0 +1,79 @@
+/*
+ * 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, { useContext, useState, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { i18n } from '@kbn/i18n';
+import { ItemTemplate } from './item_template';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { GlobalStateContext } from '../../global_state_context';
+// @ts-ignore
+import { AdvancedNode } from '../../../components/elasticsearch/node/advanced';
+import { ComponentProps } from '../../route_init';
+import { useCharts } from '../../hooks/use_charts';
+
+export const ElasticsearchNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
+  const globalState = useContext(GlobalStateContext);
+  const { zoomInfo, onBrush } = useCharts();
+
+  const { node }: { node: string } = useParams();
+  const { services } = useKibana<{ data: any }>();
+
+  const clusterUuid = globalState.cluster_uuid;
+  const ccs = globalState.ccs;
+  const [data, setData] = useState({} as any);
+
+  const title = i18n.translate('xpack.monitoring.elasticsearch.node.advanced.routeTitle', {
+    defaultMessage: 'Elasticsearch - Nodes - {nodeName} - Advanced',
+    values: {
+      nodeName: data?.nodeSummary?.name,
+    },
+  });
+
+  const pageTitle = i18n.translate('xpack.monitoring.elasticsearch.node.overview.pageTitle', {
+    defaultMessage: 'Elasticsearch node: {nodeName}',
+    values: {
+      nodeName: data?.nodeSummary?.name,
+    },
+  });
+
+  const getPageData = useCallback(async () => {
+    const bounds = services.data?.query.timefilter.timefilter.getBounds();
+    const url = `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch/nodes/${node}`;
+
+    const response = await services.http?.fetch(url, {
+      method: 'POST',
+      body: JSON.stringify({
+        ccs,
+        timeRange: {
+          min: bounds.min.toISOString(),
+          max: bounds.max.toISOString(),
+        },
+        is_advanced: true,
+      }),
+    });
+
+    setData(response);
+  }, [ccs, clusterUuid, services.data?.query.timefilter.timefilter, services.http, node]);
+
+  return (
+    <ItemTemplate
+      title={title}
+      pageTitle={pageTitle}
+      getPageData={getPageData}
+      id={node}
+      pageType="nodes"
+    >
+      <AdvancedNode
+        nodeSummary={data.nodeSummary}
+        alerts={{}}
+        metrics={data.metrics}
+        onBrush={onBrush}
+        zoomInfo={zoomInfo}
+      />
+    </ItemTemplate>
+  );
+};

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

@@ -95,27 +95,25 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) =>
       id={node}
       pageType="nodes"
     >
-      <div data-test-subj="elasticsearchNodeListingPage">
-        <SetupModeRenderer
-          render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
-            <SetupModeContext.Provider value={{ setupModeSupported: true }}>
-              {flyoutComponent}
-              <NodeReact
-                alerts={{}}
-                nodeId={node}
-                clusterUuid={clusterUuid}
-                onBrush={onBrush}
-                zoomInfo={zoomInfo}
-                toggleShowSystemIndices={toggleShowSystemIndices}
-                showSystemIndices={showSystemIndices}
-                nodesByIndices={nodesByIndicesData}
-                {...data}
-              />
-              {bottomBarComponent}
-            </SetupModeContext.Provider>
-          )}
-        />
-      </div>
+      <SetupModeRenderer
+        render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
+          <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+            {flyoutComponent}
+            <NodeReact
+              alerts={{}}
+              nodeId={node}
+              clusterUuid={clusterUuid}
+              onBrush={onBrush}
+              zoomInfo={zoomInfo}
+              toggleShowSystemIndices={toggleShowSystemIndices}
+              showSystemIndices={showSystemIndices}
+              nodesByIndices={nodesByIndicesData}
+              {...data}
+            />
+            {bottomBarComponent}
+          </SetupModeContext.Provider>
+        )}
+      />
     </ItemTemplate>
   );
 };