netzbeere-web/index.lp

<? --[[
*  Pi-hole: A black hole for Internet advertisements
*  (c) 2017 Pi-hole, LLC (https://pi-hole.net)
*  Network-wide ad blocking via your own hardware.
*
*  This file is copyright under the latest version of the EUPL.
*  Please see LICENSE file for your rights under this license.
--]]

indexpage = true
mg.include('scripts/lua/header_authenticated.lp','r')
?>
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-3 col-sm-6">
        <!-- small box -->
        <div class="small-box bg-aqua no-user-select" id="total_queries" title="<?= i18n('index.total_queries_title') ?>">
            <div class="inner">
                <p><?= i18n('index.total_queries') ?></p>
                <h3 class="statistic"><span id="dns_queries">---</span></h3>
            </div>
            <div class="icon">
                <i class="fas fa-globe-americas"></i>
            </div>
            <a href="network?lang=<?= lang ?>" class="small-box-footer" id="total_clients">
                <span id="active_clients">-</span> <?= i18n('index.active_clients') ?> <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-sm-6">
        <!-- small box -->
        <div class="small-box bg-red no-user-select">
            <div class="inner">
                <p><?= i18n('index.queries_blocked') ?></p>
                <h3 class="statistic"><span id="blocked_queries">---</span></h3>
            </div>
            <div class="icon">
                <i class="fas fa-hand-paper"></i>
            </div>
            <a href="queries?upstream=blocklist&lang=<?= lang ?>" class="small-box-footer">
                <?= i18n('index.list_blocked_queries') ?> <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-sm-6">
        <!-- small box -->
        <div class="small-box bg-yellow no-user-select">
            <div class="inner">
                <p><?= i18n('index.percentage_blocked') ?></p>
                <h3 class="statistic"><span id="percent_blocked">---</span></h3>
            </div>
            <div class="icon">
                <i class="fas fa-chart-pie"></i>
            </div>
            <a href="queries?lang=<?= lang ?>" class="small-box-footer">
                <?= i18n('index.list_all_queries') ?> <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-sm-6">
        <!-- small box -->
        <div class="small-box bg-green no-user-select">
            <div class="inner">
                <p><?= i18n('index.domains_on_lists') ?></p>
                <h3 class="statistic"><span id="gravity_size">---</span></h3>
            </div>
            <div class="icon">
                <i class="fas fa-list-alt"></i>
            </div>
            <a href="groups-lists?lang=<?= lang ?>" class="small-box-footer">
                <?= i18n('index.manage_lists') ?> <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div>
    </div>
    <!-- ./col -->
</div>

<div class="row">
    <div class="col-md-12">
        <div class="box" id="queries-over-time">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.total_queries') ?></h3>
                <button class="btn btn-xs btn-default pull-right zoom-reset" data-sel="reset-history"><i class="fas fa-undo"></i>&nbsp;<?= i18n('index.reset_zoom') ?></button>
                <span class="pull-right zoom-info" data-toggle="tooltip" title="<?= i18n('index.zoom_info') ?>"><i class="fa fa-info-circle"></i></span>
            </div>
            <div class="box-body">
                <div class="chart" style="width: 100%; height: 180px">
                    <canvas id="queryOverTimeChart"></canvas>
                </div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="box" id="clients">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.client_activity') ?></h3>
                <button class="btn btn-xs btn-default pull-right zoom-reset" data-sel="reset-clients"><i class="fas fa-undo"></i>&nbsp;<?= i18n('index.reset_zoom') ?></button>
                <span class="pull-right zoom-info" data-toggle="tooltip" title="<?= i18n('index.zoom_info') ?>"><i class="fa fa-info-circle"></i></span>
            </div>
            <div class="box-body">
                <div class="chart" style="width: 100%; height: 180px">
                    <canvas id="clientsChart" class="no-user-select"></canvas>
                </div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="box" id="query-types-pie">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.query_types') ?></h3>
            </div>
            <div class="box-body">
                <div style="width:50%">
                    <canvas id="queryTypePieChart" width="280" height="280"></canvas>
                </div>
                <div class="chart-legend" style="width:50%" id="query-types-legend" ></div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
    <div class="col-md-6">
        <div class="box" id="forward-destinations-pie">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.upstream_servers') ?></h3>
            </div>
            <div class="box-body">
                <div style="width:50%">
                    <canvas id="forwardDestinationPieChart" width="280" height="280" class="no-user-select"></canvas>
                </div>
                <div class="chart-legend" style="width:50%" id="forward-destinations-legend"></div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
    </div>
</div>

<? if pihole.boxedlayout() then tablelayout = 'col-md-6' else  tablelayout = 'col-md-6 col-lg-6' end ?>
<div class="row">
    <div class="<?=tablelayout?>">
        <div class="box" id="domain-frequency">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.top_permitted_domains') ?></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                            <th><?= i18n('shared.domain') ?></th>
                            <th><?= i18n('index.hits') ?></th>
                            <th><?= i18n('index.frequency') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
    <div class="<?=tablelayout?>">
        <div class="box" id="ad-frequency">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.top_blocked_domains') ?></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                            <th><?= i18n('shared.domain') ?></th>
                            <th><?= i18n('index.hits') ?></th>
                            <th><?= i18n('index.frequency') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<div class="row">
    <!-- /.col -->
    <div class="<?=tablelayout?>">
        <div class="box" id="client-frequency">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.top_clients_total') ?></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                            <th><?= i18n('shared.client') ?></th>
                            <th><?= i18n('index.requests') ?></th>
                            <th><?= i18n('index.frequency') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
    <div class="<?=tablelayout?>">
        <div class="box" id="client-frequency-blocked">
            <div class="box-header with-border">
                <h3 class="box-title"><?= i18n('index.top_clients_blocked') ?></h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                            <th><?= i18n('shared.client') ?></th>
                            <th><?= i18n('index.requests') ?></th>
                            <th><?= i18n('index.frequency') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="overlay">
                <i class="fa fa-sync fa-spin"></i>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
</div>
<!-- /.row -->

<script src="<?=pihole.fileversion('scripts/js/charts.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/index.js')?>"></script>

<? mg.include('scripts/lua/footer.lp','r')?>