118 lines
4.3 KiB
HTML
118 lines
4.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="tr">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>MISSION CONTROL // DevOps Kokpit</title>
|
|||
|
|
<link rel="stylesheet" href="style.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Arka plan ışık kümeleri -->
|
|||
|
|
<div class="bg-orb bg-orb--a"></div>
|
|||
|
|
<div class="bg-orb bg-orb--b"></div>
|
|||
|
|
<div class="scanlines"></div>
|
|||
|
|
|
|||
|
|
<!-- ÜST BAR -->
|
|||
|
|
<header class="topbar glass">
|
|||
|
|
<div class="brand">
|
|||
|
|
<span class="brand-bolt"></span>
|
|||
|
|
<div>
|
|||
|
|
<h1>MISSION CONTROL</h1>
|
|||
|
|
<p class="tagline">siber sunucu · devops izleme kokpiti</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="topstats">
|
|||
|
|
<div class="stat">
|
|||
|
|
<span class="dot dot--on"></span>
|
|||
|
|
<div><b id="serverStatus">LINKING…</b><small>uplink</small></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat"><div><b id="runCount">6</b><small>running procs</small></div></div>
|
|||
|
|
<div class="stat"><div><b id="uptime">0:00</b><small>uptime</small></div></div>
|
|||
|
|
<div class="stat"><div><b id="alarmCount">0</b><small>alerts</small></div></div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- METRİK GAUGE'LERİ -->
|
|||
|
|
<section class="row row--gauges">
|
|||
|
|
<div class="glass panel gauge-panel">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--cyan"></span>CPU Core</h2>
|
|||
|
|
<canvas id="gaugeCpu" width="220" height="220"></canvas>
|
|||
|
|
<div class="gauge-label"><b id="cpuPct">0%</b><span>consolidated load</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="glass panel gauge-panel">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--green"></span>Memory Bank</h2>
|
|||
|
|
<canvas id="gaugeMem" width="220" height="220"></canvas>
|
|||
|
|
<div class="gauge-label"><b id="memPct">0%</b><span><span id="memText">0 MB</span> / 8192 MB</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="glass panel gauge-panel">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--amber"></span>Network Matrix</h2>
|
|||
|
|
<canvas id="gaugeNet" width="220" height="220"></canvas>
|
|||
|
|
<div class="gauge-label">
|
|||
|
|
<b id="netVal">0.0</b><span>▼</span>
|
|||
|
|
<span class="net-sub">in <b id="netIn">0.0</b> / out <b id="netOut">0.0</b> Mbps</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- CPU GRAFİK + OLAYLAR -->
|
|||
|
|
<section class="row row--primary">
|
|||
|
|
<div class="glass panel chart-panel">
|
|||
|
|
<div class="panel-head">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--cyan"></span>CPU Load Trace · last 30s</h2>
|
|||
|
|
<div class="legend">
|
|||
|
|
<span class="lg lg--cyan"></span>cpu %
|
|||
|
|
<span class="lg lg--amber"></span>threshold
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<canvas id="cpuChart" width="980" height="240"></canvas>
|
|||
|
|
<div class="chart-axis"><span> 0:30</span><span>0:20</span><span>0:10</span><span>now</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="glass panel disk-panel">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--red"></span>Storage Array</h2>
|
|||
|
|
<div class="disk-gauge-wrap">
|
|||
|
|
<div class="disk-score" id="diskScore">0</div>
|
|||
|
|
<div class="disk-unit">% used</div>
|
|||
|
|
</div>
|
|||
|
|
<canvas id="diskGauge" width="200" height="200"></canvas>
|
|||
|
|
<p class="disk-caption"><b id="diskText">0 MB</b> of 1024 GB partition /dev/sda2</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- PROSES TABLOSU -->
|
|||
|
|
<section class="glass panel table-panel">
|
|||
|
|
<div class="panel-head">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--green"></span>Active Processes</h2>
|
|||
|
|
<span class="badge" id="procBadge">6 online</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-scroll">
|
|||
|
|
<table id="procTable">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>PID</th>
|
|||
|
|
<th>SERVICE</th>
|
|||
|
|
<th>CPU %</th>
|
|||
|
|
<th>MEMORY</th>
|
|||
|
|
<th>STATUS</th>
|
|||
|
|
<th class="th-action">ACTION</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody id="procBody"></tbody>
|
|||
|
|
</table>
|
|||
|
|
<div id="procEmpty" class="empty hidden">no running processes — grid is dark</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- OLAY KONSOLU -->
|
|||
|
|
<section class="glass panel log-panel">
|
|||
|
|
<div class="panel-head">
|
|||
|
|
<h2 class="panel-title"><span class="accent accent--amber"></span>Event Stream</h2>
|
|||
|
|
<span class="badge live-badge"><span class="dot-pulse"></span>LIVE</span>
|
|||
|
|
</div>
|
|||
|
|
<div id="logConsole" class="console" aria-live="polite"></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<script src="app.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|