Design cleanup for pipeline viewer

src/ui/public/styles/variables/colors.less

@@ -17,6 +17,8 @@
 @globalColorTeal: #00A69B;
 @globalColorOrange: #E5830E;
 @globalColorPurple: #7800A6;
+@globalColorSlightHue: #909AA1;
+@globalColorFocus: #e6f2f6;
 
 //## Gray and brand colors for use across Bootstrap.
 

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

@@ -25,9 +25,9 @@ function renderStatementName(name, onVertexSelected) {
         color="text"
         size="xs"
         onClick={onVertexSelected}
-        className="cv-ifElseStatement__title"
+        flush="left"
       >
-        <span className="cv-ifElseStatement__name">{name}</span>
+        <span className="configViewer__conditional">{name}</span>
       </EuiButtonEmpty>
     </EuiFlexItem>
   );
@@ -45,7 +45,6 @@ function renderIfStatement({ condition }, onVertexSelected) {
           fontSize="s"
           paddingSize="none"
           transparentBackground={true}
-          className="cv-ifStatement__condition"
         >
           {condition}
         </EuiCodeBlock>
@@ -88,14 +87,18 @@ export function CollapsibleStatement(props) {
   };
 
   return (
-    <EuiFlexGroup responsive={false} gutterSize="xs">
+    <EuiFlexGroup
+      responsive={false}
+      gutterSize="none"
+      alignItems="center"
+      className="configViewer__statement"
+    >
       <EuiFlexItem
         key={id}
         grow={false}
       >
         <EuiButtonIcon
           aria-label
-          className="cv-ifElseStatement__toggle"
           color="text"
           iconType={getToggleIconType(isCollapsed)}
           onClick={toggleClicked}

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

@@ -9,6 +9,11 @@ import PropTypes from 'prop-types';
 import { DetailDrawer } from '../detail_drawer';
 import { Queue } from './queue';
 import { StatementSection } from './statement_section';
+import {
+  EuiSpacer,
+  EuiPage,
+  EuiPageContent,
+} from '@elastic/eui';
 
 export class ConfigViewer extends React.Component {
   constructor() {
@@ -64,31 +69,36 @@ export class ConfigViewer extends React.Component {
     } = this.props.pipeline;
 
     return (
-      <div>
-        <StatementSection
-          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>
+      <EuiPage>
+        <EuiPageContent verticalPosition="center" horizontalPosition="center" className="configViewer">
+          <StatementSection
+            iconType="logstashInput"
+            headingText="Inputs"
+            elements={inputs}
+            onShowVertexDetails={this.onShowVertexDetails}
+            detailVertex={this.state.detailDrawer.vertex}
+          />
+          <EuiSpacer />
+          <Queue queue={queue} />
+          <EuiSpacer />
+          <StatementSection
+            iconType="logstashFilter"
+            headingText="Filters"
+            elements={filters}
+            onShowVertexDetails={this.onShowVertexDetails}
+            detailVertex={this.state.detailDrawer.vertex}
+          />
+          <EuiSpacer />
+          <StatementSection
+            iconType="logstashOutput"
+            headingText="Outputs"
+            elements={outputs}
+            onShowVertexDetails={this.onShowVertexDetails}
+            detailVertex={this.state.detailDrawer.vertex}
+          />
+          { this.renderDetailDrawer() }
+        </EuiPageContent>
+      </EuiPage>
     );
   }
 }

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

@@ -6,17 +6,42 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexItem } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiBadge,
+  EuiText,
+} from '@elastic/eui';
+import classNames from 'classnames';
 
-export function Metric({ className, value }) {
+export function Metric({ className, value, warning }) {
+
+  const classes = classNames(
+    'configViewer__metric',
+    className,
+  );
+
+  let stylizedValue;
+  if (warning) {
+    stylizedValue = (
+      <EuiBadge color="warning" classname={className}>
+        {value}
+      </EuiBadge>
+    );
+  } else {
+    stylizedValue = (
+      <EuiText size="s" color="subdued" className={classes}>
+        <span>
+          {value}
+        </span>
+      </EuiText>
+    );
+  }
   return (
     <EuiFlexItem
+      className="configViewer__metricFlexItem"
       grow={false}
-      className={"cv-pluginStatement__metricContainer"}
     >
-      <div className={className}>
-        {value}
-      </div>
+      {stylizedValue}
     </EuiFlexItem>
   );
 }

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

@@ -10,7 +10,7 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiIcon,
+  EuiBadge,
 } from '@elastic/eui';
 import { formatMetric } from '../../../../../lib/format_number';
 import { Metric } from './metric';
