kongadmin/assets/js/app/connections/index.html

Kong admin GUI

<!--<div class="row">-->
    <!--<div class="col-md-12">-->
        <!--<div class="alert alert-info">-->
            <!--<p>-->
                <!--<span data-ng-if="user.admin"><i class="mdi mdi-plus"></i> Create one or more connections.<br></span>-->
                <!--<i class="mdi mdi-plus"></i> Select the connection you want to use by clicking on the corresponding star icon.-->
            <!--</p>-->
        <!--</div>-->

    <!--</div>-->
<!--</div>-->
<div class="row">
    <div class="col-md-12 actions">
        <button class="btn btn-primary pull-left" ng-click="createNode()" ng-if="user.admin">
            <i class="mdi mdi-plus"></i>
            new connection
        </button>
        <list-search
                class="pull-right margin-right"
                data-filters="filters"
                data-options="itemsPerPageOptions"
                data-items="itemsPerPage"
        ></list-search>
    </div>
</div>
<div class="row">
    <div class="col-md-12 table-responsive">
        <table class="table table-hover table-striped">
            <tr>
                <th width="{{item.width}}" class="text-nowrap"
                    data-ng-repeat="item in nodeTitleItems | filter:titleFilter"
                >
                    <a
                            data-ng-show="item.column"
                            class="clickable"
                            data-ng-click="changeSort(item)"
                            data-ng-bind-html="item.title.toUpperCase()"
                    ></a>
            <span
                    data-ng-show="!item.column"
                    data-ng-bind-html="item.title.toUpperCase()"
            ></span>

                    <i class="mdi"
                       data-ng-show="sort.column == item.column"
                       data-ng-class="{'mdi-chevron-down': !sort.direction, 'mdi-chevron-up': sort.direction}"
                    ></i>
                </th>
                <th width="1" ng-if="user.hasPermission('connections','delete')"></th>
            </tr>
            <tr data-ng-repeat="node in nodes">

                <td>
                    <i class="mdi clickable"
                       ng-if="!node.checkingConnection"
                       tooltip-append-to-body="true"
                       uib-tooltip="Toggle active"
                       ng-click="toggleActive(node)"
                       ng-class="user.node && user.node.id == node.id ? 'mdi-star text-warning' : 'mdi-star-outline'"
                    ></i>

                    <i class="mdi mdi-loading mdi-spin text-primary" ng-if="node.checkingConnection"></i>

                </td>
                <td ng-click="onShowStatusCheck(node)" class="clickable">

                    <i
                            ng-if="node.health_checks"
                            class="mdi"
                            uib-tooltip="{{node.health_check_details ? ( node.health_check_details.isHealthy ? 'Healthy' : 'Down or unresponsive' ) : 'N/A'}}"
                            data-ng-class="{'mdi-loading mdi-spin': Object.keys(node.health_check_details).length == 0,'mdi-heart-broken text-danger': node.health_check_details && !node.health_check_details.isHealthy,'mdi-heart-pulse text-success': node.health_check_details && node.health_check_details.isHealthy}"></i>

                    <i class="mdi mdi-loading mdi-spin text-primary" ng-if="node.health_checks && !node.health_check_details"></i>

                    <i style="opacity: .5" uib-tooltip="HC disabled" ng-if="!node.health_checks" class="mdi mdi-heart-outline"></i></td>
                </td>
                <td><a  edit-disabled="{{!user.hasPermission('connections','update')}}" editable-text="node.name" onbeforesave="updateNode(node)">{{node.name || 'undefined'}}</a></td>
                <td>
                    <a  edit-disabled="{{!user.hasPermission('connections','update')}}" editable-text="node.kong_admin_url" onbeforesave="updateNode(node)">{{node.kong_admin_url}}</a>
                </td>
                <td>
                    <a  edit-disabled="{{!user.hasPermission('connections','update')}}" editable-text="node.kong_api_key" onbeforesave="updateNode(node)">{{node.kong_api_key || 'N/A'}}</a>
                </td>
                <td>
                    <a href="#"
                       edit-disabled="{{!user.hasPermission('connections','update')}}"
                       editable-select="node.kong_version"
                       onaftersave="updateNode(node)"
                       e-ng-options="s.value as s.name for s in kong_versions">
                        {{ node.kong_version.split("-").join(".") }}
                    </a>
                </td>
                <td>{{node.createdAt | date : "MMM d, y"}}</td>
                <td  width="1" data-ng-if="user.hasPermission('connections','delete')">
                    <button class="btn btn-danger btn-link" ng-click="deleteNode(node)">
                        <i class="mdi mdi-delete"></i>
                        Delete
                    </button>
                </td>
            </tr>

            <tr data-ng-if="nodes.length === 0">
                <td colspan="100%" class="text-center">
                    <h5>No connections found...</h5>
                </td>
            </tr>
        </table>


    </div>
    <div class="col-md-12">
        <ul uib-pagination
            class="pagination margin-top"
            data-total-items="itemCount"
            data-ng-model="paging.currentPage"
            data-ng-change="pageChanged()"
            data-items-per-page="itemsPerPage"
            data-max-size="10"
            data-boundary-links="true"
            data-rotate="false"
        ></ul>
    </div>

</div>