From 9c4d9d1e3a6cdaafa6cae78b22ce1c1b818c3747 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 25 Apr 2018 16:32:01 -0400 Subject: [PATCH 01/44] Patch ConfigView changes from x-pack-kibana to OSS Kibana. --- .../logstash/pipeline_viewer/index.js | 4 +- .../views/config_viewer/config_viewer.js | 78 ++++++++ .../views/config_viewer/if_statement.js | 182 ++++++++++++++++++ .../views/config_viewer/index.js | 9 + .../views/config_viewer/metric.js | 18 ++ .../views/config_viewer/plugin_statement.js | 95 +++++++++ .../views/config_viewer/queue.js | 33 ++++ .../views/config_viewer/stat.js | 52 +++++ .../views/config_viewer/statement.js | 78 ++++++++ .../views/config_viewer/statement_list.js | 45 +++++ .../views/config_viewer/statement_section.js | 57 ++++++ .../logstash/pipeline_viewer/index.js | 14 +- .../components/logstash/config_viewer.less | 113 +++++++++++ .../plugins/monitoring/public/less/main.less | 1 + .../lib/logstash/__tests__/get_pipeline.js | 1 + 15 files changed, 774 insertions(+), 6 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/index.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js create 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 c4748876b85f1..145055f67bfc1 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 @@ -9,6 +9,8 @@ import { ColaGraph } from './views/cola_graph'; import { DetailDrawer } from './views/detail_drawer'; import { PropTypes } from 'prop-types'; +export { ConfigViewer } from './views/config_viewer'; + export class PipelineViewer extends React.Component { constructor() { super(); @@ -55,7 +57,7 @@ export class PipelineViewer extends React.Component { } render() { - const graph = this.props.pipelineState.config.graph; + const { graph } = this.props.pipelineState.config; return (
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/config_viewer/config_viewer.js new file mode 100644 index 0000000000000..09bb219092c9e --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/config_viewer.js @@ -0,0 +1,78 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; +import { EuiPanel } from '@elastic/eui'; + +import { DetailDrawer } from '../detail_drawer'; + +import { renderSection } from './statement_section'; +import { getStatementListFromPipeline } from './statement_list'; + +export class ConfigViewer extends React.Component { + constructor() { + super(); + this.state = { + detailDrawer: { + vertex: null + } + }; + } + + onShowVertexDetails = (vertex) => { + if (vertex === this.state.detailDrawer.vertex) { + this.onHideVertexDetails(); + } + else { + this.setState({ + detailDrawer: { + vertex + } + }); + } + } + + onHideVertexDetails = () => { + this.setState({ + detailDrawer: { + vertex: null + } + }); + } + + renderDetailDrawer = () => { + if (!this.state.detailDrawer.vertex) { + return null; + } + + return ( + + ); + } + + render() { + const { + pipeline + } = this.props; + + return ( +
+ + { + getStatementListFromPipeline(pipeline, this.onShowVertexDetails).map(section => renderSection(section)) + } + + { this.renderDetailDrawer() } +
+ ); + } +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js new file mode 100644 index 0000000000000..b0a6e51ae74de --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js @@ -0,0 +1,182 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; +import { PropTypes } from 'prop-types'; + +import { Statement } from './statement'; + +import { + EuiButtonEmpty, + EuiButtonIcon, + EuiCodeBlock, + EuiFlexItem, + EuiFlexGroup, + EuiPanel +} from '@elastic/eui'; + +const IfChildGroup = ({ heading, condition, children, vertex, vertexSelected }) => ( +
  • + +
    • +); + +const ElseBlock = ({ isLast, children, vertex, vertexSelected }) => ( +
  • + +
    • +); + +export const IfStatement = ({ isLast, statement, vertexSelected }) => ( + [ + 0} + key={`if-section_${statement.id}`} + vertex={statement.vertex} + vertexSelected={vertexSelected} + />, + statement.elseStatements.length > 0 + ? ( + + ) + : null + ] +); + +class IfPill extends React.Component { + constructor() { + super(); + this.state = { + isCollapsed: false + }; + + this.toggleVisibility = this.toggleVisibility.bind(this); + } + + toggleVisibility() { + const nextState = !this.state.isCollapsed; + this.setState({ + isCollapsed: nextState + }); + } + + getChildDisplay() { + return this.state.isCollapsed + ? { display: 'none' } + : { }; + } + + getButtonIconType() { + return this.state.isCollapsed + ? 'arrowRight' + : 'arrowDown'; + } + + render() { + const { + childStatements, + condition, + heading, + vertex, + vertexSelected + } = this.props; + const childDisplay = this.getChildDisplay(); + const handler = () => vertexSelected(vertex); + + return ( +
    + + + + + + + + {heading} + + + { + condition !== null && + + + {condition} + + + } + + +
      + { + childStatements.map((statement, index) => ( + + )) + } +
    +
    + ); + } +} + +IfPill.propTypes = { + childStatements: PropTypes.array.isRequired, + condition: PropTypes.string, + heading: PropTypes.string.isRequired +}; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/index.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/index.js new file mode 100644 index 0000000000000..4fcda0e4b19c8 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/index.js @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +export { ConfigViewer } from './config_viewer'; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js new file mode 100644 index 0000000000000..94467b76850e7 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js @@ -0,0 +1,18 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +export class Metric { + constructor(name, format, suffix, reducer, operation, isHighlighted) { + this.name = name; + this.format = format; + this.suffix = suffix; + this.reducer = reducer; + this.operation = operation; + this.isHighlighted = isHighlighted; + } +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js new file mode 100644 index 0000000000000..303a1ffb0d9a8 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -0,0 +1,95 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; +import { + EuiFlexItem, + EuiFlexGroup, + EuiPanel, + EuiSpacer, + EuiButtonEmpty +} from '@elastic/eui'; + +const StatementStatsList = ({ stats }) => ( + stats.map(({ value, isHighlighted }, index) => ( + + + + )) +); + +const getStatStyle = isHighlighted => ( + { + backgroundColor: isHighlighted + ? 'orange' + : 'transparent', + borderRadius: "5px", + padding: "2px" + } +); + +const StatOverview = ({ value, isHighlighted }) => ( + {value} +); + +export const PluginStatement = ({ statement, stats, vertexSelected }) => ( +
  • +
    + + + + + {statement.name} + + + { + statement.hasExplicitId && + + + {statement.id} + + + } + + + { + stats && + stats.length > 0 && + + + + } + +
    +
    • +); 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/config_viewer/queue.js new file mode 100644 index 0000000000000..8d1ebf20d7b4a --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/queue.js @@ -0,0 +1,33 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiPanel +} from '@elastic/eui'; + +export const Queue = ({ vertexSelected }) => ( +
  • +
    + + + + Queue + + + +
    +
    • +); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js new file mode 100644 index 0000000000000..ddde333711911 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js @@ -0,0 +1,52 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import { formatMetric } from '../../../../../lib/format_number'; + +const getMetricValuesFromStat = ({ stat }) => { + if (!stat) { + return null; + } + + return stat.data.map(bucket => bucket.length > 1 ? bucket[1] : null); +}; + +const getReducedValueForMetric = ({ values, reducer, operation }) => { + if (values === null || values.length === 0) { + return null; + } + + const value = values.reduce(reducer); + + return operation !== null + ? operation(value) + : value; +}; + +export class Stat { + constructor(value, isHighlighted) { + this.value = value; + this.isHighlighted = isHighlighted; + } + + static fromMetric( + stats, + name, + format, + suffix, + reducer, + operation, + isHighlighted + ) { + const values = getMetricValuesFromStat({ stat: stats[name] }); + const finalValue = getReducedValueForMetric({ values, reducer, operation }); + const formattedValue = formatMetric(finalValue, format, suffix); + + return new Stat(formattedValue, isHighlighted); + } +} \ No newline at end of file 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/config_viewer/statement.js new file mode 100644 index 0000000000000..d3228d32a9443 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement.js @@ -0,0 +1,78 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; + +import { formatMetric } from '../../../../../lib/format_number'; + +import { PluginStatement } from './plugin_statement'; +import { Stat } from './stat'; + +import { IfStatement } from './if_statement'; +import { Queue } from './queue'; + +const getDefaultStats = ({ pluginType, vertex }) => { + switch (pluginType) { + case 'input': + return [ + new Stat( + formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s emitted'), + vertex.isSlow() + ) + ]; + case 'filter': + case 'output': + return [ + new Stat( + formatMetric(Math.round(vertex.percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }), + vertex.isTimeConsuming() + ), + new Stat( + formatMetric(vertex.latestMillisPerEvent, '0.[00]a', 'ms/e'), + vertex.isSlow() + ), + new Stat(formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s received')) + ]; + } + return []; +}; + +export const Statement = ({ isLast, statement, vertexSelected }) => { + const klass = statement.constructor.name; + const { vertex } = statement; + + const handler = () => vertexSelected(vertex); + switch (klass) { + case 'IfStatement': + return ( +
      + +
    + ); + case 'PluginStatement': + return ( + + ); + case 'Queue': + return ( + + ); + } +}; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js new file mode 100644 index 0000000000000..5e38fa3187e9e --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -0,0 +1,45 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; + +import { Statement } from './statement'; + +const StatementList = ({ statements, vertexSelected }) => ( + statements.map((statement, index) => ( + + )) +); + +const sectionFactory = (headerText, iconType, children, vertexSelected) => ( + { + headerText, + iconType, + children: ( + + ) + } +); + +export const getStatementListFromPipeline = ({ inputStatements, queue, filterStatements, outputStatements }, vertexSelected) => ( + [ + sectionFactory('Input Statements', 'logstashInput', inputStatements, vertexSelected), + sectionFactory('Queue', 'logstashQueue', [queue], vertexSelected), + sectionFactory('Filter Statements', 'logstashFilter', filterStatements, vertexSelected), + sectionFactory('Output Statements', 'logstashOutput', outputStatements, vertexSelected) + ] +); 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/config_viewer/statement_section.js new file mode 100644 index 0000000000000..4766def903f72 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js @@ -0,0 +1,57 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + + + +import React from 'react'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiIcon, + EuiPanel, + EuiSpacer, + EuiTitle +} from '@elastic/eui'; + +const StatementSection = ({ headerText, icon, children }) => ( + + + + {icon} + + + +

    {headerText}

    +     +     +     + +
      + { + children + } +
    +     +); + +export const renderSection = ({ headerText, iconType, children }) => ( + [ + } + children={children} + key={headerText} + />, + + ] +); 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 7a50219686e3e..7ebf303ed1fb4 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,7 +8,9 @@ import React from 'react'; import { render } from 'react-dom'; import moment from 'moment'; import { uiModules } from 'ui/modules'; -import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer'; +import { ConfigViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer/views/config_viewer'; +// import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer'; +import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline'; import { PipelineState } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline_state'; const uiModule = uiModules.get('monitoring/directives', []); @@ -28,13 +30,15 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => { scope.$watch('pipeline', (updatedPipeline) => { pipelineState.update(updatedPipeline); - const pipelineViewer = ( - ); - render(pipelineViewer, $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 new file mode 100644 index 0000000000000..0d3ea1c0fd2cc --- /dev/null +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -0,0 +1,113 @@ +.configViewer { + background-color: #efefef; +} + +.ifPill__condition { + margin-top: 5px; +} + +.statement__content { + min-width: 190px; + max-width: 400px; + max-height: 320px; +} + +.ifChildren { + border-left: 1px dashed #D0D0D0; + padding-left: 8px; + margin: 8px 0px 8px 0px; +} + +.statement { + margin-top: 10px; + // margin-left: 32px; + // border-left: 1px black solid; + // padding-left: 16px; +} + +.statement::before { + // content: ""; + // position: relative; + // height: 10px; + // width: 16px; + // border-bottom: 1px solid #090909; + // display: inline-block; + // top: 34px; + // left: -16px; +} + +.statement--last { + // margin-left: 32px; + // padding-left: 16px; + // padding-top: 16px; + // border-left: 0px; +} + +.statement--last::before { + // content: ""; + // position: relative; + // height: 46px; + // width: 16px; + // top: -17px; + // border-left: 1px solid #090909; + // border-bottom: 1px solid #090909; + // margin-right: -15px; + // left: -16px; + // float: left; +} + +.ifStatement::before { + // top: 13px; +} + +.ifStatement--last::before { + // height: 28px; +} + +.ifStatementWithElse { + // border-left: 1px solid #DD0A73; +} + +// .ifStatementWithElse::before { +// top: 0px; +// border-left: 1px solid #090909; +// border-bottom: 1px solid #DD0A73; +// left: -17px; +// height: 25px; +// margin-bottom: -13px; +// width: 17px; +// } + +.ifStatementWithElse--last { + // border-left: 1px solid #DD0A73; +} + +.ifStatementWithElse--last::before { + // border-left: #090909 1px solid; + // border-bottom-color: #DD0A73; + // left: -17px; + // height: 27px; + // margin-top: -15px; + // top: -1px; + // width: 17px; +} + +.elseStatement::before { + // border-bottom: 1px solid #DD0A73; + // border-left: 1px solid #DD0A73; + // left: -17px; + // width: 17px; + // height: 25px; + // margin-bottom: -13px; + // top: 0px; +} + +.elseStatement--last::before { + // border-left-color: #DD0A73; + // border-bottom-color: #DD0A73; + // height: 28px; +} + +.queueStatement { + margin: 16px 0px 10px 32px; +} diff --git a/x-pack/plugins/monitoring/public/less/main.less b/x-pack/plugins/monitoring/public/less/main.less index c140aabfc0a06..08be28be7d69e 100644 --- a/x-pack/plugins/monitoring/public/less/main.less +++ b/x-pack/plugins/monitoring/public/less/main.less @@ -11,6 +11,7 @@ @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'; diff --git a/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js b/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js index e2be73d10df80..06bba8c048a90 100644 --- a/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js +++ b/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js @@ -36,6 +36,7 @@ describe('get_pipeline', () => { it('returns correct stats', () => { const result = _vertexStats(vertex, vertexStatsBucket, totalProcessorsDurationInMillis, timeseriesIntervalInSeconds); + expect(result).to.eql({ events_in: 10000, events_out: 9000, From 47e90ba55872a5c145178193a45498dc8bd96ab0 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 26 Apr 2018 11:25:45 -0400 Subject: [PATCH 02/44] Remove old css. --- .../components/logstash/config_viewer.less | 86 ------------------- 1 file changed, 86 deletions(-) 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 index 0d3ea1c0fd2cc..f6836034eb736 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -20,92 +20,6 @@ .statement { margin-top: 10px; - // margin-left: 32px; - // border-left: 1px black solid; - // padding-left: 16px; -} - -.statement::before { - // content: ""; - // position: relative; - // height: 10px; - // width: 16px; - // border-bottom: 1px solid #090909; - // display: inline-block; - // top: 34px; - // left: -16px; -} - -.statement--last { - // margin-left: 32px; - // padding-left: 16px; - // padding-top: 16px; - // border-left: 0px; -} - -.statement--last::before { - // content: ""; - // position: relative; - // height: 46px; - // width: 16px; - // top: -17px; - // border-left: 1px solid #090909; - // border-bottom: 1px solid #090909; - // margin-right: -15px; - // left: -16px; - // float: left; -} - -.ifStatement::before { - // top: 13px; -} - -.ifStatement--last::before { - // height: 28px; -} - -.ifStatementWithElse { - // border-left: 1px solid #DD0A73; -} - -// .ifStatementWithElse::before { -// top: 0px; -// border-left: 1px solid #090909; -// border-bottom: 1px solid #DD0A73; -// left: -17px; -// height: 25px; -// margin-bottom: -13px; -// width: 17px; -// } - -.ifStatementWithElse--last { - // border-left: 1px solid #DD0A73; -} - -.ifStatementWithElse--last::before { - // border-left: #090909 1px solid; - // border-bottom-color: #DD0A73; - // left: -17px; - // height: 27px; - // margin-top: -15px; - // top: -1px; - // width: 17px; -} - -.elseStatement::before { - // border-bottom: 1px solid #DD0A73; - // border-left: 1px solid #DD0A73; - // left: -17px; - // width: 17px; - // height: 25px; - // margin-bottom: -13px; - // top: 0px; -} - -.elseStatement--last::before { - // border-left-color: #DD0A73; - // border-bottom-color: #DD0A73; - // height: 28px; } .queueStatement { From d7e8f9cc5708daf06f285f0467c85c6f19df1468 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 1 May 2018 11:04:05 -0400 Subject: [PATCH 03/44] Update style for queue statement. --- .../logstash/pipeline_viewer/views/config_viewer/queue.js | 2 +- .../public/less/components/logstash/config_viewer.less | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) 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/config_viewer/queue.js index 8d1ebf20d7b4a..481746c558c1d 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/config_viewer/queue.js @@ -15,7 +15,7 @@ import { } from '@elastic/eui'; export const Queue = ({ vertexSelected }) => ( -
  • +
  • Date: Thu, 10 May 2018 18:48:42 -0400 Subject: [PATCH 04/44] WIP modifying based on designer feedback. --- .../views/config_viewer/config_viewer.js | 9 +- .../views/config_viewer/plugin_statement.js | 107 ++++++++++-------- .../views/config_viewer/statement_section.js | 5 +- .../components/logstash/config_viewer.less | 47 ++++++-- 4 files changed, 102 insertions(+), 66 deletions(-) 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/config_viewer/config_viewer.js index 09bb219092c9e..dcf739e26657b 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/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 (
    - - { - getStatementListFromPipeline(pipeline, this.onShowVertexDetails).map(section => renderSection(section)) - } - + { + getStatementListFromPipeline(pipeline, this.onShowVertexDetails).map(section => renderSection(section)) + } { this.renderDetailDrawer() }
    ); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 303a1ffb0d9a8..910dcc8b03697 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/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) => ( - - - +
    + + + +
    )) ); @@ -40,7 +45,7 @@ const getStatStyle = isHighlighted => ( ); const StatOverview = ({ value, isHighlighted }) => ( - {value} +
    {value}
    ); export const PluginStatement = ({ statement, stats, vertexSelected }) => ( @@ -50,45 +55,51 @@ export const PluginStatement = ({ statement, stats, vertexSelected }) => ( className="statement__content" paddingSize="s" > - - - - {statement.name} - - - { - statement.hasExplicitId && - - - {statement.id} - +
    + + + + + + + + + + {statement.name} + + + + + { + statement.hasExplicitId && + + {statement.id} + + } + + + + + { + stats && + stats.length > 0 && + + + + } - } - - - { - stats && - stats.length > 0 && - - - } +
    • 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/config_viewer/statement_section.js index 4766def903f72..c940da187263d 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/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 }) => ( @@ -32,7 +32,6 @@ const StatementSection = ({ headerText, icon, children }) => ( -
      { 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 index 21bd2192a0252..4652e93da122d 100644 --- 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; } From 7aceaf9e77a8011b7cb2805c2f3e08249d53c6b0 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 15 May 2018 15:46:48 -0400 Subject: [PATCH 05/44] WIP checkin. Modify components to handle flattened object list. --- .../models/pipeline/pipeline.js | 19 +++++++++++++++++-- .../views/config_viewer/plugin_statement.js | 15 ++++++++++----- .../views/config_viewer/queue.js | 15 ++++----------- .../views/config_viewer/statement.js | 3 ++- .../views/config_viewer/statement_list.js | 1 + .../logstash/pipeline_viewer/index.js | 1 + .../components/logstash/config_viewer.less | 12 +++++++++++- 7 files changed, 46 insertions(+), 20 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js index 367e3be02a3f6..2a38e555171ba 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js @@ -58,9 +58,24 @@ function getQueue(pipelineGraph) { } function getOutputStatements(pipelineGraph) { - return pipelineGraph.getVertices() - .filter(v => (v.pipelineStage === 'output') && !v.incomingVertices.some(p => p.pipelineStage === 'output')) + const vertices = pipelineGraph.getVertices() + .filter(v => (v.pipelineStage === 'output') && !v.incomingVertices.some(p => p.pipelineStage === 'output')); + const ret = vertices .map(v => makeStatement(v, 'output')); + + // console.log(pipelineGraph.getVertices()); + // console.log(vertices); + // console.log(ret[2]); + // console.log(Object.keys(ret[2])); + // console.log(ret[2].allTrueVertices); + + // const allTrue = vertices[2].allTrueVertices; + // console.log(allTrue); + // console.log(allTrue[0]); + + //console.log(vertices[2].allTrueVertices); + + return ret; } export class Pipeline { diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 910dcc8b03697..542c267d63217 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -48,15 +48,18 @@ const StatOverview = ({ value, isHighlighted }) => (
      {value}
      ); -export const PluginStatement = ({ statement, stats, vertexSelected }) => ( -
    • +export const PluginStatement = ({ statement, stats, vertexSelected, isEvenChild }) => ( +
    • - + ( { stats && stats.length > 0 && - + 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/config_viewer/queue.js index 481746c558c1d..d3f07927bc545 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/config_viewer/queue.js @@ -4,20 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ - - import React from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiPanel -} from '@elastic/eui'; - -export const Queue = ({ vertexSelected }) => ( +export const Queue = () => (
    • - ( Queue - + */}
      • ); 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/config_viewer/statement.js index d3228d32a9443..805aab8ae32c8 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/config_viewer/statement.js @@ -42,7 +42,7 @@ const getDefaultStats = ({ pluginType, vertex }) => { return []; }; -export const Statement = ({ isLast, statement, vertexSelected }) => { +export const Statement = ({ isLast, statement, vertexSelected, isEvenChild }) => { const klass = statement.constructor.name; const { vertex } = statement; @@ -65,6 +65,7 @@ export const Statement = ({ isLast, statement, vertexSelected }) => { stats={getDefaultStats(statement)} vertexSelected={handler} isLast={isLast} + isEvenChild={isEvenChild} /> ); case 'Queue': diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 5e38fa3187e9e..6d81f236407ee 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -16,6 +16,7 @@ const StatementList = ({ statements, vertexSelected }) => ( statement={statement} key={statement.id} isTop={true} + isEvenChild={index + 1 % 2 === 0} isLast={statements.length === index + 1} vertexSelected={vertexSelected} /> 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 7ebf303ed1fb4..ac25f86f9bd4c 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 @@ -32,6 +32,7 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => { pipelineState.update(updatedPipeline); const configModel = Pipeline.fromPipelineGraph(pipelineState.config.graph); + const configViewer = ( Date: Tue, 15 May 2018 13:00:13 -0400 Subject: [PATCH 06/44] Add flatten function and list class. --- .../flatten_pipeline_section.test.js | 121 ++++++++++++++++++ .../list/__tests__/pipeline_to_list.test.js | 74 +++++++++++ .../models/list/pipeline_to_list.js | 21 +++ 3 files changed, 216 insertions(+) create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js new file mode 100644 index 0000000000000..74c4e7051ff1a --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js @@ -0,0 +1,121 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { flattenPipelineSection } from '../flatten_pipeline_section'; +import { PluginStatement } from '../../pipeline/plugin_statement'; +import { IfStatement } from '../../pipeline/if_statement'; + +describe('treeToList', () => { + let tree; + + beforeEach(() => { + tree = []; + }); + + it('creates list for only-plugin tree', () => { + tree = [ + PluginStatement.fromPipelineGraphVertex({ id: 'first' }), + PluginStatement.fromPipelineGraphVertex({ id: 'second' }) + ]; + + const result = flattenPipelineSection(tree, 0, null); + + expect(result).toHaveLength(2); + expect(result[0].parentId).toBe(null); + expect(result[0].depth).toBe(0); + expect(result[0].id).toBe('first'); + expect(result[1].parentId).toBe(null); + expect(result[1].depth).toBe(0); + expect(result[1].id).toBe('second'); + }); + + it('flattens pipeline with if statement', () => { + tree = [ + PluginStatement.fromPipelineGraphVertex({ id: 'first' }), + new IfStatement( + { id: 'if_parent' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })] + ) + ]; + + const result = flattenPipelineSection(tree, 0, null); + + expect(result).toHaveLength(3); + expect(result[0].id).toBe('first'); + expect(result[1].id).toBe('if_parent'); + expect(result[1].parentId).toBe(null); + expect(result[1].depth).toBe(0); + expect(result[2].id).toBe('if_child1'); + expect(result[2].parentId).toBe('if_parent'); + expect(result[2].depth).toBe(1); + }); + + it('flattens pipeline with else statement', () => { + tree = [ + new IfStatement( + { id: 'if_parent' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })], + [ PluginStatement.fromPipelineGraphVertex({ id: 'else_child1' })] + ) + ]; + + const result = flattenPipelineSection(tree, 0, null); + + expect(result).toHaveLength(4); + expect(result[0].id).toBe('if_parent'); + + expect(result[1].id).toBe('if_child1'); + expect(result[1].parentId).toBe('if_parent'); + expect(result[1].depth).toBe(1); + + expect(result[2].constructor.name).toBe('ElseElement'); + expect(result[2].depth).toBe(0); + expect(result[2].parentId).toBe(null); + + expect(result[3].id).toBe('else_child1'); + expect(result[3].parentId).toBe('if_parent_else'); + expect(result[3].depth).toBe(1); + }); + + it('flattens tree with if/else and nested if', () => { + tree = [ + new IfStatement( + { id: 'if_parent' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })], + [ + new IfStatement( + { id: 'if_parent2' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child2' })], + [] + ), + PluginStatement.fromPipelineGraphVertex({ id: 'else_child1' })] + ) + ]; + + const result = flattenPipelineSection(tree, 0, null); + + expect(result).toHaveLength(6); + expect(result[1].id).toBe('if_child1'); + expect(result[1].depth).toBe(1); + expect(result[1].parentId).toBe('if_parent'); + + expect(result[2].id).toBe('if_parent_else'); + expect(result[2].depth).toBe(0); + expect(result[2].parentId).toBe(null); + + expect(result[3].id).toBe('if_parent2'); + expect(result[3].depth).toBe(1); + expect(result[3].parentId).toBe('if_parent_else'); + + expect(result[4].id).toBe('if_child2'); + expect(result[4].depth).toBe(2); + expect(result[4].parentId).toBe('if_parent2'); + + expect(result[5].id).toBe('else_child1'); + expect(result[5].depth).toBe(1); + expect(result[5].parentId).toBe('if_parent_else'); + }); +}); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js new file mode 100644 index 0000000000000..d92005c05e506 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js @@ -0,0 +1,74 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { pipelineToList } from '../pipeline_to_list'; +import { PluginStatement } from '../../pipeline/plugin_statement'; +import { IfStatement } from '../../pipeline/if_statement'; +import { PluginElement } from '../plugin_element'; +import { IfElement } from '../if_element'; +import { ElseElement } from '../else_element'; + +describe('pipelineToList', () => { + let pipeline; + + beforeEach(() => { + pipeline = { + inputStatements: [ + PluginStatement.fromPipelineGraphVertex({ id: 'first' }), + ], + filterStatements: [ + new IfStatement( + { id: 'if' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child' })], + [ PluginStatement.fromPipelineGraphVertex({ id: 'else_child' })] + ) + ], + outputStatements: [ + PluginStatement.fromPipelineGraphVertex({ id: 'output' }) + ], + queue: { } + }; + }); + + it('creates list with element for each statement', () => { + const result = pipelineToList(pipeline); + const { + inputs, + filters, + outputs + } = result; + + expect(inputs).toHaveLength(1); + expect(filters).toHaveLength(4); + expect(outputs).toHaveLength(1); + }); + + it('creates list with if in outputs', () => { + pipeline.outputStatements.push( + new IfStatement( + { id: 'output_if' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'output_true' })], + [ PluginStatement.fromPipelineGraphVertex({ id: 'output_else' })] + ) + ); + + const result = pipelineToList(pipeline); + const { + inputs, + filters, + outputs + } = result; + + expect(inputs).toHaveLength(1); + expect(filters).toHaveLength(4); + expect(outputs).toHaveLength(5); + expect(outputs[0]).toBeInstanceOf(PluginElement); + expect(outputs[1]).toBeInstanceOf(IfElement); + expect(outputs[2]).toBeInstanceOf(PluginElement); + expect(outputs[3]).toBeInstanceOf(ElseElement); + expect(outputs[4]).toBeInstanceOf(PluginElement); + }); +}); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js new file mode 100644 index 0000000000000..ebd535ea0dbef --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import { flattenPipelineSection } from './flatten_pipeline_section'; + +export function pipelineToList(pipeline) { + const inputs = flattenPipelineSection(pipeline.inputStatements, 0, null); + const filters = flattenPipelineSection(pipeline.filterStatements, 0, null); + const outputs = flattenPipelineSection(pipeline.outputStatements, 0, null); + const { queue } = pipeline; + + return { + inputs, + filters, + outputs, + queue, + }; +} From 208f1cc7e87717cb2adaad86421ce1426d3441cc Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 15 May 2018 14:55:59 -0400 Subject: [PATCH 07/44] Rename functions to be more descriptive. --- .../flatten_pipeline_section.test.js | 121 ------------------ .../list/flatten_pipeline_section.test.js | 3 +- .../{__tests__ => }/pipeline_to_list.test.js | 12 +- 3 files changed, 7 insertions(+), 129 deletions(-) delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/{__tests__ => }/pipeline_to_list.test.js (85%) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js deleted file mode 100644 index 74c4e7051ff1a..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/flatten_pipeline_section.test.js +++ /dev/null @@ -1,121 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { flattenPipelineSection } from '../flatten_pipeline_section'; -import { PluginStatement } from '../../pipeline/plugin_statement'; -import { IfStatement } from '../../pipeline/if_statement'; - -describe('treeToList', () => { - let tree; - - beforeEach(() => { - tree = []; - }); - - it('creates list for only-plugin tree', () => { - tree = [ - PluginStatement.fromPipelineGraphVertex({ id: 'first' }), - PluginStatement.fromPipelineGraphVertex({ id: 'second' }) - ]; - - const result = flattenPipelineSection(tree, 0, null); - - expect(result).toHaveLength(2); - expect(result[0].parentId).toBe(null); - expect(result[0].depth).toBe(0); - expect(result[0].id).toBe('first'); - expect(result[1].parentId).toBe(null); - expect(result[1].depth).toBe(0); - expect(result[1].id).toBe('second'); - }); - - it('flattens pipeline with if statement', () => { - tree = [ - PluginStatement.fromPipelineGraphVertex({ id: 'first' }), - new IfStatement( - { id: 'if_parent' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })] - ) - ]; - - const result = flattenPipelineSection(tree, 0, null); - - expect(result).toHaveLength(3); - expect(result[0].id).toBe('first'); - expect(result[1].id).toBe('if_parent'); - expect(result[1].parentId).toBe(null); - expect(result[1].depth).toBe(0); - expect(result[2].id).toBe('if_child1'); - expect(result[2].parentId).toBe('if_parent'); - expect(result[2].depth).toBe(1); - }); - - it('flattens pipeline with else statement', () => { - tree = [ - new IfStatement( - { id: 'if_parent' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })], - [ PluginStatement.fromPipelineGraphVertex({ id: 'else_child1' })] - ) - ]; - - const result = flattenPipelineSection(tree, 0, null); - - expect(result).toHaveLength(4); - expect(result[0].id).toBe('if_parent'); - - expect(result[1].id).toBe('if_child1'); - expect(result[1].parentId).toBe('if_parent'); - expect(result[1].depth).toBe(1); - - expect(result[2].constructor.name).toBe('ElseElement'); - expect(result[2].depth).toBe(0); - expect(result[2].parentId).toBe(null); - - expect(result[3].id).toBe('else_child1'); - expect(result[3].parentId).toBe('if_parent_else'); - expect(result[3].depth).toBe(1); - }); - - it('flattens tree with if/else and nested if', () => { - tree = [ - new IfStatement( - { id: 'if_parent' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })], - [ - new IfStatement( - { id: 'if_parent2' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child2' })], - [] - ), - PluginStatement.fromPipelineGraphVertex({ id: 'else_child1' })] - ) - ]; - - const result = flattenPipelineSection(tree, 0, null); - - expect(result).toHaveLength(6); - expect(result[1].id).toBe('if_child1'); - expect(result[1].depth).toBe(1); - expect(result[1].parentId).toBe('if_parent'); - - expect(result[2].id).toBe('if_parent_else'); - expect(result[2].depth).toBe(0); - expect(result[2].parentId).toBe(null); - - expect(result[3].id).toBe('if_parent2'); - expect(result[3].depth).toBe(1); - expect(result[3].parentId).toBe('if_parent_else'); - - expect(result[4].id).toBe('if_child2'); - expect(result[4].depth).toBe(2); - expect(result[4].parentId).toBe('if_parent2'); - - expect(result[5].id).toBe('else_child1'); - expect(result[5].depth).toBe(1); - expect(result[5].parentId).toBe('if_parent_else'); - }); -}); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js index 7097175a68a41..f0f67a6930ccf 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js @@ -37,8 +37,7 @@ describe('flattenPipelineSection', () => { PluginStatement.fromPipelineGraphVertex({ id: 'first' }), new IfStatement( { id: 'if_parent' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })], - [] + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })] ) ]; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js similarity index 85% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js index d92005c05e506..f9b3f155133f6 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/__tests__/pipeline_to_list.test.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js @@ -4,12 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { pipelineToList } from '../pipeline_to_list'; -import { PluginStatement } from '../../pipeline/plugin_statement'; -import { IfStatement } from '../../pipeline/if_statement'; -import { PluginElement } from '../plugin_element'; -import { IfElement } from '../if_element'; -import { ElseElement } from '../else_element'; +import { pipelineToList } from './pipeline_to_list'; +import { PluginStatement } from '../pipeline/plugin_statement'; +import { IfStatement } from '../pipeline/if_statement'; +import { PluginElement } from './plugin_element'; +import { IfElement } from './if_element'; +import { ElseElement } from './else_element'; describe('pipelineToList', () => { let pipeline; From f56cfd4174b882b7116c7ee53c65678f87e3d1b4 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 17 May 2018 17:41:32 -0400 Subject: [PATCH 08/44] Finish moving flatten logic into classes, add tests. --- .../models/list/flatten_pipeline_section.js | 8 +- .../list/flatten_pipeline_section.test.js | 3 +- .../models/list/pipeline_to_list.test.js | 73 +++++++++++++++++++ .../models/pipeline/__tests__/if_statement.js | 11 ++- .../models/pipeline/if_statement.js | 10 ++- 5 files changed, 94 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js index fa158ffd75d38..de0c7344129c2 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js @@ -4,12 +4,14 @@ * you may not use this file except in compliance with the Elastic License. */ -export function flattenPipelineSection(pipelineSection, depth = 0, parentId = null) { +import { flattenDeep } from 'lodash'; + +export function flattenPipelineSection(pipelineSection, depth, parentId) { const list = []; pipelineSection.forEach(statement => { - list.push(...statement.toList(depth, parentId)); + list.push(statement.toList(depth, parentId)); }); - return list; + return flattenDeep(list); } diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js index f0f67a6930ccf..7097175a68a41 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.test.js @@ -37,7 +37,8 @@ describe('flattenPipelineSection', () => { PluginStatement.fromPipelineGraphVertex({ id: 'first' }), new IfStatement( { id: 'if_parent' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })] + [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child1' })], + [] ) ]; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js index f9b3f155133f6..270a0bf7877f9 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js @@ -71,4 +71,77 @@ describe('pipelineToList', () => { expect(outputs[3]).toBeInstanceOf(ElseElement); expect(outputs[4]).toBeInstanceOf(PluginElement); }); + + it('creates list for multi-nested if/else statements in filter section', () => { + pipeline.filterStatements = [ + new IfStatement( + { id: 'filter_if_1' }, + [ + new IfStatement( + { id: 'filter_if_2' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'plugin_1' })], + [ ] + ) + ], + [ + new IfStatement( + { id: 'filter_if_3' }, + [ PluginStatement.fromPipelineGraphVertex({ id: 'plugin_2' })], + [ PluginStatement.fromPipelineGraphVertex({ id: 'plugin_3' })] + ) + ] + ) + ]; + + const result = pipelineToList(pipeline); + const { + inputs, + filters, + outputs + } = result; + + expect(inputs).toHaveLength(1); + expect(outputs).toHaveLength(1); + expect(filters).toHaveLength(8); + + expect(filters[0].id).toBe('filter_if_1'); + expect(filters[0].depth).toBe(0); + expect(filters[0].parentId).toBe(null); + expect(filters[0]).toBeInstanceOf(IfElement); + + expect(filters[1].id).toBe('filter_if_2'); + expect(filters[1].depth).toBe(1); + expect(filters[1].parentId).toBe('filter_if_1'); + expect(filters[1]).toBeInstanceOf(IfElement); + + expect(filters[2].id).toBe('plugin_1'); + expect(filters[2].depth).toBe(2); + expect(filters[2].parentId).toBe('filter_if_2'); + expect(filters[2]).toBeInstanceOf(PluginElement); + + expect(filters[3].id).toBe('filter_if_1_else'); + expect(filters[3].depth).toBe(0); + expect(filters[3].parentId).toBe(null); + expect(filters[3]).toBeInstanceOf(ElseElement); + + expect(filters[4].id).toBe('filter_if_3'); + expect(filters[4].depth).toBe(1); + expect(filters[4].parentId).toBe('filter_if_1_else'); + expect(filters[4]).toBeInstanceOf(IfElement); + + expect(filters[5].id).toBe('plugin_2'); + expect(filters[5].depth).toBe(2); + expect(filters[5].parentId).toBe('filter_if_3'); + expect(filters[5]).toBeInstanceOf(PluginElement); + + expect(filters[6].id).toBe('filter_if_3_else'); + expect(filters[6].depth).toBe(1); + expect(filters[6].parentId).toBe('filter_if_1_else'); + expect(filters[6]).toBeInstanceOf(ElseElement); + + expect(filters[7].id).toBe('plugin_3'); + expect(filters[7].depth).toBe(2); + expect(filters[7].parentId).toBe('filter_if_3_else'); + expect(filters[7]).toBeInstanceOf(PluginElement); + }); }); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js index a4347f508a776..2af2bba632a7e 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js @@ -209,21 +209,26 @@ describe('IfStatement class', () => { const esVertex = new PluginVertex({ edgesByFrom: {} }, { id: 'es_output' }); esVertex.pipelineStage = 'output'; +<<<<<<< HEAD ifVertex.trueOutgoingVertices = [esVertex]; ifVertex.falseOutgoingVertices = []; +======= + ifVertex.trueOutgoingVertex = esVertex; +>>>>>>> Finish moving flatten logic into classes, add tests. }); it('creates list and sub-list for nested statements', () => { const ifStatement = IfStatement.fromPipelineGraphVertex(ifVertex, pipelineStage); - const result = ifStatement.toList(0, 'output'); + const result = ifStatement.toList(0, null); expect(result).to.be.an(Array); expect(result.length).to.be(2); expect(result[0]).to.be.an(IfElement); expect(result[0].id).to.be('0aef421'); - expect(result[1]).to.be.an(PluginElement); - const plugin = result[1]; + expect(result[1]).to.be.an(Array); + expect(result[1].length).to.be(1); + const plugin = result[1][0]; expect(plugin).to.be.an(PluginElement); expect(plugin.id).to.be('es_output'); }); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js index 84c43537a11e7..8776881db1a88 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js @@ -43,14 +43,16 @@ export class IfStatement extends Statement { const ifElement = new IfElement(this, depth, parentId); list.push(ifElement); - const nestedElementDepth = depth + 1; - addStatementsToList(list, this.trueStatements, nestedElementDepth, ifElement.id); + this.trueStatements.forEach(trueStatement => { + list.push(trueStatement.toList(depth + 1, this.id)); + }); if (this.elseStatements.length) { const elseElement = new ElseElement(this, depth, parentId); list.push(elseElement); - - addStatementsToList(list, this.elseStatements, nestedElementDepth, elseElement.id); + this.elseStatements.forEach(elseStatement => { + list.push(elseStatement.toList(depth + 1, elseElement.id)); + }); } return list; From 7c1c9a1b59812c460171975481e359db36094b3b Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 18 May 2018 12:39:55 -0400 Subject: [PATCH 09/44] Simplify flattening, remove non-native dependency. Add more tests. --- .../pipeline_viewer/models/list/flatten_pipeline_section.js | 6 ++---- .../pipeline_viewer/models/pipeline/if_statement.js | 5 +++-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js index de0c7344129c2..efffd9ac33de6 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js @@ -4,14 +4,12 @@ * you may not use this file except in compliance with the Elastic License. */ -import { flattenDeep } from 'lodash'; - export function flattenPipelineSection(pipelineSection, depth, parentId) { const list = []; pipelineSection.forEach(statement => { - list.push(statement.toList(depth, parentId)); + list.push(...statement.toList(depth, parentId)); }); - return flattenDeep(list); + return list; } diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js index 8776881db1a88..eceeeb5437aef 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js @@ -44,14 +44,15 @@ export class IfStatement extends Statement { list.push(ifElement); this.trueStatements.forEach(trueStatement => { - list.push(trueStatement.toList(depth + 1, this.id)); + list.push(...trueStatement.toList(depth + 1, this.id)); }); if (this.elseStatements.length) { const elseElement = new ElseElement(this, depth, parentId); list.push(elseElement); + this.elseStatements.forEach(elseStatement => { - list.push(elseStatement.toList(depth + 1, elseElement.id)); + list.push(...elseStatement.toList(depth + 1, elseElement.id)); }); } From 096c7da562f6c36980b2f6f1d86c81f2af31fd64 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 18 May 2018 12:54:00 -0400 Subject: [PATCH 10/44] Add defaults to simplify function call. --- .../pipeline_viewer/models/list/flatten_pipeline_section.js | 2 +- .../pipeline_viewer/models/list/pipeline_to_list.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js index efffd9ac33de6..fa158ffd75d38 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/flatten_pipeline_section.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export function flattenPipelineSection(pipelineSection, depth, parentId) { +export function flattenPipelineSection(pipelineSection, depth = 0, parentId = null) { const list = []; pipelineSection.forEach(statement => { diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js index ebd535ea0dbef..67ae72661297d 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js @@ -7,9 +7,9 @@ import { flattenPipelineSection } from './flatten_pipeline_section'; export function pipelineToList(pipeline) { - const inputs = flattenPipelineSection(pipeline.inputStatements, 0, null); - const filters = flattenPipelineSection(pipeline.filterStatements, 0, null); - const outputs = flattenPipelineSection(pipeline.outputStatements, 0, null); + const inputs = flattenPipelineSection(pipeline.inputStatements); + const filters = flattenPipelineSection(pipeline.filterStatements); + const outputs = flattenPipelineSection(pipeline.outputStatements); const { queue } = pipeline; return { From bcdbfa8ac07ce9ab5a51debeedf7bc1a3e9cbf9a Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 18 May 2018 13:42:58 -0400 Subject: [PATCH 11/44] Refactor two blocks into a function. --- .../pipeline_viewer/models/pipeline/if_statement.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js index eceeeb5437aef..b81ba920518d2 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js @@ -22,7 +22,7 @@ function makeStatementsForOutgoingVertices(outgoingVertices, statements, next, p function addStatementsToList(list, statements, depth, id) { statements.forEach(statement => { - list.push(...statement.toList(depth, id)); + list.push(...statement.toList(depth + 1, id)); }); } @@ -43,17 +43,13 @@ export class IfStatement extends Statement { const ifElement = new IfElement(this, depth, parentId); list.push(ifElement); - this.trueStatements.forEach(trueStatement => { - list.push(...trueStatement.toList(depth + 1, this.id)); - }); + addStatementsToList(list, this.trueStatements, depth, this.id); if (this.elseStatements.length) { const elseElement = new ElseElement(this, depth, parentId); list.push(elseElement); - this.elseStatements.forEach(elseStatement => { - list.push(...elseStatement.toList(depth + 1, elseElement.id)); - }); + addStatementsToList(list, this.elseStatements, depth, elseElement.id); } return list; From 406d2be5249c66cf0a764c212f18b1732f16c3e4 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 18 May 2018 16:35:37 -0400 Subject: [PATCH 12/44] Begin adapting components for list. --- .../views/config_viewer/config_viewer.js | 39 +++++++-- .../views/config_viewer/statement_list.js | 79 +++++++++++++++---- .../logstash/pipeline_viewer/index.js | 6 +- 3 files changed, 102 insertions(+), 22 deletions(-) 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/config_viewer/config_viewer.js index dcf739e26657b..a064d613add52 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/config_viewer/config_viewer.js @@ -7,11 +7,12 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { DetailDrawer } from '../detail_drawer'; -import { renderSection } from './statement_section'; -import { getStatementListFromPipeline } from './statement_list'; +//import { renderSection } from './statement_section'; +import { StatementSection } from './statement_list'; export class ConfigViewer extends React.Component { constructor() { @@ -60,16 +61,40 @@ export class ConfigViewer extends React.Component { render() { const { - pipeline - } = this.props; + inputs, + filters, + outputs, + queue + } = this.props.pipeline; + console.log(queue); return (
      - { - getStatementListFromPipeline(pipeline, this.onShowVertexDetails).map(section => renderSection(section)) - } + + Queue goes here + + { this.renderDetailDrawer() }
      ); } } + +ConfigViewer.propTypes = { + inputs: PropTypes.array, + filters: PropTypes.array, + outputs: PropTypes.array, + queue: PropTypes.object, +}; \ No newline at end of file diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 6d81f236407ee..03c22ecc2a0d7 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -8,20 +8,71 @@ import React from 'react'; -import { Statement } from './statement'; - -const StatementList = ({ statements, vertexSelected }) => ( - statements.map((statement, index) => ( - - )) -); +import { + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiTitle, +} from '@elastic/eui'; + +function Statement() { + return ( +
    • hello! I am a Statement!
      • + ); +} + +export function StatementSection({ iconType, headingText, statements }) { + return ( +
      + + + + + + +

      {headingText}

      +       +       +       + +
      + ); +} + +function StatementList({ statements }) { + return ( +
        + { + statements.map(statement => ( + + )) + } +
      + ); +} + +// const StatementList = ({ statements, vertexSelected }) => ( +// statements.map((statement, index) => ( +// +// )) +// ); const sectionFactory = (headerText, iconType, children, vertexSelected) => ( { 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 ac25f86f9bd4c..86e5d5ad7d045 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 @@ -11,6 +11,7 @@ import { uiModules } from 'ui/modules'; import { ConfigViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer/views/config_viewer'; // import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer'; import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline'; +import { pipelineToList } 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', []); @@ -33,9 +34,12 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => { const configModel = Pipeline.fromPipelineGraph(pipelineState.config.graph); + console.log(configModel); + console.log(pipelineToList(configModel)); + const configViewer = ( ); From 97c7b77a33dc5b7ddf4352decc36ccd8a66cc5a5 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 23 May 2018 09:18:01 -0400 Subject: [PATCH 13/44] Add collapse functionality. --- .../views/config_viewer/config_viewer.js | 21 +- .../views/config_viewer/if_statement.js | 362 +++++++++++------- .../views/config_viewer/queue.js | 42 +- .../views/config_viewer/statement.js | 215 +++++++---- .../views/config_viewer/statement_list.js | 114 ++++-- .../components/logstash/config_viewer.less | 52 +++ 6 files changed, 549 insertions(+), 257 deletions(-) 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/config_viewer/config_viewer.js index a064d613add52..a8427b0562820 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/config_viewer/config_viewer.js @@ -11,8 +11,8 @@ import PropTypes from 'prop-types'; import { DetailDrawer } from '../detail_drawer'; -//import { renderSection } from './statement_section'; import { StatementSection } from './statement_list'; +import { Queue } from './queue'; export class ConfigViewer extends React.Component { constructor() { @@ -67,24 +67,23 @@ export class ConfigViewer extends React.Component { queue } = this.props.pipeline; - console.log(queue); return (
      - Queue goes here + { this.renderDetailDrawer() }
      @@ -93,8 +92,8 @@ export class ConfigViewer extends React.Component { } ConfigViewer.propTypes = { - inputs: PropTypes.array, - filters: PropTypes.array, - outputs: PropTypes.array, - queue: PropTypes.object, -}; \ No newline at end of file + inputs: PropTypes.array.isRequired, + filters: PropTypes.array.isRequired, + outputs: PropTypes.array.isRequired, + queue: PropTypes.object.isRequired, +}; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js index b0a6e51ae74de..9cbbb0d0871c4 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js @@ -7,176 +7,252 @@ import React from 'react'; -import { PropTypes } from 'prop-types'; - -import { Statement } from './statement'; +// import { PropTypes } from 'prop-types'; import { EuiButtonEmpty, EuiButtonIcon, EuiCodeBlock, EuiFlexItem, - EuiFlexGroup, - EuiPanel + EuiFlexGroup } from '@elastic/eui'; -const IfChildGroup = ({ heading, condition, children, vertex, vertexSelected }) => ( -
    • - -
      • -); - -const ElseBlock = ({ isLast, children, vertex, vertexSelected }) => ( -
    • - -
      • -); - -export const IfStatement = ({ isLast, statement, vertexSelected }) => ( - [ - 0} - key={`if-section_${statement.id}`} - vertex={statement.vertex} - vertexSelected={vertexSelected} - />, - statement.elseStatements.length > 0 - ? ( - - ) - : null - ] -); - -class IfPill extends React.Component { - constructor() { - super(); +export class IfStatement extends React.PureComponent { + constructor(props) { + super(props); + this.state = { isCollapsed: false }; - this.toggleVisibility = this.toggleVisibility.bind(this); + this.toggleClicked = this.toggleClicked.bind(this); + this.getToggleIconType = this.getToggleIconType.bind(this); } - toggleVisibility() { - const nextState = !this.state.isCollapsed; + toggleClicked() { + const { id } = this.props.statement; + + const { + collapse, + expand + } = this.props; + this.setState({ - isCollapsed: nextState + isCollapsed: !this.state.isCollapsed }); - } - getChildDisplay() { - return this.state.isCollapsed - ? { display: 'none' } - : { }; + if (this.state.isCollapsed) { + expand(id); + } else { + collapse(id); + } } - getButtonIconType() { - return this.state.isCollapsed - ? 'arrowRight' - : 'arrowDown'; + getToggleIconType() { + return this.state.isCollapsed ? 'arrowRight' : 'arrowDown'; } render() { - const { - childStatements, - condition, - heading, - vertex, - vertexSelected - } = this.props; - const childDisplay = this.getChildDisplay(); - const handler = () => vertexSelected(vertex); + const { statement } = this.props; + const { condition } = statement; return ( -
      - + - - - - - - - {heading} - - - { - condition !== null && - - - {condition} - - - } - - -
        + + - { - childStatements.map((statement, index) => ( - - )) - } -
      -
      + + if + + + + + {condition} + + + ); } } -IfPill.propTypes = { - childStatements: PropTypes.array.isRequired, - condition: PropTypes.string, - heading: PropTypes.string.isRequired -}; +// const IfChildGroup = ({ heading, condition, children, vertex, vertexSelected }) => ( +//
    • +// +//
      • +// ); + +// const ElseBlock = ({ isLast, children, vertex, vertexSelected }) => ( +//
    • +// +//
      • +// ); + +// export const IfStatement = ({ isLast, statement, vertexSelected }) => ( +// [ +// 0} +// key={`if-section_${statement.id}`} +// vertex={statement.vertex} +// vertexSelected={vertexSelected} +// />, +// statement.elseStatements.length > 0 +// ? ( +// +// ) +// : null +// ] +// ); + +// class IfPill extends React.Component { +// constructor() { +// super(); +// this.state = { +// isCollapsed: false +// }; + +// this.toggleVisibility = this.toggleVisibility.bind(this); +// } + +// toggleVisibility() { +// const nextState = !this.state.isCollapsed; +// this.setState({ +// isCollapsed: nextState +// }); +// } + +// getChildDisplay() { +// return this.state.isCollapsed +// ? { display: 'none' } +// : { }; +// } + +// getButtonIconType() { +// return this.state.isCollapsed +// ? 'arrowRight' +// : 'arrowDown'; +// } + +// render() { +// const { +// childStatements, +// condition, +// heading, +// vertex, +// vertexSelected +// } = this.props; +// const childDisplay = this.getChildDisplay(); +// const handler = () => vertexSelected(vertex); + +// return ( +//
      +// +// +// +// +// +// +// +// {heading} +// +// +// { +// condition !== null && +// +// +// {condition} +// +// +// } +// +// +//
        +// { +// childStatements.map((statement, index) => ( +// +// )) +// } +//
      +//
      +// ); +// } +// } + +// IfPill.propTypes = { +// childStatements: PropTypes.array.isRequired, +// condition: PropTypes.string, +// heading: PropTypes.string.isRequired +// }; 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/config_viewer/queue.js index d3f07927bc545..8088a776210be 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/config_viewer/queue.js @@ -6,21 +6,29 @@ import React from 'react'; -export const Queue = () => ( -
    • -
      - Queue stats not available - {/* - - - Queue - - - */} +import { + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiTitle +} from '@elastic/eui'; + +export function Queue() { + return ( +
      + + + + + + +

      Queue

      +       +       +       +
      + Queue stats 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/config_viewer/statement.js index 805aab8ae32c8..694bfb7fd534c 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/config_viewer/statement.js @@ -8,72 +8,159 @@ import React from 'react'; -import { formatMetric } from '../../../../../lib/format_number'; +// import { formatMetric } from '../../../../../lib/format_number'; -import { PluginStatement } from './plugin_statement'; -import { Stat } from './stat'; +import { PluginStatement } from '../../models/pipeline/plugin_statement'; +// import { Stat } from './stat'; import { IfStatement } from './if_statement'; -import { Queue } from './queue'; - -const getDefaultStats = ({ pluginType, vertex }) => { - switch (pluginType) { - case 'input': - return [ - new Stat( - formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s emitted'), - vertex.isSlow() - ) - ]; - case 'filter': - case 'output': - return [ - new Stat( - formatMetric(Math.round(vertex.percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }), - vertex.isTimeConsuming() - ), - new Stat( - formatMetric(vertex.latestMillisPerEvent, '0.[00]a', 'ms/e'), - vertex.isSlow() - ), - new Stat(formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s received')) - ]; - } - return []; -}; - -export const Statement = ({ isLast, statement, vertexSelected, isEvenChild }) => { - const klass = statement.constructor.name; - const { vertex } = statement; - - const handler = () => vertexSelected(vertex); - switch (klass) { - case 'IfStatement': - return ( -
        - { +// switch (pluginType) { +// case 'input': +// return [ +// new Stat( +// formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s emitted'), +// vertex.isSlow() +// ) +// ]; +// case 'filter': +// case 'output': +// return [ +// new Stat( +// formatMetric(Math.round(vertex.percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }), +// vertex.isTimeConsuming() +// ), +// new Stat( +// formatMetric(vertex.latestMillisPerEvent, '0.[00]a', 'ms/e'), +// vertex.isSlow() +// ), +// new Stat(formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s received')) +// ]; +// } +// return []; +// }; + +// export const Statement = ({ isLast, statement, vertexSelected, isEvenChild }) => { +// const klass = statement.constructor.name; +// const { vertex } = statement; + +// const handler = () => vertexSelected(vertex); +// switch (klass) { +// case 'IfStatement': +// return ( +//
          +// +//
        +// ); +// case 'PluginStatement': +// return ( +// +// ); +// case 'Queue': +// return ( +// +// ); +// } +// }; + +function pluginStatement(statement) { + const { + hasExplicitId, + id, + name, + } = statement; + return ( +
        + + + -
      - ); - case 'PluginStatement': - return ( - - ); - case 'Queue': - return ( - - ); + + + {name} + + { + hasExplicitId && + +
      + {id} +
      +       + } + +
    + ); +} + +export class Statement extends React.PureComponent +{ + getNestingSpacers(depth) { + const spacers = []; + for (let i = 0; i < depth; i += 1) { + spacers.push(
    ); + } + return spacers; + } + + getStatement(statement) { + const { + collapse, + expand } = this.props; + + return statement instanceof PluginStatement + ? pluginStatement(statement) + : ; + } + + render() { + const { + depth, + // parentId, + statement + } = this.props.element; + + const spacers = this.getNestingSpacers(depth); + + const statementComponent = this.getStatement(statement); + + return ( +
  • +
    + {spacers} +
    +
    + {statementComponent} +
    +
    • + ); } -}; +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 03c22ecc2a0d7..67821b07273d7 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -4,24 +4,40 @@ * you may not use this file except in compliance with the Elastic License. */ - - import React from 'react'; import { + // EuiButtonEmpty, + // EuiButtonIcon, + // EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiTitle, } from '@elastic/eui'; +// import { PluginStatement } from '../../models/pipeline/plugin_statement'; +import { Statement } from './statement'; + +// function getStats() { +// return ( + +// ); +// } + -function Statement() { - return ( -
  • hello! I am a Statement!
    • - ); -} -export function StatementSection({ iconType, headingText, statements }) { +// function Statement({ element }) { +// const { +// statement, +// depth, +// parentId +// } = element; +// return ( +//
  • hello! I am a Statement!
    • +// ); +// } + +export function StatementSection({ iconType, headingText, elements }) { return (
    @@ -30,7 +46,7 @@ export function StatementSection({ iconType, headingText, statements }) { > - +
    ); } -function StatementList({ statements }) { - return ( -
      - { - statements.map(statement => ( - - )) +class StatementList extends React.PureComponent { + constructor(props) { + super(props); + this.state = { + collapsedParentIds: new Set() + }; + this.collapse = this.collapse.bind(this); + this.expand = this.expand.bind(this); + this.getStatement = this.getStatement.bind(this); + } + + elementIsCollapsed(id, parentId) { + return this.state.collapsedParentIds.has(id) || this.state.collapsedParentIds.has(parentId); + } + + expand(elementId) { + console.log(`expand ${elementId}`); + } + + // receive collapsed element, add to list + collapse(elementId) { + const collapsedParentIds = new Set(this.state.collapsedParentIds); + const { elements } = this.props; + + collapsedParentIds.add(elementId); + + elements.forEach(element => { + const { parentId, id } = element; + if (collapsedParentIds.has(parentId)) { + collapsedParentIds.add(id); } -
    - ); + }); + + this.setState({ + collapsedParentIds + }); + } + + getStatement(statement) { + const { parentId } = statement; + + return this.state.collapsedParentIds.has(parentId) ? + null + : + ( + + ); + } + + render() { + const { elements } = this.props; + + console.log(this.state.collapsedParentIds); + + return ( +
      + { + elements.map(this.getStatement) + } +
    + ); + } } // const StatementList = ({ statements, vertexSelected }) => ( 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 index 972529a9eff45..eaac09f435b67 100644 --- 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,3 +1,55 @@ +.cv-spacer { + height: 25px; + width: 10px; + display: inline-block; + margin-left: 11px; + border-left: 1px gray dashed; +} + +.cv-statement__content { + display: inline-block; + min-height: 28px; +} + +.cv-spaceContainer { + background-color: white; +} + +.cv-list { + display: flex; +} + +.cv-list-parent li:nth-child(2n+1) { + background: #f7f7f7; +} + +.cv-statement { + display: inline-block; + margin-top: 5px; +} + +.cv-statement__id { + background: #d9d9d9; + padding: 2px 4px 2px 4px; + font-size: 12px; + font-weight: bold; + border-radius: 2px; +} + +.cv-statement__name { + color: #50b0a4; + font-weight: bold; + font-size: small; +} + +.cv-ifStatement__title { + font-weight: bold; +} + +.cv-ifStatement__condition { + margin-top: 5px; +} + .ifPill__condition { margin-top: 5px; } From 647411948cc5bea100f8ab742af0b483c822a34f Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 23 May 2018 11:23:22 -0400 Subject: [PATCH 14/44] Add expand functionality. --- .../models/pipeline/__tests__/if_statement.js | 5 - .../config_viewer/collapsible_statement.js | 117 ++++++++ .../views/config_viewer/if_statement.js | 258 ------------------ .../views/config_viewer/statement.js | 10 +- .../views/config_viewer/statement_list.js | 31 ++- 5 files changed, 146 insertions(+), 275 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js index 2af2bba632a7e..2ec55725d68f7 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js @@ -209,12 +209,7 @@ describe('IfStatement class', () => { const esVertex = new PluginVertex({ edgesByFrom: {} }, { id: 'es_output' }); esVertex.pipelineStage = 'output'; -<<<<<<< HEAD - ifVertex.trueOutgoingVertices = [esVertex]; - ifVertex.falseOutgoingVertices = []; -======= ifVertex.trueOutgoingVertex = esVertex; ->>>>>>> Finish moving flatten logic into classes, add tests. }); it('creates list and sub-list for nested statements', () => { 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/config_viewer/collapsible_statement.js new file mode 100644 index 0000000000000..5e8dbe7f28243 --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/collapsible_statement.js @@ -0,0 +1,117 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; + +import { + EuiButtonEmpty, + EuiButtonIcon, + EuiCodeBlock, + EuiFlexItem, + EuiFlexGroup +} from '@elastic/eui'; + +function clickableStatementName(name) { + return ( + + + {name} + + + ); +} + +function ifStatement(statement) { + const { condition } = statement; + return [ + clickableStatementName('if'), + ( + + + {condition} + + + ) + ]; +} + +export class CollapsibleStatement extends React.PureComponent { + constructor(props) { + super(props); + + this.state = { + isCollapsed: false + }; + + this.toggleClicked = this.toggleClicked.bind(this); + this.getToggleIconType = this.getToggleIconType.bind(this); + } + + toggleClicked() { + const { id } = this.props; + + const { + collapse, + expand + } = this.props; + + this.setState({ + isCollapsed: !this.state.isCollapsed + }); + + if (this.state.isCollapsed) { + expand(id); + } else { + collapse(id); + } + } + + getToggleIconType() { + return this.state.isCollapsed ? 'arrowRight' : 'arrowDown'; + } + + getStatementBody() { + const { + isIf, + statement + } = this.props; + + return isIf ? + ifStatement(statement) + : clickableStatementName('else'); + } + + render() { + return ( + + + + + {this.getStatementBody()} + + ); + } +} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js deleted file mode 100644 index 9cbbb0d0871c4..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/if_statement.js +++ /dev/null @@ -1,258 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - - - -import React from 'react'; -// import { PropTypes } from 'prop-types'; - -import { - EuiButtonEmpty, - EuiButtonIcon, - EuiCodeBlock, - EuiFlexItem, - EuiFlexGroup -} from '@elastic/eui'; - -export class IfStatement extends React.PureComponent { - constructor(props) { - super(props); - - this.state = { - isCollapsed: false - }; - - this.toggleClicked = this.toggleClicked.bind(this); - this.getToggleIconType = this.getToggleIconType.bind(this); - } - - toggleClicked() { - const { id } = this.props.statement; - - const { - collapse, - expand - } = this.props; - - this.setState({ - isCollapsed: !this.state.isCollapsed - }); - - if (this.state.isCollapsed) { - expand(id); - } else { - collapse(id); - } - } - - getToggleIconType() { - return this.state.isCollapsed ? 'arrowRight' : 'arrowDown'; - } - - render() { - const { statement } = this.props; - const { condition } = statement; - - return ( - - - - - - - if - - - - - {condition} - - - - ); - } -} - -// const IfChildGroup = ({ heading, condition, children, vertex, vertexSelected }) => ( -//
  • -// -//
    • -// ); - -// const ElseBlock = ({ isLast, children, vertex, vertexSelected }) => ( -//
  • -// -//
    • -// ); - -// export const IfStatement = ({ isLast, statement, vertexSelected }) => ( -// [ -// 0} -// key={`if-section_${statement.id}`} -// vertex={statement.vertex} -// vertexSelected={vertexSelected} -// />, -// statement.elseStatements.length > 0 -// ? ( -// -// ) -// : null -// ] -// ); - -// class IfPill extends React.Component { -// constructor() { -// super(); -// this.state = { -// isCollapsed: false -// }; - -// this.toggleVisibility = this.toggleVisibility.bind(this); -// } - -// toggleVisibility() { -// const nextState = !this.state.isCollapsed; -// this.setState({ -// isCollapsed: nextState -// }); -// } - -// getChildDisplay() { -// return this.state.isCollapsed -// ? { display: 'none' } -// : { }; -// } - -// getButtonIconType() { -// return this.state.isCollapsed -// ? 'arrowRight' -// : 'arrowDown'; -// } - -// render() { -// const { -// childStatements, -// condition, -// heading, -// vertex, -// vertexSelected -// } = this.props; -// const childDisplay = this.getChildDisplay(); -// const handler = () => vertexSelected(vertex); - -// return ( -//
    -// -// -// -// -// -// -// -// {heading} -// -// -// { -// condition !== null && -// -// -// {condition} -// -// -// } -// -// -//
      -// { -// childStatements.map((statement, index) => ( -// -// )) -// } -//
    -//
    -// ); -// } -// } - -// IfPill.propTypes = { -// childStatements: PropTypes.array.isRequired, -// condition: PropTypes.string, -// heading: PropTypes.string.isRequired -// }; 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/config_viewer/statement.js index 694bfb7fd534c..d17a21f07f797 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/config_viewer/statement.js @@ -13,7 +13,9 @@ import React from 'react'; import { PluginStatement } from '../../models/pipeline/plugin_statement'; // import { Stat } from './stat'; -import { IfStatement } from './if_statement'; +import { CollapsibleStatement } from './collapsible_statement'; + +import { IfElement } from '../../models/list/if_element'; // import { Queue } from './queue'; import { @@ -134,11 +136,15 @@ export class Statement extends React.PureComponent getStatement(statement) { const { collapse, + element, expand } = this.props; + const { id } = element; + + const isIf = element instanceof IfElement; return statement instanceof PluginStatement ? pluginStatement(statement) - : ; + : ; } render() { diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 67821b07273d7..1c8737270382d 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -78,10 +78,22 @@ class StatementList extends React.PureComponent { } expand(elementId) { - console.log(`expand ${elementId}`); + const collapsedParentIds = new Set(this.state.collapsedParentIds); + const expandParentIds = [elementId]; + const { elements } = this.props; + + elements.forEach(element => { + const { id, parentId } = element; + if (expandParentIds.some(expandId => expandId === parentId || expandId === id)) { + expandParentIds.push(id); + collapsedParentIds.delete(id); + } + }); + console.log(collapsedParentIds); + + this.setState({ collapsedParentIds }); } - // receive collapsed element, add to list collapse(elementId) { const collapsedParentIds = new Set(this.state.collapsedParentIds); const { elements } = this.props; @@ -95,21 +107,20 @@ class StatementList extends React.PureComponent { } }); - this.setState({ - collapsedParentIds - }); + console.log(collapsedParentIds.entries()); + this.setState({ collapsedParentIds }); } - getStatement(statement) { - const { parentId } = statement; + getStatement(element) { + const { parentId } = element; return this.state.collapsedParentIds.has(parentId) ? null : ( @@ -119,7 +130,7 @@ class StatementList extends React.PureComponent { render() { const { elements } = this.props; - console.log(this.state.collapsedParentIds); + console.log(elements); return (
      From 79b7172c7f8d96c8912f9ed8ee9313264470573c Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 23 May 2018 12:49:55 -0400 Subject: [PATCH 15/44] Nested collapsed elements remain collapsed on parent expansion. --- .../config_viewer/collapsible_statement.js | 12 +-- .../views/config_viewer/statement.js | 16 +++- .../views/config_viewer/statement_list.js | 96 ++++++++++++++----- .../logstash/pipeline_viewer/index.js | 7 +- 4 files changed, 89 insertions(+), 42 deletions(-) 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/config_viewer/collapsible_statement.js index 5e8dbe7f28243..ddf662d8e81f0 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/config_viewer/collapsible_statement.js @@ -52,10 +52,6 @@ export class CollapsibleStatement extends React.PureComponent { constructor(props) { super(props); - this.state = { - isCollapsed: false - }; - this.toggleClicked = this.toggleClicked.bind(this); this.getToggleIconType = this.getToggleIconType.bind(this); } @@ -68,11 +64,7 @@ export class CollapsibleStatement extends React.PureComponent { expand } = this.props; - this.setState({ - isCollapsed: !this.state.isCollapsed - }); - - if (this.state.isCollapsed) { + if (this.props.isCollapsed) { expand(id); } else { collapse(id); @@ -80,7 +72,7 @@ export class CollapsibleStatement extends React.PureComponent { } getToggleIconType() { - return this.state.isCollapsed ? 'arrowRight' : 'arrowDown'; + return this.props.isCollapsed ? 'arrowRight' : 'arrowDown'; } getStatementBody() { 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/config_viewer/statement.js index d17a21f07f797..abc09161b0df6 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/config_viewer/statement.js @@ -137,14 +137,26 @@ export class Statement extends React.PureComponent const { collapse, element, - expand } = this.props; + expand, + isCollapsed + } = this.props; const { id } = element; const isIf = element instanceof IfElement; return statement instanceof PluginStatement ? pluginStatement(statement) - : ; + : + ( + + ); } render() { diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 1c8737270382d..6ccb16043a458 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -66,55 +66,100 @@ class StatementList extends React.PureComponent { constructor(props) { super(props); this.state = { - collapsedParentIds: new Set() + collapsedIds: new Set(), + collapsedChildIds: new Set() }; this.collapse = this.collapse.bind(this); this.expand = this.expand.bind(this); this.getStatement = this.getStatement.bind(this); - } - - elementIsCollapsed(id, parentId) { - return this.state.collapsedParentIds.has(id) || this.state.collapsedParentIds.has(parentId); + this.elementIsCollapsed = this.elementIsCollapsed.bind(this); } expand(elementId) { - const collapsedParentIds = new Set(this.state.collapsedParentIds); - const expandParentIds = [elementId]; - const { elements } = this.props; + const collapsedIds = new Set(this.state.collapsedIds); + const collapsedChildIds = new Set(); - elements.forEach(element => { + collapsedIds.delete(elementId); + + this.props.elements.forEach(element => { const { id, parentId } = element; - if (expandParentIds.some(expandId => expandId === parentId || expandId === id)) { - expandParentIds.push(id); - collapsedParentIds.delete(id); + + if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { + collapsedChildIds.add(id); } }); - console.log(collapsedParentIds); - this.setState({ collapsedParentIds }); + this.setState({ + collapsedIds, + collapsedChildIds + }); + console.log(collapsedIds); + console.log(collapsedChildIds); } collapse(elementId) { - const collapsedParentIds = new Set(this.state.collapsedParentIds); - const { elements } = this.props; + const collapsedIds = new Set(this.state.collapsedIds); + const collapsedChildIds = new Set(this.state.collapsedChildIds); + collapsedIds.add(elementId); - collapsedParentIds.add(elementId); + this.props.elements.forEach(element => { + const { id, parentId } = element; - elements.forEach(element => { - const { parentId, id } = element; - if (collapsedParentIds.has(parentId)) { - collapsedParentIds.add(id); + if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { + collapsedChildIds.add(id); } }); - console.log(collapsedParentIds.entries()); - this.setState({ collapsedParentIds }); + this.setState({ + collapsedIds, + collapsedChildIds + }); + console.log(collapsedIds); + console.log(collapsedChildIds); + } + + // expand(elementId) { + // const collapsedParentIds = new Set(this.state.collapsedParentIds); + // const expandParentIds = [elementId]; + // const { elements } = this.props; + + // elements.forEach(element => { + // const { id, parentId } = element; + // if (expandParentIds.some(expandId => expandId === parentId || expandId === id)) { + // expandParentIds.push(id); + // collapsedParentIds.delete(id); + // } + // }); + // console.log(collapsedParentIds); + + // this.setState({ collapsedParentIds }); + // } + + // collapse(elementId) { + // const collapsedParentIds = new Set(this.state.collapsedParentIds); + // const { elements } = this.props; + + // collapsedParentIds.add(elementId); + + // elements.forEach(element => { + // const { parentId, id } = element; + // if (collapsedParentIds.has(parentId)) { + // collapsedParentIds.add(id); + // } + // }); + + // console.log(collapsedParentIds.entries()); + // this.setState({ collapsedParentIds }); + // } + + elementIsCollapsed(elementId) { + return this.state.collapsedIds.has(elementId); } getStatement(element) { - const { parentId } = element; + const { id, parentId } = element; - return this.state.collapsedParentIds.has(parentId) ? + return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) ? null : ( @@ -123,6 +168,7 @@ class StatementList extends React.PureComponent { element={element} collapse={this.collapse} expand={this.expand} + isCollapsed={this.elementIsCollapsed(id)} /> ); } 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 86e5d5ad7d045..78076ffa9708b 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 @@ -11,7 +11,7 @@ import { uiModules } from 'ui/modules'; import { ConfigViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer/views/config_viewer'; // import { PipelineViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer'; import { Pipeline } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/pipeline'; -import { pipelineToList } from 'plugins/monitoring/components/logstash/pipeline_viewer/models/list'; +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', []); @@ -34,12 +34,9 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => { const configModel = Pipeline.fromPipelineGraph(pipelineState.config.graph); - console.log(configModel); - console.log(pipelineToList(configModel)); - const configViewer = ( ); From 1add4c1345e7e9d37a7fd144880a78cb0f90c044 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 23 May 2018 15:41:30 -0400 Subject: [PATCH 16/44] Style section headers. --- .../views/config_viewer/queue.js | 23 ++++-------- .../views/config_viewer/statement_list.js | 34 ++++-------------- .../config_viewer/statement_list_heading.js | 36 +++++++++++++++++++ .../components/logstash/config_viewer.less | 10 ++++++ 4 files changed, 59 insertions(+), 44 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js 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/config_viewer/queue.js index 8088a776210be..41e0e7d03cb4c 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/config_viewer/queue.js @@ -6,26 +6,15 @@ import React from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiTitle -} from '@elastic/eui'; +import { StatementListHeading } from './statement_list_heading'; export function Queue() { return ( -
      - - - - - - -

      Queue

      -       -       -       +
      +
      Queue stats not available
      diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 6ccb16043a458..12922ebadb9b6 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -6,15 +6,8 @@ import React from 'react'; -import { - // EuiButtonEmpty, - // EuiButtonIcon, - // EuiCodeBlock, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiTitle, -} from '@elastic/eui'; +import { StatementListHeading } from './statement_list_heading'; + // import { PluginStatement } from '../../models/pipeline/plugin_statement'; import { Statement } from './statement'; @@ -39,24 +32,11 @@ import { Statement } from './statement'; export function StatementSection({ iconType, headingText, elements }) { return ( -
      - - - - - - -

      {headingText}

      -       -       -       +
      +
      ); 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/config_viewer/statement_list_heading.js new file mode 100644 index 0000000000000..3ee39032f7dcb --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list_heading.js @@ -0,0 +1,36 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; + +import { + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiTitle +} from '@elastic/eui'; + +export function StatementListHeading({ + iconType, + title +}) { + return ( + + + + + + +

      {title}

      +       +       +       + ); +} 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 index eaac09f435b67..0fdb8a560a49a 100644 --- 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,3 +1,13 @@ +.cv-statementList +{ + margin: 16px; +} + +.cv-statementList__icon +{ + margin-top: 6px; +} + .cv-spacer { height: 25px; width: 10px; From ca7d35ba2d503ab8ad02e3e338b20999f1170dda Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 23 May 2018 16:49:42 -0400 Subject: [PATCH 17/44] Update Plugin statement styles. --- .../views/config_viewer/plugin_statement.js | 9 ++++++--- .../views/config_viewer/queue.js | 2 +- .../views/config_viewer/statement.js | 16 +++++++++++++--- .../components/logstash/config_viewer.less | 18 +++++++++++++++--- 4 files changed, 35 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 542c267d63217..f4ecab26928dd 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -67,15 +67,18 @@ export const PluginStatement = ({ statement, stats, vertexSelected, isEvenChild > - + - + {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/config_viewer/queue.js index 41e0e7d03cb4c..f578e229d7071 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/config_viewer/queue.js @@ -15,7 +15,7 @@ export function Queue() { iconType="logstashQueue" title="Queue" /> -
      +
      Queue stats 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/config_viewer/statement.js index abc09161b0df6..819aa4bf0e818 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/config_viewer/statement.js @@ -19,7 +19,7 @@ import { IfElement } from '../../models/list/if_element'; // import { Queue } from './queue'; import { - // EuiButtonEmpty, + EuiButtonEmpty, // EuiButtonIcon, // EuiCodeBlock, EuiFlexGroup, @@ -101,14 +101,24 @@ function pluginStatement(statement) { - + - {name} + + {name} + { hasExplicitId && 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 index 0fdb8a560a49a..1c516480ea2fc 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -5,17 +5,21 @@ .cv-statementList__icon { - margin-top: 6px; + margin-top: 5px; } .cv-spacer { - height: 25px; + height: 94%; width: 10px; display: inline-block; margin-left: 11px; border-left: 1px gray dashed; } +.cv-pluginStatement__icon { + padding-top: 4px; +} + .cv-statement__content { display: inline-block; min-height: 28px; @@ -25,8 +29,13 @@ background-color: white; } +.cv-queue__messageText { + margin-left: 25px; +} + .cv-list { display: flex; + height: 32px; } .cv-list-parent li:nth-child(2n+1) { @@ -36,20 +45,23 @@ .cv-statement { display: inline-block; margin-top: 5px; + margin-left: 3px; } .cv-statement__id { background: #d9d9d9; - padding: 2px 4px 2px 4px; + padding: 4px 6px 4px 6px; font-size: 12px; font-weight: bold; border-radius: 2px; + margin-top: 1px; } .cv-statement__name { color: #50b0a4; font-weight: bold; font-size: small; + margin-top: -2px; } .cv-ifStatement__title { From fcb8407eb7847c6f8a277db4d7264aa6e1561c05 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 23 May 2018 18:00:14 -0400 Subject: [PATCH 18/44] Add DetailDrawer support. --- .../config_viewer/collapsible_statement.js | 18 ++++++++++++------ .../views/config_viewer/config_viewer.js | 6 ++++++ .../views/config_viewer/statement.js | 12 +++++++++--- .../views/config_viewer/statement_list.js | 9 +++++++-- 4 files changed, 34 insertions(+), 11 deletions(-) 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/config_viewer/collapsible_statement.js index ddf662d8e81f0..e39dbd5e01e39 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/config_viewer/collapsible_statement.js @@ -14,7 +14,7 @@ import { EuiFlexGroup } from '@elastic/eui'; -function clickableStatementName(name) { +function clickableStatementName(name, onVertexSelected) { return ( {name} @@ -29,10 +30,10 @@ function clickableStatementName(name) { ); } -function ifStatement(statement) { +function ifStatement(statement, onVertexSelected) { const { condition } = statement; return [ - clickableStatementName('if'), + clickableStatementName('if', onVertexSelected), ( { onShowVertexDetails(vertex); }; + return isIf ? - ifStatement(statement) - : clickableStatementName('else'); + ifStatement(statement, showVertexDetailsClicked) + : clickableStatementName('else', showVertexDetailsClicked); } render() { 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/config_viewer/config_viewer.js index a8427b0562820..127167f8f092c 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/config_viewer/config_viewer.js @@ -73,17 +73,23 @@ export class ConfigViewer extends React.Component { iconType="logstashInput" headingText="Inputs" elements={inputs} + onShowVertexDetails={this.onShowVertexDetails} + detailVertex={this.state.detailDrawer.vertex} /> { this.renderDetailDrawer() }
      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/config_viewer/statement.js index 819aa4bf0e818..4f9c743d94352 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/config_viewer/statement.js @@ -90,11 +90,12 @@ import { // } // }; -function pluginStatement(statement) { +function pluginStatement(statement, onShowVertexDetails) { const { hasExplicitId, id, name, + vertex, } = statement; return (
      @@ -116,6 +117,7 @@ function pluginStatement(statement) { flush="left" size="xs" className="cv-statement__name" + onClick={() => { onShowVertexDetails(vertex); }} > {name} @@ -148,14 +150,16 @@ export class Statement extends React.PureComponent collapse, element, expand, - isCollapsed + isCollapsed, + onShowVertexDetails } = this.props; const { id } = element; const isIf = element instanceof IfElement; + console.log(onShowVertexDetails); return statement instanceof PluginStatement - ? pluginStatement(statement) + ? pluginStatement(statement, onShowVertexDetails) : ( ); } @@ -176,6 +181,7 @@ export class Statement extends React.PureComponent statement } = this.props.element; + console.log(this.props); const spacers = this.getNestingSpacers(depth); const statementComponent = this.getStatement(statement); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 12922ebadb9b6..b4b235278c264 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -30,14 +30,17 @@ import { Statement } from './statement'; // ); // } -export function StatementSection({ iconType, headingText, elements }) { +export function StatementSection({ iconType, headingText, elements, onShowVertexDetails }) { return (
      - +
      ); } @@ -138,6 +141,7 @@ class StatementList extends React.PureComponent { getStatement(element) { const { id, parentId } = element; + const { onShowVertexDetails } = this.props; return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) ? null @@ -149,6 +153,7 @@ class StatementList extends React.PureComponent { collapse={this.collapse} expand={this.expand} isCollapsed={this.elementIsCollapsed(id)} + onShowVertexDetails={onShowVertexDetails} /> ); } From f43affe9f2f3fdde852d7e9d253531f3d37f6603 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 24 May 2018 11:04:24 -0400 Subject: [PATCH 19/44] Update statement formatting. --- .../config_viewer/collapsible_statement.js | 4 +- .../views/config_viewer/statement.js | 8 +- .../components/logstash/config_viewer.less | 74 +++---------------- 3 files changed, 20 insertions(+), 66 deletions(-) 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/config_viewer/collapsible_statement.js index e39dbd5e01e39..f953d9338bc5d 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/config_viewer/collapsible_statement.js @@ -23,8 +23,9 @@ function clickableStatementName(name, onVertexSelected) { color="text" size="xs" onClick={onVertexSelected} + className="cv-ifElseStatement__title" > - {name} + {name} ); @@ -106,6 +107,7 @@ export class CollapsibleStatement extends React.PureComponent { aria-label iconType={this.getToggleIconType()} onClick={this.toggleClicked} + className="cv-ifElseStatement__toggle" /> {this.getStatementBody()} 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/config_viewer/statement.js index 4f9c743d94352..eb58ec5824657 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/config_viewer/statement.js @@ -157,7 +157,6 @@ export class Statement extends React.PureComponent const isIf = element instanceof IfElement; - console.log(onShowVertexDetails); return statement instanceof PluginStatement ? pluginStatement(statement, onShowVertexDetails) : @@ -181,7 +180,7 @@ export class Statement extends React.PureComponent statement } = this.props.element; - console.log(this.props); + const topLevelStyle = depth === 0 ? { paddingLeft: '0px' } : null; const spacers = this.getNestingSpacers(depth); const statementComponent = this.getStatement(statement); @@ -191,7 +190,10 @@ export class Statement extends React.PureComponent
      {spacers}
      -
      +
      {statementComponent}
      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 index 1c516480ea2fc..42ecbe582ab8a 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -16,6 +16,10 @@ border-left: 1px gray dashed; } +.cv-spacer:last-child { + width: 0px; +} + .cv-pluginStatement__icon { padding-top: 4px; } @@ -23,6 +27,7 @@ .cv-statement__content { display: inline-block; min-height: 28px; + padding-left: 9px; } .cv-spaceContainer { @@ -64,73 +69,18 @@ margin-top: -2px; } -.cv-ifStatement__title { - font-weight: bold; -} - -.cv-ifStatement__condition { - margin-top: 5px; -} - -.ifPill__condition { - margin-top: 5px; -} - -.statement__body { - border: none; - box-shadow: none; - background: transparent; - //min-width: 190px; - //max-width: 400px; - //max-height: 320px; -} - -// .statement__content { -// background-color: none; -// } - -.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; +.cv-ifElseStatement__title { margin-top: 2px; } -.statement__stat { - text-align: right; - margin-left: 15px; - min-width: 150px; -} - -.ifChildren { - border-left: 1px dashed #D0D0D0; - padding-left: 8px; - margin-left: 12px; -} - -.statement { - border: none; - margin-bottom: 8px; - // margin-top: 10px; +.cv-ifElseStatement__name { + font-weight: bold; } -.evenStatement { - background-color: #D5D5D5; +.cv-ifElseStatement__toggle { + margin-top: 3px; } -.statementSection { - border: none; - box-shadow: none; +.cv-ifStatement__condition { + margin-top: 7px; } From 7fa88d502ad947410846bbf8015c2ce56ac6ac4d Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 24 May 2018 14:59:39 -0400 Subject: [PATCH 20/44] Add stats to plugin element rows. --- .../views/config_viewer/statement.js | 137 ++++++++++++++---- .../components/logstash/config_viewer.less | 35 +++++ 2 files changed, 143 insertions(+), 29 deletions(-) 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/config_viewer/statement.js index eb58ec5824657..6b99db32aaea3 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/config_viewer/statement.js @@ -18,6 +18,8 @@ import { CollapsibleStatement } from './collapsible_statement'; import { IfElement } from '../../models/list/if_element'; // import { Queue } from './queue'; +import { formatMetric } from '../../../../../lib/format_number'; + import { EuiButtonEmpty, // EuiButtonIcon, @@ -90,6 +92,65 @@ import { // } // }; +function getInputStatementStats(inputVertex) { + const { latestEventsPerSecond } = inputVertex; + + return [ + { + className: 'cv-inputStat__eventsEmitted', + value: formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') + } + ]; +} + +function getProcessorStatementStats(processorVertex) { + const { + latestMillisPerEvent, + latestEventsPerSecond, + percentOfTotalProcessorTime, + } = processorVertex; + + const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorStat__cpuTimeHighlight' : ''; + const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorStat__eventMillis' : ''; + + return [ + { + className: `cv-processorStat__cpuTime ${cpuHighlight}`, + value: formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }) + }, + { + className: `cv-processorStat__eventMillis ${eventMillisHighlight}`, + value: formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e') + }, + { + className: 'cv-processorStat__events', + value: formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') + } + ]; +} + +function getPluginStatementStatList(statement) { + const { + pluginType, + vertex + } = statement; + + const stats = pluginType === 'input' + ? getInputStatementStats(vertex) + : getProcessorStatementStats(vertex); + + return stats.map(({ className, value }) => ( + +
      + {value} +
      +       + )); +} + function pluginStatement(statement, onShowVertexDetails) { const { hasExplicitId, @@ -97,37 +158,53 @@ function pluginStatement(statement, onShowVertexDetails) { name, vertex, } = statement; + + const statementStats = getPluginStatementStatList(statement); + return (
      - - - - { onShowVertexDetails(vertex); }} - > - {name} - + + + + + + { onShowVertexDetails(vertex); }} + > + {name} + + + { + hasExplicitId && + +
      + {id} +
      +       + } +       { - hasExplicitId && + statementStats && -
      - {id} -
      + + {statementStats} +       }       @@ -190,12 +267,14 @@ export class Statement extends React.PureComponent
      {spacers}
      -
      - {statementComponent} -
      + +
      + {statementComponent} +
      +       ); } 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 index 42ecbe582ab8a..11c38a63528ec 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -24,10 +24,44 @@ padding-top: 4px; } +.cv-inputStat__eventsEmitted { + width: 130px; +} + +.cv-pluginStatement__statContainer { + padding: 4px 8px 4px 8px; + border-radius: 2px; +} + +.cv-processorStat__cpuTime { + width: 35px; + padding: 2px 4px 2px 8px; + border-radius: 2px; + margin-top: -2px; +} + +.cv-processorStat__cpuTimeHighlight { + background: #d6b283; +} + +.cv-processorStat__eventMillis { + width: 80px; + padding: 2px 4px 2px 4px; + margin-top: -2px; +} + +.cv-processorStat__events { + width: 130px; + border-radius: 2px; + padding: 2px 4px 2px 4px; + margin-top: -2px; +} + .cv-statement__content { display: inline-block; min-height: 28px; padding-left: 9px; + width: 100%; } .cv-spaceContainer { @@ -51,6 +85,7 @@ display: inline-block; margin-top: 5px; margin-left: 3px; + width: 100%; } .cv-statement__id { From c35d134bba7fda130b102f0f5361c885b2f86bc7 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 24 May 2018 15:10:40 -0400 Subject: [PATCH 21/44] Resolve conflicts. --- .../models/list/pipeline_to_list.js | 21 --- .../models/list/pipeline_to_list.test.js | 147 ------------------ .../models/pipeline/__tests__/if_statement.js | 10 +- .../models/pipeline/if_statement.js | 7 +- .../models/pipeline/pipeline.js | 19 +-- 5 files changed, 11 insertions(+), 193 deletions(-) delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js deleted file mode 100644 index 67ae72661297d..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.js +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { flattenPipelineSection } from './flatten_pipeline_section'; - -export function pipelineToList(pipeline) { - const inputs = flattenPipelineSection(pipeline.inputStatements); - const filters = flattenPipelineSection(pipeline.filterStatements); - const outputs = flattenPipelineSection(pipeline.outputStatements); - const { queue } = pipeline; - - return { - inputs, - filters, - outputs, - queue, - }; -} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js deleted file mode 100644 index 270a0bf7877f9..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/list/pipeline_to_list.test.js +++ /dev/null @@ -1,147 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { pipelineToList } from './pipeline_to_list'; -import { PluginStatement } from '../pipeline/plugin_statement'; -import { IfStatement } from '../pipeline/if_statement'; -import { PluginElement } from './plugin_element'; -import { IfElement } from './if_element'; -import { ElseElement } from './else_element'; - -describe('pipelineToList', () => { - let pipeline; - - beforeEach(() => { - pipeline = { - inputStatements: [ - PluginStatement.fromPipelineGraphVertex({ id: 'first' }), - ], - filterStatements: [ - new IfStatement( - { id: 'if' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'if_child' })], - [ PluginStatement.fromPipelineGraphVertex({ id: 'else_child' })] - ) - ], - outputStatements: [ - PluginStatement.fromPipelineGraphVertex({ id: 'output' }) - ], - queue: { } - }; - }); - - it('creates list with element for each statement', () => { - const result = pipelineToList(pipeline); - const { - inputs, - filters, - outputs - } = result; - - expect(inputs).toHaveLength(1); - expect(filters).toHaveLength(4); - expect(outputs).toHaveLength(1); - }); - - it('creates list with if in outputs', () => { - pipeline.outputStatements.push( - new IfStatement( - { id: 'output_if' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'output_true' })], - [ PluginStatement.fromPipelineGraphVertex({ id: 'output_else' })] - ) - ); - - const result = pipelineToList(pipeline); - const { - inputs, - filters, - outputs - } = result; - - expect(inputs).toHaveLength(1); - expect(filters).toHaveLength(4); - expect(outputs).toHaveLength(5); - expect(outputs[0]).toBeInstanceOf(PluginElement); - expect(outputs[1]).toBeInstanceOf(IfElement); - expect(outputs[2]).toBeInstanceOf(PluginElement); - expect(outputs[3]).toBeInstanceOf(ElseElement); - expect(outputs[4]).toBeInstanceOf(PluginElement); - }); - - it('creates list for multi-nested if/else statements in filter section', () => { - pipeline.filterStatements = [ - new IfStatement( - { id: 'filter_if_1' }, - [ - new IfStatement( - { id: 'filter_if_2' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'plugin_1' })], - [ ] - ) - ], - [ - new IfStatement( - { id: 'filter_if_3' }, - [ PluginStatement.fromPipelineGraphVertex({ id: 'plugin_2' })], - [ PluginStatement.fromPipelineGraphVertex({ id: 'plugin_3' })] - ) - ] - ) - ]; - - const result = pipelineToList(pipeline); - const { - inputs, - filters, - outputs - } = result; - - expect(inputs).toHaveLength(1); - expect(outputs).toHaveLength(1); - expect(filters).toHaveLength(8); - - expect(filters[0].id).toBe('filter_if_1'); - expect(filters[0].depth).toBe(0); - expect(filters[0].parentId).toBe(null); - expect(filters[0]).toBeInstanceOf(IfElement); - - expect(filters[1].id).toBe('filter_if_2'); - expect(filters[1].depth).toBe(1); - expect(filters[1].parentId).toBe('filter_if_1'); - expect(filters[1]).toBeInstanceOf(IfElement); - - expect(filters[2].id).toBe('plugin_1'); - expect(filters[2].depth).toBe(2); - expect(filters[2].parentId).toBe('filter_if_2'); - expect(filters[2]).toBeInstanceOf(PluginElement); - - expect(filters[3].id).toBe('filter_if_1_else'); - expect(filters[3].depth).toBe(0); - expect(filters[3].parentId).toBe(null); - expect(filters[3]).toBeInstanceOf(ElseElement); - - expect(filters[4].id).toBe('filter_if_3'); - expect(filters[4].depth).toBe(1); - expect(filters[4].parentId).toBe('filter_if_1_else'); - expect(filters[4]).toBeInstanceOf(IfElement); - - expect(filters[5].id).toBe('plugin_2'); - expect(filters[5].depth).toBe(2); - expect(filters[5].parentId).toBe('filter_if_3'); - expect(filters[5]).toBeInstanceOf(PluginElement); - - expect(filters[6].id).toBe('filter_if_3_else'); - expect(filters[6].depth).toBe(1); - expect(filters[6].parentId).toBe('filter_if_1_else'); - expect(filters[6]).toBeInstanceOf(ElseElement); - - expect(filters[7].id).toBe('plugin_3'); - expect(filters[7].depth).toBe(2); - expect(filters[7].parentId).toBe('filter_if_3_else'); - expect(filters[7]).toBeInstanceOf(PluginElement); - }); -}); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js index 2ec55725d68f7..a4347f508a776 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/__tests__/if_statement.js @@ -209,21 +209,21 @@ describe('IfStatement class', () => { const esVertex = new PluginVertex({ edgesByFrom: {} }, { id: 'es_output' }); esVertex.pipelineStage = 'output'; - ifVertex.trueOutgoingVertex = esVertex; + ifVertex.trueOutgoingVertices = [esVertex]; + ifVertex.falseOutgoingVertices = []; }); it('creates list and sub-list for nested statements', () => { const ifStatement = IfStatement.fromPipelineGraphVertex(ifVertex, pipelineStage); - const result = ifStatement.toList(0, null); + const result = ifStatement.toList(0, 'output'); expect(result).to.be.an(Array); expect(result.length).to.be(2); expect(result[0]).to.be.an(IfElement); expect(result[0].id).to.be('0aef421'); - expect(result[1]).to.be.an(Array); - expect(result[1].length).to.be(1); - const plugin = result[1][0]; + expect(result[1]).to.be.an(PluginElement); + const plugin = result[1]; expect(plugin).to.be.an(PluginElement); expect(plugin.id).to.be('es_output'); }); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js index b81ba920518d2..84c43537a11e7 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/if_statement.js @@ -22,7 +22,7 @@ function makeStatementsForOutgoingVertices(outgoingVertices, statements, next, p function addStatementsToList(list, statements, depth, id) { statements.forEach(statement => { - list.push(...statement.toList(depth + 1, id)); + list.push(...statement.toList(depth, id)); }); } @@ -43,13 +43,14 @@ export class IfStatement extends Statement { const ifElement = new IfElement(this, depth, parentId); list.push(ifElement); - addStatementsToList(list, this.trueStatements, depth, this.id); + const nestedElementDepth = depth + 1; + addStatementsToList(list, this.trueStatements, nestedElementDepth, ifElement.id); if (this.elseStatements.length) { const elseElement = new ElseElement(this, depth, parentId); list.push(elseElement); - addStatementsToList(list, this.elseStatements, depth, elseElement.id); + addStatementsToList(list, this.elseStatements, nestedElementDepth, elseElement.id); } return list; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js index 2a38e555171ba..367e3be02a3f6 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/models/pipeline/pipeline.js @@ -58,24 +58,9 @@ function getQueue(pipelineGraph) { } function getOutputStatements(pipelineGraph) { - const vertices = pipelineGraph.getVertices() - .filter(v => (v.pipelineStage === 'output') && !v.incomingVertices.some(p => p.pipelineStage === 'output')); - const ret = vertices + return pipelineGraph.getVertices() + .filter(v => (v.pipelineStage === 'output') && !v.incomingVertices.some(p => p.pipelineStage === 'output')) .map(v => makeStatement(v, 'output')); - - // console.log(pipelineGraph.getVertices()); - // console.log(vertices); - // console.log(ret[2]); - // console.log(Object.keys(ret[2])); - // console.log(ret[2].allTrueVertices); - - // const allTrue = vertices[2].allTrueVertices; - // console.log(allTrue); - // console.log(allTrue[0]); - - //console.log(vertices[2].allTrueVertices); - - return ret; } export class Pipeline { From 431edbc47d9247df1caaa06ce6faf50ff8e752db Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 24 May 2018 15:29:50 -0400 Subject: [PATCH 22/44] Remove obsolete code. --- .../config_viewer/collapsible_statement.js | 8 +- .../views/config_viewer/index.js | 2 - .../views/config_viewer/metric.js | 18 --- .../views/config_viewer/plugin_statement.js | 114 ------------------ .../views/config_viewer/stat.js | 52 -------- .../views/config_viewer/statement.js | 82 +------------ .../views/config_viewer/statement_list.js | 104 +--------------- .../views/config_viewer/statement_section.js | 56 --------- .../logstash/pipeline_viewer/index.js | 3 - 9 files changed, 9 insertions(+), 430 deletions(-) delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js delete mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js 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/config_viewer/collapsible_statement.js index f953d9338bc5d..f791c7a85f84d 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/config_viewer/collapsible_statement.js @@ -95,12 +95,8 @@ export class CollapsibleStatement extends React.PureComponent { render() { return ( - - + + ( - stats.map(({ value, isHighlighted }, index) => ( -
      - - - -
      - )) -); - -const getStatStyle = isHighlighted => ( - { - backgroundColor: isHighlighted - ? 'orange' - : 'transparent', - borderRadius: "5px", - padding: "2px" - } -); - -const StatOverview = ({ value, isHighlighted }) => ( -
      {value}
      -); - -export const PluginStatement = ({ statement, stats, vertexSelected, isEvenChild }) => ( -
    • -
      - -
      - - - - - - - - - - {statement.name} - - - - - { - statement.hasExplicitId && - - {statement.id} - - } - - - - - { - stats && - stats.length > 0 && - - - - } - - -
      -       -
      -
      • -); diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js deleted file mode 100644 index ddde333711911..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - - - -import { formatMetric } from '../../../../../lib/format_number'; - -const getMetricValuesFromStat = ({ stat }) => { - if (!stat) { - return null; - } - - return stat.data.map(bucket => bucket.length > 1 ? bucket[1] : null); -}; - -const getReducedValueForMetric = ({ values, reducer, operation }) => { - if (values === null || values.length === 0) { - return null; - } - - const value = values.reduce(reducer); - - return operation !== null - ? operation(value) - : value; -}; - -export class Stat { - constructor(value, isHighlighted) { - this.value = value; - this.isHighlighted = isHighlighted; - } - - static fromMetric( - stats, - name, - format, - suffix, - reducer, - operation, - isHighlighted - ) { - const values = getMetricValuesFromStat({ stat: stats[name] }); - const finalValue = getReducedValueForMetric({ values, reducer, operation }); - const formattedValue = formatMetric(finalValue, format, suffix); - - return new Stat(formattedValue, isHighlighted); - } -} \ No newline at end of file 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/config_viewer/statement.js index 6b99db32aaea3..9f7c72f524041 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/config_viewer/statement.js @@ -7,90 +7,16 @@ import React from 'react'; - -// import { formatMetric } from '../../../../../lib/format_number'; - -import { PluginStatement } from '../../models/pipeline/plugin_statement'; -// import { Stat } from './stat'; - -import { CollapsibleStatement } from './collapsible_statement'; - -import { IfElement } from '../../models/list/if_element'; -// import { Queue } from './queue'; - -import { formatMetric } from '../../../../../lib/format_number'; - import { EuiButtonEmpty, - // EuiButtonIcon, - // EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiIcon, - // EuiTitle, } from '@elastic/eui'; - -// const getDefaultStats = ({ pluginType, vertex }) => { -// switch (pluginType) { -// case 'input': -// return [ -// new Stat( -// formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s emitted'), -// vertex.isSlow() -// ) -// ]; -// case 'filter': -// case 'output': -// return [ -// new Stat( -// formatMetric(Math.round(vertex.percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }), -// vertex.isTimeConsuming() -// ), -// new Stat( -// formatMetric(vertex.latestMillisPerEvent, '0.[00]a', 'ms/e'), -// vertex.isSlow() -// ), -// new Stat(formatMetric(vertex.latestEventsPerSecond, '0.[00]a', 'e/s received')) -// ]; -// } -// return []; -// }; - -// export const Statement = ({ isLast, statement, vertexSelected, isEvenChild }) => { -// const klass = statement.constructor.name; -// const { vertex } = statement; - -// const handler = () => vertexSelected(vertex); -// switch (klass) { -// case 'IfStatement': -// return ( -//
        -// -//
      -// ); -// case 'PluginStatement': -// return ( -// -// ); -// case 'Queue': -// return ( -// -// ); -// } -// }; +import { PluginStatement } from '../../models/pipeline/plugin_statement'; +import { CollapsibleStatement } from './collapsible_statement'; +import { IfElement } from '../../models/list/if_element'; +import { formatMetric } from '../../../../../lib/format_number'; function getInputStatementStats(inputVertex) { const { latestEventsPerSecond } = inputVertex; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index b4b235278c264..1553ae6edc30e 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -5,31 +5,9 @@ */ import React from 'react'; - import { StatementListHeading } from './statement_list_heading'; - -// import { PluginStatement } from '../../models/pipeline/plugin_statement'; import { Statement } from './statement'; -// function getStats() { -// return ( - -// ); -// } - - - -// function Statement({ element }) { -// const { -// statement, -// depth, -// parentId -// } = element; -// return ( -//
    • hello! I am a Statement!
      • -// ); -// } - export function StatementSection({ iconType, headingText, elements, onShowVertexDetails }) { return (
      @@ -76,8 +54,6 @@ class StatementList extends React.PureComponent { collapsedIds, collapsedChildIds }); - console.log(collapsedIds); - console.log(collapsedChildIds); } collapse(elementId) { @@ -97,44 +73,8 @@ class StatementList extends React.PureComponent { collapsedIds, collapsedChildIds }); - console.log(collapsedIds); - console.log(collapsedChildIds); } - // expand(elementId) { - // const collapsedParentIds = new Set(this.state.collapsedParentIds); - // const expandParentIds = [elementId]; - // const { elements } = this.props; - - // elements.forEach(element => { - // const { id, parentId } = element; - // if (expandParentIds.some(expandId => expandId === parentId || expandId === id)) { - // expandParentIds.push(id); - // collapsedParentIds.delete(id); - // } - // }); - // console.log(collapsedParentIds); - - // this.setState({ collapsedParentIds }); - // } - - // collapse(elementId) { - // const collapsedParentIds = new Set(this.state.collapsedParentIds); - // const { elements } = this.props; - - // collapsedParentIds.add(elementId); - - // elements.forEach(element => { - // const { parentId, id } = element; - // if (collapsedParentIds.has(parentId)) { - // collapsedParentIds.add(id); - // } - // }); - - // console.log(collapsedParentIds.entries()); - // this.setState({ collapsedParentIds }); - // } - elementIsCollapsed(elementId) { return this.state.collapsedIds.has(elementId); } @@ -143,10 +83,9 @@ class StatementList extends React.PureComponent { const { id, parentId } = element; const { onShowVertexDetails } = this.props; - return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) ? - null - : - ( + return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) + ? null + : ( { @@ -172,38 +109,3 @@ class StatementList extends React.PureComponent { ); } } - -// const StatementList = ({ statements, vertexSelected }) => ( -// statements.map((statement, index) => ( -// -// )) -// ); - -const sectionFactory = (headerText, iconType, children, vertexSelected) => ( - { - headerText, - iconType, - children: ( - - ) - } -); - -export const getStatementListFromPipeline = ({ inputStatements, queue, filterStatements, outputStatements }, vertexSelected) => ( - [ - sectionFactory('Input Statements', 'logstashInput', inputStatements, vertexSelected), - sectionFactory('Queue', 'logstashQueue', [queue], vertexSelected), - sectionFactory('Filter Statements', 'logstashFilter', filterStatements, vertexSelected), - sectionFactory('Output Statements', 'logstashOutput', outputStatements, vertexSelected) - ] -); 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/config_viewer/statement_section.js deleted file mode 100644 index c940da187263d..0000000000000 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - - - -import React from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, - // EuiHorizontalRule, - EuiIcon, - EuiPanel, - EuiSpacer, - EuiTitle -} from '@elastic/eui'; - -const StatementSection = ({ headerText, icon, children }) => ( - - - - {icon} - - - -

      {headerText}

      -       -       -       -
        - { - children - } -
      -       -); - -export const renderSection = ({ headerText, iconType, children }) => ( - [ - } - children={children} - key={headerText} - />, - - ] -); 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 78076ffa9708b..9509084b34f43 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 @@ -9,7 +9,6 @@ import { render } from 'react-dom'; import moment from 'moment'; import { uiModules } from 'ui/modules'; import { ConfigViewer } from 'plugins/monitoring/components/logstash/pipeline_viewer/views/config_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'; @@ -31,9 +30,7 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => { scope.$watch('pipeline', (updatedPipeline) => { pipelineState.update(updatedPipeline); - const configModel = Pipeline.fromPipelineGraph(pipelineState.config.graph); - const configViewer = ( Date: Thu, 24 May 2018 15:45:30 -0400 Subject: [PATCH 23/44] Reorganize code. --- .../config_viewer/collapsible_statement.js | 12 +++--- .../views/config_viewer/config_viewer.js | 14 +++---- .../views/config_viewer/queue.js | 1 - .../views/config_viewer/statement.js | 13 ++---- .../views/config_viewer/statement_list.js | 40 ++++++++----------- .../config_viewer/statement_list_heading.js | 1 - 6 files changed, 33 insertions(+), 48 deletions(-) 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/config_viewer/collapsible_statement.js index f791c7a85f84d..a59ee681c1026 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/config_viewer/collapsible_statement.js @@ -59,14 +59,14 @@ export class CollapsibleStatement extends React.PureComponent { } toggleClicked() { - const { id } = this.props; - const { collapse, - expand + expand, + id, + isCollapsed } = this.props; - if (this.props.isCollapsed) { + if (isCollapsed) { expand(id); } else { collapse(id); @@ -74,7 +74,8 @@ export class CollapsibleStatement extends React.PureComponent { } getToggleIconType() { - return this.props.isCollapsed ? 'arrowRight' : 'arrowDown'; + const { isCollapsed } = this.props; + return isCollapsed ? 'arrowRight' : 'arrowDown'; } getStatementBody() { @@ -85,7 +86,6 @@ export class CollapsibleStatement extends React.PureComponent { } = this.props; const { vertex } = statement; - const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); }; return isIf ? 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/config_viewer/config_viewer.js index 127167f8f092c..579f328b8c886 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/config_viewer/config_viewer.js @@ -8,11 +8,9 @@ import React from 'react'; import PropTypes from 'prop-types'; - import { DetailDrawer } from '../detail_drawer'; - -import { StatementSection } from './statement_list'; import { Queue } from './queue'; +import { StatementSection } from './statement_list'; export class ConfigViewer extends React.Component { constructor() { @@ -98,8 +96,10 @@ export class ConfigViewer extends React.Component { } ConfigViewer.propTypes = { - inputs: PropTypes.array.isRequired, - filters: PropTypes.array.isRequired, - outputs: PropTypes.array.isRequired, - queue: PropTypes.object.isRequired, + pipeline: PropTypes.shape({ + inputs: PropTypes.array.isRequired, + filters: PropTypes.array.isRequired, + outputs: PropTypes.array.isRequired, + queue: PropTypes.object.isRequired, + }) }; 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/config_viewer/queue.js index f578e229d7071..2e81950f297f2 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/config_viewer/queue.js @@ -5,7 +5,6 @@ */ import React from 'react'; - import { StatementListHeading } from './statement_list_heading'; export function Queue() { 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/config_viewer/statement.js index 9f7c72f524041..730f3653f3b64 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/config_viewer/statement.js @@ -4,8 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ - - import React from 'react'; import { EuiButtonEmpty, @@ -152,23 +150,20 @@ export class Statement extends React.PureComponent const { collapse, element, + element: { id }, expand, isCollapsed, onShowVertexDetails } = this.props; - const { id } = element; - - const isIf = element instanceof IfElement; return statement instanceof PluginStatement ? pluginStatement(statement, onShowVertexDetails) - : - ( + : ( { + const { id, parentId } = element; + + if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { + collapsedChildIds.add(id); + } + }); + return collapsedChildIds; +} + class StatementList extends React.PureComponent { constructor(props) { super(props); @@ -38,36 +50,18 @@ class StatementList extends React.PureComponent { expand(elementId) { const collapsedIds = new Set(this.state.collapsedIds); - const collapsedChildIds = new Set(); - collapsedIds.delete(elementId); - - this.props.elements.forEach(element => { - const { id, parentId } = element; - - if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { - collapsedChildIds.add(id); - } - }); - - this.setState({ - collapsedIds, - collapsedChildIds - }); + this.updateCollapsedElements(collapsedIds); } collapse(elementId) { const collapsedIds = new Set(this.state.collapsedIds); - const collapsedChildIds = new Set(this.state.collapsedChildIds); collapsedIds.add(elementId); + this.updateCollapsedElements(collapsedIds); + } - this.props.elements.forEach(element => { - const { id, parentId } = element; - - if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { - collapsedChildIds.add(id); - } - }); + updateCollapsedElements(collapsedIds) { + const collapsedChildIds = getCollapsedChildElements(this.props.elements, collapsedIds); this.setState({ collapsedIds, 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/config_viewer/statement_list_heading.js index 3ee39032f7dcb..dd4f04212e1d7 100644 --- 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/config_viewer/statement_list_heading.js @@ -5,7 +5,6 @@ */ import React from 'react'; - import { EuiFlexGroup, EuiFlexItem, From 669ca9152909666937cb2cbf69e5ee4bf50e41ac Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 24 May 2018 17:26:25 -0400 Subject: [PATCH 24/44] Remove warnings. --- .../views/config_viewer/collapsible_statement.js | 12 ++++++++++-- .../pipeline_viewer/views/config_viewer/statement.js | 5 ++--- .../less/components/logstash/config_viewer.less | 4 ++++ 3 files changed, 16 insertions(+), 5 deletions(-) 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/config_viewer/collapsible_statement.js index a59ee681c1026..6b79495257e6b 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/config_viewer/collapsible_statement.js @@ -18,6 +18,7 @@ function clickableStatementName(name, onVertexSelected) { return ( + - + ); + spacers.push(
      ); } return spacers; } 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 index 11c38a63528ec..ed89f5c22f01a 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -97,6 +97,10 @@ margin-top: 1px; } +.cv-statement__icon { + color: #50b0a4; +} + .cv-statement__name { color: #50b0a4; font-weight: bold; From a05f5d0a04ede08848528f394a8a55d928756b08 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 25 May 2018 00:30:21 -0400 Subject: [PATCH 25/44] Add PropTypes. Add keys to arrays and iterables. --- .../config_viewer/collapsible_statement.js | 17 ++- .../views/config_viewer/plugin_statement.js | 138 +++++++++++++++++ .../views/config_viewer/statement.js | 141 ++---------------- .../views/config_viewer/statement_list.js | 17 ++- .../components/logstash/config_viewer.less | 4 +- 5 files changed, 184 insertions(+), 133 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js 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/config_viewer/collapsible_statement.js index 6b79495257e6b..d0121cf586aa2 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/config_viewer/collapsible_statement.js @@ -5,6 +5,7 @@ */ import React from 'react'; +import PropTypes from 'prop-types'; import { EuiButtonEmpty, @@ -18,7 +19,7 @@ function clickableStatementName(name, onVertexSelected) { return ( ( + +
      + {value} +
      +       + )); +} + +export function pluginStatement(statement, onShowVertexDetails) { + const { + hasExplicitId, + id, + name, + vertex, + } = statement; + + const statementStats = getPluginStatementStatList(statement); + + return ( +
      + + + + + + + + { onShowVertexDetails(vertex); }} + > + {name} + + + { + hasExplicitId && + +
      + {id} +
      +       + } +       +       + { + statementStats && + + + {statementStats} + + + } +       +
      + ); +} 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/config_viewer/statement.js index 0d55d7b379096..e0e32562ae666 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/config_viewer/statement.js @@ -5,135 +5,12 @@ */ import React from 'react'; -import { - EuiButtonEmpty, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, -} from '@elastic/eui'; +import PropTypes from 'prop-types'; +import { EuiFlexGroup } from '@elastic/eui'; import { PluginStatement } from '../../models/pipeline/plugin_statement'; import { CollapsibleStatement } from './collapsible_statement'; import { IfElement } from '../../models/list/if_element'; -import { formatMetric } from '../../../../../lib/format_number'; - -function getInputStatementStats(inputVertex) { - const { latestEventsPerSecond } = inputVertex; - - return [ - { - className: 'cv-inputStat__eventsEmitted', - value: formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') - } - ]; -} - -function getProcessorStatementStats(processorVertex) { - const { - latestMillisPerEvent, - latestEventsPerSecond, - percentOfTotalProcessorTime, - } = processorVertex; - - const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorStat__cpuTimeHighlight' : ''; - const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorStat__eventMillis' : ''; - - return [ - { - className: `cv-processorStat__cpuTime ${cpuHighlight}`, - value: formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }) - }, - { - className: `cv-processorStat__eventMillis ${eventMillisHighlight}`, - value: formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e') - }, - { - className: 'cv-processorStat__events', - value: formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') - } - ]; -} - -function getPluginStatementStatList(statement) { - const { - pluginType, - vertex - } = statement; - - const stats = pluginType === 'input' - ? getInputStatementStats(vertex) - : getProcessorStatementStats(vertex); - - return stats.map(({ className, value }) => ( - -
      - {value} -
      -       - )); -} - -function pluginStatement(statement, onShowVertexDetails) { - const { - hasExplicitId, - id, - name, - vertex, - } = statement; - - const statementStats = getPluginStatementStatList(statement); - - return ( -
      - - - - - - - - { onShowVertexDetails(vertex); }} - > - {name} - - - { - hasExplicitId && - -
      - {id} -
      -       - } -       -       - { - statementStats && - - - {statementStats} - - - } -       -
      - ); -} +import { pluginStatement } from './plugin_statement'; export class Statement extends React.PureComponent { @@ -197,3 +74,15 @@ export class Statement extends React.PureComponent ); } } + +Statement.propTypes = { + collapse: PropTypes.func.isRequired, + element: PropTypes.shape({ + depth: PropTypes.number.isRequired, + id: PropTypes.string.isRequired, + statement: PropTypes.object.isRequired + }).isRequired, + expand: PropTypes.func.isRequired, + isCollapsed: PropTypes.bool.isRequired, + onShowVertexDetails: PropTypes.func.isRequired +}; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index f6c832e92d6bb..37a7fa8bf1470 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -5,6 +5,7 @@ */ import React from 'react'; +import PropTypes from 'prop-types'; import { StatementListHeading } from './statement_list_heading'; import { Statement } from './statement'; @@ -81,7 +82,7 @@ class StatementList extends React.PureComponent { ? null : ( { - elements.map(this.getStatement) + statements.filter(statement => statement !== null) }
    ); } } + +StatementList.propTypes = { + elements: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.string.isRequired, + // top-level elements have null parentId + parentId: PropTypes.string + }) + ).isRequired, + onShowVertexDetails: PropTypes.func.isRequired, +}; 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 index ed89f5c22f01a..b028842ef182a 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -25,7 +25,7 @@ } .cv-inputStat__eventsEmitted { - width: 130px; + width: 150px; } .cv-pluginStatement__statContainer { @@ -51,7 +51,7 @@ } .cv-processorStat__events { - width: 130px; + width: 150px; border-radius: 2px; padding: 2px 4px 2px 4px; margin-top: -2px; From 4d87d52567d97a38329575427e32a370453e5634 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 25 May 2018 01:17:38 -0400 Subject: [PATCH 26/44] Update color for borders/buttons. --- .../config_viewer/collapsible_statement.js | 23 +++++++++---------- .../components/logstash/config_viewer.less | 3 ++- 2 files changed, 13 insertions(+), 13 deletions(-) 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/config_viewer/collapsible_statement.js index d0121cf586aa2..d16cd8d8dbf37 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/config_viewer/collapsible_statement.js @@ -11,11 +11,11 @@ import { EuiButtonEmpty, EuiButtonIcon, EuiCodeBlock, - EuiFlexItem, - EuiFlexGroup + EuiFlexGroup, + EuiFlexItem } from '@elastic/eui'; -function clickableStatementName(name, onVertexSelected) { +function renderStatementName(name, onVertexSelected) { return ( { onShowVertexDetails(vertex); }; return isIf ? - ifStatement(statement, showVertexDetailsClicked) - : clickableStatementName('else', showVertexDetailsClicked); + renderIfStatement(statement, showVertexDetailsClicked) + : renderStatementName('else', showVertexDetailsClicked); } render() { @@ -107,12 +106,12 @@ export class CollapsibleStatement extends React.PureComponent { grow={false} > {this.getStatementBody()} 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 index b028842ef182a..606817b6abb55 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -13,7 +13,7 @@ width: 10px; display: inline-block; margin-left: 11px; - border-left: 1px gray dashed; + border-left: 1px #b2b2b2 dashed; } .cv-spacer:last-child { @@ -118,6 +118,7 @@ .cv-ifElseStatement__toggle { margin-top: 3px; + color: #898989; } .cv-ifStatement__condition { From 32946d21754e0b888e565ffd93aede0881b33f14 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 25 May 2018 02:24:10 -0400 Subject: [PATCH 27/44] Add stat class. Clean up code. --- .../config_viewer/collapsible_statement.js | 6 +- .../views/config_viewer/config_viewer.js | 4 +- .../views/config_viewer/plugin_statement.js | 71 +++++++------- .../views/config_viewer/stat.js | 13 +++ .../views/config_viewer/statement.js | 18 ++-- .../views/config_viewer/statement_list.js | 22 +++-- .../components/logstash/config_viewer.less | 95 ++++++++++--------- .../lib/logstash/__tests__/get_pipeline.js | 1 - 8 files changed, 121 insertions(+), 109 deletions(-) create mode 100644 x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js 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/config_viewer/collapsible_statement.js index d16cd8d8dbf37..3ba609f964e94 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/config_viewer/collapsible_statement.js @@ -86,14 +86,14 @@ export class CollapsibleStatement extends React.PureComponent { const { isIf, statement, - statement: vertex, + statement: { vertex }, onShowVertexDetails } = this.props; const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); }; - return isIf ? - renderIfStatement(statement, showVertexDetailsClicked) + return isIf + ? renderIfStatement(statement, showVertexDetailsClicked) : renderStatementName('else', showVertexDetailsClicked); } 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/config_viewer/config_viewer.js index 579f328b8c886..05d3baaa6874f 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/config_viewer/config_viewer.js @@ -4,8 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ - - import React from 'react'; import PropTypes from 'prop-types'; import { DetailDrawer } from '../detail_drawer'; @@ -101,5 +99,5 @@ ConfigViewer.propTypes = { filters: PropTypes.array.isRequired, outputs: PropTypes.array.isRequired, queue: PropTypes.object.isRequired, - }) + }).isRequired }; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 6f2010c8a6099..84809516d414e 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -12,16 +12,15 @@ import { EuiIcon, } from '@elastic/eui'; import { formatMetric } from '../../../../../lib/format_number'; +import { Stat } from './stat'; -function getInputStatementStats(inputVertex) { - const { latestEventsPerSecond } = inputVertex; - +function getInputStatementStats({ latestEventsPerSecond }) { return [ - { - name: 'eventsEmitted', - className: 'cv-inputStat__eventsEmitted', - value: formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') - } + new Stat( + 'eventsEmitted', + 'cv-inputStat__eventsEmitted', + formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') + ) ]; } @@ -36,30 +35,25 @@ function getProcessorStatementStats(processorVertex) { const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorStat__eventMillis' : ''; return [ - { - name: 'cpuStat', - className: `cv-processorStat__cpuTime ${cpuHighlight}`, - value: formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }) - }, - { - name: 'eventMillis', - className: `cv-processorStat__eventMillis ${eventMillisHighlight}`, - value: formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e') - }, - { - name: 'eventsReceived', - className: 'cv-processorStat__events', - value: formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received') - } + new Stat( + 'cpuStat', + `cv-processorStat__cpuTime ${cpuHighlight}`, + formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }) + ), + new Stat( + 'eventMillis', + `cv-processorStat__eventMillis ${eventMillisHighlight}`, + formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e') + ), + new Stat( + 'eventsReceived', + 'cv-processorStat__events', + formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received') + ) ]; } -function getPluginStatementStatList(statement) { - const { - pluginType, - vertex - } = statement; - +function renderPluginStatementStats(pluginType, vertex) { const stats = pluginType === 'input' ? getInputStatementStats(vertex) : getProcessorStatementStats(vertex); @@ -77,15 +71,16 @@ function getPluginStatementStatList(statement) { )); } -export function pluginStatement(statement, onShowVertexDetails) { - const { - hasExplicitId, - id, - name, - vertex, - } = statement; +export function renderPluginStatement({ + hasExplicitId, + id, + name, + pluginType, + vertex, +}, onShowVertexDetails) { - const statementStats = getPluginStatementStatList(statement); + const statementStats = renderPluginStatementStats(pluginType, vertex); + const onNameButtonClick = () => { onShowVertexDetails(vertex); }; return (
    @@ -109,7 +104,7 @@ export function pluginStatement(statement, onShowVertexDetails) { flush="left" size="xs" className="cv-statement__name" - onClick={() => { onShowVertexDetails(vertex); }} + onClick={onNameButtonClick} > {name} diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js new file mode 100644 index 0000000000000..c0760c5ef4a5c --- /dev/null +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js @@ -0,0 +1,13 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export class Stat { + constructor(name, className, value) { + this.name = name; + this.className = className; + this.value = value; + } +} 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/config_viewer/statement.js index e0e32562ae666..b7d46a4ed4dd8 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/config_viewer/statement.js @@ -10,11 +10,11 @@ import { EuiFlexGroup } from '@elastic/eui'; import { PluginStatement } from '../../models/pipeline/plugin_statement'; import { CollapsibleStatement } from './collapsible_statement'; import { IfElement } from '../../models/list/if_element'; -import { pluginStatement } from './plugin_statement'; +import { renderPluginStatement } from './plugin_statement'; export class Statement extends React.PureComponent { - getNestingSpacers(depth) { + renderNestingSpacers(depth) { const spacers = []; for (let i = 0; i < depth; i += 1) { spacers.push(
    ); @@ -22,7 +22,7 @@ export class Statement extends React.PureComponent return spacers; } - getStatement(statement) { + renderStatement(statement) { const { collapse, element, @@ -33,7 +33,7 @@ export class Statement extends React.PureComponent } = this.props; return statement instanceof PluginStatement - ? pluginStatement(statement, onShowVertexDetails) + ? renderPluginStatement(statement, onShowVertexDetails) : ( @@ -65,7 +67,7 @@ export class Statement extends React.PureComponent
    {statementComponent}
    diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 37a7fa8bf1470..6014225fff7ef 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -9,7 +9,12 @@ import PropTypes from 'prop-types'; import { StatementListHeading } from './statement_list_heading'; import { Statement } from './statement'; -export function StatementSection({ iconType, headingText, elements, onShowVertexDetails }) { +export function StatementSection({ + iconType, + headingText, + elements, + onShowVertexDetails +}) { return (
    { - const { id, parentId } = element; - + elements.forEach(({ id, parentId }) => { if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { collapsedChildIds.add(id); } @@ -39,13 +42,15 @@ function getCollapsedChildElements(elements, collapsedIds) { class StatementList extends React.PureComponent { constructor(props) { super(props); + this.state = { collapsedIds: new Set(), collapsedChildIds: new Set() }; + this.collapse = this.collapse.bind(this); this.expand = this.expand.bind(this); - this.getStatement = this.getStatement.bind(this); + this.renderStatement = this.renderStatement.bind(this); this.elementIsCollapsed = this.elementIsCollapsed.bind(this); } @@ -74,7 +79,7 @@ class StatementList extends React.PureComponent { return this.state.collapsedIds.has(elementId); } - getStatement(element) { + renderStatement(element) { const { id, parentId } = element; const { onShowVertexDetails } = this.props; @@ -94,12 +99,11 @@ class StatementList extends React.PureComponent { render() { const { elements } = this.props; - const statements = elements.map(this.getStatement); return ( -
      +
        { - statements.filter(statement => statement !== null) + elements.map(this.renderStatement) }
      ); 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 index 606817b6abb55..96d520c191185 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -20,14 +20,52 @@ width: 0px; } -.cv-pluginStatement__icon { - padding-top: 4px; -} - .cv-inputStat__eventsEmitted { width: 150px; } +.cv-statement__content { + display: inline-block; + min-height: 28px; + padding-left: 9px; + width: 100%; +} + +.cv-statement { + display: inline-block; + margin-top: 5px; + margin-left: 3px; + width: 100%; +} + +.cv-statement__id { + background: #d9d9d9; + padding: 4px 6px 4px 6px; + font-size: 12px; + font-weight: bold; + border-radius: 2px; + margin-top: 1px; +} + +.cv-statement__icon { + color: #50b0a4; +} + +.cv-statement__name { + color: #50b0a4; + font-weight: bold; + font-size: small; + margin-top: -2px; +} + +.cv-ifStatement__condition { + margin-top: 7px; +} + +.cv-pluginStatement__icon { + padding-top: 4px; +} + .cv-pluginStatement__statContainer { padding: 4px 8px 4px 8px; border-radius: 2px; @@ -44,12 +82,6 @@ background: #d6b283; } -.cv-processorStat__eventMillis { - width: 80px; - padding: 2px 4px 2px 4px; - margin-top: -2px; -} - .cv-processorStat__events { width: 150px; border-radius: 2px; @@ -57,11 +89,10 @@ margin-top: -2px; } -.cv-statement__content { - display: inline-block; - min-height: 28px; - padding-left: 9px; - width: 100%; +.cv-processorStat__eventMillis { + width: 80px; + padding: 2px 4px 2px 4px; + margin-top: -2px; } .cv-spaceContainer { @@ -70,6 +101,7 @@ .cv-queue__messageText { margin-left: 25px; + color: #838383; } .cv-list { @@ -77,37 +109,10 @@ height: 32px; } -.cv-list-parent li:nth-child(2n+1) { +.cv-listParent li:nth-child(2n+1) { background: #f7f7f7; } -.cv-statement { - display: inline-block; - margin-top: 5px; - margin-left: 3px; - width: 100%; -} - -.cv-statement__id { - background: #d9d9d9; - padding: 4px 6px 4px 6px; - font-size: 12px; - font-weight: bold; - border-radius: 2px; - margin-top: 1px; -} - -.cv-statement__icon { - color: #50b0a4; -} - -.cv-statement__name { - color: #50b0a4; - font-weight: bold; - font-size: small; - margin-top: -2px; -} - .cv-ifElseStatement__title { margin-top: 2px; } @@ -120,7 +125,3 @@ margin-top: 3px; color: #898989; } - -.cv-ifStatement__condition { - margin-top: 7px; -} diff --git a/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js b/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js index 06bba8c048a90..e2be73d10df80 100644 --- a/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js +++ b/x-pack/plugins/monitoring/server/lib/logstash/__tests__/get_pipeline.js @@ -36,7 +36,6 @@ describe('get_pipeline', () => { it('returns correct stats', () => { const result = _vertexStats(vertex, vertexStatsBucket, totalProcessorsDurationInMillis, timeseriesIntervalInSeconds); - expect(result).to.eql({ events_in: 10000, events_out: 9000, From f3e99272fb1e7eb8410204199386674df52fa4d8 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Sat, 26 May 2018 00:10:18 -0400 Subject: [PATCH 28/44] Convert plugin statement component from class to function. --- .../views/config_viewer/plugin_statement.js | 18 +++++---- .../views/config_viewer/statement.js | 38 ++++++++++++------- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 84809516d414e..d215c7c2c20f9 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -71,14 +71,16 @@ function renderPluginStatementStats(pluginType, vertex) { )); } -export function renderPluginStatement({ - hasExplicitId, - id, - name, - pluginType, - vertex, -}, onShowVertexDetails) { - +export function PluginStatement({ + statement: { + hasExplicitId, + id, + name, + pluginType, + vertex + }, + onShowVertexDetails +}) { const statementStats = renderPluginStatementStats(pluginType, vertex); const onNameButtonClick = () => { onShowVertexDetails(vertex); }; 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/config_viewer/statement.js index b7d46a4ed4dd8..f3567e251f800 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/config_viewer/statement.js @@ -7,10 +7,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import { EuiFlexGroup } from '@elastic/eui'; -import { PluginStatement } 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 { renderPluginStatement } from './plugin_statement'; +import { PluginStatement } from './plugin_statement'; export class Statement extends React.PureComponent { @@ -32,19 +32,31 @@ export class Statement extends React.PureComponent onShowVertexDetails } = this.props; - return statement instanceof PluginStatement - ? renderPluginStatement(statement, onShowVertexDetails) - : ( - ); + } + return ( + + ); + } + + getTopLevelStatementPadding(depth) { + return depth === 0 + ? { paddingLeft: '0px' } + : null; } render() { @@ -53,9 +65,7 @@ export class Statement extends React.PureComponent statement } = this.props.element; - const topLevelStatementPadding = depth === 0 - ? { paddingLeft: '0px' } - : null; + const topLevelStatementPadding = this.getTopLevelStatementPadding(depth); const spacers = this.renderNestingSpacers(depth); const statementComponent = this.renderStatement(statement); From 5254c70469b4216ddaf7875ebab6c6a078f8aacc Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 29 May 2018 10:17:47 -0400 Subject: [PATCH 29/44] Update queue metrics message. --- .../logstash/pipeline_viewer/views/config_viewer/queue.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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/config_viewer/queue.js index 2e81950f297f2..93284003337c0 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/config_viewer/queue.js @@ -15,7 +15,7 @@ export function Queue() { title="Queue" />
      - Queue stats not available + Queue metrics not available
    ); From 33d6413c259c9038ea403e39bffe11b8b6d18386 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 29 May 2018 11:00:07 -0400 Subject: [PATCH 30/44] Update style to make view more responsive. --- .../views/config_viewer/collapsible_statement.js | 2 +- .../views/config_viewer/plugin_statement.js | 5 ++++- .../views/config_viewer/statement_list_heading.js | 5 ++++- .../public/less/components/logstash/config_viewer.less | 8 +++++++- 4 files changed, 16 insertions(+), 4 deletions(-) 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/config_viewer/collapsible_statement.js index 3ba609f964e94..7a25c4bd5afc6 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/config_viewer/collapsible_statement.js @@ -100,7 +100,7 @@ export class CollapsibleStatement extends React.PureComponent { render() { const { id } = this.props; return ( - + - + + Date: Tue, 29 May 2018 11:36:03 -0400 Subject: [PATCH 31/44] Change section heading size. --- .../views/config_viewer/statement_list_heading.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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/config_viewer/statement_list_heading.js index b088460777021..a669aed7ed4a1 100644 --- 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/config_viewer/statement_list_heading.js @@ -23,13 +23,13 @@ export function StatementListHeading({ > - +

    {title}

         From a3b9bed0c35a38c7bef479f678194e8e1cc3d79f Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 29 May 2018 12:52:08 -0400 Subject: [PATCH 32/44] Remove gutter from metrics group. --- .../pipeline_viewer/views/config_viewer/plugin_statement.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index e25a356c3db5f..962827eeb9161 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -127,7 +127,10 @@ export function PluginStatement({ { statementStats && - + {statementStats} From 0ab6b51d4c99d6611a851fc5784cf5fce63394e6 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 29 May 2018 15:00:44 -0400 Subject: [PATCH 33/44] Change name "stat" to "metric". --- .../config_viewer/{stat.js => metric.js} | 2 +- .../views/config_viewer/plugin_statement.js | 46 +++++++++---------- .../components/logstash/config_viewer.less | 12 ++--- 3 files changed, 30 insertions(+), 30 deletions(-) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/{stat.js => metric.js} (94%) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js similarity index 94% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js index c0760c5ef4a5c..7c820efe0250d 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/stat.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -export class Stat { +export class Metric { constructor(name, className, value) { this.name = name; this.className = className; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 962827eeb9161..3ea12b63a1988 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -12,56 +12,56 @@ import { EuiIcon, } from '@elastic/eui'; import { formatMetric } from '../../../../../lib/format_number'; -import { Stat } from './stat'; +import { Metric } from './metric'; -function getInputStatementStats({ latestEventsPerSecond }) { +function getInputStatementMetrics({ latestEventsPerSecond }) { return [ - new Stat( + new Metric( 'eventsEmitted', - 'cv-inputStat__eventsEmitted', + 'cv-inputMetric__eventsEmitted', formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') ) ]; } -function getProcessorStatementStats(processorVertex) { +function getProcessorStatementMetrics(processorVertex) { const { latestMillisPerEvent, latestEventsPerSecond, percentOfTotalProcessorTime, } = processorVertex; - const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorStat__cpuTimeHighlight' : ''; - const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorStat__eventMillis' : ''; + const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorMetric__cpuTimeHighlight' : ''; + const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorMetric__eventMillis' : ''; return [ - new Stat( - 'cpuStat', - `cv-processorStat__cpuTime ${cpuHighlight}`, + new Metric( + 'cpuMetric', + `cv-processorMetric__cpuTime ${cpuHighlight}`, formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }) ), - new Stat( + new Metric( 'eventMillis', - `cv-processorStat__eventMillis ${eventMillisHighlight}`, + `cv-processorMetric__eventMillis ${eventMillisHighlight}`, formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e') ), - new Stat( + new Metric( 'eventsReceived', - 'cv-processorStat__events', + 'cv-processorMetric__events', formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received') ) ]; } -function renderPluginStatementStats(pluginType, vertex) { - const stats = pluginType === 'input' - ? getInputStatementStats(vertex) - : getProcessorStatementStats(vertex); +function renderPluginStatementMetrics(pluginType, vertex) { + const metrics = pluginType === 'input' + ? getInputStatementMetrics(vertex) + : getProcessorStatementMetrics(vertex); - return stats.map(({ name, className, value }) => ( + return metrics.map(({ name, className, value }) => (
    @@ -81,7 +81,7 @@ export function PluginStatement({ }, onShowVertexDetails }) { - const statementStats = renderPluginStatementStats(pluginType, vertex); + const statementMetrics = renderPluginStatementMetrics(pluginType, vertex); const onNameButtonClick = () => { onShowVertexDetails(vertex); }; return ( @@ -125,13 +125,13 @@ export function PluginStatement({ { - statementStats && + statementMetrics && - {statementStats} + {statementMetrics} } 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 index dd68f94d3d1fb..2296d77c28522 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -26,7 +26,7 @@ width: 0px; } -.cv-inputStat__eventsEmitted { +.cv-inputMetric__eventsEmitted { width: 150px; } @@ -72,30 +72,30 @@ padding-top: 4px; } -.cv-pluginStatement__statContainer { +.cv-pluginStatement__metricContainer { padding: 4px 8px 4px 8px; border-radius: 2px; } -.cv-processorStat__cpuTime { +.cv-processorMetric__cpuTime { width: 35px; padding: 2px 4px 2px 8px; border-radius: 2px; margin-top: -2px; } -.cv-processorStat__cpuTimeHighlight { +.cv-processorMetric__cpuTimeHighlight { background: #d6b283; } -.cv-processorStat__events { +.cv-processorMetric__events { width: 150px; border-radius: 2px; padding: 2px 4px 2px 4px; margin-top: -2px; } -.cv-processorStat__eventMillis { +.cv-processorMetric__eventMillis { width: 80px; padding: 2px 4px 2px 4px; margin-top: -2px; From 56d77f165f15fc8a501cb04c51f0d58cd04d887e Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 30 May 2018 21:39:54 -0400 Subject: [PATCH 34/44] Remove obsolete export line, simplify declaration, based on PR feedback. --- .../public/components/logstash/pipeline_viewer/index.js | 4 +--- .../public/directives/logstash/pipeline_viewer/index.js | 9 +++++++-- 2 files changed, 8 insertions(+), 5 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 index 145055f67bfc1..c4748876b85f1 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 @@ -9,8 +9,6 @@ import { ColaGraph } from './views/cola_graph'; import { DetailDrawer } from './views/detail_drawer'; import { PropTypes } from 'prop-types'; -export { ConfigViewer } from './views/config_viewer'; - export class PipelineViewer extends React.Component { constructor() { super(); @@ -57,7 +55,7 @@ export class PipelineViewer extends React.Component { } render() { - const { graph } = this.props.pipelineState.config; + const graph = this.props.pipelineState.config.graph; return (
    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 9509084b34f43..4886f5c3df411 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 @@ -30,10 +30,15 @@ uiModule.directive('monitoringLogstashPipelineViewer', ($injector) => { scope.$watch('pipeline', (updatedPipeline) => { pipelineState.update(updatedPipeline); - const configModel = Pipeline.fromPipelineGraph(pipelineState.config.graph); const configViewer = ( ); From fcb245263386c60f7aa279f3c3b17e67d0251b0e Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 31 May 2018 09:40:18 -0400 Subject: [PATCH 35/44] Add new functional component in place of model class. --- .../views/config_viewer/metric.js | 21 +++++-- .../views/config_viewer/plugin_statement.js | 58 +++++++++---------- 2 files changed, 41 insertions(+), 38 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js index 7c820efe0250d..df4c4462d14df 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js @@ -4,10 +4,19 @@ * you may not use this file except in compliance with the Elastic License. */ -export class Metric { - constructor(name, className, value) { - this.name = name; - this.className = className; - this.value = value; - } +import React from 'react'; +import { EuiFlexItem } from '@elastic/eui'; + +export function Metric({ name, className, value }) { + return ( + +
    + {value} +
    +     + ); } diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 3ea12b63a1988..73ea153658dee 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -15,13 +15,13 @@ import { formatMetric } from '../../../../../lib/format_number'; import { Metric } from './metric'; function getInputStatementMetrics({ latestEventsPerSecond }) { - return [ - new Metric( - 'eventsEmitted', - 'cv-inputMetric__eventsEmitted', - formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s emitted') - ) - ]; + return [( + + )]; } function getProcessorStatementMetrics(processorVertex) { @@ -35,40 +35,34 @@ function getProcessorStatementMetrics(processorVertex) { const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorMetric__eventMillis' : ''; return [ - new Metric( - 'cpuMetric', - `cv-processorMetric__cpuTime ${cpuHighlight}`, - formatMetric(Math.round(percentOfTotalProcessorTime || 0), '0', '%', { prependSpace: false }) + ( + ), - new Metric( - 'eventMillis', - `cv-processorMetric__eventMillis ${eventMillisHighlight}`, - formatMetric(latestMillisPerEvent, '0.[00]a', 'ms/e') + ( + ), - new Metric( - 'eventsReceived', - 'cv-processorMetric__events', - formatMetric(latestEventsPerSecond, '0.[00]a', 'e/s received') + ( + ) ]; } function renderPluginStatementMetrics(pluginType, vertex) { - const metrics = pluginType === 'input' + return pluginType === 'input' ? getInputStatementMetrics(vertex) : getProcessorStatementMetrics(vertex); - - return metrics.map(({ name, className, value }) => ( - -
    - {value} -
    -     - )); } export function PluginStatement({ From c580e5e9dbdd04006e3b5b067b44780af8e4e074 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 31 May 2018 10:07:12 -0400 Subject: [PATCH 36/44] Add PropTypes to several components. Rename a function. Add keys to metrics. --- .../views/config_viewer/metric.js | 9 +++++++-- .../views/config_viewer/plugin_statement.js | 20 +++++++++++++++---- .../views/config_viewer/statement_list.js | 4 ++-- .../config_viewer/statement_list_heading.js | 6 ++++++ 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js index df4c4462d14df..d48c0f60c85c0 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js @@ -5,14 +5,14 @@ */ import React from 'react'; +import PropTypes from 'prop-types'; import { EuiFlexItem } from '@elastic/eui'; -export function Metric({ name, className, value }) { +export function Metric({ className, value }) { return (
    {value} @@ -20,3 +20,8 @@ export function Metric({ name, className, value }) { ); } + +Metric.propTypes = { + className: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, +}; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 73ea153658dee..9ebe4d09367d8 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js @@ -5,6 +5,7 @@ */ import React from 'react'; +import PropTypes from 'prop-types'; import { EuiButtonEmpty, EuiFlexGroup, @@ -17,7 +18,7 @@ import { Metric } from './metric'; function getInputStatementMetrics({ latestEventsPerSecond }) { return [( @@ -37,21 +38,21 @@ function getProcessorStatementMetrics(processorVertex) { return [ ( ), ( ), ( @@ -133,3 +134,14 @@ export function PluginStatement({
    ); } + +PluginStatement.propTypes = { + statement: PropTypes.shape({ + hasExplicitId: PropTypes.bool.isRequired, + id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + pluginType: PropTypes.string.isRequired, + vertex: PropTypes.object.isRequired, + }).isRequired, + onShowVertexDetails: PropTypes.func.isRequired, +}; diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 6014225fff7ef..84260795c3c0b 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -29,7 +29,7 @@ export function StatementSection({ ); } -function getCollapsedChildElements(elements, collapsedIds) { +function getCollapsedChildIds(elements, collapsedIds) { const collapsedChildIds = new Set(); elements.forEach(({ id, parentId }) => { if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { @@ -67,7 +67,7 @@ class StatementList extends React.PureComponent { } updateCollapsedElements(collapsedIds) { - const collapsedChildIds = getCollapsedChildElements(this.props.elements, collapsedIds); + const collapsedChildIds = getCollapsedChildIds(this.props.elements, collapsedIds); this.setState({ collapsedIds, 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/config_viewer/statement_list_heading.js index a669aed7ed4a1..66686871ef088 100644 --- 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/config_viewer/statement_list_heading.js @@ -5,6 +5,7 @@ */ import React from 'react'; +import PropTypes from 'prop-types'; import { EuiFlexGroup, EuiFlexItem, @@ -36,3 +37,8 @@ export function StatementListHeading({ ); } + +StatementListHeading.propTypes = { + iconType: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, +}; From c7a92dea5882ad7c17bf0655827ddbe5084df263 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 31 May 2018 11:23:08 -0400 Subject: [PATCH 37/44] Convert stateless classes to functional components. --- .../config_viewer/collapsible_statement.js | 97 +++++++-------- .../views/config_viewer/statement.js | 112 ++++++++---------- 2 files changed, 94 insertions(+), 115 deletions(-) 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/config_viewer/collapsible_statement.js index 7a25c4bd5afc6..97daa4fa6b515 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/config_viewer/collapsible_statement.js @@ -54,70 +54,57 @@ function renderIfStatement({ condition }, onVertexSelected) { ]; } -export class CollapsibleStatement extends React.PureComponent { - constructor(props) { - super(props); +function getStatementBody({ + isIf, + statement, + statement: { vertex }, + onShowVertexDetails +}) { + const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); }; - this.toggleClicked = this.toggleClicked.bind(this); - this.getToggleIconType = this.getToggleIconType.bind(this); - } + return isIf + ? renderIfStatement(statement, showVertexDetailsClicked) + : renderStatementName('else', showVertexDetailsClicked); +} + +function getToggleIconType(isCollapsed) { + return isCollapsed ? 'arrowRight' : 'arrowDown'; +} - toggleClicked() { - const { - collapse, - expand, - id, - isCollapsed - } = this.props; +export function CollapsibleStatement(props) { + const { + collapse, + expand, + id, + isCollapsed + } = props; + const toggleClicked = () => { if (isCollapsed) { expand(id); } else { collapse(id); } - } - - getToggleIconType() { - const { isCollapsed } = this.props; - return isCollapsed ? 'arrowRight' : 'arrowDown'; - } - - getStatementBody() { - const { - isIf, - statement, - statement: { vertex }, - onShowVertexDetails - } = this.props; - - const showVertexDetailsClicked = () => { onShowVertexDetails(vertex); }; - - return isIf - ? renderIfStatement(statement, showVertexDetailsClicked) - : renderStatementName('else', showVertexDetailsClicked); - } + }; - render() { - const { id } = this.props; - return ( - - - - - {this.getStatementBody()} - - ); - } + return ( + + + + + {getStatementBody(props)} + + ); } CollapsibleStatement.propTypes = { 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/config_viewer/statement.js index f3567e251f800..eb25609905dbc 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/config_viewer/statement.js @@ -12,79 +12,71 @@ import { CollapsibleStatement } from './collapsible_statement'; import { IfElement } from '../../models/list/if_element'; import { PluginStatement } from './plugin_statement'; -export class Statement extends React.PureComponent -{ - renderNestingSpacers(depth) { - const spacers = []; - for (let i = 0; i < depth; i += 1) { - spacers.push(
    ); - } - return spacers; +function renderNestingSpacers(depth) { + const spacers = []; + for (let i = 0; i < depth; i += 1) { + spacers.push(
    ); } + return spacers; +} - renderStatement(statement) { - const { - collapse, - element, - element: { id }, - expand, - isCollapsed, - onShowVertexDetails - } = this.props; - - if (statement instanceof PluginStatementModel) { - return ( - - ); - } +function renderStatement({ + collapse, + element, + element: { + id, + statement, + }, + expand, + isCollapsed, + onShowVertexDetails +}) { + if (statement instanceof PluginStatementModel) { return ( - ); } - getTopLevelStatementPadding(depth) { - return depth === 0 - ? { paddingLeft: '0px' } - : null; - } + return ( + + ); +} - render() { - const { - depth, - statement - } = this.props.element; +function getTopLevelStatementPadding(depth) { + return depth === 0 + ? { paddingLeft: '0px' } + : null; +} - const topLevelStatementPadding = this.getTopLevelStatementPadding(depth); - const spacers = this.renderNestingSpacers(depth); - const statementComponent = this.renderStatement(statement); +export function Statement(props) { + const { depth } = props.element; - return ( -
  • -
    - {spacers} + return ( +
  • +
    + {renderNestingSpacers(depth)} +
    + +
    + {renderStatement(props)}
    - -
    - {statementComponent} -
    -     -
    • - ); - } + + + ); } Statement.propTypes = { From 4536b2750cdd143dc778e1f5600a1767e672643e Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 31 May 2018 11:48:23 -0400 Subject: [PATCH 38/44] Prefer ES6 syntax over bindings for Component methods. --- .../views/config_viewer/statement_list.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js index 84260795c3c0b..3b5c886f8ea29 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js @@ -47,26 +47,21 @@ class StatementList extends React.PureComponent { collapsedIds: new Set(), collapsedChildIds: new Set() }; - - this.collapse = this.collapse.bind(this); - this.expand = this.expand.bind(this); - this.renderStatement = this.renderStatement.bind(this); - this.elementIsCollapsed = this.elementIsCollapsed.bind(this); } - expand(elementId) { + expand = elementId => { const collapsedIds = new Set(this.state.collapsedIds); collapsedIds.delete(elementId); this.updateCollapsedElements(collapsedIds); } - collapse(elementId) { + collapse = elementId => { const collapsedIds = new Set(this.state.collapsedIds); collapsedIds.add(elementId); this.updateCollapsedElements(collapsedIds); } - updateCollapsedElements(collapsedIds) { + updateCollapsedElements = collapsedIds => { const collapsedChildIds = getCollapsedChildIds(this.props.elements, collapsedIds); this.setState({ @@ -75,11 +70,9 @@ class StatementList extends React.PureComponent { }); } - elementIsCollapsed(elementId) { - return this.state.collapsedIds.has(elementId); - } + elementIsCollapsed = elementId => this.state.collapsedIds.has(elementId); - renderStatement(element) { + renderStatement = element => { const { id, parentId } = element; const { onShowVertexDetails } = this.props; From d845795ce4c5ae56452c7f26cbac7d1f1187983f Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 5 Jun 2018 11:40:16 -0400 Subject: [PATCH 39/44] Do not render statement section if there are no statements. --- .../pipeline_viewer/views/config_viewer/config_viewer.js | 2 +- .../config_viewer/{statement_list.js => statement_section.js} | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) rename x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/{statement_list.js => statement_section.js} (98%) 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/config_viewer/config_viewer.js index 05d3baaa6874f..392a135b338ec 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/config_viewer/config_viewer.js @@ -8,7 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { DetailDrawer } from '../detail_drawer'; import { Queue } from './queue'; -import { StatementSection } from './statement_list'; +import { StatementSection } from './statement_section'; export class ConfigViewer extends React.Component { constructor() { diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js similarity index 98% rename from x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js rename to x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js index 3b5c886f8ea29..dc22ab1ca2514 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_list.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/statement_section.js @@ -15,6 +15,8 @@ export function StatementSection({ elements, onShowVertexDetails }) { + if (!elements.length) { return null; } + return (
    Date: Wed, 6 Jun 2018 22:50:12 -0700 Subject: [PATCH 40/44] design cleanup for pipeline viewer --- src/ui/public/styles/variables/colors.less | 2 + .../config_viewer/collapsible_statement.js | 13 +- .../views/config_viewer/config_viewer.js | 60 +++--- .../views/config_viewer/metric.js | 37 +++- .../views/config_viewer/plugin_statement.js | 101 +++++------ .../views/config_viewer/queue.js | 8 +- .../views/config_viewer/statement.js | 22 +-- .../config_viewer/statement_list_heading.js | 5 +- .../views/config_viewer/statement_section.js | 6 +- .../pipeline_viewer/views/detail_drawer.js | 14 +- .../components/logstash/config_viewer.less | 171 +++++++----------- 11 files changed, 218 insertions(+), 221 deletions(-) diff --git a/src/ui/public/styles/variables/colors.less b/src/ui/public/styles/variables/colors.less index 84269c3a6e4e5..617c49fede7af 100644 --- a/src/ui/public/styles/variables/colors.less +++ b/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. 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/config_viewer/collapsible_statement.js index 97daa4fa6b515..106e7de43d40b 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/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" > - {name} + {name} ); @@ -45,7 +45,6 @@ function renderIfStatement({ condition }, onVertexSelected) { fontSize="s" paddingSize="none" transparentBackground={true} - className="cv-ifStatement__condition" > {condition} @@ -88,14 +87,18 @@ export function CollapsibleStatement(props) { }; return ( - + - - - - - { this.renderDetailDrawer() } -
    + + + + + + + + + + { this.renderDetailDrawer() } + + ); } } diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js index d48c0f60c85c0..feb74298458fc 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/metric.js +++ b/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 = ( + + {value} + + ); + } else { + stylizedValue = ( + + + {value} + + + ); + } return ( -
    - {value} -
    + {stylizedValue}     ); } diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js index 9ebe4d09367d8..1c89e2c17f612 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/config_viewer/plugin_statement.js +++ b/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 [( )]; @@ -32,28 +32,27 @@ function getProcessorStatementMetrics(processorVertex) { percentOfTotalProcessorTime, } = processorVertex; - const cpuHighlight = processorVertex.isTimeConsuming() ? 'cv-processorMetric__cpuTimeHighlight' : ''; - const eventMillisHighlight = processorVertex.isSlow() ? 'cv-processorMetric__eventMillis' : ''; - return [ ( ), ( ), ( ) @@ -80,58 +79,54 @@ export function PluginStatement({ const onNameButtonClick = () => { onShowVertexDetails(vertex); }; return ( -
    - - - - + + + + - - + {name} + + + { + hasExplicitId && - - {name} - + {id} + - { - hasExplicitId && - -
    - {id} -
    -     - } + } +     +     + { + statementMetrics && + + + {statementMetrics} - { - statementMetrics && - - - {statementMetrics} - - - } -     -
    + } + ); } 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/config_viewer/queue.js index 93284003337c0..8dc5971857c60 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/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 ( -
    +
    -
    + + 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/config_viewer/statement.js index eb25609905dbc..545c7934db8e0 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/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(
    ); + spacers.push(
    ); } 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 ( -
  • -
    +
  • +
    {renderNestingSpacers(depth)}
    - -
    - {renderStatement(props)} -
    -     + {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/config_viewer/statement_list_heading.js index 66686871ef088..18ae8c3277a47 100644 --- 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/config_viewer/statement_list_heading.js @@ -21,16 +21,15 @@ export function StatementListHeading({ - +

    {title}

         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/config_viewer/statement_section.js index dc22ab1ca2514..d402b63a89f58 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/config_viewer/statement_section.js @@ -8,6 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { StatementListHeading } from './statement_list_heading'; import { Statement } from './statement'; +import { EuiSpacer } from '@elastic/eui'; export function StatementSection({ iconType, @@ -18,11 +19,12 @@ export function StatementSection({ if (!elements.length) { return null; } return ( -
    +
    + +
      { elements.map(this.renderStatement) } diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js index c384802c4f45c..b1b5d70827f2b 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/detail_drawer.js @@ -20,7 +20,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, - EuiSpacer + EuiSpacer, + EuiBadge, } from '@elastic/eui'; import { Sparkline } from '../../../sparkline'; import { formatMetric } from '../../../../lib/format_number'; @@ -189,7 +190,7 @@ function renderBasicStats(vertex, timeseriesTooltipXValueFormatter) { function renderPluginBasicInfo(vertex) { if (vertex.hasExplicitId) { return ( -

      This {vertex.typeString}'s ID is { vertex.id }.

      +

      This {vertex.typeString}'s ID is { vertex.id }.

      ); } @@ -268,17 +269,22 @@ export function DetailDrawer({ vertex, onHide, timeseriesTooltipXValueFormatter > + + { renderIcon(vertex) } + -

      { renderIcon(vertex) }{ renderTitle(vertex) }

      +

      { renderTitle(vertex) }

             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 index 2296d77c28522..b811711871d9c 100644 --- 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,133 +1,100 @@ -.cv-statementList -{ - margin: 16px; -} - -.cv-statementList__icon -{ - margin-top: 5px; -} - -.cv-spacer { - height: 94%; - width: 10px; - display: inline-block; - margin-left: 11px; - border-left: 1px #b2b2b2 dashed; -} - -@media (max-width: 768px) { - .cv-spacer { - border: 0px; - } -} +@import (reference) '~ui/styles/variables/colors'; -.cv-spacer:last-child { - width: 0px; +monitoring-main[page="pipeline"] { + background: @globalColorLightestGray; } -.cv-inputMetric__eventsEmitted { - width: 150px; +.configViewer { + max-width: 1000px; } -.cv-statement__content { - display: inline-block; - min-height: 28px; - padding-left: 9px; - width: 100%; +.configViewer__statement { + padding-left: 12px; } -.cv-statement { - display: inline-block; - margin-top: 5px; - margin-left: 3px; - width: 100%; +.configViewer__plugin { + margin-left: 4px; } -.cv-statement__id { - background: #d9d9d9; - padding: 4px 6px 4px 6px; - font-size: 12px; - font-weight: bold; - border-radius: 2px; - margin-top: 1px; -} -.cv-statement__icon { - color: #50b0a4; -} - -.cv-statement__name { - color: #50b0a4; - font-weight: bold; - font-size: small; - margin-top: -2px; +.configViewer__spaceContainer { + background-color: white; + align-self: stretch; + display: flex; + // Separates the left border spaces properly + border-bottom: solid 2px white; } -.cv-ifStatement__condition { - margin-top: 7px; -} +.configViewer__spacer { + width: 12px; + align-self: stretch; + margin-left: 12px; + border-left: 1px @globalColorMediumGray dashed; -.cv-pluginStatement__icon { - padding-top: 4px; -} + // This allows the border to be flush + &:last-child { + width: 0px; + } -.cv-pluginStatement__metricContainer { - padding: 4px 8px 4px 8px; - border-radius: 2px; + &:first-child { + // Odd number is because of the single pixel border. + margin-left: 23px; + } } -.cv-processorMetric__cpuTime { - width: 35px; - padding: 2px 4px 2px 8px; - border-radius: 2px; - margin-top: -2px; -} -.cv-processorMetric__cpuTimeHighlight { - background: #d6b283; -} +.configViewer__metric { + text-align: right; -.cv-processorMetric__events { - width: 150px; - border-radius: 2px; - padding: 2px 4px 2px 4px; - margin-top: -2px; -} - -.cv-processorMetric__eventMillis { - width: 80px; - padding: 2px 4px 2px 4px; - margin-top: -2px; -} + &--cputTime { + width: 40px; + } -.cv-spaceContainer { - background-color: white; -} + &--events, &--eventsEmitted { + width: 160px; + } -.cv-queue__messageText { - margin-left: 25px; - color: #838383; + &--eventMillis { + width: 80px; + } } -.cv-list { - display: flex; - min-height: 32px; +.configViewer__queueMessage { + margin-left: 24px; + color: @globalColorDarkGray; } -.cv-listParent li:nth-child(2n+1) { - background: #f7f7f7; -} +.configViewer__list { + .configViewer__listItem { + display: flex; + min-height: 32px; + align-items: center; + padding-right: 12px; -.cv-ifElseStatement__title { - margin-top: 2px; + &:nth-child(2n+1) { + background: #fafafa; + } + } } -.cv-ifElseStatement__name { +.configViewer__conditional { font-weight: bold; + text-transform: uppercase; } -.cv-ifElseStatement__toggle { - margin-top: 3px; - color: #898989; +@media (max-width: 768px) { + .configViewer { + .configViewer__spacer { + border: none; + } + + .configViewer__metricFlexItem { + margin-bottom: 4px !important; + } + + .configViewer__metric { + text-align: left; + padding-left: 32px; + } + } } From da426f3e7bf88d80adc90c781c1047ac12e36bd6 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 7 Jun 2018 11:36:34 -0400 Subject: [PATCH 41/44] Update CSS to add min-height to page. --- .../public/less/components/logstash/config_viewer.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) 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 index b811711871d9c..b237affc0c530 100644 --- a/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less +++ b/x-pack/plugins/monitoring/public/less/components/logstash/config_viewer.less @@ -2,6 +2,7 @@ monitoring-main[page="pipeline"] { background: @globalColorLightestGray; + min-height: 100vh; } .configViewer { @@ -16,7 +17,6 @@ monitoring-main[page="pipeline"] { margin-left: 4px; } - .configViewer__spaceContainer { background-color: white; align-self: stretch; @@ -42,7 +42,6 @@ monitoring-main[page="pipeline"] { } } - .configViewer__metric { text-align: right; @@ -79,7 +78,6 @@ monitoring-main[page="pipeline"] { .configViewer__conditional { font-weight: bold; - text-transform: uppercase; } @media (max-width: 768px) { From 1689b941bd09887dfd9444179b1dce85b572a089 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 12 Jun 2018 22:37:48 -0400 Subject: [PATCH 42/44] Rename "elements" to "statements". Delete unused LESS variables. --- src/ui/public/styles/variables/colors.less | 2 - .../views/config_viewer/statement_section.js | 39 ++++++++++--------- 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/ui/public/styles/variables/colors.less b/src/ui/public/styles/variables/colors.less index 617c49fede7af..84269c3a6e4e5 100644 --- a/src/ui/public/styles/variables/colors.less +++ b/src/ui/public/styles/variables/colors.less @@ -17,8 +17,6 @@ @globalColorTeal: #00A69B; @globalColorOrange: #E5830E; @globalColorPurple: #7800A6; -@globalColorSlightHue: #909AA1; -@globalColorFocus: #e6f2f6; //## Gray and brand colors for use across Bootstrap. 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/config_viewer/statement_section.js index d402b63a89f58..1d5673c0b7e0e 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/config_viewer/statement_section.js @@ -33,9 +33,9 @@ export function StatementSection({ ); } -function getCollapsedChildIds(elements, collapsedIds) { +function getCollapsedChildIds(statements, collapsedIds) { const collapsedChildIds = new Set(); - elements.forEach(({ id, parentId }) => { + statements.forEach(({ id, parentId }) => { if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { collapsedChildIds.add(id); } @@ -53,20 +53,21 @@ class StatementList extends React.PureComponent { }; } - expand = elementId => { + expand = statementId => { const collapsedIds = new Set(this.state.collapsedIds); - collapsedIds.delete(elementId); - this.updateCollapsedElements(collapsedIds); + collapsedIds.delete(statementId); + this.updateCollapsedStatements(collapsedIds); } - collapse = elementId => { + collapse = statementId => { const collapsedIds = new Set(this.state.collapsedIds); - collapsedIds.add(elementId); - this.updateCollapsedElements(collapsedIds); + collapsedIds.add(statementId); + this.updateCollapsedStatements(collapsedIds); } - updateCollapsedElements = collapsedIds => { - const collapsedChildIds = getCollapsedChildIds(this.props.elements, collapsedIds); + updateCollapsedStatements = collapsedIds => { + const { statements } = this.props; + const collapsedChildIds = getCollapsedChildIds(statements, collapsedIds); this.setState({ collapsedIds, @@ -74,10 +75,10 @@ class StatementList extends React.PureComponent { }); } - elementIsCollapsed = elementId => this.state.collapsedIds.has(elementId); + statementIsCollapsed = statementId => this.state.collapsedIds.has(statementId); - renderStatement = element => { - const { id, parentId } = element; + renderStatement = statement => { + const { id, parentId } = statement; const { onShowVertexDetails } = this.props; return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) @@ -85,22 +86,22 @@ class StatementList extends React.PureComponent { : ( ); } render() { - const { elements } = this.props; + const { statements } = this.props; return (
        { - elements.map(this.renderStatement) + statements.map(this.renderStatement) }
      ); @@ -108,10 +109,10 @@ class StatementList extends React.PureComponent { } StatementList.propTypes = { - elements: PropTypes.arrayOf( + statements: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.string.isRequired, - // top-level elements have null parentId + // top-level statements have null parentId parentId: PropTypes.string }) ).isRequired, From c991bb1ca3f011ec68a0982e83225b0adb1b59bc Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 13 Jun 2018 10:06:00 -0400 Subject: [PATCH 43/44] Revert naming of "statements" to "elements" for StatementList component. --- .../views/config_viewer/statement_section.js | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) 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/config_viewer/statement_section.js index 1d5673c0b7e0e..f0f165c82ea7e 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/config_viewer/statement_section.js @@ -33,9 +33,9 @@ export function StatementSection({ ); } -function getCollapsedChildIds(statements, collapsedIds) { +function getCollapsedChildIds(elements, collapsedIds) { const collapsedChildIds = new Set(); - statements.forEach(({ id, parentId }) => { + elements.forEach(({ id, parentId }) => { if (collapsedIds.has(parentId) || collapsedChildIds.has(parentId)) { collapsedChildIds.add(id); } @@ -53,21 +53,21 @@ class StatementList extends React.PureComponent { }; } - expand = statementId => { + expand = elementId => { const collapsedIds = new Set(this.state.collapsedIds); - collapsedIds.delete(statementId); - this.updateCollapsedStatements(collapsedIds); + collapsedIds.delete(elementId); + this.updateCollapsedElement(collapsedIds); } - collapse = statementId => { + collapse = elementId => { const collapsedIds = new Set(this.state.collapsedIds); - collapsedIds.add(statementId); - this.updateCollapsedStatements(collapsedIds); + collapsedIds.add(elementId); + this.updateCollapsedElement(collapsedIds); } - updateCollapsedStatements = collapsedIds => { - const { statements } = this.props; - const collapsedChildIds = getCollapsedChildIds(statements, collapsedIds); + updateCollapsedElement = collapsedIds => { + const { elements } = this.props; + const collapsedChildIds = getCollapsedChildIds(elements, collapsedIds); this.setState({ collapsedIds, @@ -75,10 +75,10 @@ class StatementList extends React.PureComponent { }); } - statementIsCollapsed = statementId => this.state.collapsedIds.has(statementId); + elementIsCollapsed = elementId => this.state.collapsedIds.has(elementId); - renderStatement = statement => { - const { id, parentId } = statement; + renderStatement = element => { + const { id, parentId } = element; const { onShowVertexDetails } = this.props; return this.state.collapsedIds.has(parentId) || this.state.collapsedChildIds.has(parentId) @@ -86,22 +86,22 @@ class StatementList extends React.PureComponent { : ( ); } render() { - const { statements } = this.props; + const { elements } = this.props; return (
        { - statements.map(this.renderStatement) + elements.map(this.renderStatement) }
      ); @@ -109,10 +109,10 @@ class StatementList extends React.PureComponent { } StatementList.propTypes = { - statements: PropTypes.arrayOf( + elements: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.string.isRequired, - // top-level statements have null parentId + // top-level elements have null parentId parentId: PropTypes.string }) ).isRequired, From a91dc5654fd607fa887689c64aca99abc2e57324 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Thu, 14 Jun 2018 15:28:11 -0400 Subject: [PATCH 44/44] Update jest snapshots for DetailDrawer. --- .../__snapshots__/detail_drawer.test.js.snap | 115 +++++++++++------- 1 file changed, 71 insertions(+), 44 deletions(-) diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap index a332f27d90629..337b7738fd924 100644 --- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap +++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap @@ -7,14 +7,24 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if > + + +

      - if

      @@ -38,7 +43,7 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if > + + +

      - grok filter

      @@ -109,7 +119,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID > + + +

      - grok filter

      @@ -402,7 +417,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas > + parse_apache_logline - + .

      + + +

      - queue

      @@ -688,7 +711,7 @@ exports[`DetailDrawer component Queue vertices shows basic info and no stats for > + + + -

      - -

      +