UI: карточка установленных аддонов на странице кластера; API аддонов и правки стилей
- Отдельная section.card после сводки ресурсов узлов, выравнивание бейджа Helm с заголовком - Расширение эндпоинтов аддонов, схемы, helm_addons, cluster_addons.js/html - Обновление api_routes.md
This commit is contained in:
Sergey Antropoff
+196
-9
@@ -2097,6 +2097,150 @@ html[data-theme="light"] .cluster-detail-actions-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Карточка «Установленные аддоны» на странице кластера (отдельный section.card) */
|
||||
.cluster-detail-addons-card.hidden {
|
||||
display: none;
|
||||
}
|
||||
.cluster-detail-addons-card__header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.cluster-detail-addons-card__head-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
/* Бейдж и заголовок в одной линии по вертикали: сброс margin у .cluster-detail-section-title (он задаётся ниже по файлу). */
|
||||
.cluster-detail-addons-card__head-row h2.cluster-detail-section-title {
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.cluster-detail-addons-card__helm-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
padding: 0.22rem 0.55rem;
|
||||
min-height: 1.35em;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #14b8a6 100%);
|
||||
box-shadow: 0 1px 3px rgba(15, 118, 110, 0.35);
|
||||
}
|
||||
.cluster-detail-addons-card__title {
|
||||
margin: 0;
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.cluster-detail-addons-card__lead {
|
||||
margin: 0;
|
||||
max-width: 44rem;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.cluster-detail-addons-card__lead code {
|
||||
font-size: 0.82em;
|
||||
}
|
||||
.cluster-detail-addons-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
|
||||
gap: 0.75rem 1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cluster-detail-addon-mini {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.35rem;
|
||||
padding: 0.75rem 0.85rem 0.7rem;
|
||||
min-height: 5.5rem;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-left: 4px solid rgba(59, 130, 246, 0.75);
|
||||
background: var(--surface);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition:
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease,
|
||||
transform 0.15s ease,
|
||||
background 0.18s ease;
|
||||
}
|
||||
html[data-theme="light"] .cluster-detail-addon-mini {
|
||||
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
.cluster-detail-addon-mini:hover {
|
||||
border-color: rgba(59, 130, 246, 0.4);
|
||||
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.12);
|
||||
transform: translateY(-2px);
|
||||
background: rgba(59, 130, 246, 0.04);
|
||||
}
|
||||
.cluster-detail-addon-mini:focus-visible {
|
||||
outline: 2px solid rgba(59, 130, 246, 0.65);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.cluster-detail-addon-mini__title {
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
font-weight: 600;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.3;
|
||||
color: var(--text);
|
||||
}
|
||||
.cluster-detail-addon-mini__ver {
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.4;
|
||||
color: var(--muted);
|
||||
word-break: break-word;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.cluster-detail-addon-mini__ns {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
padding: 0.15rem 0.4rem;
|
||||
font-size: 0.7rem;
|
||||
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
color: var(--muted);
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
html[data-theme="light"] .cluster-detail-addon-mini__ns {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
.cluster-detail-addons-card__footer {
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.85rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.cluster-detail-addons-card__cta {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: rgba(59, 130, 246, 0.95);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.cluster-detail-addons-card__cta:hover {
|
||||
color: rgba(96, 165, 250, 1);
|
||||
text-decoration: underline;
|
||||
}
|
||||
.cluster-detail-addons-card__cta:focus-visible {
|
||||
outline: 2px solid rgba(59, 130, 246, 0.55);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cluster-k8s-scope-hint {
|
||||
margin: 0 0 0.85rem;
|
||||
font-size: 0.86rem;
|
||||
@@ -2998,26 +3142,27 @@ html[data-theme="light"] .cluster-addon-card__values-textarea {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.cluster-addon-card__actions--equal {
|
||||
/* Кнопки «Установить / Обновить / Удалить» — по содержимому, не на всю ширину карточки */
|
||||
.cluster-addon-card__actions--inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.85rem;
|
||||
gap: 0.5rem;
|
||||
align-items: stretch;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.cluster-addon-card__actions--equal .btn-addon-install,
|
||||
.cluster-addon-card__actions--equal .btn-addon-remove {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
.cluster-addon-card__actions--inline .btn-addon-install,
|
||||
.cluster-addon-card__actions--inline .btn-addon-remove {
|
||||
flex: 0 0 auto;
|
||||
min-width: 7.5rem;
|
||||
min-height: 2.65rem;
|
||||
margin-top: 0;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.cluster-addon-card--wide {
|
||||
@@ -3026,10 +3171,52 @@ html[data-theme="light"] .cluster-addon-card__values-textarea {
|
||||
.cluster-addon-istio-grid {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.cluster-addon-istio-load-field {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.cluster-addon-card__field-label {
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
.cluster-addon-version-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem 0.65rem;
|
||||
}
|
||||
.cluster-addon-version-row .cluster-addons-version-select {
|
||||
flex: 1 1 12rem;
|
||||
width: auto;
|
||||
min-width: 10rem;
|
||||
max-width: 22rem;
|
||||
}
|
||||
.cluster-addon-card__values-panel {
|
||||
margin-top: 0.65rem;
|
||||
}
|
||||
.btn-addon-load-values {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Якорь для блока прогресса до первой операции; пустой, когда секция перенесена в карточку */
|
||||
.cluster-addons-helm-dock:empty {
|
||||
display: none;
|
||||
}
|
||||
.cluster-addons-helm-dock:not(:empty) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
/* Карточка хода Helm на странице аддонов (разметка как у create-progress-wrap + job-log-panel) */
|
||||
.cluster-addons-helm-progress {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.cluster-addon-card > .cluster-addons-helm-progress {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cluster-addons-helm-progress .job-log-panel {
|
||||
max-height: min(55vh, 420px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user