ntopng/httpdocs/templates/pages/top_sites.template
2022-12-11 10:25:43 +01:00

74 lines
3 KiB
Text

<div class="row">
<div class="col-12">
<div class="card card-shadow">
<div class="card-body">
<div class="card-footer">
<div class="d-flex align-items-center">
<label class="mb-0">{{ i18n("sites_page.time_range") }}</label>
<select class="form-select ms-2" id="select-granularity" style="width: 16rem">
{% for key, value in pairsByField(sites.granularities, 'order', rev) do %}
<option {{ (sites.default_granularity == key and 'selected' or '') }} value="{{ key }}">{{ value.label }}</option>
{% end %}
</select>
</div>
</div>
<table id="table-sites" class="table table-striped table-hover table-bordered w-100">
<thead>
<tr>
<th>{{ i18n("sites_page.current_sites") }}</th>
<th>{{ i18n("sites_page.contacts") }}</th>
<th>{{ i18n("percentage") }}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="notes bg-light border">
<b>{{ i18n('notes') }}</b>
<ul>
<li>{* i18n('top_host_sites.note_protocol_used') *}</li>
<li>{* i18n('top_host_sites.note_tot_entries') *}</li>
<li>{* i18n('top_host_sites.note_time_range') *}</li>
<li>{* i18n('top_host_sites.note_yesterday_data') *}</li>
</ul>
</div>
<script type="text/javascript">
i18n_ext.warning ="{{ i18n('warning', {}) }}";
i18n_ext.showing_x_to_y_rows = "{{ i18n('showing_x_to_y_rows', {x='_START_', y='_END_', tot='_TOTAL_'}) }}";
i18n_ext.search = "{{ i18n('search') }}";
i18n_ext.edit = "{{ i18n('edit') }}";
i18n_ext.remove = "{{ i18n('remove') }}";
i18n_ext.all = "{{ i18n('all') }}";
</script>
<script type="text/javascript">
$(document).ready(function() {
const topSitesEndpoint = "{* sites.endpoint *}"
let dtConfig = DataTableUtils.getStdDatatableConfig();
dtConfig = DataTableUtils.setAjaxConfig(dtConfig, `${topSitesEndpoint}&hour={{ sites.default_granularity }}`, 'rsp');
dtConfig = DataTableUtils.extendConfig(dtConfig, {
order: [[1,'desc']],
columns: [
{data: "site"},
{data: "contacts", render: function (data, type) {
if (type === "display") return NtopUtils.fint(data);
return data;
}},
{data: "percentage" , render: $.fn.dataTableExt.showProgress}
]
})
const $sitesDatatable = $(`#table-sites`).DataTable(dtConfig);
$(`#select-granularity`).on('change', function(event) {
const value = $(this).val();
$sitesDatatable.ajax.url(`${topSitesEndpoint}&hour=${value}`).load();
});
});
</script>