Monitoring: Server-Auslastung über P42-S.M. mit Detailansicht und 2-Tage-Verlauf
- Neue Prüfart "Server-Auslastung (P42-S.M.)": Adresse + Token (Token bleibt im Backend, wird nie an den Browser gegeben) - Karte zeigt CPU, RAM, vollste Platte, Load, Temperatur, Uptime - Klick öffnet große Ansicht: Kacheln, Platten, Threads, Temperaturen, Netzwerk, Verlaufsdiagramme (6 h / 24 h / 2 Tage) mit Tooltip und Tabelle - Hintergrund-Task speichert jede Minute einen Mittelwert (monitor_samples, 2 Tage), unabhängig davon, ob die Seite offen ist - Docker: zusätzlich im Netz p42, update-docker.sh legt es bei Bedarf an Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
guyg1474andClaude Opus 5.5 committed
1 parent
94bda25516
commit
f16c8c73c6
13 files changed
+923
-35
No files matched your search
@@ -24,6 +24,9 @@
|
||||
--warn: #ffa66e;
|
||||
--bad: #ff3d3d;
|
||||
--bad-glow: rgb(255 61 61 / 0.6);
|
||||
/* Diagramm-Reihen (geprüft auf Farbenblindheit vor --surface): 1 = Akzent, 2 = Gegenfarbe */
|
||||
--series-1: #ff4646;
|
||||
--series-2: #9b7fe0;
|
||||
--topbar-bg: rgb(8 2 3 / 0.76);
|
||||
--glow: 0 0 6px rgb(var(--accent-rgb) / 0.55), 0 0 20px rgb(var(--accent-rgb) / 0.2);
|
||||
--heading-glow: 0 0 6px rgb(var(--accent-rgb) / 0.55), 0 0 26px rgb(var(--accent-rgb) / 0.25);
|
||||
@@ -640,6 +643,104 @@ h3 { font-size: var(--h3-size); line-height: 1.3; }
|
||||
.monitor-foot { justify-content: space-between; margin-top: auto; padding-top: 16px; flex-wrap: wrap; }
|
||||
.monitor-actions { display: flex; gap: 14px; }
|
||||
|
||||
/* Server-Auslastung (P42-S.M.): Karte → große Ansicht */
|
||||
.monitor-card.clickable { cursor: pointer; transition: transform var(--dur) var(--ease-out), border-color var(--dur); }
|
||||
.monitor-card.clickable:hover { transform: translateY(var(--lift)); border-color: var(--line-strong); }
|
||||
.monitor-card.clickable:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.monitor-card.clickable .monitor-target { word-break: normal; overflow-wrap: anywhere; }
|
||||
.agent-summary { display: grid; gap: 10px; margin-top: 14px; }
|
||||
.agent-summary .monitor-facts { margin-top: 4px; }
|
||||
|
||||
.meter { display: grid; gap: 4px; min-width: 0; }
|
||||
.meter-label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; color: var(--text); }
|
||||
.meter-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.meter-label strong { color: var(--bright); font-weight: 600; white-space: nowrap; }
|
||||
.meter small { color: var(--muted); font-size: 0.76rem; }
|
||||
.meter-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--accent-soft); overflow: hidden; }
|
||||
.meter-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.6s var(--ease-out); }
|
||||
.meter.warn .meter-bar i, .server-tile.warn .meter-bar i { background: var(--warn); }
|
||||
.meter.bad .meter-bar i, .server-tile.bad .meter-bar i { background: var(--bad); }
|
||||
.meter.bad .meter-label strong { color: var(--bad); }
|
||||
.meter.compact .meter-label { font-size: 0.74rem; }
|
||||
|
||||
.server-modal { width: min(1280px, calc(100% - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: clamp(16px, 2.4vw, 30px); }
|
||||
.server-detail { display: grid; gap: 18px; }
|
||||
.server-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
|
||||
.server-detail-head h2 { margin: 0; }
|
||||
.server-detail-sub { margin: 6px 0 0; color: var(--muted); font-size: 0.84rem; line-height: 1.6; }
|
||||
.server-detail-actions { display: flex; align-items: center; gap: 10px; }
|
||||
.server-detail-actions .btn { padding: 0 14px; }
|
||||
|
||||
.server-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
|
||||
.server-tile { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--card-inner); }
|
||||
.server-tile strong { font-family: var(--tile-font); font-size: var(--tile-size); font-weight: 400; color: var(--bright); line-height: 1.1; }
|
||||
.server-tile small { color: var(--muted); font-size: 0.76rem; }
|
||||
.server-tile .meter-bar { margin-top: 4px; }
|
||||
.server-tile.bad strong { color: var(--bad); }
|
||||
.sr-flag { font-family: var(--font-label); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
|
||||
.server-range { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
||||
.server-range .eyebrow { margin-right: 4px; }
|
||||
.server-range .hint { margin: 0 0 0 auto; font-size: 0.8rem; }
|
||||
|
||||
.server-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
|
||||
@media (min-width: 900px) { .server-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
|
||||
.chart { margin: 0; padding: 12px 14px 8px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--card-inner); min-width: 0; transition: opacity var(--dur); }
|
||||
.chart.is-loading { opacity: 0.6; }
|
||||
.chart-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
|
||||
.chart-title { font-family: var(--font-label); font-size: var(--label-size); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text); }
|
||||
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text); }
|
||||
.chart-key { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.chart-key i, .chart-tip-row i { width: 14px; height: 2px; border-radius: 1px; display: inline-block; flex: none; }
|
||||
.chart-plot { position: relative; width: 100%; }
|
||||
.chart-plot svg { display: block; touch-action: pan-y; outline: none; }
|
||||
.chart-plot svg:focus-visible { box-shadow: var(--focus-ring); }
|
||||
.chart-grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
|
||||
.chart-axis { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
|
||||
.chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
|
||||
.chart-dot { stroke: var(--card-inner); stroke-width: 2; }
|
||||
.chart-cross { stroke: var(--line-strong); stroke-width: 1; }
|
||||
.chart-empty { margin: 0; height: 190px; display: grid; place-items: center; color: var(--muted); font-size: 0.85rem; text-align: center; }
|
||||
.chart-tip {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
transform: translateX(-50%);
|
||||
min-width: 160px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--radius-s);
|
||||
background: var(--panel);
|
||||
box-shadow: var(--shadow-2);
|
||||
pointer-events: none;
|
||||
font-size: 0.78rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.chart-tip-time { color: var(--muted); margin-bottom: 4px; }
|
||||
.chart-tip-row { display: flex; align-items: center; gap: 8px; }
|
||||
.chart-tip-row strong { color: var(--bright); font-weight: 600; }
|
||||
.chart-tip-row span { color: var(--muted); }
|
||||
|
||||
.server-table summary, .server-sections details summary { cursor: pointer; }
|
||||
.server-table summary { color: var(--muted); font-size: 0.85rem; }
|
||||
.server-table-scroll { max-height: 320px; overflow: auto; margin-top: 8px; border: 1px solid var(--border); }
|
||||
.server-table table { width: 100%; border-collapse: collapse; font-size: 0.78rem; white-space: nowrap; }
|
||||
.server-table th, .server-table td { padding: 5px 10px; text-align: right; border-bottom: 1px solid var(--border); }
|
||||
.server-table th:first-child, .server-table td:first-child { text-align: left; }
|
||||
.server-table th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 600; }
|
||||
|
||||
.server-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
|
||||
@media (min-width: 900px) { .server-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
.server-sections section { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--card-inner); min-width: 0; }
|
||||
.server-sections h3 { margin: 0; }
|
||||
.server-sections .hint { margin: 0; font-size: 0.8rem; }
|
||||
.server-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px 12px; }
|
||||
.server-list { display: grid; gap: 6px; margin: 0; }
|
||||
.server-list div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
|
||||
.server-list dt { color: var(--muted); overflow-wrap: anywhere; }
|
||||
.server-list dd { margin: 0; color: var(--bright); text-align: right; }
|
||||
.server-list small { color: var(--muted); }
|
||||
|
||||
/* ---------- Vorrat & Einkauf ---------- */
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
|
||||
|
||||
|
||||
Reference in new issue
Block a user