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

feat: add process resource monitor

Browse Source
This commit is contained in:
Codex
2026-05-06 06:09:29 +00:00
parent cd784f5e4b
commit a0b9f8fb97
13 changed files with 543 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/frontend/public/style.css
+130
View File
@@ -718,6 +718,126 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
margin-top: 8px;
}
.process-resource-panel {
margin-top: 8px;
border: 1px solid var(--line-soft);
background:
linear-gradient(180deg, rgba(255,255,255,0.025), transparent 28%),
#0b141b;
}
.process-resource-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
padding: 8px 9px;
border-bottom: 1px solid var(--line-soft);
}
.process-resource-head h3 {
margin: 0;
font-size: 15px;
letter-spacing: 0.06em;
}
.process-resource-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 5px;
align-items: center;
}
.process-table-wrap {
max-height: 420px;
overflow: auto;
}
.process-resource-table {
min-width: 1120px;
}
.process-resource-table th,
.process-resource-table td {
padding: 6px 8px;
}
.process-sort-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border: 0;
color: inherit;
background: transparent;
text-transform: inherit;
letter-spacing: inherit;
}
.process-sort-button span {
color: var(--faint);
font-size: 10px;
}
.process-sort-button.active span {
color: var(--accent-2);
}
.process-name-cell {
display: grid;
gap: 2px;
min-width: 260px;
max-width: 420px;
}
.process-name-cell strong {
color: #e3eef0;
}
.process-command {
color: var(--muted);
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.process-state {
display: inline-flex;
min-width: 22px;
justify-content: center;
padding: 1px 5px;
border: 1px solid var(--line-soft);
color: var(--muted);
background: rgba(255,255,255,0.025);
font-family: "Cascadia Mono", "IBM Plex Mono", "Liberation Mono", monospace;
}
.process-meter {
position: relative;
min-width: 104px;
height: 20px;
overflow: hidden;
border: 1px solid var(--line-soft);
background: rgba(255,255,255,0.025);
}
.process-meter span {
position: absolute;
inset: 0 auto 0 0;
background: linear-gradient(90deg, rgba(78, 183, 168, 0.58), rgba(78, 183, 168, 0.12));
}
.process-meter.cpu span {
background: linear-gradient(90deg, rgba(215, 161, 58, 0.64), rgba(215, 161, 58, 0.12));
}
.process-meter b {
position: relative;
z-index: 1;
display: block;
padding: 2px 6px;
color: #eaf3f2;
font-family: "Cascadia Mono", "IBM Plex Mono", "Liberation Mono", monospace;
font-size: 11px;
}
.process-io-cell {
display: grid;
gap: 2px;
min-width: 146px;
}
.process-io-cell strong {
color: #d7e3e7;
}
.process-io-cell span {
color: var(--muted);
font-size: 11px;
}
.monitor-side-stack {
display: grid;
gap: 10px;
@@ -1833,6 +1953,16 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
}
.metric-grid, .policy-grid, .security-board, .dispatch-form, .docker-metrics, .monitor-chart-grid, .monitor-summary-grid, .gateway-record-grid, .met-detail-kv { grid-template-columns: 1fr; }
.compact-row, .heartbeat-row, .log-row, .endpoint-list article, .volume-route, .findjob-hero, .pipeline-hero { grid-template-columns: 1fr; align-items: start; }
.process-resource-head {
align-items: stretch;
flex-direction: column;
}
.process-resource-actions {
justify-content: flex-start;
}
.process-table-wrap {
max-height: 360px;
}
.met-tree-header, .met-tree-row {
grid-template-columns: minmax(220px, 1fr) 72px 62px 76px 96px;
min-width: 560px;