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

dashboard: compact Services widget (https://github.com/opnsense/core/issues/7766)

Browse Source
This commit is contained in:
Stephan de Wit 2024-08-21 11:39:32 +02:00
parent 58e0c54128
commit 48e1933b71
2 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/opnsense/www/js/widgets/BaseTableWidget.js
View File

@ -30,24 +30,6 @@ class BaseTableWidget extends BaseWidget {
this.tables = {};
this.curSize = null;
this.sizeStates = {
0: {
'.flextable-row': {'padding': ''},
'.flextable-header .flex-cell': {'border-bottom': 'solid 1px'},
'.flex-cell': {'width': '100%'},
'.column': {'width': '100%'},
'.flex-subcell': {'width': '100%'},
},
450: {
'.flextable-row': {'padding': '0.5em 0.5em'},
'.flextable-header .flex-cell': {'border-bottom': ''},
'.flex-cell': {'width': this._calculateColumnWidth.bind(this)},
'.column .flex-cell': {'width': '100%'},
'.column': {'width': ''},
'.flex-subcell': {'width': ''},
}
}
this.widths = Object.keys(this.sizeStates).sort();
}
_calculateColumnWidth() {
@ -92,6 +74,7 @@ class BaseTableWidget extends BaseWidget {
* headers: list of headers to display. Only applicable for headerPosition: top.
* sortIndex: index of the column to sort on. Only applicable for headerPosition: top.
* sortOrder: 'asc' or 'desc'. Only applicable for headerPosition: top.
* headerBreakpoint: width in pixels beforing switching to a column layout. Only applicable for headerPosition: left.
*
*/
if (this.options === null) {
@ -104,11 +87,32 @@ class BaseTableWidget extends BaseWidget {
rotation: false,
sortIndex: null,
sortOrder: 'desc',
headerBreakpoint: 450,
...options
}
let $table = null;
let $headerContainer = null;
this.headerBreakpoint = mergedOpts.headerBreakpoint;
this.sizeStates = {
0: {
'.flextable-row': {'padding': ''},
'.flextable-header .flex-cell': {'border-bottom': 'solid 1px'},
'.flex-cell': {'width': '100%'},
'.column': {'width': '100%'},
'.flex-subcell': {'width': '100%'},
},
[this.headerBreakpoint]: {
'.flextable-row': {'padding': '0.5em 0.5em'},
'.flextable-header .flex-cell': {'border-bottom': ''},
'.flex-cell': {'width': this._calculateColumnWidth.bind(this)},
'.column .flex-cell': {'width': '100%'},
'.column': {'width': ''},
'.flex-subcell': {'width': ''},
}
}
this.widths = Object.keys(this.sizeStates).sort();
if (mergedOpts.headerPosition === 'top') {
/* CSS grid implementation */
@ -163,9 +167,9 @@ class BaseTableWidget extends BaseWidget {
let newElement = true;
if (rowIdentifier !== null) {
let $existingRow = $(`#id_${rowIdentifier}`);
let $existingRow = $(`#${this.id}_${rowIdentifier}`);
if ($existingRow.length === 0) {
$gridRow.attr('id', `id_${rowIdentifier}`);
$gridRow.attr('id', `${this.id}_${rowIdentifier}`);
} else {
$gridRow = $existingRow.empty();
newElement = false;
@ -181,7 +185,7 @@ class BaseTableWidget extends BaseWidget {
$table.append($gridRow);
}
} else {
$(`#id_${rowIdentifier}`).replaceWith($gridRow);
$(`#${this.id}_${rowIdentifier}`).replaceWith($gridRow);
}
if (options.headerPosition === 'top' && options.sortIndex !== null) {
@ -278,6 +282,10 @@ class BaseTableWidget extends BaseWidget {
}
onWidgetResize(elem, width, height) {
if (this.widths == null || this.sizeStates == null) {
return false;
}
let lowIndex = 0;
for (let i = 0; i < this.widths.length; i++) {
if (this.widths[i] <= width) {

27
src/opnsense/www/js/widgets/Services.js
View File

@ -27,7 +27,6 @@
export default class Services extends BaseTableWidget {
constructor() {
super();
this.locked = false;
}
@ -40,7 +39,8 @@ export default class Services extends BaseTableWidget {
getMarkup() {
let $table = this.createTable('services-table', {
headerPosition: 'left'
headerPosition: 'left',
headerBreakpoint: 270
});
return $(`<div id="services-container"></div>`).append($table);
}
@ -48,7 +48,7 @@ export default class Services extends BaseTableWidget {
serviceControl(actions) {
return actions.map(({ action, id, title, icon }) => `
<button data-service_action="${action}" data-service="${id}"
class="btn btn-xs btn-default srv_status_act2" title="${title}" data-toggle="tooltip">
class="btn btn-xs btn-default srv_status_act2" style="font-size: 10px;" title="${title}" data-toggle="tooltip">
<i class="fa fa-fw fa-${icon}"></i>
</button>
`).join('');
@ -62,16 +62,12 @@ export default class Services extends BaseTableWidget {
return;
}
if (!this.dataChanged('services', data)) {
return;
}
$('.service-status').tooltip('hide');
$('.srv_status_act2').tooltip('hide');
for (const service of data.rows) {
let name = service.name;
let description = service.description;
let $description = $(`<div style="font-size: 12px;">${service.description}</div>`);
let actions = [];
if (service.locked) {
@ -83,11 +79,12 @@ export default class Services extends BaseTableWidget {
actions.push({ action: 'start', id: service.id, title: this.translations.start, icon: 'play' });
}
let $buttonContainer = $(`<div>
let $buttonContainer = $(`<div style="display: flex; align-items: center; justify-content: flex-start;">
<span class="label label-opnsense label-opnsense-xs
label-${service.running ? 'success' : 'danger'}
service-status"
data-toggle="tooltip" title="${service.running ? this.translations.running : this.translations.stopped}">
data-toggle="tooltip" title="${service.running ? this.translations.running : this.translations.stopped}"
style="font-size: 10px;">
<i class="fa fa-${service.running ? 'play' : 'stop'} fa-fw"></i>
</span>
</div>
@ -95,7 +92,7 @@ export default class Services extends BaseTableWidget {
$buttonContainer.append(this.serviceControl(actions));
super.updateTable('services-table', [[description, $buttonContainer.prop('outerHTML')]], service.id);
super.updateTable('services-table', [[$description.prop('outerHTML'), $buttonContainer.prop('outerHTML')]], service.id);
}
$('.service-status').tooltip({container: 'body'});
@ -105,10 +102,10 @@ export default class Services extends BaseTableWidget {
this.locked = true;
event.preventDefault();
let $elem = $(event.currentTarget);
const icon = $elem.find('i').clone();
$elem.remove('i').html('<i class="fa fa-spinner fa-spin fa-fw" style="font-size: 1em;"></i>');
await $.post(`/api/core/service/${$elem.data('service_action')}/${$elem.data('service')}`);
$elem.remove('i').html(icon);
let $icon = $elem.children(0);
this.startCommandTransition($elem.data('service'), $icon);
const result = await this.ajaxCall(`/api/core/service/${$elem.data('service_action')}/${$elem.data('service')}`, {}, 'POST');
await this.endCommandTransition($elem.data('service'), $icon, true, false);
await this.updateServices();
this.locked = false;
});