kongadmin/assets/js/app/plugins/modals/add-consumer-plugin-modal.html

Kong admin GUI

<div class="modal-header primary">
    <h4 class="modal-title" id="modal-title">
        ADD PLUGIN
        <a  class="modal-close pull-right" ng-click="close()">
            <i class="mdi mdi-close"></i>
        </a>
    </h4>
</div>

<div class="modal-body">

    <div class="row">
        <div class="col-md-3">
            <ul class="nav nav-pills nav-stacked">
                <li
                        role="presentation"
                        ng-class="{'active' : activeGroup == group.name}"
                        data-ng-click="setActiveGroup(group.name)"
                        data-ng-repeat="group in pluginGroups"
                >
                    <a href>
                        {{group.name}}
                    </a>
                </li>
            </ul>

        </div>
        <div class="col-md-9">
            <div class="row" vertilize-container  data-ng-repeat="group in pluginGroups | filter : filterGroup">
                <div class="col-md-12">
                    <div class="inner margin-bottom padding" style="background-color: #f4f4f4">
                        <h4><i class="mdi pull-left {{group.icon}}"></i>&nbsp;{{group.name.toUpperCase()}}</h4>
                        <p class="help-block no-margin">{{group.description}}</p>
                    </div>
                </div>

                <div class="col-md-6" data-ng-repeat="(key,value) in group.plugins">
                    <div class="panel"
                         ng-class="{'panel-success' : existingPlugins.indexOf(key) > -1, 'panel-default' : existingPlugins.indexOf(key) < 0}"
                         vertilize>
                        <div class="panel-heading">
                            <div class="panel-title">
                                <span class="capitalize">{{key.split('-').join(" ")}}</span>
                                <div class="pull-right">
                                    <button
                                            data-ng-if="existingPlugins.indexOf(key) < 0"
                                            class="btn btn-primary btn-link btn-icon"
                                            angular-ripple data-ng-click="onAddPlugin(key)">
                                        <i class="mdi mdi-plus"></i>
                                    </button>
                                    <i class="mdi mdi-check-all" data-ng-if="existingPlugins.indexOf(key) > -1"></i>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
                            <p class="help-block" data-ng-bind-html="value.description"></p>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>

    <!--<div class="row">-->
        <!--<div class="col-md-12" >-->
            <!--<ul class="nav nav-pills">-->
                <!---->
            <!--</ul>-->
        <!--</div>-->
    <!--</div>-->


</div>