octavia-dashboard/octavia_dashboard/static/dashboard/project/lbaasv2/workflow/monitor/monitor.html

<div ng-controller="MonitorDetailsController as ctrl">
  <p translate>Provide the details for the health monitor.</p>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group required">
        <label translate class="control-label" for="type">
          Monitor type
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <select class="form-control" name="type" id="type"
                ng-options="type for type in model.monitorTypes"
                ng-model="model.spec.monitor.type"
                ng-disabled="model.context.id" ng-required="true">
        </select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group required"
           ng-class="{ 'has-error': monitorDetailsForm.retry_down.$invalid && monitorDetailsForm.retry_down.$dirty }">
        <label translate class="control-label" for="retry_down">
          Retries down
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input name="retry_down" id="retry_down" type="number" class="form-control"
               ng-model="model.spec.monitor.retry_down" ng-pattern="/^\d+$/" min="1" max="10"
               ng-required="true">
        <span class="help-block" ng-show="monitorDetailsForm.retry_down.$invalid && monitorDetailsForm.retry_down.$dirty">
          {$ ::ctrl.retryDownError $}
        </span>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group required"
           ng-class="{ 'has-error': monitorDetailsForm.interval.$invalid && monitorDetailsForm.interval.$dirty }">
        <label translate class="control-label" for="interval">
          Interval (sec)
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input name="interval" id="interval" type="number" class="form-control"
               ng-model="model.spec.monitor.interval" ng-pattern="/^\d+$/"
               ng-min="model.spec.monitor.timeout" ng-required="true">
        <span class="help-block" ng-show="monitorDetailsForm.interval.$invalid && monitorDetailsForm.interval.$dirty">
          {$ ::ctrl.intervalError $}
        </span>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group required"
           ng-class="{ 'has-error': monitorDetailsForm.retry.$invalid && monitorDetailsForm.retry.$dirty }">
        <label translate class="control-label" for="retry">
          Retries
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input name="retry" id="retry" type="number" class="form-control"
               ng-model="model.spec.monitor.retry" ng-pattern="/^\d+$/" min="1" max="10"
               ng-required="true">
        <span class="help-block" ng-show="monitorDetailsForm.retry.$invalid && monitorDetailsForm.retry.$dirty">
          {$ ::ctrl.retryError $}
        </span>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group required"
           ng-class="{ 'has-error': monitorDetailsForm.timeout.$invalid && monitorDetailsForm.timeout.$dirty }">
        <label translate class="control-label" for="timeout">
          Timeout (sec)
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input name="timeout" id="timeout" type="number" class="form-control"
               ng-model="model.spec.monitor.timeout" ng-pattern="/^\d+$/" min="0"
               ng-required="true">
        <span class="help-block" ng-show="monitorDetailsForm.timeout.$invalid && monitorDetailsForm.timeout.$dirty">
          {$ ::ctrl.timeoutError $}
        </span>
      </div>
    </div>

  </div>

  <div class="row" ng-if="model.spec.monitor.type === 'HTTP'">

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group">
        <label translate class="control-label" for="method">HTTP method</label>
        <select class="form-control" name="method" id="method"
                ng-options="method for method in model.monitorMethods"
                ng-model="model.spec.monitor.method">
        </select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group"
           ng-class="{ 'has-error': monitorDetailsForm.status.$invalid && monitorDetailsForm.status.$dirty }">
        <label translate class="control-label" for="status">Expected status codes</label>
        <input name="status" id="status" type="text" class="form-control"
               ng-model="model.spec.monitor.status" ng-pattern="::ctrl.statusPattern">
        <span class="help-block" ng-show="monitorDetailsForm.status.$invalid && monitorDetailsForm.status.$dirty">
          {$ ::ctrl.statusError $}
        </span>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
      <div class="form-group"
           ng-class="{ 'has-error': monitorDetailsForm.path.$invalid && monitorDetailsForm.path.$dirty }">
        <label translate class="control-label" for="path">URL path</label>
        <input name="path" id="path" type="text" class="form-control"
               ng-model="model.spec.monitor.path" ng-pattern="::ctrl.urlPathPattern">
        <span class="help-block" ng-show="monitorDetailsForm.path.$invalid && monitorDetailsForm.path.$dirty">
          {$ ::ctrl.pathError $}
        </span>
      </div>
    </div>

  </div>
</div>