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

* Rename config view to PipelineViewer.

* Remove unused className.

* Remove unneeded variable.

* Format file with prettier.

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';

x-pack/plugins/monitoring/public/components/logstash/pipeline_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}

x-pack/plugins/monitoring/public/components/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';

x-pack/plugins/monitoring/public/components/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}

x-pack/plugins/monitoring/public/components/logstash/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,

x-pack/plugins/monitoring/public/components/logstash/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,7 +36,7 @@ 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 })}
       />
@@ -44,7 +44,7 @@ function getProcessorStatementMetrics(processorVertex) {
     (
       <Metric
         key="eventMillis"
-        className="configViewer__metric--eventMillis"
+        className="pipelineViewer__metric--eventMillis"
         warning={processorVertex.isSlow()}
         value={formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e')}
       />
@@ -52,7 +52,7 @@ function getProcessorStatementMetrics(processorVertex) {
     (
       <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>

x-pack/plugins/monitoring/public/components/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>

x-pack/plugins/monitoring/public/components/logstash/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)}

x-pack/plugins/monitoring/public/components/logstash/pipeline_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)
         }

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]);
       });
-    }
+    },
   };
 });

x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less

@@ -1,98 +0,0 @@
-@import (reference) '~ui/styles/variables/colors';
-
-monitoring-main[page="pipeline"] {
-  background: @globalColorLightestGray;
-  min-height: 100vh;
-}
-
-.configViewer {
-  max-width: 1000px;
-}
-
-.configViewer__statement {
-  padding-left: 12px;
-}
-
-.configViewer__plugin {
-  margin-left: 4px;
-}
-
-.configViewer__spaceContainer {
-  background-color: white;
-  align-self: stretch;
-  display: flex;
-  // Separates the left border spaces properly
-  border-bottom: solid 2px white;
-}
-
-.configViewer__spacer {
-  width: 12px;
-  align-self: stretch;
-  margin-left: 12px;
-  border-left: 1px @globalColorMediumGray dashed;
-
-  // This allows the border to be flush
-  &:last-child {
-    width: 0px;
-  }
-
-  &:first-child {
-    // Odd number is because of the single pixel border.
-    margin-left: 23px;
-  }
-}
-
-.configViewer__metric {
-  text-align: right;
-
-  &--cputTime {
-    width: 40px;
-  }
-
-  &--events, &--eventsEmitted {
-    width: 160px;
-  }
-
-  &--eventMillis {
-    width: 80px;
-  }
-}
-
-.configViewer__queueMessage {
-  margin-left: 24px;
-  color: @globalColorDarkGray;
-}
-
-.configViewer__list {
-  .configViewer__listItem {
-    display: flex;
-    min-height: 32px;
-    align-items: center;
-    padding-right: 12px;
-
-    &:nth-child(2n+1) {
-      background: #fafafa;
-    }
-  }
-}
-
-.configViewer__conditional {
-  font-weight: bold;
-}
-
-@media (max-width: 768px) {
-  .configViewer {
-    .configViewer__spacer {
-      border: none;
-    }
-
-    .configViewer__metricFlexItem {
-      margin-bottom: 4px !important;
-    }
-
-    .configViewer__metric {
-      text-align: left;
-      padding-left: 32px;
-    }
-  }
-}

x-pack/plugins/monitoring/public/less/components/logstash/pipeline_viewer.less

@@ -1,3 +1,103 @@
+@import (reference) '~ui/styles/variables/colors';
+
+monitoring-main[page="pipeline"] {
+  background: @globalColorLightestGray;
+  min-height: 100vh;
+}
+
+.pipelineViewer {
+  max-width: 1000px;
+}
+
+.pipelineViewer__statement {
+  padding-left: 12px;
+}
+
+.pipelineViewer__plugin {
+  margin-left: 4px;
+}
+
+.pipelineViewer__spaceContainer {
+  background-color: white;
+  align-self: stretch;
+  display: flex;
+  // Separates the left border spaces properly
+  border-bottom: solid 2px white;
+}
+
+.pipelineViewer__spacer {
+  width: 12px;
+  align-self: stretch;
+  margin-left: 12px;
+  border-left: 1px @globalColorMediumGray dashed;
+
+  // This allows the border to be flush
+  &:last-child {
+    width: 0px;
+  }
+
+  &:first-child {
+    // Odd number is because of the single pixel border.
+    margin-left: 23px;
+  }
+}
+
+.pipelineViewer__metric {
+  text-align: right;
+
+  &--cpuTime {
+    width: 40px;
+  }
+
+  &--events, &--eventsEmitted {
+    width: 160px;
+  }
+
+  &--eventMillis {
+    width: 80px;
+  }
+}
+
+.pipelineViewer__queueMessage {
+  margin-left: 24px;
+  color: @globalColorDarkGray;
+}
+
+.pipelineViewer__list {
+  .pipelineViewer__listItem {
+    display: flex;
+    min-height: 32px;
+    align-items: center;
+    padding-right: 12px;
+
+    &:nth-child(2n+1) {
+      background: #fafafa;
+    }
+  }
+}
+
+.pipelineViewer__conditional {
+  font-weight: bold;
+}
+
+@media (max-width: 768px) {
+  .pipelineViewer {
+    .pipelineViewer__spacer {
+      border: none;
+    }
+
+    .pipelineViewer__metricFlexItem {
+      margin-bottom: 4px !important;
+    }
+
+    .pipelineViewer__metric {
+      text-align: left;
+      padding-left: 32px;
+    }
+  }
+}
+
+
 .monitoring-summary-status {
   border-bottom: 1px solid #d4d4d4;
 }

x-pack/plugins/monitoring/public/less/main.less

@@ -11,7 +11,6 @@
 @import './components/chart';
 @import './components/sparkline';
 @import './components/status_icon';
-@import './components/logstash/config_viewer';
 @import './components/logstash/pipeline_viewer';
 @import './components/logstash/pipeline_card_group';
 @import './components/logstash/beta_icon';