[Pipeline Viewer] Refactor collapsible statement component to wrap props.children (#20252)

* Rename config view to PipelineViewer.

* Decouple CollapsibleStatement from if/else using props.children.

* Modify function to take params instead of single object.

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

@@ -8,64 +8,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  EuiButtonEmpty,
   EuiButtonIcon,
-  EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem
 } from '@elastic/eui';
 
-function renderStatementName(name, onVertexSelected) {
-  return (
-    <EuiFlexItem
-      grow={false}
-      key="statementName"
-    >
-      <EuiButtonEmpty
-        color="text"
-        size="xs"
-        onClick={onVertexSelected}
-        flush="left"
-      >
-        <span className="pipelineViewer__conditional">{name}</span>
-      </EuiButtonEmpty>
-    </EuiFlexItem>
-  );
-}
-
-function renderIfStatement({ condition }, onVertexSelected) {
-  return [
-    renderStatementName('if', onVertexSelected),
-    (
-      <EuiFlexItem
-        key="ifContent"
-        grow={false}
-      >
-        <EuiCodeBlock
-          fontSize="s"
-          paddingSize="none"
-          transparentBackground={true}
-        >
-          {condition}
-        </EuiCodeBlock>
-      </EuiFlexItem>
-    )
-  ];
-}
-
-function getStatementBody({
-  isIf,
-  statement,
-  statement: { vertex },
-  onShowVertexDetails
-}) {
-  const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); };
-
-  return isIf
-    ? renderIfStatement(statement, showVertexDetailsClicked)
-    : renderStatementName('else', showVertexDetailsClicked);
-}
-
 function getToggleIconType(isCollapsed) {
   return isCollapsed ? 'arrowRight' : 'arrowDown';
 }
@@ -105,7 +52,7 @@ export function CollapsibleStatement(props) {
           size="s"
         />
       </EuiFlexItem>
-      {getStatementBody(props)}
+      {props.children}
     </EuiFlexGroup>
   );
 }
@@ -114,8 +61,5 @@ CollapsibleStatement.propTypes = {
   collapse: PropTypes.func.isRequired,
   expand: PropTypes.func.isRequired,
   id: PropTypes.string.isRequired,
-  isIf: PropTypes.bool.isRequired,
   isCollapsed: PropTypes.bool.isRequired,
-  onShowVertexDetails: PropTypes.func.isRequired,
-  statement: PropTypes.object.isRequired,
 };

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

@@ -6,11 +6,66 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiFlexItem } from '@elastic/eui';
 import { PluginStatement as PluginStatementModel } from '../models/pipeline/plugin_statement';
 import { CollapsibleStatement } from './collapsible_statement';
 import { IfElement } from '../models/list/if_element';
 import { PluginStatement } from './plugin_statement';
 
+function renderStatementName(name, onVertexSelected) {
+  return (
+    <EuiFlexItem
+      grow={false}
+      key="statementName"
+    >
+      <EuiButtonEmpty
+        color="text"
+        size="xs"
+        onClick={onVertexSelected}
+        flush="left"
+      >
+        <span className="pipelineViewer__conditional">{name}</span>
+      </EuiButtonEmpty>
+    </EuiFlexItem>
+  );
+}
+
+function renderIfStatement({ condition }, onVertexSelected) {
+  return [
+    renderStatementName('if', onVertexSelected),
+    (
+      <EuiFlexItem
+        key="ifContent"
+        grow={false}
+      >
+        <EuiCodeBlock
+          fontSize="s"
+          paddingSize="none"
+          transparentBackground={true}
+        >
+          {condition}
+        </EuiCodeBlock>
+      </EuiFlexItem>
+    )
+  ];
+}
+
+function getStatementBody(
+  isIf,
+  statement,
+  vertex,
+  onShowVertexDetails
+) {
+  const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); };
+
+  return isIf
+    ? renderIfStatement(statement, showVertexDetailsClicked)
+    : renderStatementName('else', showVertexDetailsClicked);
+}
+
 function renderNestingSpacers(depth) {
   const spacers = [];
   for (let i = 0; i < depth; i += 1) {
@@ -25,6 +80,7 @@ function renderStatement({
   element: {
     id,
     statement,
+    statement: { vertex }
   },
   expand,
   isCollapsed,
@@ -39,16 +95,22 @@ function renderStatement({
     );
   }
 
+  const statementBody = getStatementBody(
+    element instanceof IfElement,
+    statement,
+    vertex,
+    onShowVertexDetails
+  );
+
   return (
     <CollapsibleStatement
       expand={expand}
       collapse={collapse}
-      statement={statement}
-      isIf={element instanceof IfElement}
       isCollapsed={isCollapsed}
       id={id}
-      onShowVertexDetails={onShowVertexDetails}
-    />
+    >
+      {statementBody}
+    </CollapsibleStatement>
   );
 }