Add DetailDrawer support.

elastic · May 23, 2018 · 522a6b9 · 522a6b9
1 parent c288084
commit 522a6b9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/...g/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js b/...g/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js
@@ -14,25 +14,26 @@ import {
   EuiFlexGroup
 } from '@elastic/eui';
 
-function clickableStatementName(name) {
+function clickableStatementName(name, onVertexSelected) {
   return (
     <EuiFlexItem
       grow={false}
     >
       <EuiButtonEmpty
         color="text"
         size="xs"
+        onClick={onVertexSelected}
       >
         <span className="cv-ifStatement__title">{name}</span>
       </EuiButtonEmpty>
     </EuiFlexItem>
   );
 }
 
-function ifStatement(statement) {
+function ifStatement(statement, onVertexSelected) {
   const { condition } = statement;
   return [
-    clickableStatementName('if'),
+    clickableStatementName('if', onVertexSelected),
     (
       <EuiFlexItem grow={false}>
         <EuiCodeBlock
@@ -78,12 +79,17 @@ export class CollapsibleStatement extends React.PureComponent {
   getStatementBody() {
     const {
       isIf,
-      statement
+      statement,
+      onShowVertexDetails
     } = this.props;
 
+    const { vertex } = statement;
+
+    const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); };
+
     return isIf ?
-      ifStatement(statement)
-      : clickableStatementName('else');
+      ifStatement(statement, showVertexDetailsClicked)
+      : clickableStatementName('else', showVertexDetailsClicked);
   }
 
   render() {

diff --git a/...onitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js b/...onitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js
@@ -73,17 +73,23 @@ export class ConfigViewer extends React.Component {
           iconType="logstashInput"
           headingText="Inputs"
           elements={inputs}
+          onShowVertexDetails={this.onShowVertexDetails}
+          detailVertex={this.state.detailDrawer.vertex}
         />
         <Queue queue={queue} />
         <StatementSection
           iconType="logstashFilter"
           headingText="Filters"
           elements={filters}
+          onShowVertexDetails={this.onShowVertexDetails}
+          detailVertex={this.state.detailDrawer.vertex}
         />
         <StatementSection
           iconType="logstashOutput"
           headingText="Outputs"
           elements={outputs}
+          onShowVertexDetails={this.onShowVertexDetails}
+          detailVertex={this.state.detailDrawer.vertex}
         />
         { this.renderDetailDrawer() }
       </div>

diff --git a/...ns/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js b/...ns/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js
@@ -90,11 +90,12 @@ import {
 //   }
 // };
 
-function pluginStatement(statement) {
+function pluginStatement(statement, onShowVertexDetails) {
   const {
     hasExplicitId,
     id,
     name,
+    vertex,
   } = statement;
   return (
     <div className="cv-statement">
@@ -116,6 +117,7 @@ function pluginStatement(statement) {
             flush="left"
             size="xs"
             className="cv-statement__name"
+            onClick={() => { onShowVertexDetails(vertex); }}
           >
             <span>{name}</span>
           </EuiButtonEmpty>
@@ -148,14 +150,16 @@ export class Statement extends React.PureComponent
       collapse,
       element,
       expand,
-      isCollapsed
+      isCollapsed,
+      onShowVertexDetails
     } = this.props;
     const { id } = element;
 
     const isIf = element instanceof IfElement;
 
+    console.log(onShowVertexDetails);
     return statement instanceof PluginStatement
-      ? pluginStatement(statement)
+      ? pluginStatement(statement, onShowVertexDetails)
       :
       (
         <CollapsibleStatement
@@ -165,6 +169,7 @@ export class Statement extends React.PureComponent
           isIf={isIf}
           isCollapsed={isCollapsed}
           id={id}
+          onShowVertexDetails={onShowVertexDetails}
         />
       );
   }
@@ -176,6 +181,7 @@ export class Statement extends React.PureComponent
       statement
     } = this.props.element;
 
+    console.log(this.props);
     const spacers = this.getNestingSpacers(depth);
 
     const statementComponent = this.getStatement(statement);

diff --git a/...nitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/...nitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js
@@ -30,14 +30,17 @@ import { Statement } from './statement';
 //   );
 // }
 
-export function StatementSection({ iconType, headingText, elements }) {
+export function StatementSection({ iconType, headingText, elements, onShowVertexDetails }) {
   return (
     <div className="cv-statementList">
       <StatementListHeading
         iconType={iconType}
         title={headingText}
       />
-      <StatementList elements={elements} />
+      <StatementList
+        elements={elements}
+        onShowVertexDetails={onShowVertexDetails}
+      />
     </div>
   );
 }
@@ -138,6 +141,7 @@ class StatementList extends React.PureComponent {
 
   getStatement(element) {
     const { id, parentId } = element;
+    const { onShowVertexDetails } = this.props;
 
     return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) ?
       null
@@ -149,6 +153,7 @@ class StatementList extends React.PureComponent {
           collapse={this.collapse}
           expand={this.expand}
           isCollapsed={this.elementIsCollapsed(id)}
+          onShowVertexDetails={onShowVertexDetails}
         />
       );
   }