WIP checkin. Modify components to handle flattened object list.

elastic · May 18, 2018 · a6ae20b · a6ae20b
1 parent 999c1b0
commit a6ae20b
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 20 deletions.
diff --git a/...plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js b/...plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js
@@ -58,9 +58,24 @@ function getQueue(pipelineGraph) {
 }
 
 function getOutputStatements(pipelineGraph) {
-  return pipelineGraph.getVertices()
-    .filter(v => (v.pipelineStage === 'output') && !v.incomingVertices.some(p => p.pipelineStage === 'output'))
+  const vertices = pipelineGraph.getVertices()
+    .filter(v => (v.pipelineStage === 'output') && !v.incomingVertices.some(p => p.pipelineStage === 'output'));
+  const ret = vertices
     .map(v => makeStatement(v, 'output'));
+
+  // console.log(pipelineGraph.getVertices());
+  // console.log(vertices);
+  // console.log(ret[2]);
+  // console.log(Object.keys(ret[2]));
+  // console.log(ret[2].allTrueVertices);
+
+  // const allTrue = vertices[2].allTrueVertices;
+  // console.log(allTrue);
+  // console.log(allTrue[0]);
+
+  //console.log(vertices[2].allTrueVertices);
+
+  return ret;
 }
 
 export class Pipeline {

diff --git a/...toring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/...toring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js
@@ -48,15 +48,18 @@ const StatOverview = ({ value, isHighlighted }) => (
   <div style={getStatStyle(isHighlighted)} >{value}</div>
 );
 
-export const PluginStatement = ({ statement, stats, vertexSelected }) => (
-  <li className="statement">
+export const PluginStatement = ({ statement, stats, vertexSelected, isEvenChild }) => (
+  <li className={`statement ${isEvenChild ? 'evenStatement' : ''}`}>
     <div>
       <EuiPanel
-        className="statement__content"
+        className="statement__body"
         paddingSize="s"
       >
         <div>
-          <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
+            className="statement__content"
+          >
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="xs">
                 <EuiFlexItem
@@ -91,7 +94,9 @@ export const PluginStatement = ({ statement, stats, vertexSelected }) => (
               {
                 stats &&
                 stats.length > 0 &&
-                <EuiFlexGrid>
+                <EuiFlexGrid
+                  gutterSize="none"
+                >
                   <StatementStatsList
                     stats={stats}
                   />

diff --git a/...lugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js b/...lugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js
@@ -4,20 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-
-
 import React from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel
-} from '@elastic/eui';
-
-export const Queue = ({ vertexSelected }) => (
+export const Queue = () => (
   <li className="statement">
     <div>
-      <EuiPanel
+      Queue stats not available
+      {/* <EuiPanel
         className="statement__content"
         paddingSize="s"
         onClick={vertexSelected}
@@ -27,7 +20,7 @@ export const Queue = ({ vertexSelected }) => (
             <strong>Queue</strong>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiPanel>
+      </EuiPanel> */}
     </div>
   </li>
 );
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
@@ -42,7 +42,7 @@ const getDefaultStats = ({ pluginType, vertex }) => {
   return [];
 };
 
-export const Statement = ({ isLast, statement, vertexSelected }) => {
+export const Statement = ({ isLast, statement, vertexSelected, isEvenChild }) => {
   const klass = statement.constructor.name;
   const { vertex } = statement;
 
@@ -65,6 +65,7 @@ export const Statement = ({ isLast, statement, vertexSelected }) => {
           stats={getDefaultStats(statement)}
           vertexSelected={handler}
           isLast={isLast}
+          isEvenChild={isEvenChild}
         />
       );
     case 'Queue':

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
@@ -16,6 +16,7 @@ const StatementList = ({ statements, vertexSelected }) => (
       statement={statement}
       key={statement.id}
       isTop={true}
+      isEvenChild={index + 1 % 2 === 0}
       isLast={statements.length === index + 1}
       vertexSelected={vertexSelected}
     />

diff --git a/x-pack/plugins/monitoring/public/directives/logstash/pipeline_viewer/index.js b/x-pack/plugins/monitoring/public/directives/logstash/pipeline_viewer/index.js
@@ -32,6 +32,7 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => {
         pipelineState.update(updatedPipeline);
 
         const configModel = Pipeline.fromPipelineGraph(pipelineState.config.graph);
+
         const configViewer = (
           <ConfigViewer
             pipeline={configModel}

diff --git a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less
@@ -2,14 +2,19 @@
   margin-top: 5px;
 }
 
-.statement__content {
+.statement__body {
   border: none;
   box-shadow: none;
+  background: transparent;
   //min-width: 190px;
   //max-width: 400px;
   //max-height: 320px;
 }
 
+// .statement__content {
+//   background-color: none;
+// }
+
 .statement__dot {
   color: green;
   margin-top: 5px;
@@ -43,9 +48,14 @@
 
 .statement {
   border: none;
+  margin-bottom: 8px;
   // margin-top: 10px;
 }
 
+.evenStatement {
+  background-color: #D5D5D5;
+}
+
 .statementSection {
   border: none;
   box-shadow: none;