lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-13 08:09:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard: minor UI fixes

Browse Source 
- proper overflow handling and combined tooltips for grid table cells
- remove widget border radius
This commit is contained in:
Stephan de Wit 2025-01-13 14:52:06 +01:00
parent 88530c33df
commit d3466788f0
5 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/opnsense/www/css/dashboard.css
View File

@ -53,7 +53,6 @@
border-color: rgba(217, 79, 0, 0.15);
border-width: 2px;
background-color: #fbfbfb;
border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.widget-error {
@ -337,6 +336,8 @@ div {
}
.grid-item {
overflow: hidden;
text-overflow: ellipsis;
border: 1 px solid #ccc;
padding: 4px;
text-align: center;

8
src/opnsense/www/js/widgets/Firewall.js
View File

@ -82,6 +82,8 @@ export default class Firewall extends BaseTableWidget {
super.closeEventSource();
}
$('.ip-tooltip').tooltip('hide');
let actIcons = {
'pass': '<i class="fa fa-play text-success"></i>',
'block': '<i class="fa fa-minus-circle text-danger"></i>',
@ -123,12 +125,14 @@ export default class Firewall extends BaseTableWidget {
/* 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,
`<span class="ip-tooltip" style="cursor: pointer; data-toggle="tooltip" title="${data.src}">${data.src}</span>`,
`<span class="ip-tooltip" style="cursor: pointer; data-toggle="tooltip" title="${data.dst}">${data.dst}</span>`,
data.dstport ?? ''
]
]);
$('.ip-tooltip').tooltip({container: 'body'});
super.updateTable('fw-rule-table', [
[
popover.html($(`<div style="text-align: left;">${this.counters[data.rid].label}</div>`)).prop('outerHTML'),

15
src/opnsense/www/js/widgets/InterfaceStatistics.js
View File

@ -36,6 +36,13 @@ export default class InterfaceStatistics extends BaseTableWidget {
this.sortedData = [];
}
getGridOptions() {
return {
// trigger overflow-y:scroll after 650px height
sizeToContent: 650,
};
}
getMarkup() {
let $container = $('<div id="if-stats-container"></div>');
let $table = this.createTable('interface-statistics-table', {
@ -82,10 +89,14 @@ export default class InterfaceStatistics extends BaseTableWidget {
async onWidgetTick() {
const data = await this.ajaxCall('/api/diagnostics/traffic/interface');
$('.if-tooltip').tooltip('hide');
for (const [id, obj] of Object.entries(data.interfaces)) {
super.updateTable('interface-statistics-table', [
[
$(`<a href="/interfaces.php?if=${id}">${obj.name}</a>`).prop('outerHTML'),
`<span class="if-tooltip" style="cursor: pointer" data-toggle="tooltip" title="${obj.name}">
<a href="/interfaces.php?if=${id}">${obj.name}</a>
</span>`,
this._formatBytes(parseInt(obj["bytes received"])) || "0",
this._formatBytes(parseInt(obj["bytes transmitted"])) || "0",
parseInt(obj["packets received"]).toLocaleString(),
@ -97,6 +108,8 @@ export default class InterfaceStatistics extends BaseTableWidget {
], id);
}
$('.if-tooltip').tooltip({container: 'body'});
let sortedSet = {};
let i = 0;
let colors = Chart.colorschemes.tableau.Classic10;

3
src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
View File

@ -55,7 +55,6 @@
border-color: transparentize(map-get($colors, brand-primary), 0.85);
border-width: 2px;
background-color: map-get($colors, page-content-head-background);
border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.widget-error {
@ -338,6 +337,8 @@ div {
}
.grid-item {
overflow: hidden;
text-overflow: ellipsis;
padding: 4px;
text-align: center;
}

3
src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
View File

@ -55,7 +55,6 @@
border-color: transparentize(map-get($colors, brand-primary), 0.85);
border-width: 2px;
background-color: map-get($colors, page-content-head-background);
border-radius: 0.5em 0.5em 0.5em 0.5em;
}
.widget-error {
@ -338,6 +337,8 @@ div {
}
.grid-item {
overflow: hidden;
text-overflow: ellipsis;
padding: 4px;
text-align: center;
}