This commit is contained in:
Franco Fichtner 2026-05-25 09:41:17 +08:00 committed by GitHub
commit fadb139eac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 40 deletions

View file

@ -297,8 +297,8 @@ class BaseWidget {
id = this.sanitizeSelector(id);
let $container = $(`
<span class="transition-icon-container">
<i class="fa fa-spinner fa-spin hide transition-spinner" id="spinner-${id}" style="font-size: 13px;"></i>
<i class="fa fa-check checkmark hide transition-check" id="check-${id}" style="font-size: 13px;"></i>
<i class="fa fa-fw fa-spinner fa-spin hide transition-spinner" id="spinner-${id}" style="font-size: 13px;"></i>
<i class="fa fa-fw fa-check checkmark hide transition-check" id="check-${id}" style="font-size: 13px;"></i>
</span>
`);

View file

@ -304,8 +304,8 @@
<translations>
<title>Services</title>
<noservices>No services found</noservices>
<running>Running</running>
<stopped>Stopped</stopped>
<running>running</running>
<stopped>stopped</stopped>
<restart>Restart</restart>
<stop>Stop</stop>
<start>Start</start>

View file

@ -38,17 +38,16 @@ export default class Services extends BaseTableWidget {
}
getMarkup() {
return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 5px; gap: 5px;"></div>`);
return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 1px; gap: 1px;"></div>`);
}
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"
style="font-size: 10px; padding: 2px 6px;"
<span data-service_action="${action}" data-service="${id}"
class="srv_status_act2"
title="${title}" data-toggle="tooltip">
<i class="fa fa-fw fa-${icon}"></i>
</button>
</span>
`).join('');
}
@ -79,45 +78,20 @@ export default class Services extends BaseTableWidget {
}
let statusColor = service.running ? 'success' : 'danger';
let statusIcon = service.running ? 'play' : 'stop';
let statusTitle = service.running ? this.translations.running : this.translations.stopped;
let $tile = $(`
<div class="service-tile" style="
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 8px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
">
<div class="service-tile alert-${statusColor}" style="display: flex; align-items: center;">
<div style="
font-weight: bold;
font-size: 12px;
margin-bottom: 5px;
padding: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
width: 100%;
text-align: center;
color: #555;
" title="${service.description}" data-toggle="tooltip">${service.description}</div>
<div style="display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 0px; width: 100%;">
<div style="text-align: right; padding-right: 10px;">
<span class="label label-opnsense label-opnsense-xs label-${statusColor} service-status"
data-toggle="tooltip" title="${statusTitle}"
style="font-size: 10px; padding: 3px 6px;">
<i class="fa fa-${statusIcon} fa-fw"></i>
</span>
</div>
<div style="text-align: left;">
<div class="btn-group" role="group">
${this.serviceControl(actions)}
</div>
</div>
</div>
text-align: left;
" title="${service.description} (${statusTitle})" data-toggle="tooltip">${service.description}</div>
${this.serviceControl(actions)}
</div>
`);