iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add node resource infos

Browse Source
This commit is contained in:
0x1d
2025-09-16 20:46:17 +02:00
parent 13f771837b
commit fd1c8e5a8c
4 changed files with 375 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
public/styles/main.css
View File

@@ -391,6 +391,173 @@ p {
opacity: 1;
}
/* Monitoring Section Styles */
.monitoring-section {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.monitoring-header {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Resource Gauges Styles */
.resource-gauges {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 2rem;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gauge-container {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
max-width: 110px;
}
.gauge {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 0.3rem;
}
.gauge-circle {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.3s ease;
padding: 6px;
}
.gauge-circle::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border-radius: 50%;
background: var(--bg-primary);
z-index: 1;
}
.gauge-circle::after {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border-radius: 50%;
background: conic-gradient(
from -90deg,
transparent 0deg,
transparent calc(var(--percentage) * 3.6deg),
var(--bg-primary) calc(var(--percentage) * 3.6deg),
var(--bg-primary) 360deg
);
z-index: 2;
}
.gauge-text {
position: relative;
z-index: 3;
text-align: center;
color: var(--text-primary);
}
.gauge-value {
font-size: 1.2rem;
font-weight: 600;
line-height: 1;
margin-bottom: 0.1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.gauge-label {
font-size: 0.75rem;
font-weight: 500;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 0.1rem;
}
.gauge-detail {
font-size: 0.65rem;
opacity: 0.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 400;
}
/* Dynamic gauge colors based on percentage */
.gauge-empty .gauge-circle {
background: rgba(255, 255, 255, 0.1);
}
.gauge-green .gauge-circle {
background: conic-gradient(
from -90deg,
var(--accent-success) 0deg,
var(--accent-success) calc(var(--percentage) * 3.6deg),
rgba(255, 255, 255, 0.1) calc(var(--percentage) * 3.6deg),
rgba(255, 255, 255, 0.1) 360deg
);
}
.gauge-yellow .gauge-circle {
background: conic-gradient(
from -90deg,
var(--accent-warning) 0deg,
var(--accent-warning) calc(var(--percentage) * 3.6deg),
rgba(255, 255, 255, 0.1) calc(var(--percentage) * 3.6deg),
rgba(255, 255, 255, 0.1) 360deg
);
}
.gauge-red .gauge-circle {
background: conic-gradient(
from -90deg,
var(--accent-error) 0deg,
var(--accent-error) calc(var(--percentage) * 3.6deg),
rgba(255, 255, 255, 0.1) calc(var(--percentage) * 3.6deg),
rgba(255, 255, 255, 0.1) 360deg
);
}
/* Gauge value color based on usage level */
.gauge[data-percentage] .gauge-value {
color: var(--text-primary);
}
/* Hover effects */
.gauge:hover .gauge-circle {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.gauge:hover .gauge-value {
color: var(--accent-primary);
}
.api-endpoints {
margin-top: 1rem;
}
@@ -2844,6 +3011,13 @@ p {
display: none;
}
/* Hide expand icon on desktop screens */
@media (min-width: 1025px) {
.expand-icon {
display: none;
}
}
/* Ensure expanded state is visually clear */
.member-overlay-body .member-card.expanded .member-details {
display: block;
@@ -2899,7 +3073,7 @@ p {
top: 0;
right: 0;
height: 100vh;
width: clamp(33.333vw, 520px, 90vw);
width: clamp(33.333vw, 650px, 90vw);
background: var(--bg-primary);
color: var(--text-primary);
border-left: 1px solid var(--border-primary);