kong-dashboard/src/html/apis/index.html

Web UI for managing Kong gateway

<div class="container" infinite-scroll="loadMore()" infinite-scroll-distance="5" infinite-scroll-use-document-bottom="true">
    <a href="#/apis/add" class="btn-floating btn-large waves-effect waves-light right" ng-show="apis.length >= 1">
        <i class="material-icons">add</i>
    </a>

    <h3 class="header">APIs</h3>

    <p class="flow-text center" ng-show="total === null" style="margin-top:50px;">
        <app-loader></app-loader>
    </p>

    <div class ng-show="total === 0">
        <p class="flow-text center">
            You haven't created any API in Kong yet.
        </p>
        <p class="center">
            <a href="#/apis/add" class="waves-effect waves-light btn">
                <i class="material-icons left">add_box</i>
                Add API
            </a>
        </p>
    </div>

    <table class="bordered" ng-show="total > 0">
        <thead>
        <tr>
            <th>Name</th>
            <th>Host(s)</th>
            <th>Uri(s)</th>
            <th>Method(s)</th>
            <th>Upstream url</th>
            <th>Created</th>
            <th></th>
        </tr>
        </thead>

        <tbody>
        <tr ng-repeat="api in apis">
            <td>{{api.name}}</td>
            <td ng-if="api.hosts.length == 1">
                <a href="{{ api.https_only ? 'https' : 'http' }}://{{ api.hosts[0] }}" target="_blank">{{ api.hosts[0] }}</a>
            </td>
            <td ng-if="api.hosts.length != 1">
                <ul class="browser-default">
                    <li ng-repeat="host in api.hosts">
                        <a href="{{ api.https_only ? 'https' : 'http' }}://{{ host }}" target="_blank">{{ host }}</a>
                    </li>
                </ul>
            </td>
            <td ng-if="api.uris.length == 1">
                {{ api.uris[0] }}
            </td>
            <td ng-if="api.uris.length != 1">
                <ul class="browser-default">
                    <li ng-repeat="uri in api.uris">
                        {{ uri }}
                    </li>
                </ul>
            </td>
            <td ng-if="api.methods.length == 1">
                {{ api.methods[0] }}
            </td>
            <td ng-if="api.methods.length != 1">
                <ul class="browser-default">
                    <li ng-repeat="method in api.methods">
                        {{ method }}
                    </li>
                </ul>
            </td>
            <td>
                <a href="{{ api.upstream_url }}" target="_blank">{{ api.upstream_url }}</a>
            </td>
            <td>{{api.created_at | date}}</td>
            <td class="right">
                <a class="btn-floating waves-effect waves-light" href="#/apis/{{api.id}}">
                    <i class="material-icons">mode_edit</i>
                </a>
                <a class="btn-floating waves-effect waves-light blue" href="#/apis/{{api.id}}/plugins">
                    <i class="material-icons">extension</i>
                </a>
                <a class="btn-floating waves-effect waves-light red modal-trigger" ng-click="showDeleteModal(api.name, api.id)">
                    <i class="material-icons">delete</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Modal Structure -->
<div id="deleteAPI" class="modal">
    <div class="modal-content">
        <h5>Do you really want to delete the API "{{current.name}}"?</h5>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-green btn" ng-click="abortDelete()">Noooooo!</a>
        <a class="waves-effect waves-red btn red" ng-click="performDelete()" style="margin-right:10px">Yes</a>
    </div>
</div>