`);
+ $tableContainer.append($rule_table);
+
+ $container.append($tableContainer);
+
+ $container.append($(`
+
+ `));
+
+ return $container;
+ }
+
+ _onMessage(event) {
+ if (!event) {
+ this.eventSource.close();
+ }
+
+ let actIcons = {
+ 'pass': '
',
+ 'block': '
',
+ 'rdr': '
',
+ 'nat': '
',
+ }
+
+ const data = JSON.parse(event.data);
+
+ // increase counters
+ if (!this.counters[data.rid]) {
+ this.counters[data.rid] = {
+ count: 1,
+ label: data.label ?? ''
+ }
+ } else {
+ this.counters[data.rid].count++;
+ }
+
+ let popContent = $(`
+
+ @${data.rulenr}
+ ${data.label.length > 0 ? 'Label: ' + data.label : ''}
+
+ ${this.translations.click}
+
+ `).prop('outerHTML');
+ let popover = $(`
+
+ ${actIcons[data.action]}
+
+ `);
+
+ super.updateTable('fw-top-table', [
+ [
+ popover.prop('outerHTML'),
+ /* Format time based on client browser locale */
+ (new Intl.DateTimeFormat(undefined, {hour: 'numeric', minute: 'numeric'})).format(new Date(data.__timestamp__)),
+ this.ifMap[data.interface] ?? data.interface,
+ data.src,
+ data.dst,
+ data.dstport ?? ''
+ ]
+ ]);
+
+ $('[data-toggle="popover"]').popover('hide');
+ $('[data-toggle="popover"]').popover({
+ container: 'body'
+ }).on('show.bs.popover', function() {
+ $(this).data("bs.popover").tip().css("max-width", "100%")
+ });
+
+ super.updateTable('fw-rule-table', [
+ [
+ $('
').text(this.counters[data.rid].label).prop('outerHTML'),
+ this.counters[data.rid].count
+ ]
+ ], data.rid);
+
+ this._updateChart(data.rid, this.counters[data.rid].label, this.counters[data.rid].count);
+ }
+
+ _updateChart(rid, label, count) {
+ let labels = this.chart.data.labels;
+ let data = this.chart.data.datasets[0].data;
+ let rids = this.chart.data.datasets[0].rids;
+
+ let idx = rids.findIndex(x => x === rid);
+ if (idx === -1) {
+ labels.push(label);
+ data.push(count);
+ rids.push(rid);
+ } else {
+ data[idx] = count;
+ }
+
+ this.chart.update();
+ }
+
+ async onMarkupRendered() {
+ let exit = false;
+ ajaxGet('/api/diagnostics/interface/getInterfaceNames', {}, (data, status) => {
+ if (status !== 'success') {
+ console.error('Failed to fetch interface descriptions');
+ exit = true;
+ return;
+ }
+
+ this.ifMap = data;
+ });
+
+ if (exit) {
+ return;
+ }
+
+ this.eventSource = new EventSource('/api/diagnostics/firewall/streamLog');
+ this.eventSource.onmessage = this._onMessage.bind(this);
+
+ let context = document.getElementById('fw-chart').getContext('2d');
+ let config = {
+ type: 'doughnut',
+ data: {
+ labels: [],
+ datasets: [
+ {
+ data: [],
+ rids: [],
+ }
+ ]
+ },
+ options: {
+ cutout: '40%',
+ maintainAspectRatio: true,
+ responsive: true,
+ aspectRatio: 2,
+ layout: {
+ padding: 10
+ },
+ normalized: true,
+ parsing: false,
+ onClick: (event, elements, chart) => {
+ const i = elements[0].index;
+ const rid = chart.data.datasets[0].rids[i];
+ window.open(`/ui/diagnostics/firewall/log?rid=${rid}`);
+ },
+ onHover: (event, elements) => {
+ event.native.target.style.cursor = elements[0] ? 'pointer' : 'grab';
+ },
+ plugins: {
+ legend: {
+ display: true,
+ position: 'left',
+ onHover: (event, legendItem) => {
+ const activeElement = {
+ datasetIndex: 0,
+ index: legendItem.index
+ };
+ this.chart.setActiveElements([activeElement]);
+ this.chart.tooltip.setActiveElements([activeElement]);
+ },
+ labels: {
+ filter: (ds, data) => {
+ /* clamp amount of legend labels to a max of 10 (sorted) */
+ const sortable = [];
+ data.labels.forEach((l, i) => {
+ sortable.push([l, data.datasets[0].data[i]]);
+ });
+ sortable.sort((a, b) => (b[1] - a[1]));
+ const sorted = sortable.slice(0, 10).map(e => (e[0]));
+
+ return sorted.includes(ds.text)
+ },
+ }
+ },
+ tooltip: {
+ callbacks: {
+ labels: (tooltipItem) => {
+ let obj = this.counters[tooltipItem.label];
+ return `${obj.label} (${obj.count})`;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ this.chart = new Chart(context, config);
+ }
+
+ onWidgetClose() {
+ if (this.eventSource !== null) {
+ this.eventSource.close();
+ }
+ }
+
+ onWidgetResize(elem, width, height) {
+ if (width < 650) {
+ $('#fw-chart').show();
+ $('#fw-table-container').hide();
+ } else {
+ $('#fw-chart').hide();
+ $('#fw-table-container').show();
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/opnsense/www/js/widgets/Interfaces.js b/src/opnsense/www/js/widgets/Interfaces.js
index c30894b43..08995deef 100644
--- a/src/opnsense/www/js/widgets/Interfaces.js
+++ b/src/opnsense/www/js/widgets/Interfaces.js
@@ -43,12 +43,13 @@ export default class Interfaces extends BaseTableWidget {
}
getMarkup() {
- let options = {
+ let $container = $('
');
+ let $if_table = this.createTable('if-table', {
headerPosition: 'none'
- }
+ });
- super.setTableOptions(options);
- return super.getMarkup();
+ $container.append($if_table);
+ return $container;
}
async onMarkupRendered() {
@@ -102,7 +103,7 @@ export default class Interfaces extends BaseTableWidget {
rows.push(row);
});
- super.updateTable(rows);
+ super.updateTable('if-table', rows);
$('[data-toggle="tooltip"]').tooltip();
});
diff --git a/src/opnsense/www/js/widgets/SystemInformation.js b/src/opnsense/www/js/widgets/SystemInformation.js
index 92b8b8a21..f528c673c 100644
--- a/src/opnsense/www/js/widgets/SystemInformation.js
+++ b/src/opnsense/www/js/widgets/SystemInformation.js
@@ -36,10 +36,12 @@ export default class SystemInformation extends BaseTableWidget {
}
getMarkup() {
- super.setTableOptions({
- headerPosition: 'left'
+ let $container = $('
');
+ let $sysinfotable = this.createTable('sysinfo-table', {
+ headerPosition: 'left',
});
- return super.getMarkup();
+ $container.append($sysinfotable);
+ return $container;
}
async onWidgetTick() {
@@ -69,7 +71,7 @@ export default class SystemInformation extends BaseTableWidget {
rows.push([[this.translations['uptime']], $('
').prop('outerHTML')]);
rows.push([[this.translations['datetime']], $('').prop('outerHTML')]);
rows.push([[this.translations['config']], $('').prop('outerHTML')]);
- super.updateTable(rows);
+ super.updateTable('sysinfo-table', rows);
});
}
}