Pipeline UI improvements

src/web/pipeline-connections/PipelineConnections.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Row, Col } from 'react-bootstrap';
 import naturalSort from 'javascript-natural-sort';
+import { LinkContainer } from 'react-router-bootstrap';
 
 import { EntityList, TypeAheadDataFilter } from 'components/common';
 import Connection from './Connection';
 import ConnectionForm from './ConnectionForm';
+import Routes from 'routing/Routes';
 
 const PipelineConnections = React.createClass({
   propTypes: {
@@ -50,6 +52,28 @@ const PipelineConnections = React.createClass({
       });
 
     const filteredStreams = this.props.streams.filter(s => !this.props.connections.some(c => c.stream_id === s.id && this._isConnectionWithPipelines(c)));
+    const pipelinesNo = this.props.pipelines.length;
+    let noItemsText;
+    if (pipelinesNo === 0) {
+      noItemsText = (
+        <span>
+          There are no pipeline connections. You can start by creating your{' '}
+          <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_RULES')}>
+            <a>pipeline rules</a>
+          </LinkContainer>{' '}
+          and then putting them together in a{' '}
+          <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_OVERVIEW')}>
+            <a>pipeline</a>
+          </LinkContainer>!
+        </span>
+      );
+    } else {
+      noItemsText = (
+        <span>
+          There are no pipeline connections. Click on "Add new connection" to connect your pipelines to a stream.
+        </span>
+      );
+    }
 
     return (
       <div>
@@ -68,7 +92,7 @@ const PipelineConnections = React.createClass({
             </div>
           </Col>
         </Row>
-        <EntityList bsNoItemsStyle="info" noItemsText="There are no pipeline connections."
+        <EntityList bsNoItemsStyle="info" noItemsText={noItemsText}
                     items={formattedConnections} />
       </div>
     );

src/web/pipelines/PipelineDetailsPage.jsx

@@ -103,8 +103,8 @@ const PipelineDetailsPage = React.createClass({
           </span>
 
           <span>
-            <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_OVERVIEW')}>
-              <Button bsStyle="info">Manage pipelines</Button>
+            <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES')}>
+              <Button bsStyle="info">Manage connections</Button>
             </LinkContainer>
             {' '}
             <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_RULES')}>

src/web/pipelines/ProcessingTimelineComponent.jsx

@@ -101,7 +101,7 @@ const ProcessingTimelineComponent = React.createClass({
     }
 
     const addNewPipelineButton = (
-      <div className="text-right">
+      <div className="pull-right">
         <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_PIPELINEID')('new')}>
           <Button bsStyle="success">Add new pipeline</Button>
         </LinkContainer>

src/web/rules/Rule.jsx

@@ -15,6 +15,7 @@ import Routes from 'routing/Routes';
 const Rule = React.createClass({
   propTypes: {
     rule: React.PropTypes.object,
+    usedInPipelines: React.PropTypes.array,
     create: React.PropTypes.bool,
     onSave: React.PropTypes.func.isRequired,
     validateRule: React.PropTypes.func.isRequired,
@@ -44,8 +45,8 @@ const Rule = React.createClass({
           </span>
 
           <span>
-            <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_RULES')}>
-              <Button bsStyle="info">Manage rules</Button>
+            <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES')}>
+              <Button bsStyle="info">Manage connections</Button>
             </LinkContainer>
             &nbsp;
             <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_OVERVIEW')}>
@@ -56,8 +57,8 @@ const Rule = React.createClass({
 
         <Row className="content">
           <Col md={6}>
-            <RuleForm rule={this.props.rule} create={this.props.create} onSave={this.props.onSave}
-                      validateRule={this.props.validateRule} history={this.props.history} />
+            <RuleForm rule={this.props.rule} usedInPipelines={this.props.usedInPipelines} create={this.props.create}
+                      onSave={this.props.onSave} validateRule={this.props.validateRule} history={this.props.history} />
           </Col>
           <Col md={5} mdOffset={1}>
             <RuleHelper />

src/web/rules/RuleDetailsPage.jsx

@@ -7,6 +7,9 @@ import Rule from './Rule';
 import RulesStore from './RulesStore';
 import RulesActions from './RulesActions';
 
+import PipelinesActions from '../pipelines/PipelinesActions';
+import PipelinesStore from '../pipelines/PipelinesStore';
+
 function filterRules(state) {
   return state.rules ? state.rules.filter(r => r.id === this.props.params.ruleId)[0] : undefined;
 }
@@ -17,10 +20,11 @@ const RuleDetailsPage = React.createClass({
     history: React.PropTypes.object.isRequired,
   },
 
-  mixins: [Reflux.connectFilter(RulesStore, 'rule', filterRules)],
+  mixins: [Reflux.connectFilter(RulesStore, 'rule', filterRules), Reflux.connect(PipelinesStore)],
 
   componentDidMount() {
     if (this.props.params.ruleId !== 'new') {
+      PipelinesActions.list();
       RulesActions.get(this.props.params.ruleId);
     }
   },
@@ -40,19 +44,23 @@ const RuleDetailsPage = React.createClass({
   },
 
   _isLoading() {
-    return this.props.params.ruleId !== 'new' && !this.state.rule;
+    return this.props.params.ruleId !== 'new' && !(this.state.rule && this.state.pipelines);
   },
 
   render() {
     if (this._isLoading()) {
       return <Spinner />;
     }
 
+    const pipelinesUsingRule = this.props.params.ruleId === 'new' ? [] : this.state.pipelines.filter(pipeline => {
+      return pipeline.stages.some(stage => stage.rules.indexOf(this.state.rule.title) !== -1);
+    });
+
     return (
-      <Rule rule={this.state.rule} create={this.props.params.ruleId === 'new'} onSave={this._save}
-            validateRule={this._validateRule} history={this.props.history} />
+      <Rule rule={this.state.rule} usedInPipelines={pipelinesUsingRule} create={this.props.params.ruleId === 'new'}
+            onSave={this._save} validateRule={this._validateRule} history={this.props.history} />
     );
   },
 });
 
-export default RuleDetailsPage;
+export default RuleDetailsPage;

src/web/rules/RuleForm.css

@@ -0,0 +1,17 @@
+:local(.usedInPipelines) {
+    margin: 0;
+    padding: 0;
+}
+
+:local(.usedInPipelines li:not(:last-child)) {
+    float: left;
+}
+
+:local(.usedInPipelines li:not(:last-child):after) {
+    content: ',';
+    margin-right: 5px;
+}
+
+:local(.usedInPipelines li:last-child:after) {
+    content: '.';
+}

src/web/rules/RuleForm.jsx

@@ -1,5 +1,6 @@
-import React, { PropTypes } from 'react';
-import { Row, Col, Button, Input } from 'react-bootstrap';
+import React from 'react';
+import { FormControls, Row, Col, Button, Input } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
 
 import AceEditor from 'react-ace';
 import brace from 'brace';
@@ -9,9 +10,12 @@ import 'brace/theme/chrome';
 
 import Routes from 'routing/Routes';
 
+import RuleFormStyle from './RuleForm.css';
+
 const RuleForm = React.createClass({
   propTypes: {
-    rule: PropTypes.object,
+    rule: React.PropTypes.object,
+    usedInPipelines: React.PropTypes.array,
     create: React.PropTypes.bool,
     onSave: React.PropTypes.func.isRequired,
     validateRule: React.PropTypes.func.isRequired,
@@ -119,13 +123,42 @@ const RuleForm = React.createClass({
     this._save();
   },
 
+  _formatPipelinesUsingRule() {
+    if (this.props.usedInPipelines.length === 0) {
+      return 'This rule is not being used in any pipelines.';
+    }
+
+    const formattedPipelines = this.props.usedInPipelines.map(pipeline => {
+      return (
+        <li>
+          <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_PIPELINEID')(pipeline.id)}>
+            <a>{pipeline.title}</a>
+          </LinkContainer>
+        </li>
+      );
+    });
+
+    return <ul className={RuleFormStyle.usedInPipelines}>{formattedPipelines}</ul>;
+  },
+
   render() {
+    let pipelinesUsingRule;
+    if (!this.props.create) {
+      pipelinesUsingRule = (
+        <Input label="Used in pipelines" help="Pipelines that use this rule in one or more of their stages.">
+          <div className="form-control-static">
+            {this._formatPipelinesUsingRule()}
+          </div>
+        </Input>
+      );
+    }
+
     return (
       <form ref="form" onSubmit={this._submit}>
         <fieldset>
-          <Input type="static"
-                 label="Title"
-                 value="You can set the rule title in the rule source. See the quick reference for more information." />
+          <FormControls.Static type="static"
+                               label="Title"
+                               value="You can set the rule title in the rule source. See the quick reference for more information." />
 
           <Input type="textarea"
                  id={this._getId('description')}
@@ -135,6 +168,8 @@ const RuleForm = React.createClass({
                  help="Rule description (optional)."
                  value={this.state.rule.description} />
 
+          {pipelinesUsingRule}
+
           <Input label="Rule source" help="Rule source, see quick reference for more information.">
             <div style={{ border: '1px solid lightgray', borderRadius: 5 }}>
               <AceEditor
@@ -144,7 +179,7 @@ const RuleForm = React.createClass({
                 fontSize={11}
                 height="14em"
                 width="100%"
-                editorProps={{ $blockScrolling: 'Infinity'}}
+                editorProps={{ $blockScrolling: 'Infinity' }}
                 value={this.state.rule.source}
                 onLoad={this._onLoad}
                 onChange={this._onSourceChange}

src/web/simulator/SimulationResults.jsx

@@ -21,7 +21,7 @@ const SimulationResults = React.createClass({
 
   getInitialState() {
     return {
-      viewOption: this.VIEW_OPTIONS.SIMULATION_PREVIEW,
+      viewOption: this.VIEW_OPTIONS.SIMULATION_SUMMARY,
     };
   },
 
@@ -98,7 +98,8 @@ const SimulationResults = React.createClass({
                      streams={streams}
                      disableTestAgainstStream
                      disableSurroundingSearch
-                     disableFieldActions />
+                     disableFieldActions
+                     disableMessageActions />
       );
     }
 

src/web/simulator/SimulatorPage.jsx

@@ -79,13 +79,13 @@ const SimulatorPage = React.createClass({
           </span>
 
           <span>
-            <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES')}>
-              <Button bsStyle="info">Manage connections</Button>
-            </LinkContainer>
-            &nbsp;
             <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_OVERVIEW')}>
               <Button bsStyle="info">Manage pipelines</Button>
             </LinkContainer>
+            &nbsp;
+            <LinkContainer to={Routes.pluginRoute('SYSTEM_PIPELINES_RULES')}>
+              <Button bsStyle="info">Manage rules</Button>
+            </LinkContainer>
           </span>
         </PageHeader>