Meik/stack-stats-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Meik
2025-11-11 10:36:31 +01:00
commit 80eb037b56
25 changed files with 4509 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
public/index.html Normal file
View File

@@ -0,0 +1,62 @@
<!doctype html>
<html data-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Docker Stack Stats</title>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div class="container">
<header>
<h1 id="title">Docker Stack Stats</h1>
<div class="controls">
<label class="toggle">
<input type="checkbox" id="toggleGroup" checked />
<span class="slider"></span>
<span class="label" data-i18n="groupByStack">Group by stack</span>
</label>
<input type="text" id="search" placeholder="Search (any column)">
<label><input type="checkbox" id="autorefresh" checked /> <span data-i18n="autoRefresh">Auto-refresh</span></label>
<input type="number" id="interval" min="2" value="5" />s
<button id="refresh" data-i18n="refresh">Refresh</button>
<button id="theme">Light/Dark</button>
<select id="lang">
<option value="en">English</option>
<option value="de">Deutsch</option>
</select>
</div>
</header>
<div id="error" class="error hidden"></div>
<section id="sys" class="sys card"></section>
<!-- GROUPED HEADER -->
<section id="header-grouped">
<div class="row header-row grid-stacks">
<div class="col-name"><button class="sort" data-sort="group"><span data-i18n="stackProject">Stack / Project</span></button><br><input id="f-stack" class="filter" placeholder="filter"></div>
<div class="col-num"><button class="sort" data-sort="count"><span data-i18n="containers">Containers</span></button><br><input id="f-count" class="filter" placeholder="≥, ≤, = or text"></div>
<div class="col-num"><button class="sort" data-sort="cpuSum"><span data-i18n="cpuSum">CPU Sum</span></button><br><input id="f-cpu" class="filter" placeholder="≥, ≤, ="></div>
<div class="col-num"><button class="sort" data-sort="memSumMiB"><span data-i18n="memSum">Mem Sum</span></button><br><input id="f-mem" class="filter" placeholder="≥, ≤, = (MiB)"></div>
<div class="col-num"><button class="sort" data-sort="memPctSys"><span data-i18n="memPct">Mem %</span></button><br><input id="f-memPct" class="filter" placeholder="≥, ≤, ="></div>
</div>
</section>
<!-- FLAT HEADER -->
<section id="header-flat" class="hidden">
<div class="row header-row grid-flat">
<div class="col-name"><button class="sort" data-sort="name"><span data-i18n="container">Container</span></button><br><input id="f-container" class="filter" placeholder="filter"></div>
<div class="col-name"><button class="sort" data-sort="group"><span data-i18n="stackProject">Stack / Project</span></button><br><input id="f-stack-flat" class="filter" placeholder="filter"></div>
<div class="col-num"><button class="sort" data-sort="cpu"><span data-i18n="cpu">CPU %</span></button><br><input id="f-cpu-flat" class="filter" placeholder="≥, ≤, ="></div>
<div class="col-num"><button class="sort" data-sort="memMiB"><span data-i18n="memMiB">Mem (MiB)</span></button><br><input id="f-mem-flat" class="filter" placeholder="≥, ≤, = (MiB)"></div>
<div class="col-num"><button class="sort" data-sort="memPctSys"><span data-i18n="memPctSys">Mem %</span></button><br><input id="f-memPct-flat" class="filter" placeholder="≥, ≤, ="></div>
</div>
</section>
<section id="stacks" class="stacks"></section>
<section id="containers" class="containers hidden"></section>
</div>
<script src="/app.js"></script>
</body>
</html>