[Space, Time] Visualize ingest pathway

x-pack/plugins/dataset_quality/public/components/dataset_quality/dataset_quality.tsx

@@ -7,30 +7,31 @@
 import React from 'react';
 import { CoreStart } from '@kbn/core/public';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { DataStreamsStatsService } from '../../services/data_streams_stats/data_streams_stats_service';
 import { DatasetQualityContext, DatasetQualityContextValue } from './context';
 import { useKibanaContextForPluginProvider } from '../../utils';
 import { DatasetQualityStartDeps } from '../../types';
 import { Header } from './header';
 import { Table } from './table';
+import { DataStreamsStatsServiceStart } from '../../services/data_streams_stats';
 
 export interface CreateDatasetQualityArgs {
   core: CoreStart;
   plugins: DatasetQualityStartDeps;
+  dataStreamsStatsService: DataStreamsStatsServiceStart;
 }
 
-export const createDatasetQuality = ({ core, plugins }: CreateDatasetQualityArgs) => {
+export const createDatasetQuality = ({
+  core,
+  plugins,
+  dataStreamsStatsService,
+}: CreateDatasetQualityArgs) => {
+  const datasetQualityProviderValue: DatasetQualityContextValue = {
+    dataStreamsStatsServiceClient: dataStreamsStatsService.client,
+  };
+
   return () => {
     const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core, plugins);
 
-    const dataStreamsStatsServiceClient = new DataStreamsStatsService().start({
-      http: core.http,
-    }).client;
-
-    const datasetQualityProviderValue: DatasetQualityContextValue = {
-      dataStreamsStatsServiceClient,
-    };
-
     return (
       <DatasetQualityContext.Provider value={datasetQualityProviderValue}>
         <KibanaContextProviderForPlugin>

x-pack/plugins/dataset_quality/public/index.ts

@@ -9,6 +9,8 @@ import type { PluginInitializerContext } from '@kbn/core/public';
 import { DatasetQualityConfig } from '../common/plugin_config';
 import { DatasetQualityPlugin } from './plugin';
 
+export type { IDataStreamsStatsClient } from './services/data_streams_stats';
+
 export type { DatasetQualityPluginSetup, DatasetQualityPluginStart } from './types';
 
 export function plugin(context: PluginInitializerContext<DatasetQualityConfig>) {

x-pack/plugins/dataset_quality/public/plugin.tsx

@@ -7,6 +7,7 @@
 
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public';
 import { createDatasetQuality } from './components/dataset_quality';
+import { DataStreamsStatsService } from './services/data_streams_stats';
 import {
   DatasetQualityPluginSetup,
   DatasetQualityPluginStart,
@@ -17,18 +18,30 @@ import {
 export class DatasetQualityPlugin
   implements Plugin<DatasetQualityPluginSetup, DatasetQualityPluginStart>
 {
+  dataStreamsStatsService = new DataStreamsStatsService();
+
   constructor(context: PluginInitializerContext) {}
 
   public setup(core: CoreSetup, plugins: DatasetQualitySetupDeps) {
+    this.dataStreamsStatsService.setup();
+
     return {};
   }
 
   public start(core: CoreStart, plugins: DatasetQualityStartDeps): DatasetQualityPluginStart {
+    const dataStreamsStatsService = this.dataStreamsStatsService.start({
+      http: core.http,
+    });
+
     const DatasetQuality = createDatasetQuality({
       core,
       plugins,
+      dataStreamsStatsService,
     });
 
-    return { DatasetQuality };
+    return {
+      DatasetQuality,
+      dataStreamsStatsService,
+    };
   }
 }

x-pack/plugins/dataset_quality/public/types.ts

@@ -5,15 +5,17 @@
  * 2.0.
  */
 
-import { ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import type { SharePluginSetup, SharePluginStart } from '@kbn/share-plugin/public';
-import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import type { DataStreamsStatsServiceStart } from './services/data_streams_stats';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface DatasetQualityPluginSetup {}
 
 export interface DatasetQualityPluginStart {
   DatasetQuality: ComponentType;
+  dataStreamsStatsService: DataStreamsStatsServiceStart;
 }
 
 export interface DatasetQualityStartDeps {

x-pack/plugins/observability_log_explorer/public/applications/observability_log_explorer.tsx

@@ -10,6 +10,7 @@ import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Route, Router, Routes } from '@kbn/shared-ux-router';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { IngestPathwaysRoute } from '../routes/ingest_pathways';
 import { DatasetQualityRoute, ObservabilityLogExplorerMainRoute } from '../routes/main';
 import {
   ObservabilityLogExplorerAppMountParameters,
@@ -76,6 +77,7 @@ export const ObservabilityLogExplorerApp = ({
                 exact={true}
                 render={() => <DatasetQualityRoute core={core} />}
               />
+              <Route path="/ingest-pathways" exact component={IngestPathwaysRoute} />
             </Routes>
           </Router>
         </KbnUrlStateStorageFromRouterProvider>

x-pack/plugins/observability_log_explorer/public/components/ingest_pathways/graph_visualization.tsx

@@ -0,0 +1,156 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { useActor } from '@xstate/react';
+import cytoscape, { CytoscapeOptions, EdgeSingular, NodeSingular } from 'cytoscape';
+import dagre from 'cytoscape-dagre';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Agent, useIngestPathwaysPageStateContext } from '../../state_machines/ingest_pathways';
+
+export const ConnectedGraphVisualization = React.memo(() => {
+  const [state, send] = useActor(useIngestPathwaysPageStateContext());
+
+  const onSelectPathway = useCallback(
+    (pathwayId: string) => {
+      send({
+        type: 'selectPathway',
+        pathwayId,
+      });
+    },
+    [send]
+  );
+
+  return (
+    <GraphVisualization graphOptions={state.context.graph} onSelectPathway={onSelectPathway} />
+  );
+});
+
+export const GraphVisualization = React.memo(
+  ({
+    graphOptions,
+    onSelectPathway,
+  }: {
+    graphOptions: CytoscapeOptions;
+    onSelectPathway: (pathwayId: string) => void;
+  }) => {
+    const [cytoscapeInstance] = useState(() => {
+      cytoscape.use(dagre);
+      const newCytoscapeInstance = cytoscape(initialGraphOptions);
+      newCytoscapeInstance.on('select', 'edge[pathwayId]', (evt) => {
+        const pathwayId = evt.target.data('pathwayId');
+        // onSelectPathway(pathwayId);
+        // console.log(evt);
+        const edges = evt.cy.$(`edge[pathwayId="${pathwayId}"]`);
+        const nodes = edges.connectedNodes();
+        edges.select();
+        nodes.select();
+      });
+      return newCytoscapeInstance;
+    });
+
+    useEffect(() => {
+      cytoscapeInstance.json(graphOptions);
+      cytoscapeInstance.layout(initialGraphOptions.layout!).run();
+    }, [cytoscapeInstance, graphOptions]);
+
+    return (
+      <div
+        css={graphStyles}
+        ref={(elem) => {
+          if (elem != null) {
+            cytoscapeInstance.mount(elem);
+          } else {
+            cytoscapeInstance.unmount();
+          }
+        }}
+      />
+    );
+  }
+);
+
+const initialGraphOptions: CytoscapeOptions & { layout: Record<string, any> } = {
+  elements: [],
+  autoungrabify: true,
+  style: [
+    {
+      selector: '*',
+      style: {
+        'font-size': '12px',
+      },
+    },
+    {
+      selector: 'node.agent',
+      style: {
+        label: (elem: NodeSingular) => {
+          const agent = elem.data('agent');
+          return `${agent.name}\n${agent.type} ${agent.version}`;
+        },
+        'text-wrap': 'wrap',
+        shape: 'ellipse',
+        'text-valign': 'center',
+        'text-halign': 'left',
+      },
+    },
+    {
+      selector: 'node.dataStream',
+      style: {
+        label: 'data(dataStream.id)',
+        shape: 'hexagon',
+        'text-valign': 'center',
+        'text-halign': 'right',
+      },
+    },
+    {
+      selector: 'node.ingestPipeline',
+      style: {
+        label: 'data(ingestPipeline.id)',
+        shape: 'diamond',
+      },
+    },
+    {
+      selector: 'edge',
+      style: {
+        width: 1,
+        'curve-style': 'bezier',
+      },
+    },
+    {
+      selector: 'edge.shipsTo',
+      style: {
+        'target-arrow-shape': 'chevron',
+        'target-arrow-fill': 'filled',
+      },
+    },
+    {
+      selector: 'edge.agentShipsTo',
+      style: {
+        // label: 'data(shipsTo.signalCount)',
+        width: (edge: EdgeSingular) => {
+          const agent: Agent = edge.data('agent');
+          const totalSignalCount = agent.shipsTo.reduce(
+            (accumulatedSignalCount, { signalCount }) => accumulatedSignalCount + signalCount,
+            0
+          );
+          return 1 + (9.0 / totalSignalCount) * edge.data('shipsTo').signalCount;
+        },
+      },
+    },
+  ],
+  layout: {
+    name: 'dagre',
+    rankDir: 'LR',
+    rankSep: 300,
+    nodeSep: 30,
+    ranker: 'longest-path',
+  },
+};
+
+const graphStyles = css({
+  flex: '1 0 0%',
+  alignSelf: 'stretch',
+});

x-pack/plugins/observability_log_explorer/public/components/ingest_pathways/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './ingest_pathways';

x-pack/plugins/observability_log_explorer/public/components/ingest_pathways/ingest_pathways.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { EuiPageHeaderProps } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { ObservabilityLogExplorerPageTemplate } from '../page_template';
+import { ConnectedGraphVisualization } from './graph_visualization';
+import { ConnectedLoadingIndicator } from './loading_indicator';
+import { ConnectedReloadButton } from './reload_button';
+
+export const IngestPathways = React.memo(() => {
+  const pageHeaderProps = useMemo(
+    (): EuiPageHeaderProps => ({
+      alignItems: 'center',
+      bottomBorder: 'extended',
+      pageTitle: 'Ingest Pathways',
+      rightSideItems: [<ConnectedLoadingIndicator />, <ConnectedReloadButton />],
+    }),
+    []
+  );
+
+  return (
+    <ObservabilityLogExplorerPageTemplate pageHeaderProps={pageHeaderProps}>
+      <ConnectedGraphVisualization />
+    </ObservabilityLogExplorerPageTemplate>
+  );
+});

x-pack/plugins/observability_log_explorer/public/components/ingest_pathways/loading_indicator.tsx

@@ -0,0 +1,17 @@
+/*
+ * 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 { EuiBadge } from '@elastic/eui';
+import { useActor } from '@xstate/react';
+import React from 'react';
+import { useIngestPathwaysPageStateContext } from '../../state_machines/ingest_pathways';
+
+export const ConnectedLoadingIndicator = React.memo(() => {
+  const [state] = useActor(useIngestPathwaysPageStateContext());
+
+  return <EuiBadge color="hollow">{`${state.value}`}</EuiBadge>;
+});

x-pack/plugins/observability_log_explorer/public/components/ingest_pathways/reload_button.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 { EuiButton } from '@elastic/eui';
+import { useActor } from '@xstate/react';
+import React from 'react';
+import { useIngestPathwaysPageStateContext } from '../../state_machines/ingest_pathways';
+
+export const ConnectedReloadButton = React.memo(() => {
+  const [, send] = useActor(useIngestPathwaysPageStateContext());
+
+  return (
+    <EuiButton
+      onClick={() => {
+        send({
+          type: 'load',
+        });
+      }}
+    >
+      Reload
+    </EuiButton>
+  );
+});

x-pack/plugins/observability_log_explorer/public/components/page_template.tsx

@@ -5,15 +5,17 @@
  * 2.0.
  */
 
-import { EuiPageSectionProps } from '@elastic/eui';
+import { EuiPageHeaderProps, EuiPageSectionProps } from '@elastic/eui';
 import { css } from '@emotion/react';
 import React from 'react';
 import { useKibanaContextForPlugin } from '../utils/use_kibana';
 
 export const ObservabilityLogExplorerPageTemplate = ({
   children,
+  pageHeaderProps,
   pageProps,
 }: React.PropsWithChildren<{
+  pageHeaderProps?: EuiPageHeaderProps;
   pageProps?: EuiPageSectionProps;
 }>) => {
   const {
@@ -22,6 +24,7 @@ export const ObservabilityLogExplorerPageTemplate = ({
 
   return (
     <observabilityShared.navigation.PageTemplate
+      pageHeader={pageHeaderProps}
       pageSectionProps={{ ...pageSectionProps, ...pageProps }}
     >
       {children}