lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-19 11:04:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashboard: async call should be awaited, make sure observer can trigger on content load

Browse Source
This commit is contained in:
Stephan de Wit 2024-03-20 13:56:10 +01:00
parent ea90af0434
commit 3b138c3dad
3 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
.fa-circle-o-notch {
font-size: 3em;
.fa-spinner {
font-size: 2em;
}
.grid-stack-item-content {
@ -27,6 +27,10 @@
align-items: center;
}
.widget-spinner {
margin-top: 20px;
}
.fa-stack.small {
font-size: 0.5em;
}

28
src/opnsense/www/js/opnsense_widget_manager.js
View File

@ -275,19 +275,7 @@ class WidgetManager {
* this has the benefit of making it configurable per widget.
*/
async _loadDynamicContent() {
// map to an array of context-bound _onMarkupRendered functions
let fns = Object.values(this.widgetClasses).map((widget) => {
return this._onMarkupRendered.bind(this, widget);
});
// convert each _onMarkupRendered(widget) to a promise
let promises = fns.map(func => new Promise(resolve => resolve(func())));
// fire away
await Promise.all(promises).catch((error) => {
console.error('Failed to load dynamic content', error);
null;
});
// handle dynamic resize of widgets - do this after the dynamic content has been loaded
// handle dynamic resize of widgets
new ResizeObserverWrapper().observe(
document.querySelectorAll('.widget'),
(elem, width, height) => {
@ -304,6 +292,18 @@ class WidgetManager {
this._updateGrid(elem.parentElement.parentElement);
}
);
// map to an array of context-bound _onMarkupRendered functions
let fns = Object.values(this.widgetClasses).map((widget) => {
return this._onMarkupRendered.bind(this, widget);
});
// convert each _onMarkupRendered(widget) to a promise
let promises = fns.map(func => new Promise(resolve => resolve(func())));
// fire away
await Promise.all(promises).catch((error) => {
console.error('Failed to load dynamic content', error);
null;
});
}
// Executed for each widget; starts the widget-specific tick routine.
@ -312,7 +312,7 @@ class WidgetManager {
let onMarkupRendered = widget.onMarkupRendered.bind(widget);
// show a spinner while the widget is loading
let $selector = $(`.widget-${widget.id} > .widget-content > .panel-divider`);
$selector.after($(`<div class="spinner-${widget.id}"><i class="fa fa-circle-o-notch fa-spin"></i></div>`));
$selector.after($(`<div class="widget-spinner spinner-${widget.id}"><i class="fa fa-spinner fa-spin"></i></div>`));
await onMarkupRendered();
$(`.spinner-${widget.id}`).remove();

5
src/opnsense/www/js/widgets/Interfaces.js
View File

@ -52,7 +52,7 @@ export default class Interfaces extends BaseTableWidget {
}
async onMarkupRendered() {
ajaxGet('/api/interfaces/overview/interfacesInfo', {}, (data, status) => {
await ajaxGet('/api/interfaces/overview/interfacesInfo', {}, (data, status) => {
let rows = [];
data.rows.map((intf_data) => {
if (!intf_data.hasOwnProperty('config') || intf_data.enabled == false) {
@ -118,10 +118,7 @@ export default class Interfaces extends BaseTableWidget {
super.updateTable(rows);
$('[data-toggle="tooltip"]').tooltip();
return super.onMarkupRendered();
});
}
onWidgetResize(elem, width, height) {