From 794caaea8effe1e4a80d47d64e7520ce6412a52f Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 26 Jun 2018 18:59:18 -0400 Subject: [PATCH] [Pipeline Viewer] [Monitoring] Rename config view to PipelineViewer (#20230) * Rename config view to PipelineViewer. * Remove unused className. * Remove unneeded variable. * Format file with prettier. --- .../logstash/pipeline_viewer/index.js | 2 +- .../collapsible_statement.js | 4 +- .../views/{config_viewer => }/index.js | 2 +- .../views/{config_viewer => }/metric.js | 4 +- .../config_viewer.js => pipeline_viewer.js} | 8 +- .../{config_viewer => }/plugin_statement.js | 14 +-- .../views/{config_viewer => }/queue.js | 4 +- .../views/{config_viewer => }/statement.js | 10 +- .../statement_list_heading.js | 0 .../{config_viewer => }/statement_section.js | 4 +- .../logstash/pipeline_viewer/index.js | 34 +++--- .../components/logstash/config_viewer.less | 98 ----------------- .../components/logstash/pipeline_viewer.less | 100 ++++++++++++++++++ .../plugins/monitoring/public/less/main.less | 1 - 14 files changed, 142 insertions(+), 143 deletions(-) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/collapsible_statement.js (95%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/index.js (82%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/metric.js (93%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer/config_viewer.js => pipeline_viewer.js} (93%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/plugin_statement.js (90%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/queue.js (86%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/statement.js (83%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/statement_list_heading.js (100%) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/{config_viewer => }/statement_section.js (97%) delete mode 100644 x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less 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 index df041e4edfaef..556cbc80c9ebc 100644 --- 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/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js similarity index 95% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/collapsible_statement.js index 106e7de43d40b..2e8bcb4423b7f 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js +++ b/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" > - {name} + {name} ); @@ -91,7 +91,7 @@ export function CollapsibleStatement(props) { responsive={false} gutterSize="none" alignItems="center" - className="configViewer__statement" + className="pipelineViewer__statement" > {stylizedValue} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js similarity index 93% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/pipeline_viewer.js index 417f76da5f084..e2b53a1ed0c81 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js +++ b/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 ( - + )]; @@ -36,7 +36,7 @@ function getProcessorStatementMetrics(processorVertex) { ( @@ -44,7 +44,7 @@ function getProcessorStatementMetrics(processorVertex) { ( @@ -52,7 +52,7 @@ function getProcessorStatementMetrics(processorVertex) { ( ) @@ -83,7 +83,7 @@ export function PluginStatement({ gutterSize="none" justifyContent="spaceBetween" alignItems="center" - className="configViewer__statement" + className="pipelineViewer__statement" > {name} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.js similarity index 86% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/queue.js index 8dc5971857c60..79a6995670eec 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js +++ b/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 ( -
+
- + Queue metrics not available
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js similarity index 83% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement.js index 545c7934db8e0..590302128efde 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js +++ b/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(
); + spacers.push(
); } return spacers; } @@ -56,8 +56,8 @@ export function Statement(props) { const { depth } = props.element; return ( -
  • -
    +
  • +
    {renderNestingSpacers(depth)}
    {renderStatement(props)} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement_list_heading.js similarity index 100% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement_list_heading.js diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement_section.js similarity index 97% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/statement_section.js index f0f165c82ea7e..57cdf164c12be 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js +++ b/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 ( -
    +
    +
      { 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 index 5c52c2a83ecce..da2d90ab49ac1 100644 --- 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 = ( - + />, + $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 deleted file mode 100644 index b237affc0c530..0000000000000 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ /dev/null @@ -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; - } - } -} diff --git a/x-pack/plugins/monitoring/public/less/components/logstash/pipeline_viewer.less b/x-pack/plugins/monitoring/public/less/components/logstash/pipeline_viewer.less index fb8229739d5d9..590c0874b2ef6 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/pipeline_viewer.less +++ b/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; } diff --git a/x-pack/plugins/monitoring/public/less/main.less b/x-pack/plugins/monitoring/public/less/main.less index 08be28be7d69e..c140aabfc0a06 100644 --- a/x-pack/plugins/monitoring/public/less/main.less +++ b/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';