kong-dashboard/src/html/targets/form.html

Web UI for managing Kong gateway

<div class="container">
    <h3 class="header">{{title}}</h3>

    <div class="row">
        <div class="col s5">
            <div class="card-panel teal">
                <p class="white-text">
                    A target is an ip address/hostname with a port that identifies an instance of a backend service. Every upstream can have many targets, and the targets can be dynamically added. Changes are effectuated on the fly.
                    Because the upstream maintains a history of target changes, the targets cannot be deleted or modified. To disable a target, post a new one with weight=0; alternatively, use the DELETE convenience method to accomplish the same.
                    The current target object definition is the one with the latest created_at.
                </p>

                <p class="white-text">
                    Checkout <a href="https://getkong.org/docs/latest/admin-api/#add-target" target="_blank">Kong documentation</a> for the meaning of the form parameters.
                </p>
            </div>
        </div>
        <form name="addTarget" class="col s7" novalidate ng-submit="save()">
            <div class="row">
                <div class="input-field col s12">
                    <input id="upstream_id" ng-model="upstream.name" type="text" class="validate"
                        ng-class="{invalid: error.upstream_name}" ng-readonly="true" >
                    <label for="upstream_id" class="active">Upstream</label>
                </div>
                <div class="input-field col s12" ng-show="isEdit()">
                    <input id="id" ng-model="target.id" type="text" class="validate"
                        ng-class="{invalid: error.id}" ng-readonly="true" >
                    <label for="id" class="active">ID</label>
                    <app-field-error error="error.id"></app-field-error>
                </div>
                <div class="input-field col s12">
                    <input id="name" autofocus ng-required="true" ng-model="target.target" type="text" 
                        ng-class="{invalid: error.target}" class="validate" placeholder="127.0.0.1:8080" >
                    <label for="name" ng-class="{active:target.target}">Target</label>
                    <app-field-error error="error.target"></app-field-error>
                </div>
                <div class="input-field col s12">
                    <input id="weight" autofocus ng-required="true" ng-model="target.weight" type="text" 
                        ng-class="{invalid: error.weight}" class="validate" >
                    <label for="weight" ng-class="{active:target.weight}">Weight</label>
                    <app-field-error error="error.weight"></app-field-error>
                </div>
                <div class="input-field col s6">
                    <a href="#/upstreams/{{upstream.id}}/targets" class="waves-effect waves-light btn">
                        <i class="material-icons left">list</i>
                        List Targets
                    </a>
                </div>
                <div class="input-field col s6">
                    <button type="submit" class="waves-effect waves-light btn right">
                        {{action}}
                    </button>
                </div>
            </div>
            <input type="hidden" ng-model="target.id" value="{{target.id}}"/>
        </form>
    </div>
</div>