console/stand-alone/plugin/html/tmplClientDetail.html

<!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License
-->

<style>
    div.details {
        max-height: 21em;
        overflow: auto;
    }

    table td.right {
        text-align: right;
    }
    table td {
        padding: .4em;
        border-right: 1px solid #F0F0F0;
    }
    table tr.odd {
        background-color: #F0F0F0;
    }
    table td.expander {
        cursor: pointer;
        width: 1em;
    }
    table tr.hiddenRow {
        display: none;
    }
    div.details {
        width: 100%;
    }
    div.details span.right {
        float: right;
    }

    div.sub-table {
        border: 1px solid #CCCCCC;
        margin: 1em 0;
    }
    div.sub-table-row.body {
        background-color: #FFFFFF;
    }
    div.sub-table-row {
        border-bottom: 1px solid #CCCCCC;
    }
    div.sub-table-row:last-child {
        border-bottom: 0px;
    }
    div.sub-table-row.header {
        background-clip: padding-box;
        background-color: #f5f5f5;
        background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
        background-repeat: repeat-x;
    }

    span.sub-table-col {
        display: inline-block;
        border-right: 1px solid #CCCCCC;
        padding: 2px 10px 3px;
    }
    span.sub-table-col:last-child {
        border-right: 0px;
    }


    dl.sub-table {
        display: grid;
        grid-template-columns: max-content auto;
        margin-left: 0.5em;
        background-color: white;
        border: 1px solid #CCCCCC;
    }

    dl.sub-table dt {
        grid-column-start: 1;
        padding: 3px 3em 3px 10px;
        border-bottom: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
    }

    dl.sub-table dd {
        grid-column-start: 2;
        padding: 3px 10px;
        border-bottom: 1px solid #CCCCCC;
    }
    dl.sub-table dd:last-child, dl.sub-table dt:last-of-type {
        border-bottom: 0px;
    }

    dl.sub-table dd.odd, dl.sub-table dt.odd {
        background-color: #f0f0f0;
    }
</style>
<!--
    This is the template for the client detail popup displayed when a group
    of edge routers or clients are clicked on the topology page
-->
<div>
    <div class="modal-header">
        <h3 class="modal-title">Detail {{detail.title}}</h3>
    </div>
    <div class="modal-body">
        <h4>{{detail.description}}</h4>
        <div class="details" ng-include="detail.template"></div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="okClick()">Close</button>
    </div>
</div>

<script type="text/ng-template" id="loading.html">
    loading...
</script>
<script type="text/ng-template" id="clients.html">
    <table class="table table-striped table-bordered table-hover dataTable no-footer">
        <thead>
            <tr>
                <th></th>
                <th>Container</th>
                <th>Encrypted</th>
                <th>Host</th>
                <th>Links</th>
            </tr>
        </thead>
        <tr ng-repeat-start="info in detail.infoPerId" 
            ng-class="{even: $even, odd: $odd}"
            ng-click="expandClicked(info.container)">
            <td class="expander">
                <span class="fa"
                        ng-class="expanded(info.container) ? 'fa-angle-down' : 'fa-angle-right'"
                ></span>
            </td>
            <td>{{info.container}}</td><!-- Id -->
            <td class="right">{{info.encrypted}}</td>
            <td class="right">{{info.host}}</td>
            <td class="right">{{info.linkCount}}</td>
        </tr>
        <tr ng-repeat-end
            ng-class="{hiddenRow: !expanded(info.container)}"
            ng-click="expandClicked(info.container)"
        >
            <td colspan="6">
                <sub-table 
                    sizes="info.sizes" 
                    cols="fields.linkFields.cols"
                    rows="info.links"></sub-table>
            </td>
        </tr>
    </table>
</script>

<script type="text/ng-template" id="sub-table.html">
    <div class="sub-table">
            <div class="sub-table-row header">
                <span 
                    class="sub-table-col client" 
                    ng-style="{ width: fieldWidth(field, sizes) }" 
                    ng-repeat="field in cols">
                    {{field | humanify}}
                </span>
            </div>
            <div class="sub-table-row body" ng-repeat="link in rows">
                <span 
                    class="sub-table-col client" 
                    ng-style="{ width: fieldWidth(field, sizes) }" 
                    ng-repeat="field in cols">
                    {{link[field] | pretty}}
                </span>
            </div>
        </div>
</script>

<script type="text/ng-template" id="edgeRouters.html">
    <table class="table table-striped table-bordered table-hover dataTable no-footer">
        <thead>
            <tr>
                <th></th>
                <th>Id</th>
                <th>Link Routes</th>
                <th>Auto Links</th>
                <th>Conns</th>
                <th>Addrs</th>
                <th>Accepted/sec</td>
            </tr>
        </thead>
        <tr ng-repeat-start="info in detail.infoPerId" 
            ng-class="{even: $even, odd: $odd}"
            ng-click="expandClicked(info.name)">
            <td class="expander">
                <span class="fa"
                        ng-class="expanded(info.name) ? 'fa-angle-down' : 'fa-angle-right'"
                ></span>
            </td>
            <td>{{info.name}}</td><!-- Id -->
            <td class="right">{{info.linkRouteCount}}</td>
            <td class="right">{{info.autoLinkCount}}</td>
            <td class="right">{{info.connectionCount}}</td>
            <td class="right">{{info.addrCount}}</td>
            <td class="right">{{info.acceptedDeliveriesRate | pretty}}</td>
        </tr>
        <!-- hidden row that is exposed when above row is clicked-->
        <tr ng-repeat-end
            ng-class="{hiddenRow: !expanded(info.name)}"
            ng-click="expandClicked(info.name)"
            ng-if="expanded(info.name)"
        >
            <td colspan="7">
                <h4>Details for edge router {{info.name}}</h4>
                <dl class="sub-table">
                    <dt ng-repeat-start="field in fields.detailFields.cols">
                        {{field | humanify}}
                    </dt>
                    <dd ng-repeat-end>
                        {{info[field] | pretty}}
                    </dd>
                </dl>
    
                <h4>Link routes</h4>
                <sub-table 
                    sizes="info.linkRouteSizes" 
                    cols="fields.linkRouteFields.cols"
                    rows="info.linkRoutes"></sub-table>

                <h4>Autolinks</h4>
                <sub-table 
                    sizes="info.autoLinkSizes" 
                    cols="fields.autoLinkFields.cols"
                    rows="info.autoLinks"></sub-table>

                <h4>Addresses</h4>
                <sub-table 
                    sizes="info.addressSizes" 
                    cols="fields.addressFields.cols"
                    rows="info.addresses"></sub-table>
            </td>
        </tr>
    </table>
</script>