[Monitoring] [Pipeline Viewer] Remove obsolete code (#20122)

* Remove PipelineViewer component, replace with Config Viewer as index export.

* Remove tests for obsolete component.

* Remove obsolete code.

* Remove obsolete CSS.

* Remove old SVG class for graph edges.

* Remove more graph rendering code.

* Remove obsolete properties from graph classes.

* Remove unused constants.

* Remove obsolete keys from subtitle props.

* Fix broken unit tests.

x-pack/plugins/monitoring/common/constants.js

@@ -121,27 +121,6 @@ export const LOGSTASH = {
    * Constants used by Logstash Pipeline Viewer code
    */
   PIPELINE_VIEWER: {
-    GRAPH: {
-      EDGES: {
-        SVG_CLASS: 'lspvEdge',
-        LABEL_RADIUS: 8,
-        // This is something we may play with later.
-        // 1 seems to be the best value however, without it the edges sometimes make weird loops in complex graphs
-        ROUTING_MARGIN_PX: 1,
-        ARROW_START: 5
-      },
-      VERTICES: {
-        BORDER_RADIUS_PX: 4,
-        MARGIN_PX: 35,
-        WIDTH_PX: 320,
-        HEIGHT_PX: 85,
-
-        /**
-         * Vertical distance between vertices, as measured from top-border-to-top-border
-         */
-        VERTICAL_DISTANCE_PX: 20
-      }
-    },
     ICON: {
       HEIGHT_PX: 18,
       WIDTH_PX: 18

x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/index.js

@@ -4,77 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import { ColaGraph } from './views/cola_graph';
-import { DetailDrawer } from './views/detail_drawer';
-import { PropTypes } from 'prop-types';
-
-export class PipelineViewer extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      detailDrawer: {
-        vertex: null
-      }
-    };
-  }
-
-  onShowVertexDetails = (vertex) => {
-    if (vertex === this.state.detailDrawer.vertex) {
-      this.onHideVertexDetails();
-    }
-    else {
-      this.setState({
-        detailDrawer: {
-          vertex
-        }
-      });
-    }
-  }
-
-  onHideVertexDetails = () => {
-    this.setState({
-      detailDrawer: {
-        vertex: null
-      }
-    });
-  }
-
-  renderDetailDrawer = () => {
-    if (!this.state.detailDrawer.vertex) {
-      return null;
-    }
-
-    return (
-      <DetailDrawer
-        vertex={this.state.detailDrawer.vertex}
-        onHide={this.onHideVertexDetails}
-        timeseriesTooltipXValueFormatter={this.props.timeseriesTooltipXValueFormatter}
-      />
-    );
-  }
-
-  render() {
-    const graph = this.props.pipelineState.config.graph;
-
-    return (
-      <div className="lspvContainer">
-        <ColaGraph
-          graph={graph}
-          onShowVertexDetails={this.onShowVertexDetails}
-          detailVertex={this.state.detailDrawer.vertex}
-        />
-        { this.renderDetailDrawer() }
-      </div>
-    );
-  }
-}
-
-PipelineViewer.propTypes = {
-  pipelineState: PropTypes.shape({
-    config: PropTypes.shape({
-      graph: PropTypes.object.isRequired
-    })
-  }),
-  timeseriesTooltipXValueFormatter: PropTypes.func.isRequired
-};
+export { ConfigViewer } from './views/config_viewer';

x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/__tests__/boolean_edge.js

@@ -7,7 +7,6 @@
 import expect from 'expect.js';
 import { BooleanEdge } from '../boolean_edge';
 import { Edge } from '../edge';
-import { LOGSTASH } from '../../../../../../../common/constants';
 
 describe('BooleanEdge', () => {
   let graph;
@@ -32,10 +31,4 @@ describe('BooleanEdge', () => {
     const booleanEdge = new BooleanEdge(graph, edgeJson);
     expect(booleanEdge).to.be.a(Edge);
   });
-
-  it('should have the correct SVG CSS class', () => {
-    const booleanEdge = new BooleanEdge(graph, edgeJson);
-    const edgeSvgClass = LOGSTASH.PIPELINE_VIEWER.GRAPH.EDGES.SVG_CLASS;
-    expect(booleanEdge.svgClass).to.be(`${edgeSvgClass} ${edgeSvgClass}Boolean ${edgeSvgClass}Boolean--true`);
-  });
 });

x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/__tests__/edge.js

@@ -6,7 +6,6 @@
 
 import expect from 'expect.js';
 import { Edge } from '../edge';
-import { LOGSTASH } from '../../../../../../../common/constants';
 
 describe('Edge', () => {
   let graph;
@@ -26,20 +25,6 @@ describe('Edge', () => {
     };
   });
 
-  it('should initialize the webcola representation', () => {
-    const edge = new Edge(graph, edgeJson);
-    expect(edge.cola).to.eql({
-      edge: edge,
-      source: 'bar',
-      target: 17
-    });
-  });
-
-  it('should have a D3-friendly ID', () => {
-    const edge = new Edge(graph, edgeJson);
-    expect(edge.htmlAttrId).to.be('myif_myes');
-  });
-
   it('should have the correct from vertex', () => {
     const edge = new Edge(graph, edgeJson);
     expect(edge.fromId).to.be('myif');
@@ -51,9 +36,4 @@ describe('Edge', () => {
     expect(edge.toId).to.be('myes');
     expect(edge.to).to.be(graph.verticesById.myes);
   });
-
-  it('should have the correct SVG CSS class', () => {
-    const edge = new Edge(graph, edgeJson);
-    expect(edge.svgClass).to.be(LOGSTASH.PIPELINE_VIEWER.GRAPH.EDGES.SVG_CLASS);
-  });
 });

x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/graph/__tests__/edge_factory.js

@@ -6,7 +6,7 @@
 
 import expect from 'expect.js';
 import { edgeFactory } from '../edge_factory';
-import { PlainEdge } from '../plain_edge';
+import { Edge } from '../edge';
 import { BooleanEdge } from '../boolean_edge';
 
 describe('edgeFactory', () => {
@@ -27,9 +27,9 @@ describe('edgeFactory', () => {
     };
   });
 
-  it('returns a PlainEdge when edge type is plain', () => {
+  it('returns an Edge when edge type is plain', () => {
     edgeJson.type = 'plain';
-    expect(edgeFactory(graph, edgeJson)).to.be.a(PlainEdge);
+    expect(edgeFactory(graph, edgeJson)).to.be.a(Edge);
   });
 
   it('returns a BooleanEdge when edge type is boolean', () => {