glass-isc-dhcp/public/templates/dhcp_statistics_page.html

<div class="row clearfix">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="card hide_me">
            <div class="header">
                <h2>Vendor List Count</h2>
                <ul class="header-dropdown m-r--5">
                </ul>
            </div>
            <div class="body">
                <table id="device_list_table"  class="table table-bordered table-striped table-hover js-basic-example dataTable dashboard-task-infos">
                    <thead>
                    <tr>
                        <th>Vendor</th>
                        <th>Count</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card hide_me">
            <div class="header">
                <h2>Excessive DHCP Requests (10 Minute Interval)</h2>
            </div>
            <div class="body">
                <small>Usually indicative of a physical error on the network with one-way communication</small><br><br>
                <table id="excessive_requests"  class="table table-bordered table-striped table-hover js-basic-example dataTable dashboard-task-infos">
                    <thead>
                        <tr>
                            <th>MAC</th>
                            <th>Vendor</th>
                            <th>Requesting IP</th>
                            <th>Request Via</th>
                            <th>Count</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <!-- #END# Area Chart -->
    <!-- Device Chart -->
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>Device Chart</h2>
            </div>
            <div class="body">
                <div id="device_chart" class="graph">
                    <table class="display"></table>
                </div>
            </div>
        </div>
        <div class="card hide_me">
            <div class="header">
                <h2>MAC Address OUI Count by Vendor</h2>
            </div>
            <div class="body">
                <table id="device_list_mac"  class="table table-bordered table-striped table-hover js-basic-example dataTable dashboard-task-infos">
                    <thead>
                    <tr>
                        <th>MAC Address OUI</th>
                        <th>Vendor</th>
                        <th>Count</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- #END# Donut Chart -->
</div>

<script type="text/javascript">
    $('.hide_me').hide();

    var chart_data = [];
    $.getJSON( "/api/get_vendor_count", function( data ) {
        $.each(data, function(k, v) {
            if(v >= 3)
                chart_data.push({"label": k, "value": v});

            $('#device_list_table  > tbody:last-child').append('<tr><td>' + k + '</td><td>' + v.toLocaleString('en') + '</td></tr>');
        });

        Morris.Donut({
            element: "device_chart",
            data: chart_data,
            colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)'],
            formatter: function (y) {
                return y.toLocaleString('en')
            }
        });

        device_list = $('#device_list_table').DataTable({
            dom: 'rftip',
            responsive: true,
            "pageLength": 20,
            "aaSorting": [],
            "order": [[ 1, "desc" ]],
            "searching": true
        });
    });

    $.getJSON( "/api/get_mac_oui_count_by_vendor", function( data ) {
        $.each(data, function(k, v) {
            // console.log(k);

            $('#device_list_mac  > tbody:last-child').append('<tr>' +
                '<td>' + data[k].mac_prefix + '</td>' +
                '<td>' + data[k].vendor + '</td>' +
                '<td>' + data[k].count.toLocaleString('en') + '</td>' +
                '</tr>'
            );

        });

        device_list = $('#device_list_mac').DataTable({
            dom: 'rftip',
            responsive: true,
            "pageLength": 20,
            "aaSorting": [],
            "order": [[ 2, "desc" ]]
        });

        // $('table').fadeIn(100);
        $('.hide_me').show();
    });

    $.getJSON( "/api/get_dhcp_requests", function( data ) {
        $.each(data, function(k, v) {
            $('#excessive_requests  > tbody:last-child').append('<tr>' +
                '<td>' + k + '</td>' +
                '<td>' + data[k].request_vendor + '</td>' +
                '<td>' + data[k].request_for + '</td>' +
                '<td>' + data[k].request_via + '</td>' +
                '<td>' + data[k].request_count.toLocaleString('en') + '</td>' +
                '</tr>'
            );

        });

        excessive_requests = $('#excessive_requests').DataTable({
            dom: 'rftip',
            responsive: true,
            "pageLength": 20,
            "aaSorting": [],
            "order": [[ 4, "desc" ]]
        });

        // $('table').fadeIn(100);
        $('.hide_me').show();
    });


</script>