1063 lines
34 KiB
HTML
1063 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Netdata | Live Monitoring</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-dark: #0d1117;
|
|
--bg-panel: #161b22;
|
|
--bg-card: #21262d;
|
|
--border-color: #30363d;
|
|
--text-primary: #c9d1d9;
|
|
--text-secondary: #8b949e;
|
|
--accent-green: #00ab44;
|
|
--accent-green-dim: rgba(0, 171, 68, 0.2);
|
|
--accent-blue: #58a6ff;
|
|
--accent-yellow: #f0883e;
|
|
--accent-red: #f85149;
|
|
--accent-purple: #a371f7;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg-dark);
|
|
color: var(--text-primary);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Demo Banner */
|
|
.demo-banner {
|
|
background: #1f242c;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.demo-banner a {
|
|
color: var(--accent-green);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Top Navigation */
|
|
.top-nav {
|
|
background: var(--bg-panel);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 48px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.netdata-logo {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--accent-green);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.nav-tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-tab {
|
|
padding: 8px 16px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-tab:hover {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-tab.active {
|
|
background: var(--accent-green-dim);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.nav-tab .badge {
|
|
background: var(--accent-red);
|
|
color: white;
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.nav-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 12px;
|
|
background: var(--accent-green-dim);
|
|
color: var(--accent-green);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.status-indicator::before {
|
|
content: '';
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--accent-green);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.sign-in-btn {
|
|
background: var(--accent-green);
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Main Layout */
|
|
.main-container {
|
|
display: flex;
|
|
height: calc(100vh - 96px);
|
|
}
|
|
|
|
/* Left Sidebar */
|
|
.sidebar-left {
|
|
width: 220px;
|
|
background: var(--bg-panel);
|
|
border-right: 1px solid var(--border-color);
|
|
overflow-y: auto;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.sidebar-section {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 8px 16px;
|
|
color: var(--accent-green);
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sidebar-item {
|
|
padding: 6px 16px 6px 32px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.sidebar-item:hover {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sidebar-item.active {
|
|
color: var(--accent-green);
|
|
background: var(--accent-green-dim);
|
|
}
|
|
|
|
/* Center Content */
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Gauges Row */
|
|
.gauges-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.gauge-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.gauge-title {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.gauge-circle {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.gauge-svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.gauge-bg {
|
|
fill: none;
|
|
stroke: var(--bg-card);
|
|
stroke-width: 8;
|
|
}
|
|
|
|
.gauge-fill {
|
|
fill: none;
|
|
stroke-width: 8;
|
|
stroke-linecap: round;
|
|
transition: stroke-dashoffset 1s ease;
|
|
}
|
|
|
|
.gauge-value {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: white;
|
|
}
|
|
|
|
.gauge-unit {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
display: block;
|
|
margin-top: -2px;
|
|
}
|
|
|
|
.gauge-labels {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
margin-top: 4px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
/* Middle Section */
|
|
.middle-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 280px;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.chart-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.chart-header {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.bar-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.bar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.bar-label {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
width: 80px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.bar-label.tag {
|
|
background: var(--accent-purple);
|
|
color: white;
|
|
padding: 2px 8px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
width: auto;
|
|
}
|
|
|
|
.bar-track {
|
|
flex: 1;
|
|
height: 8px;
|
|
background: var(--bg-card);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 1s ease;
|
|
}
|
|
|
|
.bar-value {
|
|
font-size: 11px;
|
|
color: var(--text-primary);
|
|
width: 50px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* System Load Card */
|
|
.load-card {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.load-header {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sparkline {
|
|
height: 60px;
|
|
margin-bottom: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.sparkline svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.load-value {
|
|
font-size: 36px;
|
|
font-weight: 300;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.load-label {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
/* Bottom Chart Section */
|
|
.bottom-section {
|
|
background: var(--bg-panel);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 12px;
|
|
color: var(--accent-green);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.chart-toolbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toolbar-btn {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.main-chart {
|
|
height: 200px;
|
|
position: relative;
|
|
background: var(--bg-dark);
|
|
border-radius: 4px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.chart-grid {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 40px;
|
|
right: 16px;
|
|
bottom: 40px;
|
|
border-left: 1px solid var(--border-color);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.grid-lines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.grid-line {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: 1px dashed var(--border-color);
|
|
}
|
|
|
|
.chart-line {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
left: 40px;
|
|
right: 16px;
|
|
height: 144px;
|
|
}
|
|
|
|
.chart-line svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.chart-legend {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.legend-color {
|
|
width: 12px;
|
|
height: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* Right Sidebar */
|
|
.sidebar-right {
|
|
width: 280px;
|
|
background: var(--bg-panel);
|
|
border-left: 1px solid var(--border-color);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.right-panel-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.right-panel-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.search-box {
|
|
margin: 12px 16px;
|
|
padding: 8px 12px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
width: calc(100% - 32px);
|
|
}
|
|
|
|
.search-box::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.metrics-tree {
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.tree-item {
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tree-item:hover {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tree-item.active {
|
|
color: var(--accent-green);
|
|
background: var(--accent-green-dim);
|
|
}
|
|
|
|
.tree-icon {
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.tree-arrow {
|
|
font-size: 10px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.tree-section {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.tree-section-header {
|
|
padding: 8px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.tree-children {
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.tree-child {
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tree-child:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Footer */
|
|
.footer-bar {
|
|
background: var(--bg-panel);
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Scrollbar Styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #484f58;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo-banner">
|
|
🔒 This is a dummy dashboard for showcase purposes only. <a href="/">← Back to Dashboard</a>
|
|
</div>
|
|
|
|
<!-- Top Navigation -->
|
|
<nav class="top-nav">
|
|
<div class="nav-brand">
|
|
<div class="netdata-logo">N</div>
|
|
<span style="font-weight: 600;">local</span>
|
|
<span style="color: var(--text-secondary);">▼</span>
|
|
</div>
|
|
|
|
<div class="nav-tabs">
|
|
<div class="nav-tab"><span>🖥️</span> Nodes</div>
|
|
<div class="nav-tab active"><span>📊</span> Metrics</div>
|
|
<div class="nav-tab"><span>🔝</span> Top</div>
|
|
<div class="nav-tab"><span>📋</span> Logs</div>
|
|
<div class="nav-tab"><span>📈</span> Dashboard</div>
|
|
<div class="nav-tab"><span>🔔</span> Alerts <span class="badge">0</span></div>
|
|
<div class="nav-tab"><span>📅</span> Events</div>
|
|
<div class="nav-tab"><span>🔍</span> Anomalies</div>
|
|
<div class="nav-tab"><span>✨</span> AI Insights</div>
|
|
</div>
|
|
|
|
<div class="nav-right">
|
|
<div class="status-indicator">▶ Playing</div>
|
|
<span style="color: var(--text-secondary);">2/26 • 12:06 → 12:21 • last 15min</span>
|
|
<button class="sign-in-btn">Sign in</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="main-container">
|
|
<!-- Left Sidebar -->
|
|
<aside class="sidebar-left">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-header">
|
|
<span>🖥️</span> System
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Center Content -->
|
|
<main class="content">
|
|
<!-- Gauges Row -->
|
|
<div class="gauges-row">
|
|
<div class="gauge-card">
|
|
<div class="gauge-title">Total Disk Reads</div>
|
|
<div class="gauge-circle">
|
|
<svg class="gauge-svg" width="100" height="100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="42"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="42"
|
|
stroke="var(--accent-blue)"
|
|
stroke-dasharray="264"
|
|
stroke-dashoffset="60"/>
|
|
</svg>
|
|
<div class="gauge-value">
|
|
0.7439
|
|
<span class="gauge-unit">MiB/s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gauge-card">
|
|
<div class="gauge-title">Total Disk Writes</div>
|
|
<div class="gauge-circle">
|
|
<svg class="gauge-svg" width="100" height="100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="42"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="42"
|
|
stroke="var(--accent-red)"
|
|
stroke-dasharray="264"
|
|
stroke-dashoffset="250"/>
|
|
</svg>
|
|
<div class="gauge-value">
|
|
0.0039
|
|
<span class="gauge-unit">MiB/s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gauge-card">
|
|
<div class="gauge-title">Avg CPU per Node</div>
|
|
<div class="gauge-circle">
|
|
<svg class="gauge-svg" width="100" height="100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="42"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="42"
|
|
stroke="var(--accent-blue)"
|
|
stroke-dasharray="264"
|
|
stroke-dashoffset="240"/>
|
|
</svg>
|
|
<div class="gauge-value">
|
|
7.329
|
|
<span class="gauge-unit">%</span>
|
|
</div>
|
|
</div>
|
|
<div class="gauge-labels">
|
|
<span>0</span>
|
|
<span>100</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gauge-card">
|
|
<div class="gauge-title">Avg Used RAM per Node</div>
|
|
<div class="gauge-circle">
|
|
<svg class="gauge-svg" width="100" height="100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="42"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="42"
|
|
stroke="var(--accent-yellow)"
|
|
stroke-dasharray="264"
|
|
stroke-dashoffset="110"/>
|
|
</svg>
|
|
<div class="gauge-value">
|
|
59
|
|
<span class="gauge-unit">%</span>
|
|
</div>
|
|
</div>
|
|
<div class="gauge-labels">
|
|
<span>0</span>
|
|
<span>100</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gauge-card">
|
|
<div class="gauge-title">Total Network Inbound</div>
|
|
<div class="gauge-circle">
|
|
<svg class="gauge-svg" width="100" height="100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="42"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="42"
|
|
stroke="var(--accent-blue)"
|
|
stroke-dasharray="264"
|
|
stroke-dashoffset="220"/>
|
|
</svg>
|
|
<div class="gauge-value">
|
|
0.189
|
|
<span class="gauge-unit">Mbit/s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="gauge-card">
|
|
<div class="gauge-title">Total Network Outbound</div>
|
|
<div class="gauge-circle">
|
|
<svg class="gauge-svg" width="100" height="100">
|
|
<circle class="gauge-bg" cx="50" cy="50" r="42"/>
|
|
<circle class="gauge-fill" cx="50" cy="50" r="42"
|
|
stroke="var(--accent-red)"
|
|
stroke-dasharray="264"
|
|
stroke-dashoffset="180"/>
|
|
</svg>
|
|
<div class="gauge-value">
|
|
0.3203
|
|
<span class="gauge-unit">Mbit/s</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Middle Section -->
|
|
<div class="middle-section">
|
|
<div class="chart-card">
|
|
<div class="chart-header">Top Nodes by CPU</div>
|
|
<div class="bar-list">
|
|
<div class="bar-item">
|
|
<span class="bar-label tag">RPI5-Server-01</span>
|
|
<div class="bar-track">
|
|
<div class="bar-fill" style="width: 7.3%; background: var(--accent-purple);"></div>
|
|
</div>
|
|
<span class="bar-value">7.329%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-card">
|
|
<div class="chart-header">Top Nodes by Used RAM</div>
|
|
<div class="bar-list">
|
|
<div class="bar-item">
|
|
<span class="bar-label tag">RPI5-Server-01</span>
|
|
<div class="bar-track">
|
|
<div class="bar-fill" style="width: 58.7%; background: var(--accent-purple);"></div>
|
|
</div>
|
|
<span class="bar-value">58.707%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="load-card">
|
|
<div class="load-header">Avg System Load (1 min)</div>
|
|
<div class="sparkline">
|
|
<svg viewBox="0 0 200 60" preserveAspectRatio="none">
|
|
<defs>
|
|
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#00ab44;stop-opacity:0.3" />
|
|
<stop offset="100%" style="stop-color:#00ab44;stop-opacity:0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M0,45 L10,42 L20,48 L30,35 L40,38 L50,25 L60,30 L70,28 L80,15 L90,20 L100,18 L110,22 L120,30 L130,28 L140,35 L150,32 L160,40 L170,38 L180,42 L190,45 L200,40"
|
|
fill="none" stroke="#00ab44" stroke-width="1.5"/>
|
|
<path d="M0,45 L10,42 L20,48 L30,35 L40,38 L50,25 L60,30 L70,28 L80,15 L90,20 L100,18 L110,22 L120,30 L130,28 L140,35 L150,32 L160,40 L170,38 L180,42 L190,45 L200,40 L200,60 L0,60 Z"
|
|
fill="url(#lineGrad)"/>
|
|
</svg>
|
|
</div>
|
|
<div class="load-value">0.1834</div>
|
|
<div class="load-label">threads</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom Section - CPU Chart -->
|
|
<div class="bottom-section">
|
|
<div class="section-header">
|
|
<div>
|
|
<div class="section-title">- Compute</div>
|
|
<div style="margin-left: 12px; color: var(--accent-green); font-size: 12px;">-- CPU</div>
|
|
</div>
|
|
<div class="chart-toolbar">
|
|
<button class="toolbar-btn">👁 Group by dimension</button>
|
|
<button class="toolbar-btn">the AVG</button>
|
|
<button class="toolbar-btn">1 node</button>
|
|
<button class="toolbar-btn">1 system</button>
|
|
<button class="toolbar-btn">9 of 10 dimensions</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-subtitle" style="margin-bottom: 12px;">
|
|
Total CPU utilization • system.cpu • [percent]
|
|
</div>
|
|
|
|
<div class="main-chart">
|
|
<div class="chart-grid">
|
|
<div class="grid-lines">
|
|
<div class="grid-line" style="top: 0%;"></div>
|
|
<div class="grid-line" style="top: 20%;"></div>
|
|
<div class="grid-line" style="top: 40%;"></div>
|
|
<div class="grid-line" style="top: 60%;"></div>
|
|
<div class="grid-line" style="top: 80%;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="position: absolute; left: 8px; top: 0; bottom: 40px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--text-secondary);">
|
|
<span>100</span>
|
|
<span>80</span>
|
|
<span>60</span>
|
|
<span>40</span>
|
|
<span>20</span>
|
|
<span>0</span>
|
|
</div>
|
|
<div class="chart-line">
|
|
<svg viewBox="0 0 1000 144" preserveAspectRatio="none">
|
|
<path d="M0,120 Q50,118 100,119 T200,118 T300,120 T400,117 T500,119 T600,118 T700,120 T800,117 T900,119 T1000,118"
|
|
fill="none" stroke="#f0883e" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div style="position: absolute; bottom: 8px; left: 40px; right: 16px; display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary);">
|
|
<span>12:07:00</span>
|
|
<span>12:08:00</span>
|
|
<span>12:09:00</span>
|
|
<span>12:10:00</span>
|
|
<span>12:11:00</span>
|
|
<span>12:12:00</span>
|
|
<span>12:13:00</span>
|
|
<span>12:14:00</span>
|
|
<span>12:15:00</span>
|
|
<span>12:16:00</span>
|
|
<span>12:17:00</span>
|
|
<span>12:18:00</span>
|
|
<span>12:19:00</span>
|
|
<span>12:20:00</span>
|
|
<span>12:21:00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-legend">
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #f0883e;"></div>
|
|
<span>softirq</span>
|
|
<span style="margin-left: auto;">0.2502 %</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #ffd700;"></div>
|
|
<span>user</span>
|
|
<span style="margin-left: auto;">4.0832 %</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #00ab44;"></div>
|
|
<span>system</span>
|
|
<span style="margin-left: auto;">2.3289 %</span>
|
|
</div>
|
|
<div class="legend-item">
|
|
<div class="legend-color" style="background: #a371f7;"></div>
|
|
<span>iowait</span>
|
|
<span style="margin-left: auto;">0.6667 %</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Right Sidebar -->
|
|
<aside class="sidebar-right">
|
|
<div class="right-panel-header">
|
|
<div class="right-panel-title">
|
|
<span>📊</span> Metrics
|
|
</div>
|
|
<span style="color: var(--text-secondary); cursor: pointer;">⋮</span>
|
|
</div>
|
|
|
|
<div style="padding: 12px 16px; border-bottom: 1px solid var(--border-color);">
|
|
<label style="display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer;">
|
|
<input type="checkbox" style="accent-color: var(--accent-green);">
|
|
Metric Correlations
|
|
</label>
|
|
</div>
|
|
|
|
<div style="padding: 8px 16px;">
|
|
<button style="width: 100%; padding: 8px; background: var(--accent-green); color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
|
|
<span>👤</span> User
|
|
<span style="margin-left: auto;">▼</span>
|
|
</button>
|
|
</div>
|
|
|
|
<input type="text" class="search-box" placeholder="Search charts">
|
|
|
|
<div style="padding: 8px 16px; font-size: 11px; color: var(--text-secondary);">
|
|
Showing 288 of total 288 charts
|
|
<span style="color: var(--accent-green); float: right; cursor: pointer;">Add more charts</span>
|
|
</div>
|
|
|
|
<div style="padding: 8px 16px;">
|
|
<label style="display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer;">
|
|
<input type="checkbox" style="accent-color: var(--accent-green);">
|
|
Anomaly Rate %
|
|
</label>
|
|
</div>
|
|
|
|
<div class="metrics-tree">
|
|
<div class="tree-section">
|
|
<div class="tree-item active">
|
|
<span class="tree-arrow">▶</span>
|
|
<span class="tree-icon">🖥️</span>
|
|
System
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tree-section">
|
|
<div class="tree-section-header">
|
|
<span>🖥️</span> Compute
|
|
</div>
|
|
<div class="tree-children">
|
|
<div class="tree-child">CPU</div>
|
|
<div class="tree-child">Memory</div>
|
|
<div class="tree-child">Swap</div>
|
|
<div class="tree-child">Disk</div>
|
|
<div class="tree-child">Tasks</div>
|
|
<div class="tree-child">FDs</div>
|
|
<div class="tree-child">Uptime</div>
|
|
<div class="tree-child">Users</div>
|
|
<div class="tree-child">Groups</div>
|
|
<div class="tree-child">IPC</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tree-section">
|
|
<div class="tree-section-header">
|
|
<span>⚙️</span> O/S Services
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tree-section">
|
|
<div class="tree-section-header">
|
|
<span>🐳</span> Containers & VMs
|
|
</div>
|
|
<div class="tree-children">
|
|
<div class="tree-child">CPU</div>
|
|
<div class="tree-child">Disk</div>
|
|
<div class="tree-child">Network</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="footer-bar">
|
|
Mon, Feb 02 2026 • 12:21:42
|
|
</div>
|
|
|
|
<script>
|
|
// Simulate live data updates
|
|
setInterval(() => {
|
|
// Randomize gauge values slightly
|
|
const gauges = document.querySelectorAll('.gauge-value');
|
|
gauges.forEach(gauge => {
|
|
const currentText = gauge.childNodes[0].textContent.trim();
|
|
const currentVal = parseFloat(currentText);
|
|
if (!isNaN(currentVal)) {
|
|
const variation = (Math.random() - 0.5) * 0.1;
|
|
const newVal = Math.max(0, currentVal + variation);
|
|
gauge.childNodes[0].textContent = newVal.toFixed(4);
|
|
}
|
|
});
|
|
}, 3000);
|
|
|
|
// Handle nav tab clicks
|
|
document.querySelectorAll('.nav-tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|