@spotinst/spinnaker-deck/app/scripts/modules/google/src/loadBalancer/configure/http/healthCheck/healthCheck.component.html

Spinnaker-Deck service, forked with support to Spotinst

<hr ng-if="$ctrl.index > 0" />
<ng-form name="healthCheck">
  <div class="container-fluid form-horizontal">
    <div class="form-group">
      <div class="col-md-12 well alert-danger" ng-if="healthCheck.healthCheckName.$error.validateUnique">
        <validation-error message="There is already a health check with that name."></validation-error>
      </div>
      <div
        class="col-md-12 well alert-danger"
        ng-if="healthCheck.healthCheckName.$error.pattern || healthCheck.healthCheckName.$error.max"
      >
        <validation-error
          message="Name must start with a lowercase letter followed by up to 62 lowercase letters, numbers, or hyphens, and cannot end with a hyphen."
        >
        </validation-error>
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">Protocol</div>
      <div class="col-md-4">
        <select
          class="form-control input-sm"
          ng-change="$ctrl.onProtocolChange()"
          ng-model="$ctrl.healthCheckType"
          ng-options="protocol as protocol for protocol in ['HTTP', 'HTTPS', 'TCP', 'SSL']"
        ></select>
      </div>
      <div class="col-md-2">
        <button class="btn btn-sm btn-default" ng-click="$ctrl.deleteHealthCheck()">
          <span class="glyphicon glyphicon-trash visible-lg-inline"></span>
          <span>Delete</span>
        </button>
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">Name</div>

      <div class="col-md-4" ng-if="$ctrl.editExisting">
        <ui-select
          ng-model="$ctrl.healthCheck"
          on-select="$ctrl.onHealthCheckSelect($item)"
          class="form-control input-sm"
        >
          <ui-select-match placeholder="Select...">
            {{ $select.selected.name }}
          </ui-select-match>
          <ui-select-choices
            repeat="healthCheck in $ctrl.backingData.healthChecks | filter: {name: $select.search, account: $ctrl.loadBalancer.credentials, healthCheckType: $ctrl.healthCheckType}"
          >
            <div ng-bind-html="healthCheck.name | highlight: $select.search"></div>
          </ui-select-choices>
        </ui-select>
      </div>

      <div class="col-md-4" ng-if="!$ctrl.editExisting">
        <input
          class="form-control input-sm"
          type="text"
          ng-pattern="/^[a-z]([-a-z0-9]*[a-z0-9])?$/"
          name="healthCheckName"
          max="63"
          required
          validate-unique="$ctrl.getAllHealthCheckNames()"
          ng-model-options="{ debounce: 250 }"
          ng-model="$ctrl.healthCheck.name"
        />
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-6 col-md-offset-4">
        <a href class="small" ng-if="!$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()"
          >Toggle for list of existing health checks</a
        >
        <a href class="small" ng-if="$ctrl.editExisting" ng-click="$ctrl.toggleEditExisting()">Toggle for text input</a>
      </div>
    </div>

    <div
      class="form-group"
      ng-if="$ctrl.healthCheck.healthCheckType === 'HTTP' || $ctrl.healthCheck.healthCheckType === 'HTTPS'"
    >
      <div class="col-md-4 sm-label-right">Request Path</div>
      <div class="col-md-4">
        <input class="form-control input-sm" required ng-model="$ctrl.healthCheck.requestPath" />
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">Port</div>
      <div class="col-md-4">
        <input
          type="number"
          class="form-control input-sm"
          required
          min="1"
          max="65535"
          ng-model="$ctrl.healthCheck.port"
        />
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">
        <b>Timeout</b><help-field key="loadBalancer.advancedSettings.healthTimeout"></help-field>
      </div>
      <div class="col-md-4">
        <input
          class="form-control input-sm"
          type="number"
          min="0"
          max="{{:: $ctrl.max}}"
          required
          ng-model="$ctrl.healthCheck.timeoutSec"
        />
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">
        <b>Interval</b><help-field key="gce.loadBalancer.advancedSettings.healthInterval"></help-field>
      </div>
      <div class="col-md-4">
        <input
          class="form-control input-sm"
          type="number"
          min="0"
          max="{{:: $ctrl.max}}"
          required
          ng-model="$ctrl.healthCheck.checkIntervalSec"
        />
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">
        <b>Healthy Threshold</b><help-field key="gce.loadBalancer.advancedSettings.healthyThreshold"></help-field>
      </div>
      <div class="col-md-4">
        <input
          class="form-control input-sm"
          type="number"
          min="0"
          max="{{:: $ctrl.max}}"
          required
          ng-model="$ctrl.healthCheck.healthyThreshold"
        />
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-4 sm-label-right">
        <b>Unhealthy Threshold</b><help-field key="gce.loadBalancer.advancedSettings.unhealthyThreshold"></help-field>
      </div>
      <div class="col-md-4">
        <input
          class="form-control input-sm"
          type="number"
          min="0"
          max="{{:: $ctrl.max}}"
          required
          ng-model="$ctrl.healthCheck.unhealthyThreshold"
        />
      </div>
    </div>
  </div>
</ng-form>