[Pipeline Viewer] [Monitoring] Rename config view to PipelineViewer (#…

…20230) * Rename config view to PipelineViewer. * Remove unused className. * Remove unneeded variable. * Format file with prettier.
elastic · Jun 26, 2018 · 794caae · 794caae
1 parent 7b0c532
commit 794caae
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 143 deletions.
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/index.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/index.js
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { ConfigViewer } from './views/config_viewer';
+export { PipelineViewer } from './views';
diff --git a/...ws/config_viewer/collapsible_statement.js → ...ine_viewer/views/collapsible_statement.js b/...ws/config_viewer/collapsible_statement.js → ...ine_viewer/views/collapsible_statement.js
@@ -27,7 +27,7 @@ function renderStatementName(name, onVertexSelected) {
         onClick={onVertexSelected}
         flush="left"
       >
-        <span className="configViewer__conditional">{name}</span>
+        <span className="pipelineViewer__conditional">{name}</span>
       </EuiButtonEmpty>
     </EuiFlexItem>
   );
@@ -91,7 +91,7 @@ export function CollapsibleStatement(props) {
       responsive={false}
       gutterSize="none"
       alignItems="center"
-      className="configViewer__statement"
+      className="pipelineViewer__statement"
     >
       <EuiFlexItem
         key={id}

diff --git a/...eline_viewer/views/config_viewer/index.js → ...s/logstash/pipeline_viewer/views/index.js b/...eline_viewer/views/config_viewer/index.js → ...s/logstash/pipeline_viewer/views/index.js
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { ConfigViewer } from './config_viewer';
+export { PipelineViewer } from './pipeline_viewer';
diff --git a/...line_viewer/views/config_viewer/metric.js → .../logstash/pipeline_viewer/views/metric.js b/...line_viewer/views/config_viewer/metric.js → .../logstash/pipeline_viewer/views/metric.js
@@ -16,7 +16,7 @@ import classNames from 'classnames';
 export function Metric({ className, value, warning }) {
 
   const classes = classNames(
-    'configViewer__metric',
+    'pipelineViewer__metric',
     className,
   );
 
@@ -38,7 +38,7 @@ export function Metric({ className, value, warning }) {
   }
   return (
     <EuiFlexItem
-      className="configViewer__metricFlexItem"
+      className="pipelineViewer__metricFlexItem"
       grow={false}
     >
       {stylizedValue}

diff --git a/...ewer/views/config_viewer/config_viewer.js → .../pipeline_viewer/views/pipeline_viewer.js b/...ewer/views/config_viewer/config_viewer.js → .../pipeline_viewer/views/pipeline_viewer.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DetailDrawer } from '../detail_drawer';
+import { DetailDrawer } from './detail_drawer';
 import { Queue } from './queue';
 import { StatementSection } from './statement_section';
 import {
@@ -15,7 +15,7 @@ import {
   EuiPageContent,
 } from '@elastic/eui';
 
-export class ConfigViewer extends React.Component {
+export class PipelineViewer extends React.Component {
   constructor() {
     super();
     this.state = {
@@ -70,7 +70,7 @@ export class ConfigViewer extends React.Component {
 
     return (
       <EuiPage>
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" className="configViewer">
+        <EuiPageContent verticalPosition="center" horizontalPosition="center" className="pipelineViewer">
           <StatementSection
             iconType="logstashInput"
             headingText="Inputs"
@@ -103,7 +103,7 @@ export class ConfigViewer extends React.Component {
   }
 }
 
-ConfigViewer.propTypes = {
+PipelineViewer.propTypes = {
   pipeline: PropTypes.shape({
     inputs: PropTypes.array.isRequired,
     filters: PropTypes.array.isRequired,

diff --git a/...r/views/config_viewer/plugin_statement.js → ...pipeline_viewer/views/plugin_statement.js b/...r/views/config_viewer/plugin_statement.js → ...pipeline_viewer/views/plugin_statement.js
@@ -12,14 +12,14 @@ import {
   EuiFlexItem,
   EuiBadge,
 } from '@elastic/eui';
-import { formatMetric } from '../../../../../lib/format_number';
+import { formatMetric } from '../../../../lib/format_number';
 import { Metric } from './metric';
 
 function getInputStatementMetrics({ latestEventsPerSecond }) {
   return [(
     <Metric
       key="eventsEmitted"
-      className="configViewer__metric--eventsEmitted"
+      className="pipelineViewer__metric--eventsEmitted"
       value={formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted')}
     />
   )];
@@ -36,23 +36,23 @@ function getProcessorStatementMetrics(processorVertex) {
     (
       <Metric
         key="cpuMetric"
-        className="configViewer__metric--cpuTime"
+        className="pipelineViewer__metric--cpuTime"
         warning={processorVertex.isTimeConsuming()}
         value={formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false })}
       />
     ),
     (
       <Metric
         key="eventMillis"
-        className="configViewer__metric--eventMillis"
+        className="pipelineViewer__metric--eventMillis"
         warning={processorVertex.isSlow()}
         value={formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e')}
       />
     ),
     (
       <Metric
         key="eventsReceived"
-        className="configViewer__metric--events"
+        className="pipelineViewer__metric--events"
         value={formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received')}
       />
     )
@@ -83,7 +83,7 @@ export function PluginStatement({
       gutterSize="none"
       justifyContent="spaceBetween"
       alignItems="center"
-      className="configViewer__statement"
+      className="pipelineViewer__statement"
     >
       <EuiFlexItem grow={false}>
         <EuiFlexGroup
@@ -97,7 +97,7 @@ export function PluginStatement({
               color="primary"
               iconType="dot"
               flush="left"
-              className="configViewer__plugin"
+              className="pipelineViewer__plugin"
               onClick={onNameButtonClick}
             >
               <span>{name}</span>

diff --git a/...eline_viewer/views/config_viewer/queue.js → ...s/logstash/pipeline_viewer/views/queue.js b/...eline_viewer/views/config_viewer/queue.js → ...s/logstash/pipeline_viewer/views/queue.js
@@ -10,13 +10,13 @@ import { EuiSpacer, EuiText } from '@elastic/eui';
 
 export function Queue() {
   return (
-    <div className="configStatementList">
+    <div>
       <StatementListHeading
         iconType="logstashQueue"
         title="Queue"
       />
       <EuiSpacer size="s" />
-      <EuiText className="configViewer__queueMessage">
+      <EuiText className="pipelineViewer__queueMessage">
         Queue metrics not available
       </EuiText>
     </div>

diff --git a/...e_viewer/views/config_viewer/statement.js → ...gstash/pipeline_viewer/views/statement.js b/...e_viewer/views/config_viewer/statement.js → ...gstash/pipeline_viewer/views/statement.js
@@ -6,15 +6,15 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { PluginStatement as PluginStatementModel } from '../../models/pipeline/plugin_statement';
+import { PluginStatement as PluginStatementModel } from '../models/pipeline/plugin_statement';
 import { CollapsibleStatement } from './collapsible_statement';
-import { IfElement } from '../../models/list/if_element';
+import { IfElement } from '../models/list/if_element';
 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="configViewer__spacer" />);
+    spacers.push(<div key={`spacer_${i}`} className="pipelineViewer__spacer" />);
   }
   return spacers;
 }
@@ -56,8 +56,8 @@ export function Statement(props) {
   const { depth } = props.element;
 
   return (
-    <li className={`configViewer__listItem`}>
-      <div className="configViewer__spaceContainer">
+    <li className={`pipelineViewer__listItem`}>
+      <div className="pipelineViewer__spaceContainer">
         {renderNestingSpacers(depth)}
       </div>
       {renderStatement(props)}

diff --git a/...s/config_viewer/statement_list_heading.js → ...ne_viewer/views/statement_list_heading.js b/...s/config_viewer/statement_list_heading.js → ...ne_viewer/views/statement_list_heading.js
diff --git a/.../views/config_viewer/statement_section.js → ...ipeline_viewer/views/statement_section.js b/.../views/config_viewer/statement_section.js → ...ipeline_viewer/views/statement_section.js
@@ -19,7 +19,7 @@ export function StatementSection({
   if (!elements.length) { return null; }
 
   return (
-    <div className="configStatementList">
+    <div>
       <StatementListHeading
         iconType={iconType}
         title={headingText}
@@ -99,7 +99,7 @@ class StatementList extends React.PureComponent {
     const { elements } = this.props;
 
     return (
-      <ul className="configViewer__list">
+      <ul className="pipelineViewer__list">
         {
           elements.map(this.renderStatement)
         }

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
@@ -8,42 +8,40 @@ import React from 'react';
 import { render } from 'react-dom';
 import moment from 'moment';
 import { uiModules } from 'ui/modules';
-import { ConfigViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer';
+import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer';
 import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline';
 import { List } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/list';
 import { PipelineState } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline_state';
 
 const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => {
+uiModule.directive('monitoringLogstashPipelineViewer', $injector => {
   const config = $injector.get('config');
   const dateFormat = config.get('dateFormat');
 
-  const timeseriesTooltipXValueFormatter = xValue => moment(xValue).format(dateFormat);
+  const timeseriesTooltipXValueFormatter = xValue =>
+    moment(xValue).format(dateFormat);
 
   return {
     restrict: 'E',
     scope: {
-      pipeline: '='
+      pipeline: '=',
     },
-    link: function (scope, $el) {
+    link: (scope, $el) => {
       const pipelineState = new PipelineState(scope.pipeline);
 
-      scope.$watch('pipeline', (updatedPipeline) => {
+      scope.$watch('pipeline', updatedPipeline => {
         pipelineState.update(updatedPipeline);
-        const configViewer = (
-          <ConfigViewer
-            pipeline={
-              List.fromPipeline(
-                Pipeline.fromPipelineGraph(
-                  pipelineState.config.graph
-                )
-              )
-            }
+
+        render(
+          <PipelineViewer
+            pipeline={List.fromPipeline(
+              Pipeline.fromPipelineGraph(pipelineState.config.graph)
+            )}
             timeseriesTooltipXValueFormatter={timeseriesTooltipXValueFormatter}
-          />
+          />,
+          $el[0]
         );
-        render(configViewer, $el[0]);
       });
-    }
+    },
   };
 });
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