falcon-ui/app/html/process/processFormInputsAndOutputsStepTpl.html

<!--
/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<form name="processForm" novalidate id="processFormInOutStep">
  <div class="col-sm-offset-1 col-sm-22">
    <h4 ng-if="process.inputs.length === 0">Inputs</h4>

    <div ng-repeat="input in process.inputs" class="row">
      <h4 class="col-xs-24">Input</h4>

      <div class="col-xs-24 detailsBox processCluster">

          <div class="row">
            <div class="col-xs-24">
              <label class="light">Name</label>
              <input type="text" class="form-control"
                     ng-class="{firstInput: $index === 0}"
                     validation-message="{{validations.messages.name}}"
                     ng-model="input.name"
                     ng-required="true"
                     ng-maxlength="100"
                     ng-pattern="validations.patterns.name"/>
            </div>
          </div>

        <div class="row">
          <div class="col-xs-24">
            <label class="light">Feed</label>

            <select ng-model="input.feed" ng-required="true" class="col-sm-24 form-control padding0"
                    validation-message="{{validations.messages.feed}}">
              <option value="" disabled selected style='display:none;'>-Select feed-</option>
              <option ng-repeat="feedItem in feedsList">{{feedItem.name}}</option>
            </select>
          </div>
        </div>

          <div class="clearfix"></div>
          <h5>Instance</h5>

          <div class="row">
            <div class="col-xs-12">
              <label class="light">Start</label>

              <input type="text" class="form-control" validation-message="{{validations.messages.value}}"
                     ng-model="input.start"
                     ng-required="true"
                     ng-maxlength="100"
                     on-blur="validateStartEndDate"/>

            </div>
            <div class="col-xs-12">
              <label class="light">End</label>

              <input type="text" class="form-control {{invalidEndDate}}" validation-message="{{validations.messages.value}}"
                     ng-model="input.end"
                     ng-required="true"
                     ng-maxlength="100"
                     on-blur="validateStartEndDate"/>
              <label ng-show="invalidEndDate" class="custom-danger nameValidationMessage">End should be equal or greater than Start</label>
            </div>

            <div class="col-xs-24 mt10">
              <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeInput($index)">
                <span class="entypo minus"></span> delete
              </button>
            </div>
          </div>
      </div>
    </div>

    <button type="button" class="btn btn-default btn-xs mt10 mb10 addInputButton" ng-click="addInput()">
      <span class="entypo plus"></span> add input
    </button>

    <h4 ng-if="process.outputs.length === 0">Outputs</h4>

    <div ng-repeat="output in process.outputs" class="row">
      <h4 class="col-xs-24">Output</h4>

      <div class="col-xs-24 detailsBox processCluster">
        <div class="row">
          <div class="col-xs-24">
            <label class="light">Name</label>
            <input type="text"
                   ng-class="{firstOutput: $index === 0}"
                   class="form-control"
                   validation-message="{{validations.messages.name}}"
                   ng-model="output.name"
                   ng-required="true"
                   ng-maxlength="100"
                   ng-pattern="validations.patterns.id"/>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-24">
            <label class="light">Feed</label>
            <select ng-model="output.feed" ng-required="true" class="col-sm-24 form-control padding0"
                    validation-message="{{validations.messages.feed}}" >
              <option value="" disabled selected style='display:none;'>-Select feed-</option>
              <option ng-repeat="feedItem in feedsList">{{feedItem.name}}</option>
            </select>
          </div>
        </div>
        <div class="clearfix"></div>
        <h5>Instance</h5>
        <div class="row">
          <div class="col-xs-24">
            <label class="light">Instance</label>

            <input type="text" class="form-control" validation-message="{{validations.messages.value}}"
                   ng-model="output.outputInstance"
                   ng-required="true"
                   ng-maxlength="100"/>
          </div>
        </div>
        <div class="row mt10">
          <button type="button" class="btn btn-default pull-right btn-xs" ng-click="removeOutput($index)">
            <span class="entypo minus"></span> delete
          </button>
        </div>

      </div>
    </div>

    <button type="button" class="btn btn-default btn-xs mb10 mt10" ng-click="addOutput()">
      <span class="entypo plus"></span> add output
    </button>
  </div>
  <div class="row">
    <div class="col-xs-24 mt20">
      <button class="btn prevBtn" type="button"
           ng-click="goBack('forms.process.clusters')"
           ng-disabled="buttonSpinners.backShow">
        Previous <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.backShow" />
      </button>
      <button class="btn nextBtn pull-right"
           ng-disabled="invalidEndDate || buttonSpinners.show"
           ng-click="goNext(processForm.$invalid, 'forms.process.summary')" >
        Next <img src="css/img/ajax-loader.gif" ng-if="buttonSpinners.show" />
      </button>
      <a class="pull-right" ui-sref="main">
        Cancel
      </a>
    </div>
  </div>
</form>