@@ -19,7 +19,7 @@ function getInputStatementMetrics({ latestEventsPerSecond }) {
   return [(
     <Metric
       key="eventsEmitted"
-      className="cv-inputMetric__eventsEmitted"
+      className="configViewer__metric--eventsEmitted"
       value={formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted')}
     />
   )];
@@ -32,28 +32,27 @@ function getProcessorStatementMetrics(processorVertex) {
     percentOfTotalProcessorTime,
   } = processorVertex;
 
-  const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorMetric__cpuTimeHighlight' : '';
-  const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorMetric__eventMillis' : '';
-
   return [
     (
       <Metric
         key="cpuMetric"
-        className={`cv-processorMetric__cpuTime ${cpuHighlight}`}
+        className="configViewer__metric--cpuTime"
+        warning={processorVertex.isTimeConsuming()}
         value={formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false })}
       />
     ),
     (
       <Metric
         key="eventMillis"
-        className={`cv-processorMetric__eventMillis ${eventMillisHighlight}`}
+        className="configViewer__metric--eventMillis"
+        warning={processorVertex.isSlow()}
         value={formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e')}
       />
     ),
     (
       <Metric
         key="eventsReceived"
-        className="cv-processorMetric__events"
+        className="configViewer__metric--events"
         value={formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received')}
       />
     )
@@ -80,58 +79,54 @@ export function PluginStatement({
   const onNameButtonClick = () => { onShowVertexDetails(vertex); };
 
   return (
-    <div className="cv-statement">
-      <EuiFlexGroup
-        gutterSize="none"
-        justifyContent="spaceBetween"
-      >
-        <EuiFlexItem grow={false}>
-          <EuiFlexGroup
-            gutterSize="s"
-            responsive={false}
-          >
-            <EuiFlexItem
-              grow={false}
-              className="cv-pluginStatement__icon"
+    <EuiFlexGroup
+      gutterSize="none"
+      justifyContent="spaceBetween"
+      alignItems="center"
+      className="configViewer__statement"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup
+          gutterSize="xs"
+          responsive={false}
+          alignItems="center"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              size="xs"
+              color="primary"
+              iconType="dot"
+              flush="left"
+              className="configViewer__plugin"
+              onClick={onNameButtonClick}
             >
-              <EuiIcon
-                type="dot"
-                className="cv-statement__icon"
-              />
-            </EuiFlexItem>
+              <span>{name}</span>
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          {
+            hasExplicitId &&
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                flush="left"
-                size="xs"
-                className="cv-statement__name"
+              <EuiBadge
                 onClick={onNameButtonClick}
+                onClickAriaLabel="View details"
               >
-                <span>{name}</span>
-              </EuiButtonEmpty>
+                {id}
+              </EuiBadge>
             </EuiFlexItem>
-            {
-              hasExplicitId &&
-              <EuiFlexItem grow={false}>
-                <div className="cv-statement__id">
-                  {id}
-                </div>
-              </EuiFlexItem>
-            }
+          }
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      {
+        statementMetrics &&
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            gutterSize="s"
+          >
+            {statementMetrics}
           </EuiFlexGroup>
         </EuiFlexItem>
-        {
-          statementMetrics &&
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup
-              gutterSize="none"
-              style={{ marginRight: '0px' }}
-            >
-              {statementMetrics}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        }
-      </EuiFlexGroup>
-    </div>
+      }
+    </EuiFlexGroup>
   );
 }
 

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

@@ -6,17 +6,19 @@
 
 import React from 'react';
 import { StatementListHeading } from './statement_list_heading';
+import { EuiSpacer, EuiText } from '@elastic/eui';
 
 export function Queue() {
   return (
-    <div className="cv-statementList">
+    <div className="configStatementList">
       <StatementListHeading
         iconType="logstashQueue"
         title="Queue"
       />
-      <div className="cv-queue__messageText">
+      <EuiSpacer size="s" />
+      <EuiText className="configViewer__queueMessage">
         Queue metrics not available
-      </div>
+      </EuiText>
     </div>
   );
 }

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

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup } from '@elastic/eui';
 import { PluginStatement as PluginStatementModel } from '../../models/pipeline/plugin_statement';
 import { CollapsibleStatement } from './collapsible_statement';
 import { IfElement } from '../../models/list/if_element';
@@ -15,7 +14,7 @@ import { PluginStatement } from './plugin_statement';
 function renderNestingSpacers(depth) {
   const spacers = [];
   for (let i = 0; i < depth; i += 1) {
-    spacers.push(<div key={`spacer_${i}`} className="cv-spacer" />);
+    spacers.push(<div key={`spacer_${i}`} className="configViewer__spacer" />);
   }
   return spacers;
 }
@@ -53,28 +52,15 @@ function renderStatement({
   );
 }
 
-function getTopLevelStatementPadding(depth) {
-  return depth === 0
-    ? { paddingLeft: '0px' }
-    : null;
-}
-
 export function Statement(props) {
   const { depth } = props.element;
 
   return (
-    <li className="cv-list">
-      <div className="cv-spaceContainer">
+    <li className={`configViewer__listItem`}>
+      <div className="configViewer__spaceContainer">
         {renderNestingSpacers(depth)}
       </div>
-      <EuiFlexGroup gutterSize="none">
-        <div
-          className="cv-statement__content"
-          style={getTopLevelStatementPadding(depth)}
-        >
-          {renderStatement(props)}
-        </div>
-      </EuiFlexGroup>
+      {renderStatement(props)}
     </li>
   );
 }