[Stack Monitoring] Logstash migration

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

@@ -21,7 +21,13 @@ import { RouteInit } from './route_init';
 import { NoDataPage } from './pages/no_data';
 import { ElasticsearchOverviewPage } from './pages/elasticsearch/overview';
 import { BeatsOverviewPage } from './pages/beats/overview';
-import { BeatsInstancesPage } from './pages/beats/instances';
+import {
+  CODE_PATH_ELASTICSEARCH,
+  CODE_PATH_BEATS,
+  CODE_PATH_KIBANA,
+  CODE_PATH_LOGSTASH,
+  CODE_PATH_APM,
+} from '../../common/constants';
 import { BeatsInstancePage } from './pages/beats/instance';
 import { ApmOverviewPage, ApmInstancesPage, ApmInstancePage } from './pages/apm';
 import { KibanaOverviewPage } from './pages/kibana/overview';
@@ -34,12 +40,15 @@ 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';
-import {
-  CODE_PATH_ELASTICSEARCH,
-  CODE_PATH_KIBANA,
-  CODE_PATH_BEATS,
-  CODE_PATH_APM,
-} from '../../common/constants';
+import { LogStashOverviewPage } from './pages/logstash/overview';
+import { LogStashNodesPage } from './pages/logstash/nodes';
+import { LogStashPipelinesPage } from './pages/logstash/pipelines';
+import { LogStashPipelinePage } from './pages/logstash/pipeline';
+import { BeatsInstancesPage } from './pages/beats/instances';
+import { LogStashNodeAdvancedPage } from './pages/logstash/advanced';
+// import { LogStashNodePipelinesPage } from './pages/logstash/node_pipelines';
+import { LogStashNodePage } from './pages/logstash/node';
+import { LogStashNodePipelinesPage } from './pages/logstash/node_pipelines';
 
 export const renderApp = (
   core: CoreStart,
@@ -180,6 +189,14 @@ const MonitoringApp: React.FC<{
                     fetchAllClusters={false}
                   />
 
+                  {/* Logstash Routes */}
+                  <RouteInit
+                    path="/logstash/nodes"
+                    component={LogStashNodesPage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
+
                   {/* APM Views */}
                   <RouteInit
                     path="/apm/instances/:instance"
@@ -188,13 +205,61 @@ const MonitoringApp: React.FC<{
                     fetchAllClusters={false}
                   />
 
+                  {/* Logstash Routes */}
+                  <RouteInit
+                    path="/logstash/nodes"
+                    component={LogStashNodesPage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
+
+                  <RouteInit
+                    path="/logstash/node/:uuid/advanced"
+                    component={LogStashNodeAdvancedPage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
                   <RouteInit
                     path="/apm/instances"
                     component={ApmInstancesPage}
                     codePaths={[CODE_PATH_APM]}
                     fetchAllClusters={false}
                   />
 
+                  <RouteInit
+                    path="/logstash/node/:uuid/pipelines"
+                    component={LogStashNodePipelinesPage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
+
+                  <RouteInit
+                    path="/logstash/node/:uuid"
+                    component={LogStashNodePage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
+
+                  <RouteInit
+                    path="/logstash/pipelines/:id/:hash?"
+                    component={LogStashPipelinePage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
+
+                  <RouteInit
+                    path="/logstash/pipelines"
+                    component={LogStashPipelinesPage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
+
+                  <RouteInit
+                    path="/logstash"
+                    component={LogStashOverviewPage}
+                    codePaths={[CODE_PATH_LOGSTASH]}
+                    fetchAllClusters={false}
+                  />
                   <RouteInit
                     path="/apm"
                     component={ApmOverviewPage}

x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx

@@ -0,0 +1,128 @@
+/*
+ * 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, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { find } from 'lodash';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPanel,
+  EuiSpacer,
+  EuiPageContent,
+  EuiFlexGrid,
+  EuiFlexItem,
+} from '@elastic/eui';
+import { useRouteMatch } from 'react-router-dom';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { GlobalStateContext } from '../../global_state_context';
+import { ComponentProps } from '../../route_init';
+// @ts-ignore
+import { Listing } from '../../../components/logstash/listing';
+import { LogstashTemplate } from './logstash_template';
+// @ts-ignore
+import { DetailStatus } from '../../../components/logstash/detail_status';
+// @ts-ignore
+import { MonitoringTimeseriesContainer } from '../../../components/chart';
+import { AlertsCallout } from '../../../alerts/callout';
+import { useCharts } from '../../hooks/use_charts';
+
+export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
+  const globalState = useContext(GlobalStateContext);
+  const match = useRouteMatch<{ uuid: string | undefined }>();
+  const { services } = useKibana<{ data: any }>();
+  const clusterUuid = globalState.cluster_uuid;
+  const { zoomInfo, onBrush } = useCharts();
+  const ccs = globalState.ccs;
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  });
+
+  const [data, setData] = useState({} as any);
+
+  const title = i18n.translate('xpack.monitoring.logstash.node.advanced.routeTitle', {
+    defaultMessage: 'Logstash - {nodeName} - Advanced',
+    values: {
+      nodeName: data.nodeSummary ? data.nodeSummary.name : '',
+    },
+  });
+
+  const pageTitle = i18n.translate('xpack.monitoring.logstash.node.advanced.pageTitle', {
+    defaultMessage: 'Logstash node: {nodeName}',
+    values: {
+      nodeName: data.nodeSummary ? data.nodeSummary.name : '',
+    },
+  });
+
+  const getPageData = useCallback(async () => {
+    const bounds = services.data?.query.timefilter.timefilter.getBounds();
+    const url = `../api/monitoring/v1/clusters/${clusterUuid}/logstash/node/${match.params.uuid}`;
+    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,
+    match.params.uuid,
+  ]);
+
+  const metricsToShow = useMemo(() => {
+    if (!data.metrics) return [];
+
+    return [
+      data.metrics.logstash_node_cpu_utilization,
+      data.metrics.logstash_queue_events_count,
+      data.metrics.logstash_node_cgroup_cpu,
+      data.metrics.logstash_pipeline_queue_size,
+      data.metrics.logstash_node_cgroup_stats,
+    ];
+  }, [data.metrics]);
+
+  return (
+    <LogstashTemplate
+      instance={data}
+      title={title}
+      pageTitle={pageTitle}
+      getPageData={getPageData}
+      cluster={cluster}
+    >
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPanel>{data.nodeSummary && <DetailStatus stats={data.nodeSummary} />}</EuiPanel>
+          <EuiSpacer size="m" />
+          <AlertsCallout alerts={{}} />
+          <EuiPageContent>
+            <EuiFlexGrid columns={2} gutterSize="s">
+              {metricsToShow.map((metric, index) => (
+                <EuiFlexItem key={index}>
+                  <MonitoringTimeseriesContainer
+                    series={metric}
+                    onBrush={onBrush}
+                    zoomInfo={zoomInfo}
+                    {...data}
+                  />
+                  <EuiSpacer />
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGrid>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </LogstashTemplate>
+  );
+};

x-pack/plugins/monitoring/public/application/pages/logstash/logstash_template.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 LogstashTemplateProps extends PageTemplateProps {
+  cluster: any;
+  instance?: any;
+  pipelineId?: string;
+  pipelineVersions?: string[];
+  tabsDisabled?: boolean;
+}
+
+export const LogstashTemplate: React.FC<LogstashTemplateProps> = ({
+  cluster,
+  instance,
+  pipelineId,
+  pipelineVersions,
+  tabsDisabled,
+  ...props
+}) => {
+  const tabs: TabMenuItem[] = [];
+  if (!tabsDisabled) {
+    if (!instance && !pipelineId) {
+      tabs.push({
+        id: 'overview',
+        label: i18n.translate('xpack.monitoring.logstashNavigation.overviewLinkText', {
+          defaultMessage: 'Overview',
+        }),
+        route: '/logstash',
+      });
+      tabs.push({
+        id: 'nodes',
+        label: i18n.translate('xpack.monitoring.logstashNavigation.nodesLinkText', {
+          defaultMessage: 'Nodes',
+        }),
+        route: '/logstash/nodes',
+      });
+      tabs.push({
+        id: 'pipelines',
+        label: i18n.translate('xpack.monitoring.logstashNavigation.pipelinesLinkText', {
+          defaultMessage: 'Pipelines',
+        }),
+        route: '/logstash/pipelines',
+      });
+    } else if (instance) {
+      tabs.push({
+        id: 'overview',
+        label: i18n.translate('xpack.monitoring.logstashNavigation.instance.overviewLinkText', {
+          defaultMessage: 'Overview',
+        }),
+        route: `/logstash/node/${instance.nodeSummary?.uuid}`, // IDK if this is right
+      });
+      tabs.push({
+        id: 'pipeline',
+        label: i18n.translate('xpack.monitoring.logstashNavigation.instance.pipelinesLinkText', {
+          defaultMessage: 'Pipelines',
+        }),
+        route: `/logstash/node/${instance.nodeSummary?.uuid}/pipelines`, // IDK if this is right
+      });
+      tabs.push({
+        id: 'advanced',
+        label: i18n.translate('xpack.monitoring.logstashNavigation.instance.advancedLinkText', {
+          defaultMessage: 'Advanced',
+        }),
+        route: `/logstash/node/${instance.nodeSummary?.uuid}/advanced`, // IDK if this is right
+      });
+    }
+  }
+
+  if (pipelineVersions && pipelineVersions.length) {
+    // todo add this in: https://github.com/elastic/kibana/blob/4584a8b570402aa07832cf3e5b520e5d2cfa7166/x-pack/plugins/monitoring/public/directives/main/index.js#L36, https://github.com/elastic/kibana/blob/c07a512e4647a40d8e891eb24f5912783b561fba/x-pack/plugins/monitoring/public/directives/main/index.html#L293-L298
+    // tabs.push({
+    //   id: 'dropdown-elm',
+    // })
+  }
+
+  return <PageTemplate {...props} tabs={tabs} product="logstash" />;
+};