component {
props {
prop(name = id)
prop(name = name)
prop(name = port)
prop(name = status_color)
prop(name = status_label)
prop(name = has_warm)
prop(name = has_pending, default = "false")
prop(name = warm_label)
prop(name = warm_color)
prop(name = warm_reason)
prop(name = cpu)
prop(name = mem)
prop(name = filler)
prop(name = container_name)
prop(name = container_id)
prop(name = container_name_full)
prop(name = container_id_full)
prop(name = container_extra)
}
resources {
style """
.card__badges { spacing: 12; }
.card__stats { width: fill; spacing: 12; }
.card__stat { width: fill; spacing: 4; }
.card__stat-num { size: 18; bold: true; color: var(--text-2); }
.card__container { width: fill; spacing: 6; align_y: center; }
.card__copy { color: var(--border); padding: 0 5; size: 11; border_radius: 3; }
.card__actions { width: fill; spacing: 8; }
.card__title { size: 16; bold: true; color: var(--text); }
.card__port { size: 12; color: var(--muted); }
"""
}
column(if = @filler, equals = 1, class = u-fill)
column(else, class = card) {
row(class = card__head) {
row(class = "u-fill u-align-y-end") {
text("@name", class = card__title)
text(":@port", class = card__port)
}
row(class = "card__badges u-align-y-end") {
rp-badge(
if = @has_pending,
equals = true,
color = warn,
label = "◆ {t('service_card.change_pending_deploy')}"
)
rp-badge(
if = @has_warm,
equals = true,
color = @warm_color,
label = "◐ @warm_label"
)
rp-badge(
color = @status_color,
label = @status_label
)
}
}
row(class = card__container) {
button(
class = card__copy,
if = @container_name_full,
not_equals = "",
on_click = copy_container_name:@container_name_full,
text = "⧉",
tooltip = "{t('service_card.copy_name')}",
)
text(
"{t('service_card.name', container_name=container_name)}",
class = u-muted
)
}
row(class = card__container) {
button(
class = card__copy,
if = @container_id_full,
not_equals = "",
on_click = copy_container_id:@container_id_full,
text = "⧉",
tooltip = "{t('service_card.copy_id')}",
)
text(
"{t('service_card.id', container_id=container_id)}",
class = u-muted
)
text(
"{t('service_card.extra', container_extra=container_extra)}",
class = u-muted,
if = @container_extra,
not_equals = "",
)
}
hr
row(class = card__stats) {
column(class = card__stat) {
text("{t('common.cpu')}", class = u-label-cap)
text("@cpu", class = card__stat-num)
}
column(class = card__stat) {
text("{t('common.mem')}", class = u-label-cap)
text("@mem", class = card__stat-num)
}
}
button(
class = "card__action card__action--open",
on_click = open_service:@id,
disabled = @busy_open_service,
text = "{t('common.open')}"
)
row(class = card__actions) {
button(
class = "card__action card__action--icon",
on_click = service_stop_id:@id,
disabled = @busy_service_stop_id,
text = "■",
tooltip = "{t('common.stop')}",
)
button(
class = "card__action card__action--icon card__action--danger",
on_click = stop_delete_service:@id,
disabled = @busy_stop_delete_service,
text = "✕",
tooltip = "{t('common.remove')}",
)
button(
class = "card__action card__action--icon",
on_click = open_export_window:@id,
disabled = @busy_open_export_window,
text = "⇪",
tooltip = "{t('service_card.export_service_a_file_to')}",
)
}
}
}