WIP modifying based on designer feedback.

elastic · May 10, 2018 · 10a8b17 · 10a8b17
1 parent 9a5f6c6
commit 10a8b17
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 66 deletions.
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
@@ -7,7 +7,6 @@
 
 
 import React from 'react';
-import { EuiPanel } from '@elastic/eui';
 
 import { DetailDrawer } from '../detail_drawer';
 
@@ -66,11 +65,9 @@ export class ConfigViewer extends React.Component {
 
     return (
       <div>
-        <EuiPanel className="configViewer">
-          {
-            getStatementListFromPipeline(pipeline, this.onShowVertexDetails).map(section => renderSection(section))
-          }
-        </EuiPanel>
+        {
+          getStatementListFromPipeline(pipeline, this.onShowVertexDetails).map(section => renderSection(section))
+        }
         { this.renderDetailDrawer() }
       </div>
     );

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
@@ -10,22 +10,27 @@ import React from 'react';
 import {
   EuiFlexItem,
   EuiFlexGroup,
+  EuiIcon,
   EuiPanel,
-  EuiSpacer,
+  EuiFlexGrid,
+  //EuiSpacer,
   EuiButtonEmpty
 } from '@elastic/eui';
 
 const StatementStatsList = ({ stats }) => (
   stats.map(({ value, isHighlighted }, index) => (
-    <EuiFlexItem
-      grow={false}
-      key={index}
-    >
-      <StatOverview
-        value={value}
-        isHighlighted={isHighlighted}
-      />
-    </EuiFlexItem>
+    <div>
+      <EuiFlexItem
+        grow={false}
+        key={index}
+        className="statement__stat"
+      >
+        <StatOverview
+          value={value}
+          isHighlighted={isHighlighted}
+        />
+      </EuiFlexItem>
+    </div>
   ))
 );
 
@@ -40,7 +45,7 @@ const getStatStyle = isHighlighted => (
 );
 
 const StatOverview = ({ value, isHighlighted }) => (
-  <span style={getStatStyle(isHighlighted)} >{value}</span>
+  <div style={getStatStyle(isHighlighted)} >{value}</div>
 );
 
 export const PluginStatement = ({ statement, stats, vertexSelected }) => (
@@ -50,45 +55,51 @@ export const PluginStatement = ({ statement, stats, vertexSelected }) => (
         className="statement__content"
         paddingSize="s"
       >
-        <EuiFlexGroup
-          alignItems="flexStart"
-          gutterSize="s"
-        >
-          <EuiFlexItem
-            grow={false}
-            style={{ padding: "0px", margin: "0px" }}
-          >
-            <EuiButtonEmpty
-              color="text"
-              flush="left"
-              onClick={vertexSelected}
-              size="xs"
-            >
-              <strong>{statement.name}</strong>
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          {
-            statement.hasExplicitId &&
-            <EuiFlexItem
-              grow={false}
-              style={{ paddingTop: "1px" }}
-            >
-              <span>
-                <em>{statement.id}</em>
-              </span>
+        <div>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup gutterSize="xs">
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <EuiIcon className="statement__dot" type="dot" />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    color="text"
+                    flush="left"
+                    onClick={vertexSelected}
+                    size="xs"
+                    className="statement__name"
+                  >
+                    <span className="statement__name">
+                      {statement.name}
+                    </span>
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  {
+                    statement.hasExplicitId &&
+                    <span className="statement__explicitId">
+                      {statement.id}
+                    </span>
+                  }
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {
+                stats &&
+                stats.length > 0 &&
+                <EuiFlexGrid>
+                  <StatementStatsList
+                    stats={stats}
+                  />
+                </EuiFlexGrid>
+              }
             </EuiFlexItem>
-          }
-        </EuiFlexGroup>
-        <EuiSpacer size="s" />
-        {
-          stats &&
-          stats.length > 0 &&
-          <EuiFlexGroup>
-            <StatementStatsList
-              stats={stats}
-            />
           </EuiFlexGroup>
-        }
+        </div>
       </EuiPanel>
     </div>
   </li>

diff --git a/...oring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js b/...oring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js
@@ -10,7 +10,7 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiHorizontalRule,
+  // EuiHorizontalRule,
   EuiIcon,
   EuiPanel,
   EuiSpacer,
@@ -20,7 +20,7 @@ import {
 const StatementSection = ({ headerText, icon, children }) => (
   <EuiPanel
     paddingSize="s"
-    hasShadow
+    className="statementSection"
   >
     <EuiFlexGroup style={{ marginBottom: "2px" }}>
       <EuiFlexItem grow={false}>
@@ -32,7 +32,6 @@ const StatementSection = ({ headerText, icon, children }) => (
         </EuiTitle>
       </EuiFlexItem>
     </EuiFlexGroup>
-    <EuiHorizontalRule margin="none" />
     <ul>
       {
         children

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
@@ -1,23 +1,52 @@
-.configViewer {
-  background-color: #efefef;
-}
-
 .ifPill__condition {
   margin-top: 5px;
 }
 
 .statement__content {
-  min-width: 190px;
-  max-width: 400px;
-  max-height: 320px;
+  border: none;
+  box-shadow: none;
+  //min-width: 190px;
+  //max-width: 400px;
+  //max-height: 320px;
+}
+
+.statement__dot {
+  color: green;
+  margin-top: 5px;
+}
+
+.statement__name {
+  color: green;
+  font-weight: bold;
+  margin-top: 0px;
+}
+
+.statement__explicitId {
+  font-weight: bold;
+  background-color: #d0d0d0;
+  padding: 4px;
+  border-radius: 2px;
+  margin-top: 2px;
+}
+
+.statement__stat {
+  text-align: right;
+  margin-left: 15px;
+  min-width: 150px;
 }
 
 .ifChildren {
   border-left: 1px dashed #D0D0D0;
   padding-left: 8px;
-  margin: 8px 0px 8px 0px;
+  margin-left: 12px;
 }
 
 .statement {
-  margin-top: 10px;
+  border: none;
+  // margin-top: 10px;
+}
+
+.statementSection {
+  border: none;
+  box-shadow: none;
 }