From d4a7060f5fe41c265b9389fea128f3048f9f9240 Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Fri, 9 Jan 2026 16:12:58 +0200 Subject: [PATCH 1/8] test --- src/opnsense/www/js/widgets/Services.js | 79 +++++++++++++++++-------- 1 file changed, 54 insertions(+), 25 deletions(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index 92ad0b8324..437647ce15 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -38,17 +38,16 @@ export default class Services extends BaseTableWidget { } getMarkup() { - let $table = this.createTable('services-table', { - headerPosition: 'left', - headerBreakpoint: 270 - }); - return $(`
`).append($table); + // Return a flex container instead of a table for compact tile layout + return $(`
`); } serviceControl(actions) { return actions.map(({ action, id, title, icon }) => ` `).join(''); @@ -62,13 +61,16 @@ export default class Services extends BaseTableWidget { return; } + const $container = $('#services-container'); + $container.empty(); + $('.service-status').tooltip('hide'); $('.srv_status_act2').tooltip('hide'); - for (const service of data.rows) { - let name = service.name; - let $description = $(`
${service.description}
`); + // Sort by description for better readability + data.rows.sort((a, b) => a.description.localeCompare(b.description)); + for (const service of data.rows) { let actions = []; if (service.locked) { actions.push({ action: 'restart', id: service.id, title: this.translations.restart, icon: 'refresh' }); @@ -79,21 +81,49 @@ export default class Services extends BaseTableWidget { actions.push({ action: 'start', id: service.id, title: this.translations.start, icon: 'play' }); } - let $buttonContainer = $(` -
- - - + let statusColor = service.running ? 'success' : 'danger'; + let statusIcon = service.running ? 'play' : 'stop'; + let statusTitle = service.running ? this.translations.running : this.translations.stopped; + + let $tile = $(` +
+
${service.description}
+
+ + + +
+ ${this.serviceControl(actions)} +
+
`); - $buttonContainer.append(this.serviceControl(actions)); - - super.updateTable('services-table', [[$description.prop('outerHTML'), $buttonContainer.prop('outerHTML')]], service.id); + $container.append($tile); } $('.service-status').tooltip({container: 'body'}); @@ -120,8 +150,7 @@ export default class Services extends BaseTableWidget { } displayError(message) { - const $error = $(`
${message}
`); - $('#services-table').empty().append($error); + const $error = $(`
${message}
`); + $('#services-container').empty().append($error); } - -} +} \ No newline at end of file From d952dbc54dab19faf4015c0340e564bb1daa8abe Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Fri, 9 Jan 2026 16:22:09 +0200 Subject: [PATCH 2/8] test2 --- src/opnsense/www/js/widgets/Services.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index 437647ce15..ccac79128b 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -38,8 +38,7 @@ export default class Services extends BaseTableWidget { } getMarkup() { - // Return a flex container instead of a table for compact tile layout - return $(`
`); + return $(`
`); } serviceControl(actions) { @@ -67,7 +66,6 @@ export default class Services extends BaseTableWidget { $('.service-status').tooltip('hide'); $('.srv_status_act2').tooltip('hide'); - // Sort by description for better readability data.rows.sort((a, b) => a.description.localeCompare(b.description)); for (const service of data.rows) { @@ -90,7 +88,7 @@ export default class Services extends BaseTableWidget { border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; - width: 49%; + width: 32%; flex-grow: 1; min-width: 140px; display: flex; From 1c6cda002c0351c09aa049fcfce259fe793c6a88 Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Tue, 24 Mar 2026 17:48:28 +0200 Subject: [PATCH 3/8] test --- src/opnsense/www/js/widgets/Services.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index ccac79128b..8f3f87cab5 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -38,7 +38,7 @@ export default class Services extends BaseTableWidget { } getMarkup() { - return $(`
`); + return $(`
`); } serviceControl(actions) { @@ -88,9 +88,6 @@ export default class Services extends BaseTableWidget { border: 1px solid #e5e5e5; border-radius: 4px; padding: 8px; - width: 32%; - flex-grow: 1; - min-width: 140px; display: flex; flex-direction: column; align-items: center; From 32cc8008b5e071b93f61fef6c0057c690ab35092 Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Tue, 31 Mar 2026 17:42:19 +0300 Subject: [PATCH 4/8] Update Services.js --- src/opnsense/www/js/widgets/Services.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index 8f3f87cab5..a7df3f77f4 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -38,7 +38,7 @@ export default class Services extends BaseTableWidget { } getMarkup() { - return $(`
`); + return $(`
`); } serviceControl(actions) { From dc2ca2e8fa553b5d4bcf1d0db971e9d0957efef2 Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Fri, 17 Apr 2026 15:48:49 +0300 Subject: [PATCH 5/8] Update Services.js --- src/opnsense/www/js/widgets/Services.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index a7df3f77f4..cf6aff9735 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -105,14 +105,18 @@ export default class Services extends BaseTableWidget { text-align: center; color: #555; " title="${service.description}">${service.description}
-
- - - -
- ${this.serviceControl(actions)} +
+
+ + + +
+
+
+ ${this.serviceControl(actions)} +
From 0a265505f385e74ee3ff7309339952dd50178584 Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Fri, 17 Apr 2026 16:48:30 +0300 Subject: [PATCH 6/8] tooltip --- src/opnsense/www/js/widgets/Services.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index cf6aff9735..731ae5b6a2 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -63,9 +63,6 @@ export default class Services extends BaseTableWidget { const $container = $('#services-container'); $container.empty(); - $('.service-status').tooltip('hide'); - $('.srv_status_act2').tooltip('hide'); - data.rows.sort((a, b) => a.description.localeCompare(b.description)); for (const service of data.rows) { @@ -104,7 +101,7 @@ export default class Services extends BaseTableWidget { width: 100%; text-align: center; color: #555; - " title="${service.description}">${service.description}
+ " title="${service.description}" data-toggle="tooltip">${service.description}
{ this.locked = true; From 9c99154529602591aef73bd36e0051c75c04bdf4 Mon Sep 17 00:00:00 2001 From: Konstantinos Spartalis Date: Fri, 17 Apr 2026 17:00:05 +0300 Subject: [PATCH 7/8] Update Services.js --- src/opnsense/www/js/widgets/Services.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index 731ae5b6a2..501d278a7c 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -102,7 +102,7 @@ export default class Services extends BaseTableWidget { text-align: center; color: #555; " title="${service.description}" data-toggle="tooltip">${service.description}
-
+
Date: Fri, 17 Apr 2026 17:19:08 +0300 Subject: [PATCH 8/8] Update Services.js --- src/opnsense/www/js/widgets/Services.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js index 501d278a7c..5c7d7bde1b 100644 --- a/src/opnsense/www/js/widgets/Services.js +++ b/src/opnsense/www/js/widgets/Services.js @@ -60,6 +60,8 @@ export default class Services extends BaseTableWidget { return; } + $('[data-toggle="tooltip"]').tooltip('hide'); + const $container = $('#services-container'); $container.empty();