// Detalhe de um serviço: cabeçalho com ações (deploy, stop, reload) e as abas
// General (fonte), Connection, Domains, Environment, Deployments, Logs e
// Advanced.
component {
resources {
link(rel = import, href = "service/logs.gvb", as = ServiceLogsTab)
link(rel = import, href = "service/general.gvb", as = ServiceGeneralTab)
link(rel = import, href = "service/connection.gvb", as = ServiceConnectionTab)
link(rel = import, href = "service/environment.gvb", as = ServiceEnvironmentTab)
link(rel = import, href = "service/domains.gvb", as = ServiceDomainsTab)
link(rel = import, href = "service/migrar.gvb", as = ServiceMigrarTab)
link(rel = import, href = "service/databases.gvb", as = ServiceDatabasesTab)
link(rel = import, href = "service/deployments.gvb", as = ServiceDeploymentsTab)
link(rel = import, href = "service/healthcheck.gvb", as = ServiceHealthcheckTab)
link(rel = import, href = "service/advanced.gvb", as = ServiceAdvancedTab)
style """
/* Cabeçalho + ações */
.service__head { width: fill; align-y: start; }
.service__title-row { width: fill; spacing: 14; align-y: center; }
.service__title { width: fill; }
/* Sub-linha de status (badge + timer) logo abaixo do nome. */
.service__substatus { spacing: 10; align-y: center; }
.service__actions { spacing: 10; align-y: center; }
.service__panels { width: fill; spacing: 14; }
.tabs__scroll { width: fill; }
.tabs__main { width: shrink; spacing: 4; }
/* Corpo: conteúdo da aba + painel lateral */
.service__body { width: fill; height: fill; spacing: 20; }
.service__main { width: fill; height: fill; spacing: 16; }
.service__aside { width: 360; height: fill; spacing: 16; }
.service__err { size: 13; color: var(--error); }
/* Deployments (lista + build log) */
.table__col-dep-id { width: 130; }
.table__col-dep-start { width: fill; }
.deployments__image { size: 11; color: var(--faint); padding: 2 0 0 0; }
.deployments__wrap { width: fill; height: fill; spacing: 8; }
.deployments__list-scroll { width: fill; height: 240; }
.deployments__actions { spacing: 8; align-y: center; }
/* Logs (aba Logs = launcher da janela isolada; painel usado só p/ layout) */
.log-panel { width: fill; height: fill; background: var(--surface); border-radius: 6; border-width: 1; border-color: var(--border); padding: 14 16; spacing: 8; }
.log-panel__body { width: fill; spacing: 2; }
.log-panel__line { width: fill; spacing: 12; }
.log-panel__time { width: 76; size: 11; color: var(--faint); }
.log-panel__text { width: fill; size: 12; color: #9DA7B3; }
/* Painel lateral (o `--fill` troca só a altura e o respiro) */
.aside-panel { width: fill; background: var(--surface); border-radius: 6; border-width: 1; border-color: var(--border); padding: 18; spacing: 8; }
.aside-panel--fill { height: fill; padding: 14 16; }
/* Responsivo: estreita o painel lateral e aperta o corpo (glacier-ui 0.9.0+). */
@media (max-width: 900) {
.service__aside { width: 240; }
.service__body { spacing: 12; }
}
@media (max-width: 560) {
.service__aside { width: 170; }
}
"""
}
column(class = content) {
// ── Header: nome + estado + ações ──────────────────────────────────
row(class = service__head) {
column(class = page-head__titles) {
row(class = service__title-row) {
button(
class = "btn btn--ghost",
on_click = open_project:@service_project_id,
disabled = @busy_open_project,
text = "‹ @service_project",
)
text(class = "page-head__title service__title", content = "@service_name")
}
row(class = service__substatus) {
rp-badge(color = @service_status_color, label = @service_status_label)
row(class = badge, if = @service_deploy_running, equals = true) {
text(class = status-dot, color = #58A6FF, content = "⏱")
text(
class = badge__label,
color = #58A6FF,
content = "@service_deploy_elapsed",
)
}
}
text(
if = @service_action_message,
not_equals = "",
class = u-muted,
color = @service_action_color,
content = "@service_action_message",
)
row(class = "service__actions service__actions--compact") {
button(
class = "btn btn--primary",
on_click = service_deploy,
disabled = @busy_service_deploy,
text = "▶",
tooltip = Deploy,
)
button(
class = "btn btn--blue btn--wide",
on_click = service_reload,
disabled = @busy_service_reload,
text = "⟳",
tooltip = Reload,
)
button(
class = "btn btn--blue btn--wide",
on_click = service_rebuild,
disabled = @busy_service_rebuild,
text = "⚙",
tooltip = Rebuild,
)
button(
class = "btn btn--danger",
on_click = service_stop,
disabled = @busy_service_stop,
text = "■",
tooltip = Stop,
)
button(
class = "btn btn--ghost",
on_click = open_export_window,
disabled = @busy_open_export_window,
text = "⇪",
tooltip = "Exportar serviço",
)
}
}
row(class = "service__actions service__actions--full") {
button(class = "btn btn--primary", on_click = service_deploy, disabled = @busy_service_deploy, text = Deploy)
button(class = "btn btn--blue btn--wide", on_click = service_reload, disabled = @busy_service_reload, text = Reload)
button(class = "btn btn--blue btn--wide", on_click = service_rebuild, disabled = @busy_service_rebuild, text = Rebuild)
button(class = "btn btn--danger", on_click = service_stop, disabled = @busy_service_stop, text = Stop)
button(
class = "btn btn--ghost",
on_click = open_export_window,
disabled = @busy_open_export_window,
text = "Exportar serviço",
)
}
}
// ── Abas ───────────────────────────────────────────────────────────
scroll(class = tabs__scroll, direction = horizontal) {
row(class = tabs__main) {
TabButton(
label = General,
current = @tab,
target = general,
action = tab:general,
)
TabButton(
label = Connection,
current = @tab,
target = connection,
action = tab:connection,
)
TabButton(
label = Environment,
current = @tab,
target = environment,
action = tab:environment,
)
TabButton(
label = Domains,
current = @tab,
target = domains,
action = tab:domains,
)
TabButton(
label = Deployments,
current = @tab,
target = deployments,
action = tab:deployments,
)
if @service_shared == "true" {
TabButton(
label = Databases,
current = @tab,
target = databases,
action = tab:databases,
)
}
if @service_can_migrate == "true" {
TabButton(
label = Migrar,
current = @tab,
target = migrar,
action = tab:migrar,
)
}
TabButton(
label = Healthcheck,
current = @tab,
target = healthcheck,
action = tab:healthcheck,
)
TabButton(
label = Logs,
current = @tab,
target = logs,
action = tab:logs,
)
TabButton(
label = Advanced,
current = @tab,
target = advanced,
action = tab:advanced,
)
}
}
hr
// ── Corpo: conteúdo da aba + painel lateral ────────────────────────
row(class = service__body) {
column(class = service__main) {
text(
if = @service_error,
not_equals = "",
class = service__err,
content = "@service_error",
)
ServiceGeneralTab(if = @tab, equals = general)
ServiceConnectionTab(if = @tab, equals = connection)
ServiceEnvironmentTab(if = @tab, equals = environment)
ServiceDomainsTab(if = @tab, equals = domains)
ServiceMigrarTab(if = @tab, equals = migrar)
ServiceDatabasesTab(if = @tab, equals = databases)
ServiceDeploymentsTab(if = @tab, equals = deployments)
ServiceHealthcheckTab(if = @tab, equals = healthcheck)
ServiceLogsTab(if = @tab, equals = logs)
ServiceAdvancedTab(if = @tab, equals = advanced)
}
column(class = service__aside) {
column(class = aside-panel) {
text(class = u-label-cap, content = "STATUS")
rp-badge(color = @service_status_color, label = @service_status_label)
text(class = u-label-cap, content = "UPTIME")
text(class = kv-list__val, content = "@daemon_uptime")
text(class = u-label-cap, content = "SERVICES")
text(class = kv-list__val, content = "@services_label")
}
column(class = "aside-panel aside-panel--fill") {
text(class = u-label-cap, content = "LOGS")
text(
class = u-muted,
content = "Runtime e build logs abrem em janelas próprias (isoladas).",
)
row(class = env__add) {
button(
class = tabs__tab,
on_click = open_logs_window,
disabled = @busy_open_logs_window,
text = "Logs de runtime",
)
}
}
}
}
}
}