mirrors/pikasTech-unidesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add resource monitoring and provider upgrade

Browse Source
This commit is contained in:
Codex
2026-05-04 13:04:39 +00:00
parent 8726611b6f
commit 2a03f6343c
27 changed files with 1807 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/frontend/public/style.css
+277 -3
View File
@@ -302,6 +302,279 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.status-badge.running, .status-badge.dispatched, .status-badge.accepted, .status-badge.internal { color: var(--accent-2); border-color: rgba(78, 183, 168, 0.45); }
.status-badge.queued, .status-badge.warn { color: var(--warn); border-color: rgba(215, 161, 58, 0.45); }
.docker-page {
display: grid;
gap: 10px;
}
.docker-node-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 8px;
}
.docker-node-tile {
display: grid;
grid-template-columns: auto 1fr;
gap: 3px 8px;
align-items: center;
padding: 8px;
border: 1px solid var(--line);
color: var(--muted);
background: rgba(12, 18, 24, 0.62);
text-align: left;
}
.docker-node-tile.active, .docker-node-tile:hover {
color: var(--text);
border-color: var(--accent-2);
background: rgba(78, 183, 168, 0.1);
}
.docker-node-tile code, .docker-node-tile span:last-child {
grid-column: 2;
color: var(--muted);
}
.docker-layout {
display: grid;
grid-template-columns: minmax(620px, 1.65fr) minmax(280px, 0.75fr);
gap: 10px;
align-items: start;
}
.docker-hero {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px;
margin-bottom: 8px;
border: 1px solid var(--line-soft);
background:
linear-gradient(90deg, rgba(78, 183, 168, 0.12), transparent 42%),
var(--panel-3);
}
.docker-hero h3 {
margin: 0;
font-size: 20px;
letter-spacing: 0.04em;
}
.docker-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 7px;
color: var(--muted);
}
.docker-meta span {
padding: 2px 6px;
border: 1px solid var(--line-soft);
background: rgba(255,255,255,0.03);
}
.docker-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 8px;
}
.docker-section-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
height: 34px;
color: var(--muted);
}
.docker-section-head h3 {
margin: 0;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text);
}
.docker-container-table {
max-height: calc(100vh - 348px);
}
.docker-side-stack {
display: grid;
gap: 10px;
}
.docker-side-panel .panel-body {
padding: 8px;
}
.docker-side-list {
display: grid;
gap: 6px;
max-height: 230px;
overflow: auto;
}
.docker-side-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2px 8px;
padding: 7px;
border: 1px solid var(--line-soft);
background: var(--panel-3);
}
.docker-side-row strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.docker-side-row span {
color: var(--muted);
}
.docker-side-row code {
grid-column: 1 / -1;
color: #bcd2d7;
overflow: hidden;
text-overflow: ellipsis;
}
.monitor-page {
display: grid;
gap: 10px;
}
.monitor-layout {
display: grid;
grid-template-columns: minmax(680px, 1.6fr) minmax(310px, 0.75fr);
gap: 10px;
align-items: start;
}
.monitor-hero {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 10px;
margin-bottom: 8px;
border: 1px solid var(--line-soft);
background:
linear-gradient(90deg, rgba(215, 161, 58, 0.12), transparent 40%),
linear-gradient(180deg, rgba(78, 183, 168, 0.08), transparent),
var(--panel-3);
}
.monitor-hero h3 {
margin: 0;
font-size: 20px;
letter-spacing: 0.04em;
}
.monitor-chart-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.metric-chart {
min-width: 0;
padding: 8px;
border: 1px solid var(--line-soft);
background: #0d161d;
}
.metric-chart-head, .metric-chart-foot {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}
.metric-chart-head span {
display: block;
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.metric-chart-head strong {
font-size: 24px;
letter-spacing: 0.03em;
}
.metric-chart-head code {
color: var(--faint);
}
.metric-chart svg {
width: 100%;
height: 116px;
margin: 8px 0;
border: 1px solid var(--line-soft);
background:
linear-gradient(180deg, transparent 48%, rgba(255,255,255,0.05) 49%, transparent 50%),
repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 12px),
#091015;
}
.metric-chart polygon {
fill: rgba(78, 183, 168, 0.16);
}
.metric-chart polyline {
fill: none;
stroke: var(--accent-2);
stroke-width: 1.8;
vector-effect: non-scaling-stroke;
}
.metric-chart line {
stroke: rgba(255,255,255,0.12);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.metric-chart.cpu polyline { stroke: var(--accent); }
.metric-chart.cpu polygon { fill: rgba(215, 161, 58, 0.16); }
.metric-chart.disk polyline { stroke: #9db7ff; }
.metric-chart.disk polygon { fill: rgba(157, 183, 255, 0.15); }
.metric-chart-foot {
color: var(--muted);
font-size: 11px;
}
.monitor-summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
.monitor-side-stack {
display: grid;
gap: 10px;
}
.monitor-note-list, .upgrade-control {
display: grid;
gap: 8px;
}
.monitor-note-list article {
display: grid;
gap: 3px;
padding: 7px;
border: 1px solid var(--line-soft);
background: var(--panel-3);
}
.monitor-note-list span, .upgrade-control p {
margin: 0;
color: var(--muted);
}
.upgrade-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.upgrade-result {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 6px 8px;
align-items: center;
padding: 7px;
border: 1px solid var(--line-soft);
background: var(--panel-3);
}
.upgrade-result code {
grid-column: 1 / -1;
color: #bcd2d7;
}
.chip-row, .summary-grid {
display: flex;
flex-wrap: wrap;
@@ -492,10 +765,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
}
@media (max-width: 1120px) {
.metric-grid, .policy-grid, .security-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-grid, .policy-grid, .security-board, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dispatch-form { grid-template-columns: 1fr 1fr; }
.dispatch-actions { align-items: center; }
.page-grid { grid-template-columns: 1fr; }
.page-grid, .docker-layout, .monitor-layout { grid-template-columns: 1fr; }
.overview-grid .panel:nth-child(3), .dispatch-grid .panel:first-child, .topology-grid .panel:nth-child(3) { grid-column: 1; }
}
@@ -517,7 +790,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
.workspace { padding: 10px; }
.topbar { align-items: flex-start; flex-direction: column; }
.status-strip { flex-wrap: wrap; white-space: normal; }
.metric-grid, .policy-grid, .security-board, .dispatch-form { grid-template-columns: 1fr; }
.metric-grid, .policy-grid, .security-board, .dispatch-form, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid { grid-template-columns: 1fr; }
.compact-row, .heartbeat-row, .log-row, .endpoint-list article { grid-template-columns: 1fr; align-items: start; }
.docker-hero, .monitor-hero { flex-direction: column; }
.tab { min-width: 104px; }
}